diff --git a/api/index.html b/api/index.html index bfcd91567..93498ff00 100644 --- a/api/index.html +++ b/api/index.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

GoJS API

GoJS® Diagramming Components
version 3.0.2
by Northwoods Software®

Index

Diagram Classes

Adornment + });

GoJS API

GoJS® Diagramming Components
version 3.0.3
by Northwoods Software®

Index

Diagram Classes

Adornment Animation AnimationManager AnimationTrigger diff --git a/api/symbols/ActionTool.html b/api/symbols/ActionTool.html index 25012caf0..f54c616cc 100644 --- a/api/symbols/ActionTool.html +++ b/api/symbols/ActionTool.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

Class ActionTool

GoJS® Diagramming Components
version 3.0.2
by Northwoods Software®

Hierarchy

The ActionTool is responsible for handling and dispatching mouse events on GraphObjects + });

Class ActionTool

GoJS® Diagramming Components
version 3.0.3
by Northwoods Software®

Hierarchy

The ActionTool is responsible for handling and dispatching mouse events on GraphObjects that have GraphObject.isActionable set to true. This is how one implements "controls", such as buttons or sliders or knobs, as GraphObjects that can be inside Parts without interfering with the standard tool behaviors.

diff --git a/api/symbols/Adornment.html b/api/symbols/Adornment.html index d6bdf236e..f5d600841 100644 --- a/api/symbols/Adornment.html +++ b/api/symbols/Adornment.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

Class Adornment

GoJS® Diagramming Components
version 3.0.2
by Northwoods Software®

Hierarchy

An Adornment is a special kind of Part that is associated with another Part, + });

Class Adornment

GoJS® Diagramming Components
version 3.0.3
by Northwoods Software®

Hierarchy

An Adornment is a special kind of Part that is associated with another Part, the Adornment.adornedPart.

Adornments are normally associated with a particular GraphObject in the adorned Part -- that is the value of adornedObject. diff --git a/api/symbols/Animation.html b/api/symbols/Animation.html index 208c9353f..6d9a2fba8 100644 --- a/api/symbols/Animation.html +++ b/api/symbols/Animation.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

Class Animation

GoJS® Diagramming Components
version 3.0.2
by Northwoods Software®

Animations are used to animate GraphObject and Diagram properties.

+ });

Class Animation

GoJS® Diagramming Components
version 3.0.3
by Northwoods Software®

Animations are used to animate GraphObject and Diagram properties.

This class is useful for creating manual animations. If you wish to animate particular properties on a GraphObject every time their value changes, you may want to use AnimationTriggers instead, which automatically create and start Animations.

diff --git a/api/symbols/AnimationManager.html b/api/symbols/AnimationManager.html index 80832346c..fb67ffce3 100644 --- a/api/symbols/AnimationManager.html +++ b/api/symbols/AnimationManager.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

Class AnimationManager

GoJS® Diagramming Components
version 3.0.2
by Northwoods Software®

AnimationManager handles animations in a Diagram. Each Diagram has one, Diagram.animationManager. + });

Class AnimationManager

GoJS® Diagramming Components
version 3.0.3
by Northwoods Software®

AnimationManager handles animations in a Diagram. Each Diagram has one, Diagram.animationManager. Setting the Model, performing a Layout, Group expansion and Tree expansion automatically start animations through the defaultAnimation. Animations can be manually started by creating Animations, which are associated with an AnimationManager.

diff --git a/api/symbols/AnimationStyle.html b/api/symbols/AnimationStyle.html index 2e48c20df..5342ac206 100644 --- a/api/symbols/AnimationStyle.html +++ b/api/symbols/AnimationStyle.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

Enumeration AnimationStyle

GoJS® Diagramming Components
version 3.0.2
by Northwoods Software®

This enumeration specifies possible values for AnimationManager.initialAnimationStyle.

+ });

Enumeration AnimationStyle

GoJS® Diagramming Components
version 3.0.3
by Northwoods Software®

This enumeration specifies possible values for AnimationManager.initialAnimationStyle.

To customize the initial animation, set AnimationManager.initialAnimationStyle to None and define an "InitialAnimationStarting" DiagramEvent listener with Diagram.addDiagramListener.

See AnimationManager.initialAnimationStyle for details and examples.

diff --git a/api/symbols/AnimationTrigger.html b/api/symbols/AnimationTrigger.html index 6d53a5ea2..d70432d98 100644 --- a/api/symbols/AnimationTrigger.html +++ b/api/symbols/AnimationTrigger.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

Class AnimationTrigger

GoJS® Diagramming Components
version 3.0.2
by Northwoods Software®

An AnimationTrigger describes how to automatically animate a property on a GraphObject + });

Class AnimationTrigger

GoJS® Diagramming Components
version 3.0.3
by Northwoods Software®

An AnimationTrigger describes how to automatically animate a property on a GraphObject when it changes value. The target property name is a string, and all name matching is case-sensitive.

Triggers will be shared by all copies of the template's GraphObjects. diff --git a/api/symbols/AriaCommandHandler.html b/api/symbols/AriaCommandHandler.html index 249790731..b872f016b 100644 --- a/api/symbols/AriaCommandHandler.html +++ b/api/symbols/AriaCommandHandler.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

Class AriaCommandHandler

GoJS® Diagramming Components
version 3.0.2
by Northwoods Software®

This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.

Hierarchy

This custom CommandHandler is an example of how screen reader accessibility can be added to diagrams with an aria-live DIV.

+ });

Class AriaCommandHandler

GoJS® Diagramming Components
version 3.0.3
by Northwoods Software®

This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.

Hierarchy

This custom CommandHandler is an example of how screen reader accessibility can be added to diagrams with an aria-live DIV.

This CommandHandler adds more key commands for a user:

  • Arrow keys: Change selection to a new node, if possible, based on direction. This is added to an internal navigation history.
    • diff --git a/api/symbols/ArrangingLayout.html b/api/symbols/ArrangingLayout.html index 676aedea1..1ae723bd5 100644 --- a/api/symbols/ArrangingLayout.html +++ b/api/symbols/ArrangingLayout.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

    Class ArrangingLayout

    GoJS® Diagramming Components
    version 3.0.2
    by Northwoods Software®

    This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.

    Hierarchy

    A custom Layout that provides one way to have a layout of layouts. + });

    Class ArrangingLayout

    GoJS® Diagramming Components
    version 3.0.3
    by Northwoods Software®

    This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.

    Hierarchy

    A custom Layout that provides one way to have a layout of layouts. It partitions nodes and links into separate subnetworks, applies a primary layout to each subnetwork, and then arranges those results by an arranging layout. Any disconnected nodes are laid out later by a diff --git a/api/symbols/AutoScale.html b/api/symbols/AutoScale.html index 9bca0cfab..d96b433fc 100644 --- a/api/symbols/AutoScale.html +++ b/api/symbols/AutoScale.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

    Enumeration AutoScale

    GoJS® Diagramming Components
    version 3.0.2
    by Northwoods Software®

    This enumeration specifies how the Diagram should attempt to scale its Diagram.documentBounds into the view. + });

    Enumeration AutoScale

    GoJS® Diagramming Components
    version 3.0.3
    by Northwoods Software®

    This enumeration specifies how the Diagram should attempt to scale its Diagram.documentBounds into the view. Used for Diagram.autoScale.

    since

    3.0

    Index

    Enumeration Members

    None diff --git a/api/symbols/AvoidsLinksRouter.html b/api/symbols/AvoidsLinksRouter.html index c61cd4103..2365cd2ca 100644 --- a/api/symbols/AvoidsLinksRouter.html +++ b/api/symbols/AvoidsLinksRouter.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

    Class AvoidsLinksRouter

    GoJS® Diagramming Components
    version 3.0.2
    by Northwoods Software®

    This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.

    Hierarchy

    A custom Router that will cause overlapping segments of Orthogonal or AvoidsNodes links to be routed in parallel, + });

    Class AvoidsLinksRouter

    GoJS® Diagramming Components
    version 3.0.3
    by Northwoods Software®

    This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.

    Hierarchy

    A custom Router that will cause overlapping segments of Orthogonal or AvoidsNodes links to be routed in parallel, while minimizing resulting crossings between links.

    The maximum distance that resulting sets of links will be spread apart is given by AvoidsLinksRouter.linkSpacing.

    By default the router will reduce the space between parallel segments to prevent them from overlapping nearby Nodes, diff --git a/api/symbols/BackConversion.html b/api/symbols/BackConversion.html index 1fa4bc7f6..7308cf949 100644 --- a/api/symbols/BackConversion.html +++ b/api/symbols/BackConversion.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

    Type alias BackConversion

    GoJS® Diagramming Components
    version 3.0.2
    by Northwoods Software®

    For bindings: The optional conversion function to convert property values back to data values. + });

    Type alias BackConversion

    GoJS® Diagramming Components
    version 3.0.3
    by Northwoods Software®

    For bindings: The optional conversion function to convert property values back to data values. Specifying this function modifies a binding to set its Binding.mode to be BindingMode.TwoWay. If you want a two-way binding without a back-conversion function, specify null for a BackConversion. If you do not want a two-way binding, omit any BackConversion.

    diff --git a/api/symbols/BalloonLink.html b/api/symbols/BalloonLink.html index 6f7b61964..021d03337 100644 --- a/api/symbols/BalloonLink.html +++ b/api/symbols/BalloonLink.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

    Class BalloonLink

    GoJS® Diagramming Components
    version 3.0.2
    by Northwoods Software®

    This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.

    Hierarchy

    This custom go.Link class customizes its go.Shape to surround the comment node (the from node). + });

    Class BalloonLink

    GoJS® Diagramming Components
    version 3.0.3
    by Northwoods Software®

    This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.

    Hierarchy

    This custom go.Link class customizes its go.Shape to surround the comment node (the from node). If the Shape is filled, it will obscure the comment itself unless the Link is behind the comment node. Thus the default layer for BalloonLinks is "Background".

    The "corner" property controls the radius of the curves at the corners of the rectangular area surrounding the comment node, diff --git a/api/symbols/Binding.html b/api/symbols/Binding.html index c90b8e23a..0680aac62 100644 --- a/api/symbols/Binding.html +++ b/api/symbols/Binding.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

    Class Binding

    GoJS® Diagramming Components
    version 3.0.2
    by Northwoods Software®

    Hierarchy

    A Binding describes how to automatically set a property on a GraphObject + });

    Class Binding

    GoJS® Diagramming Components
    version 3.0.3
    by Northwoods Software®

    Hierarchy

    A Binding describes how to automatically set a property on a GraphObject to a value of a property of data in the model. The target property name and the data source property name are strings. All name matching is case-sensitive.

    diff --git a/api/symbols/BindingMode.html b/api/symbols/BindingMode.html index a1e98865e..4f609583f 100644 --- a/api/symbols/BindingMode.html +++ b/api/symbols/BindingMode.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

    Enumeration BindingMode

    GoJS® Diagramming Components
    version 3.0.2
    by Northwoods Software®

    This enumeration specifies in which direction bindings will be evaluated. + });

    Enumeration BindingMode

    GoJS® Diagramming Components
    version 3.0.3
    by Northwoods Software®

    This enumeration specifies in which direction bindings will be evaluated. Used for Binding.mode.

    since

    3.0

    Index

    Enumeration Members

    OneWay diff --git a/api/symbols/Brush.html b/api/symbols/Brush.html index 5c3b1b4a7..5d7742d97 100644 --- a/api/symbols/Brush.html +++ b/api/symbols/Brush.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

    Class Brush

    GoJS® Diagramming Components
    version 3.0.2
    by Northwoods Software®

    A Brush holds color information and describes how to draw the inside + });

    Class Brush

    GoJS® Diagramming Components
    version 3.0.3
    by Northwoods Software®

    A Brush holds color information and describes how to draw the inside of a Shape or the stroke of a shape or a TextBlock or the background of any GraphObject.

    A Brush must not be modified once it has been assigned to a GraphObject, diff --git a/api/symbols/BrushLike.html b/api/symbols/BrushLike.html index 491b76a9e..fa434d0f3 100644 --- a/api/symbols/BrushLike.html +++ b/api/symbols/BrushLike.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

    Type alias BrushLike

    GoJS® Diagramming Components
    version 3.0.2
    by Northwoods Software®

    The BrushLike type is the same as Brush | string | null. + });

    Type alias BrushLike

    GoJS® Diagramming Components
    version 3.0.3
    by Northwoods Software®

    The BrushLike type is the same as Brush | string | null. A string in place of a Brush object is treated as a Solid Brush of that color.

    Theme

    Copyright © 1998-2024 by Northwoods Software Corporation.

    Enumeration BrushType

    GoJS® Diagramming Components
    version 3.0.2
    by Northwoods Software®

    This enumeration specifies possible values for Brush.type.

    + });

    Enumeration BrushType

    GoJS® Diagramming Components
    version 3.0.3
    by Northwoods Software®

    This enumeration specifies possible values for Brush.type.

    since

    3.0

    Index

    Enumeration Members

    Linear Pattern diff --git a/api/symbols/ChangeType.html b/api/symbols/ChangeType.html index 8175d5a89..3fa368ede 100644 --- a/api/symbols/ChangeType.html +++ b/api/symbols/ChangeType.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

    Enumeration ChangeType

    GoJS® Diagramming Components
    version 3.0.2
    by Northwoods Software®

    This enumeration specifies possible values for ChangedEvent.change.

    + });

    Enumeration ChangeType

    GoJS® Diagramming Components
    version 3.0.3
    by Northwoods Software®

    This enumeration specifies possible values for ChangedEvent.change.

    since

    3.0

    Index

    Enumeration Members

    Insert Property diff --git a/api/symbols/ChangedEvent.html b/api/symbols/ChangedEvent.html index eb47aa4d1..388ff5c71 100644 --- a/api/symbols/ChangedEvent.html +++ b/api/symbols/ChangedEvent.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

    Class ChangedEvent

    GoJS® Diagramming Components
    version 3.0.2
    by Northwoods Software®

    A ChangedEvent represents a change to an object, typically a GraphObject, + });

    Class ChangedEvent

    GoJS® Diagramming Components
    version 3.0.3
    by Northwoods Software®

    A ChangedEvent represents a change to an object, typically a GraphObject, but also for model data, a Model, or a Diagram. The most common case is for remembering the name of a property and the before-and-after values for that property.

    diff --git a/api/symbols/ChangedEventHandler.html b/api/symbols/ChangedEventHandler.html index e2846bf6d..ab341ed96 100644 --- a/api/symbols/ChangedEventHandler.html +++ b/api/symbols/ChangedEventHandler.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

    Type alias ChangedEventHandler

    GoJS® Diagramming Components
    version 3.0.2
    by Northwoods Software®

    Type declaration

      • (e: ChangedEvent): void

      • The signature for a function acting as a handler for ChangedEvents.

        + });

        Type alias ChangedEventHandler

        GoJS® Diagramming Components
        version 3.0.3
        by Northwoods Software®

        Type declaration

        Theme

        Copyright © 1998-2024 by Northwoods Software Corporation.

        Enumeration CircularArrangement

        GoJS® Diagramming Components
        version 3.0.2
        by Northwoods Software®

        This enumeration specifies how nodes should be spaced in the ring. + });

        Enumeration CircularArrangement

        GoJS® Diagramming Components
        version 3.0.3
        by Northwoods Software®

        This enumeration specifies how nodes should be spaced in the ring. Used for CircularLayout.arrangement.

        since

        3.0

        Index

        Enumeration Members

        ConstantAngle diff --git a/api/symbols/CircularDirection.html b/api/symbols/CircularDirection.html index 73565b118..d36d2adac 100644 --- a/api/symbols/CircularDirection.html +++ b/api/symbols/CircularDirection.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

        Enumeration CircularDirection

        GoJS® Diagramming Components
        version 3.0.2
        by Northwoods Software®

        This enumeration specifies the direction in which the nodes fill the ring. + });

        Enumeration CircularDirection

        GoJS® Diagramming Components
        version 3.0.3
        by Northwoods Software®

        This enumeration specifies the direction in which the nodes fill the ring. Used for CircularLayout.direction.

        since

        3.0

        Index

        Enumeration Members

        BidirectionalLeft diff --git a/api/symbols/CircularEdge.html b/api/symbols/CircularEdge.html index dc0a273c6..92e4493ab 100644 --- a/api/symbols/CircularEdge.html +++ b/api/symbols/CircularEdge.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

        Class CircularEdgeUnindexed

        GoJS® Diagramming Components
        version 3.0.2
        by Northwoods Software®

        Hierarchy

        This holds CircularLayout-specific information about Links.

        + });

        Class CircularEdgeUnindexed

        GoJS® Diagramming Components
        version 3.0.3
        by Northwoods Software®

        Hierarchy

        This holds CircularLayout-specific information about Links.

        This class inherits from LayoutEdge.

        Index

        Constructors

        constructor

        Accessors

        LayoutEdge.data diff --git a/api/symbols/CircularLayout.html b/api/symbols/CircularLayout.html index eff8b73e9..8aefe18af 100644 --- a/api/symbols/CircularLayout.html +++ b/api/symbols/CircularLayout.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

        Class CircularLayout

        GoJS® Diagramming Components
        version 3.0.2
        by Northwoods Software®

        Hierarchy

        This layout positions nodes in a circular arrangement. + });

        Class CircularLayout

        GoJS® Diagramming Components
        version 3.0.3
        by Northwoods Software®

        Hierarchy

        This layout positions nodes in a circular arrangement. There are several samples that use CircularLayout. The layout cannot guarantee that it provides optimal positioning of nodes when trying to minimize link crossings.

        diff --git a/api/symbols/CircularNetwork.html b/api/symbols/CircularNetwork.html index 987ddcb2d..8405f37fd 100644 --- a/api/symbols/CircularNetwork.html +++ b/api/symbols/CircularNetwork.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

        Class CircularNetworkUnindexed

        GoJS® Diagramming Components
        version 3.0.2
        by Northwoods Software®

        Hierarchy

        This class represents an abstract graph of CircularVertexes and CircularEdges + });

        Class CircularNetworkUnindexed

        GoJS® Diagramming Components
        version 3.0.3
        by Northwoods Software®

        Hierarchy

        This class represents an abstract graph of CircularVertexes and CircularEdges that can be constructed based on the Nodes and Links of a Diagram so that the CircularLayout can operate independently of the diagram until it is time to commit any node positioning or link routing.

        diff --git a/api/symbols/CircularNodeDiameterFormula.html b/api/symbols/CircularNodeDiameterFormula.html index cc8697d5b..c0aff65c6 100644 --- a/api/symbols/CircularNodeDiameterFormula.html +++ b/api/symbols/CircularNodeDiameterFormula.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

        Enumeration CircularNodeDiameterFormula

        GoJS® Diagramming Components
        version 3.0.2
        by Northwoods Software®

        This enumeration specifies a method for finding the size of a node. + });

        Enumeration CircularNodeDiameterFormula

        GoJS® Diagramming Components
        version 3.0.3
        by Northwoods Software®

        This enumeration specifies a method for finding the size of a node. Used for CircularLayout.nodeDiameterFormula.

        since

        3.0

        Index

        Enumeration Members

        Circular diff --git a/api/symbols/CircularSorting.html b/api/symbols/CircularSorting.html index 2da0d3c03..aa97e0f35 100644 --- a/api/symbols/CircularSorting.html +++ b/api/symbols/CircularSorting.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

        Enumeration CircularSorting

        GoJS® Diagramming Components
        version 3.0.2
        by Northwoods Software®

        This enumeration specifies how to sort the nodes. + });

        Enumeration CircularSorting

        GoJS® Diagramming Components
        version 3.0.3
        by Northwoods Software®

        This enumeration specifies how to sort the nodes. Used for CircularLayout.sorting.

        since

        3.0

        Index

        Enumeration Members

        Ascending diff --git a/api/symbols/CircularVertex.html b/api/symbols/CircularVertex.html index a120c217b..44394dee8 100644 --- a/api/symbols/CircularVertex.html +++ b/api/symbols/CircularVertex.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

        Class CircularVertexUnindexed

        GoJS® Diagramming Components
        version 3.0.2
        by Northwoods Software®

        Hierarchy

        This holds CircularLayout-specific information about Nodes.

        + });

        Class CircularVertexUnindexed

        GoJS® Diagramming Components
        version 3.0.3
        by Northwoods Software®

        Hierarchy

        This holds CircularLayout-specific information about Nodes.

        This class inherits from LayoutVertex.

        Index

        Constructors

        constructor

        Accessors

        actualAngle diff --git a/api/symbols/ClickCreatingTool.html b/api/symbols/ClickCreatingTool.html index 695416cd6..02c80a365 100644 --- a/api/symbols/ClickCreatingTool.html +++ b/api/symbols/ClickCreatingTool.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

        Class ClickCreatingTool

        GoJS® Diagramming Components
        version 3.0.2
        by Northwoods Software®

        Hierarchy

        • Tool
          • ClickCreatingTool

        The ClickCreatingTool lets the user create a node by clicking where they want the new node to be. + });

        Class ClickCreatingTool

        GoJS® Diagramming Components
        version 3.0.3
        by Northwoods Software®

        Hierarchy

        • Tool
          • ClickCreatingTool

        The ClickCreatingTool lets the user create a node by clicking where they want the new node to be. By default a double-click is required to start this tool; set isDoubleClick to false if you want a single-click to create a node.

        This tool is a standard mouse-up tool, the ToolManager.clickCreatingTool. diff --git a/api/symbols/ClickSelectingTool.html b/api/symbols/ClickSelectingTool.html index 07d7b6e45..1fa460420 100644 --- a/api/symbols/ClickSelectingTool.html +++ b/api/symbols/ClickSelectingTool.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

        Class ClickSelectingTool

        GoJS® Diagramming Components
        version 3.0.2
        by Northwoods Software®

        Hierarchy

        • Tool
          • ClickSelectingTool

        The ClickSelectingTool selects and deselects Parts when there is a click. + });

        Class ClickSelectingTool

        GoJS® Diagramming Components
        version 3.0.3
        by Northwoods Software®

        Hierarchy

        • Tool
          • ClickSelectingTool

        The ClickSelectingTool selects and deselects Parts when there is a click. It does this by calling Tool.standardMouseSelect. It is also responsible for handling and dispatching click events on GraphObjects by calling Tool.standardMouseClick.

        diff --git a/api/symbols/ColorSpace.html b/api/symbols/ColorSpace.html index 55f168480..791d941e3 100644 --- a/api/symbols/ColorSpace.html +++ b/api/symbols/ColorSpace.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

        Enumeration ColorSpace

        GoJS® Diagramming Components
        version 3.0.2
        by Northwoods Software®

        This enumeration specifies possible values used for lightening and darkening.

        + });

        Enumeration ColorSpace

        GoJS® Diagramming Components
        version 3.0.3
        by Northwoods Software®

        This enumeration specifies possible values used for lightening and darkening.

        see
        • Brush.lightenBy
        • Brush.darkenBy
          • diff --git a/api/symbols/ColumnResizingTool.html b/api/symbols/ColumnResizingTool.html index 1c2ec3456..f84dc37c1 100644 --- a/api/symbols/ColumnResizingTool.html +++ b/api/symbols/ColumnResizingTool.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

          Class ColumnResizingTool

          GoJS® Diagramming Components
          version 3.0.2
          by Northwoods Software®

          This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.

          Hierarchy

          • Tool
            • ColumnResizingTool

          The ColumnResizingTool class lets the user resize each column of a named Table Panel in a selected Part.

          + });

          Class ColumnResizingTool

          GoJS® Diagramming Components
          version 3.0.3
          by Northwoods Software®

          This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.

          Hierarchy

          • Tool
            • ColumnResizingTool

          The ColumnResizingTool class lets the user resize each column of a named Table Panel in a selected Part.

          If you want to experiment with this extension, try the Column Resizing sample.

          Index

          Constructors

          constructor

          Accessors

          adornedTable diff --git a/api/symbols/CommandHandler.html b/api/symbols/CommandHandler.html index 33519e32b..b54f50d2b 100644 --- a/api/symbols/CommandHandler.html +++ b/api/symbols/CommandHandler.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

          Class CommandHandler

          GoJS® Diagramming Components
          version 3.0.2
          by Northwoods Software®

          Hierarchy

          The Diagram.commandHandler implements various + });

          Class CommandHandler

          GoJS® Diagramming Components
          version 3.0.3
          by Northwoods Software®

          Hierarchy

          The Diagram.commandHandler implements various commands such as CommandHandler.deleteSelection or CommandHandler.redo. The CommandHandler includes keyboard event handling to interpret key presses as commands.

          diff --git a/api/symbols/ContextMenuTool.html b/api/symbols/ContextMenuTool.html index c8f9cadf9..843ce96c5 100644 --- a/api/symbols/ContextMenuTool.html +++ b/api/symbols/ContextMenuTool.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

          Class ContextMenuTool

          GoJS® Diagramming Components
          version 3.0.2
          by Northwoods Software®

          Hierarchy

          The ContextMenuTool is used to create and show a context menu. + });

          Class ContextMenuTool

          GoJS® Diagramming Components
          version 3.0.3
          by Northwoods Software®

          Hierarchy

          The ContextMenuTool is used to create and show a context menu. It automatically disables any browser context menu.

          Define context menus on individual GraphObjects by setting GraphObject.contextMenu. Define a context menu for the diagram background by setting Diagram.contextMenu.

          diff --git a/api/symbols/Curve.html b/api/symbols/Curve.html index 0c1f4975d..812fe8133 100644 --- a/api/symbols/Curve.html +++ b/api/symbols/Curve.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

          Enumeration Curve

          GoJS® Diagramming Components
          version 3.0.2
          by Northwoods Software®

          This enumeration specifies possible values for Link.curve.

          + });

          Enumeration Curve

          GoJS® Diagramming Components
          version 3.0.3
          by Northwoods Software®

          This enumeration specifies possible values for Link.curve.

          since

          3.0

          Index

          Enumeration Members

          Bezier JumpGap diff --git a/api/symbols/CurvedLinkReshapingTool.html b/api/symbols/CurvedLinkReshapingTool.html index 3ddcdc7be..a64fc5567 100644 --- a/api/symbols/CurvedLinkReshapingTool.html +++ b/api/symbols/CurvedLinkReshapingTool.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

          Class CurvedLinkReshapingTool

          GoJS® Diagramming Components
          version 3.0.2
          by Northwoods Software®

          This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.

          Hierarchy

          This CurvedLinkReshapingTool class allows for a go.Link's path to be modified by the user + });

          Class CurvedLinkReshapingTool

          GoJS® Diagramming Components
          version 3.0.3
          by Northwoods Software®

          This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.

          Hierarchy

          This CurvedLinkReshapingTool class allows for a go.Link's path to be modified by the user via the dragging of a single tool handle at the middle of the link. Dragging the handle changes the value of go.Link.curviness.

          If you want to experiment with this extension, try the Curved Link Reshaping sample.

          diff --git a/api/symbols/CycleMode.html b/api/symbols/CycleMode.html index 0cc66e24f..3cbe56d36 100644 --- a/api/symbols/CycleMode.html +++ b/api/symbols/CycleMode.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

          Enumeration CycleMode

          GoJS® Diagramming Components
          version 3.0.2
          by Northwoods Software®

          This enumeration specifies how the Diagram should handle cycles in graphs. + });

          Enumeration CycleMode

          GoJS® Diagramming Components
          version 3.0.3
          by Northwoods Software®

          This enumeration specifies how the Diagram should handle cycles in graphs. Used for Diagram.validCycle.

          since

          3.0

          Index

          Enumeration Members

          All diff --git a/api/symbols/Diagram.html b/api/symbols/Diagram.html index 65c880887..21d6975a8 100644 --- a/api/symbols/Diagram.html +++ b/api/symbols/Diagram.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

          Class Diagram

          GoJS® Diagramming Components
          version 3.0.2
          by Northwoods Software®

          Hierarchy

          A Diagram is associated with an HTML DIV element. Constructing a Diagram creates + });

          Class Diagram

          GoJS® Diagramming Components
          version 3.0.3
          by Northwoods Software®

          Hierarchy

          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.

          diff --git a/api/symbols/DiagramEvent.html b/api/symbols/DiagramEvent.html index 4342a133f..be3fb9ab0 100644 --- a/api/symbols/DiagramEvent.html +++ b/api/symbols/DiagramEvent.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

          Class DiagramEvent

          GoJS® Diagramming Components
          version 3.0.2
          by Northwoods Software®

          A DiagramEvent represents a more abstract event than an InputEvent. + });

          Class DiagramEvent

          GoJS® Diagramming Components
          version 3.0.3
          by Northwoods Software®

          A DiagramEvent represents a more abstract event than an InputEvent. They are raised on the Diagram class. One can receive such events by registering a DiagramEvent listener on a Diagram by calling Diagram.addDiagramListener. diff --git a/api/symbols/DiagramEventHandler.html b/api/symbols/DiagramEventHandler.html index 53f0abd8f..dfebe9550 100644 --- a/api/symbols/DiagramEventHandler.html +++ b/api/symbols/DiagramEventHandler.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

          Type alias DiagramEventHandler

          GoJS® Diagramming Components
          version 3.0.2
          by Northwoods Software®

          Type declaration

            • (e: DiagramEvent): void

            • The signature for a function acting as a handler for DiagramEvents.

              + });

              Type alias DiagramEventHandler

              GoJS® Diagramming Components
              version 3.0.3
              by Northwoods Software®

              Type declaration

              Theme

              Copyright © 1998-2024 by Northwoods Software Corporation.

              Type alias DiagramEventName

              GoJS® Diagramming Components
              version 3.0.2
              by Northwoods Software®

              A listing of all supported DiagramEvent names.

              + });

              Type alias DiagramEventName

              GoJS® Diagramming Components
              version 3.0.3
              by Northwoods Software®

              A listing of all supported DiagramEvent names.

              'InitialAnimationStarting' | 'AnimationStarting' | 'AnimationFinished' | 'BackgroundSingleClicked' | 'BackgroundDoubleClicked' | 'BackgroundContextClicked' | 'ChangingSelection' | 'ChangedSelection' | 'ClipboardChanged' | 'ClipboardPasted' | 'DocumentBoundsChanged' | 'ExternalObjectsDropped' | 'GainedFocus' | 'InitialLayoutCompleted' | 'LayoutCompleted' | 'LinkDrawn' | 'LinkRelinked' | 'LinkReshaped' | 'LostFocus' | 'Modified' | 'ObjectSingleClicked' | 'ObjectDoubleClicked' | 'ObjectContextClicked' | 'PartCreated' | 'PartResized' | 'PartRotated' | 'SelectionMoved' | 'SelectionCopied' | 'SelectionDeleted' | 'SelectionDeleting' | 'SelectionGrouped' | 'SelectionUngrouped' | 'SubGraphCollapsed' | 'SubGraphExpanded' | 'TextEdited' | 'ThemeChanged' | 'TreeCollapsed' | 'TreeExpanded' | 'ViewportBoundsChanged'

              Theme

              Copyright © 1998-2024 by Northwoods Software Corporation.

              Type alias DiagramInitOptions

              GoJS® Diagramming Components
              version 3.0.2
              by Northwoods Software®

              DiagramInitOptions are used in the Diagram constructor to concisely initialize a Diagram by settings its properties, + });

              Type alias DiagramInitOptions

              GoJS® Diagramming Components
              version 3.0.3
              by Northwoods Software®

              DiagramInitOptions are used in the Diagram constructor to concisely initialize a Diagram by settings its properties, and also set properties on its Tools, CommandHandler, AnimationManager, and set DiagramEvents.

              Theme

              Copyright © 1998-2024 by Northwoods Software Corporation.

              Interface DiagramRendererOptions

              GoJS® Diagramming Components
              version 3.0.2
              by Northwoods Software®

              Hierarchy

              Used for the options arguments to Diagram.makeImage, Diagram.makeImageData, and Diagram.makeSvg.

              + });

              Interface DiagramRendererOptions

              GoJS® Diagramming Components
              version 3.0.3
              by Northwoods Software®

              Hierarchy

              Used for the options arguments to Diagram.makeImage, Diagram.makeImageData, and Diagram.makeSvg.

              Index

              Properties

              background? callback? callbackTimeout? diff --git a/api/symbols/DimensioningLink.html b/api/symbols/DimensioningLink.html index c07edd4ee..520f59b17 100644 --- a/api/symbols/DimensioningLink.html +++ b/api/symbols/DimensioningLink.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

              Class DimensioningLink

              GoJS® Diagramming Components
              version 3.0.2
              by Northwoods Software®

              This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.

              Hierarchy

              • Link
                • DimensioningLink

              A custom routed go.Link for showing the distances between a point on one node and a point on another node.

              + });

              Class DimensioningLink

              GoJS® Diagramming Components
              version 3.0.3
              by Northwoods Software®

              This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.

              Hierarchy

              • Link
                • DimensioningLink

              A custom routed go.Link for showing the distances between a point on one node and a point on another node.

              Note that because this is a Link, the points being measured must be on go.Nodes, not simple go.Parts. The exact point on each Node is determined by the go.Link.fromSpot and go.Link.toSpot.

              Several properties of the DimensioningLink customize the appearance of the dimensioning: diff --git a/api/symbols/DoubleTreeLayout.html b/api/symbols/DoubleTreeLayout.html index c7e014a69..2d428d5fa 100644 --- a/api/symbols/DoubleTreeLayout.html +++ b/api/symbols/DoubleTreeLayout.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

              Class DoubleTreeLayout

              GoJS® Diagramming Components
              version 3.0.2
              by Northwoods Software®

              This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.

              Hierarchy

              Perform two TreeLayouts, one going rightwards and one going leftwards. + });

              Class DoubleTreeLayout

              GoJS® Diagramming Components
              version 3.0.3
              by Northwoods Software®

              This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.

              Hierarchy

              Perform two TreeLayouts, one going rightwards and one going leftwards. The choice of direction is determined by the mandatory predicate directionFunction, which is called on each child Node of the root Node.

              You can also set vertical to true if you want the DoubleTreeLayout to diff --git a/api/symbols/DragCreatingTool.html b/api/symbols/DragCreatingTool.html index 3a97755a3..238baea03 100644 --- a/api/symbols/DragCreatingTool.html +++ b/api/symbols/DragCreatingTool.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

              Class DragCreatingTool

              GoJS® Diagramming Components
              version 3.0.2
              by Northwoods Software®

              This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.

              Hierarchy

              • Tool
                • DragCreatingTool

              The DragCreatingTool lets the user create a new node by dragging in the background + });

              Class DragCreatingTool

              GoJS® Diagramming Components
              version 3.0.3
              by Northwoods Software®

              This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.

              Hierarchy

              • Tool
                • DragCreatingTool

              The DragCreatingTool lets the user create a new node by dragging in the background to indicate its size and position.

              The default drag selection box is a magenta rectangle. You can modify the box to customize its appearance.

              diff --git a/api/symbols/DragSelectingTool.html b/api/symbols/DragSelectingTool.html index f72ecd1a4..8b32941ed 100644 --- a/api/symbols/DragSelectingTool.html +++ b/api/symbols/DragSelectingTool.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

              Class DragSelectingTool

              GoJS® Diagramming Components
              version 3.0.2
              by Northwoods Software®

              Hierarchy

              The DragSelectingTool lets the user select multiple parts within a rectangular area drawn by the user. + });

              Class DragSelectingTool

              GoJS® Diagramming Components
              version 3.0.3
              by Northwoods Software®

              Hierarchy

              The DragSelectingTool lets the user select multiple parts within a rectangular area drawn by the user. There is a temporary part, the box, that shows the current area encompassed between the mouse-down point and the current mouse point. diff --git a/api/symbols/DragZoomingTool.html b/api/symbols/DragZoomingTool.html index 7ca6943ff..27ff56f76 100644 --- a/api/symbols/DragZoomingTool.html +++ b/api/symbols/DragZoomingTool.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

              Class DragZoomingTool

              GoJS® Diagramming Components
              version 3.0.2
              by Northwoods Software®

              This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.

              Hierarchy

              The DragZoomingTool lets the user zoom into a diagram by stretching a box + });

              Class DragZoomingTool

              GoJS® Diagramming Components
              version 3.0.3
              by Northwoods Software®

              This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.

              Hierarchy

              The DragZoomingTool lets the user zoom into a diagram by stretching a box to indicate the new contents of the diagram's viewport (the area of the model shown by the Diagram). Hold down the Shift key in order to zoom out.

              diff --git a/api/symbols/DraggingInfo.html b/api/symbols/DraggingInfo.html index ef8d3b810..200c70457 100644 --- a/api/symbols/DraggingInfo.html +++ b/api/symbols/DraggingInfo.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

              Class DraggingInfo

              GoJS® Diagramming Components
              version 3.0.2
              by Northwoods Software®

              This is used in dragging methods to remember initial locations, for relative positioning and for cancellation. + });

              Class DraggingInfo

              GoJS® Diagramming Components
              version 3.0.3
              by Northwoods Software®

              This is used in dragging methods to remember initial locations, for relative positioning and for cancellation. You do not typically need to create these unless you are overriding tools.

              CommandHandler.computeEffectiveCollection returns a Map of Parts and DraggingInfo, which is used as an argument for methods like Diagram.computeMove.

              diff --git a/api/symbols/DraggingOptions.html b/api/symbols/DraggingOptions.html index 2656e1e33..6a9e66a1a 100644 --- a/api/symbols/DraggingOptions.html +++ b/api/symbols/DraggingOptions.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

              Class DraggingOptions

              GoJS® Diagramming Components
              version 3.0.2
              by Northwoods Software®

              This class contains options for dragging and moving parts.

              + });

              Class DraggingOptions

              GoJS® Diagramming Components
              version 3.0.3
              by Northwoods Software®

              This class contains options for dragging and moving parts.

              This is used by Diagram.moveParts, Diagram.computeMove, and DraggingTool.computeMove.

              Both the Diagram and its DraggingTool have a DraggingOptions instance. Typically, only the DraggingTool one is used, unless the Diagram has no DraggingTool defined.

              diff --git a/api/symbols/DraggingTool.html b/api/symbols/DraggingTool.html index 77cb93289..16d181a63 100644 --- a/api/symbols/DraggingTool.html +++ b/api/symbols/DraggingTool.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

              Class DraggingTool

              GoJS® Diagramming Components
              version 3.0.2
              by Northwoods Software®

              Hierarchy

              The DraggingTool is used to move or copy selected parts with the mouse. + });

              Class DraggingTool

              GoJS® Diagramming Components
              version 3.0.3
              by Northwoods Software®

              Hierarchy

              The DraggingTool is used to move or copy selected parts with the mouse. This sets the Part.location property; you may want to save the location to the model by using a TwoWay Binding on the "location" property in your Parts/Nodes/Groups templates.

              Dragging the selection moves parts for which Part.canMove is true. diff --git a/api/symbols/DrawCommandHandler.html b/api/symbols/DrawCommandHandler.html index 8047b797e..293bdb7f6 100644 --- a/api/symbols/DrawCommandHandler.html +++ b/api/symbols/DrawCommandHandler.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

              Class DrawCommandHandler

              GoJS® Diagramming Components
              version 3.0.2
              by Northwoods Software®

              This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.

              Hierarchy

              This CommandHandler class allows the user to position selected Parts in a diagram + });

              Class DrawCommandHandler

              GoJS® Diagramming Components
              version 3.0.3
              by Northwoods Software®

              This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.

              Hierarchy

              This CommandHandler class allows the user to position selected Parts in a diagram relative to the first part selected, in addition to overriding the doKeyDown method of the CommandHandler for handling the arrow keys in additional manners.

              Typical usage:

              diff --git a/api/symbols/EasingFunction.html b/api/symbols/EasingFunction.html index aeee7fa81..5eb8b8c92 100644 --- a/api/symbols/EasingFunction.html +++ b/api/symbols/EasingFunction.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

              Type alias EasingFunction

              GoJS® Diagramming Components
              version 3.0.2
              by Northwoods Software®

              Type declaration

                • (currentTime: number, startValue: number, byValue: number, duration: number): number

                • An EasingFunction describes how much to modify a scalar value based on + });

                  Type alias EasingFunction

                  GoJS® Diagramming Components
                  version 3.0.3
                  by Northwoods Software®

                  Type declaration

                    • (currentTime: number, startValue: number, byValue: number, duration: number): number

                    • An EasingFunction describes how much to modify a scalar value based on the current time, the start value, the change in value, and the duration.

                      Parameters

                      • currentTime: number
                      • startValue: number
                      • byValue: number
                      • duration: number

                      Returns number

                  Theme

                  Copyright © 1998-2024 by Northwoods Software Corporation.

                  Class FishboneLayout

                  GoJS® Diagramming Components
                  version 3.0.2
                  by Northwoods Software®

                  This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.

                  Hierarchy

                  FishboneLayout is a custom go.Layout derived from go.TreeLayout for creating "fishbone" diagrams. + });

                  Class FishboneLayout

                  GoJS® Diagramming Components
                  version 3.0.3
                  by Northwoods Software®

                  This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.

                  Hierarchy

                  FishboneLayout is a custom go.Layout derived from go.TreeLayout for creating "fishbone" diagrams. A fishbone diagram also requires a go.Link class that implements custom routing, FishboneLink.

                  This only works for angle === 0 or angle === 180.

                  This layout assumes Links are automatically routed in the way needed by fishbone diagrams, diff --git a/api/symbols/FishboneLink.html b/api/symbols/FishboneLink.html index 1f69f8941..634131c83 100644 --- a/api/symbols/FishboneLink.html +++ b/api/symbols/FishboneLink.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

                  Class FishboneLink

                  GoJS® Diagramming Components
                  version 3.0.2
                  by Northwoods Software®

                  This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.

                  Hierarchy

                  Custom go.Link class for FishboneLayout.

                  + });

                  Class FishboneLink

                  GoJS® Diagramming Components
                  version 3.0.3
                  by Northwoods Software®

                  This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.

                  Hierarchy

                  Custom go.Link class for FishboneLayout.

                  Index

                  Constructors

                  constructor

                  Methods

                  computeAdjusting computePoints diff --git a/api/symbols/Flip.html b/api/symbols/Flip.html index 487665422..9ebb6c739 100644 --- a/api/symbols/Flip.html +++ b/api/symbols/Flip.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

                  Enumeration Flip

                  GoJS® Diagramming Components
                  version 3.0.2
                  by Northwoods Software®

                  This enumeration specifies possible values for Picture.flip and TextBlock.flip.

                  + });

                  Enumeration Flip

                  GoJS® Diagramming Components
                  version 3.0.3
                  by Northwoods Software®

                  This enumeration specifies possible values for Picture.flip and TextBlock.flip.

                  since

                  3.0

                  Index

                  Enumeration Members

                  Both Horizontal diff --git a/api/symbols/ForceDirectedEdge.html b/api/symbols/ForceDirectedEdge.html index a87f81ba7..994c8d326 100644 --- a/api/symbols/ForceDirectedEdge.html +++ b/api/symbols/ForceDirectedEdge.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

                  Class ForceDirectedEdgeUnindexed

                  GoJS® Diagramming Components
                  version 3.0.2
                  by Northwoods Software®

                  Hierarchy

                  This holds ForceDirectedLayout-specific information about Links.

                  + });

                  Class ForceDirectedEdgeUnindexed

                  GoJS® Diagramming Components
                  version 3.0.3
                  by Northwoods Software®

                  Hierarchy

                  This holds ForceDirectedLayout-specific information about Links.

                  This class inherits from LayoutEdge.

                  Index

                  Constructors

                  constructor

                  Accessors

                  length diff --git a/api/symbols/ForceDirectedLayout.html b/api/symbols/ForceDirectedLayout.html index ade107ec7..ec9f9bb4f 100644 --- a/api/symbols/ForceDirectedLayout.html +++ b/api/symbols/ForceDirectedLayout.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

                  Class ForceDirectedLayout

                  GoJS® Diagramming Components
                  version 3.0.2
                  by Northwoods Software®

                  Hierarchy

                  Force-directed layout treats the graph as if it were a system of physical bodies + });

                  Class ForceDirectedLayout

                  GoJS® Diagramming Components
                  version 3.0.3
                  by Northwoods Software®

                  Hierarchy

                  Force-directed layout treats the graph as if it were a system of physical bodies with repulsive electrical, attractional gravitational, and spring forces acting on them and between them.

                  Electrical forces come both from the field at the vertex's location as well as from neighboring vertexes and are quadratic by distance. Gravitational forces come from the field at the vertex's location and are constant. diff --git a/api/symbols/ForceDirectedNetwork.html b/api/symbols/ForceDirectedNetwork.html index 307cca9da..2e0fdab44 100644 --- a/api/symbols/ForceDirectedNetwork.html +++ b/api/symbols/ForceDirectedNetwork.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

                  Class ForceDirectedNetworkUnindexed

                  GoJS® Diagramming Components
                  version 3.0.2
                  by Northwoods Software®

                  Hierarchy

                  This class represents an abstract graph of ForceDirectedVertexes and ForceDirectedEdges + });

                  Class ForceDirectedNetworkUnindexed

                  GoJS® Diagramming Components
                  version 3.0.3
                  by Northwoods Software®

                  Hierarchy

                  This class represents an abstract graph of ForceDirectedVertexes and ForceDirectedEdges that can be constructed based on the Nodes and Links of a Diagram so that the ForceDirectedLayout can operate independently of the diagram until it is time to commit any node positioning or link routing.

                  diff --git a/api/symbols/ForceDirectedVertex.html b/api/symbols/ForceDirectedVertex.html index d00e4dfba..442a6d55c 100644 --- a/api/symbols/ForceDirectedVertex.html +++ b/api/symbols/ForceDirectedVertex.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

                  Class ForceDirectedVertexUnindexed

                  GoJS® Diagramming Components
                  version 3.0.2
                  by Northwoods Software®

                  Hierarchy

                  This holds ForceDirectedLayout-specific information about Nodes.

                  + });

                  Class ForceDirectedVertexUnindexed

                  GoJS® Diagramming Components
                  version 3.0.3
                  by Northwoods Software®

                  Hierarchy

                  This holds ForceDirectedLayout-specific information about Nodes.

                  This class inherits from LayoutVertex.

                  Index

                  Constructors

                  constructor

                  Accessors

                  charge diff --git a/api/symbols/FreehandDrawingTool.html b/api/symbols/FreehandDrawingTool.html index b1534baa0..8937159fb 100644 --- a/api/symbols/FreehandDrawingTool.html +++ b/api/symbols/FreehandDrawingTool.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

                  Class FreehandDrawingTool

                  GoJS® Diagramming Components
                  version 3.0.2
                  by Northwoods Software®

                  This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.

                  Hierarchy

                  • Tool
                    • FreehandDrawingTool

                  The FreehandDrawingTool allows the user to draw a shape using the mouse. + });

                  Class FreehandDrawingTool

                  GoJS® Diagramming Components
                  version 3.0.3
                  by Northwoods Software®

                  This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.

                  Hierarchy

                  • Tool
                    • FreehandDrawingTool

                  The FreehandDrawingTool allows the user to draw a shape using the mouse. It collects all of the points from a mouse-down, all mouse-moves, until a mouse-up, and puts all of those points in a go.Geometry used by a go.Shape. It then adds a node data object to the diagram's model.

                  diff --git a/api/symbols/Geometry.html b/api/symbols/Geometry.html index 3caea3bf5..e6af5a9f7 100644 --- a/api/symbols/Geometry.html +++ b/api/symbols/Geometry.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

                  Class Geometry

                  GoJS® Diagramming Components
                  version 3.0.2
                  by Northwoods Software®

                  The Geometry class is used to define the "shape" of a Shape. + });

                  Class Geometry

                  GoJS® Diagramming Components
                  version 3.0.3
                  by Northwoods Software®

                  The Geometry class is used to define the "shape" of a Shape. A Geometry can be simple straight lines, rectangles, or ellipses. A Geometry can also be an arbitrarily complex path, consisting of a list of PathFigures.

                  A Geometry must not be modified once it has been used by a Shape. diff --git a/api/symbols/GeometryReshapingTool.html b/api/symbols/GeometryReshapingTool.html index c2a096625..5e744b1a7 100644 --- a/api/symbols/GeometryReshapingTool.html +++ b/api/symbols/GeometryReshapingTool.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

                  Class GeometryReshapingTool

                  GoJS® Diagramming Components
                  version 3.0.2
                  by Northwoods Software®

                  This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.

                  Hierarchy

                  • Tool
                    • GeometryReshapingTool

                  The GeometryReshapingTool class allows for a Shape's Geometry to be modified by the user + });

                  Class GeometryReshapingTool

                  GoJS® Diagramming Components
                  version 3.0.3
                  by Northwoods Software®

                  This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.

                  Hierarchy

                  • Tool
                    • GeometryReshapingTool

                  The GeometryReshapingTool class allows for a Shape's Geometry to be modified by the user via the dragging of tool handles. This does not handle Links, whose routes should be reshaped by the LinkReshapingTool. The reshapeObjectName needs to identify the named go.Shape within the diff --git a/api/symbols/GeometryStretch.html b/api/symbols/GeometryStretch.html index daedc2f98..885e96b7e 100644 --- a/api/symbols/GeometryStretch.html +++ b/api/symbols/GeometryStretch.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

                  Enumeration GeometryStretch

                  GoJS® Diagramming Components
                  version 3.0.2
                  by Northwoods Software®

                  This enumeration specifies possible values for Shape.geometryStretch and Geometry.defaultStretch.

                  + });

                  Enumeration GeometryStretch

                  GoJS® Diagramming Components
                  version 3.0.3
                  by Northwoods Software®

                  This enumeration specifies possible values for Shape.geometryStretch and Geometry.defaultStretch.

                  since

                  3.0

                  Index

                  Enumeration Members

                  Default Fill diff --git a/api/symbols/GeometryType.html b/api/symbols/GeometryType.html index 28481e43e..305e96f5d 100644 --- a/api/symbols/GeometryType.html +++ b/api/symbols/GeometryType.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

                  Enumeration GeometryType

                  GoJS® Diagramming Components
                  version 3.0.2
                  by Northwoods Software®

                  This enumeration specifies possible values for Geometry.type.

                  + });

                  Enumeration GeometryType

                  GoJS® Diagramming Components
                  version 3.0.3
                  by Northwoods Software®

                  This enumeration specifies possible values for Geometry.type.

                  since

                  3.0

                  Index

                  Enumeration Members

                  Ellipse Line diff --git a/api/symbols/GestureMode.html b/api/symbols/GestureMode.html index 1aa9fbb79..05570927f 100644 --- a/api/symbols/GestureMode.html +++ b/api/symbols/GestureMode.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

                  Enumeration GestureMode

                  GoJS® Diagramming Components
                  version 3.0.2
                  by Northwoods Software®

                  This enumeration specifies possible values for ToolManager.gestureBehavior.

                  + });

                  Enumeration GestureMode

                  GoJS® Diagramming Components
                  version 3.0.3
                  by Northwoods Software®

                  This enumeration specifies possible values for ToolManager.gestureBehavior.

                  since

                  3.0

                  Index

                  Enumeration Members

                  Cancel None diff --git a/api/symbols/GraphLinksModel.html b/api/symbols/GraphLinksModel.html index c961cbe4c..cb28d1229 100644 --- a/api/symbols/GraphLinksModel.html +++ b/api/symbols/GraphLinksModel.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

                  Class GraphLinksModel

                  GoJS® Diagramming Components
                  version 3.0.2
                  by Northwoods Software®

                  Hierarchy

                  GraphLinksModels support links between nodes and grouping nodes and links into subgraphs. + });

                  Class GraphLinksModel

                  GoJS® Diagramming Components
                  version 3.0.3
                  by Northwoods Software®

                  Hierarchy

                  GraphLinksModels support links between nodes and grouping nodes and links into subgraphs. GraphLinksModels hold node data and link data in separate arrays. Node data is normally represented in a Diagram by instances of Node, but they could be represented by simple Parts or by Groups. diff --git a/api/symbols/GraphObject.html b/api/symbols/GraphObject.html index 94a0ee9ba..fe656cf1f 100644 --- a/api/symbols/GraphObject.html +++ b/api/symbols/GraphObject.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

                  Class GraphObjectAbstract

                  GoJS® Diagramming Components
                  version 3.0.2
                  by Northwoods Software®

                  Hierarchy

                  This is the abstract base class for all graphical objects. + });

                  Class GraphObjectAbstract

                  GoJS® Diagramming Components
                  version 3.0.3
                  by Northwoods Software®

                  Hierarchy

                  This is the abstract base class for all graphical objects. Classes inheriting from GraphObject include: Shape, TextBlock, Picture, and Panel. From the Panel class the Part class is derived, from which the diff --git a/api/symbols/GridAlignment.html b/api/symbols/GridAlignment.html index 0d79015c5..9e0500a18 100644 --- a/api/symbols/GridAlignment.html +++ b/api/symbols/GridAlignment.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

                  Enumeration GridAlignment

                  GoJS® Diagramming Components
                  version 3.0.2
                  by Northwoods Software®

                  This enumeration specifies whether to position each part by its location or by its position. + });

                  Enumeration GridAlignment

                  GoJS® Diagramming Components
                  version 3.0.3
                  by Northwoods Software®

                  This enumeration specifies whether to position each part by its location or by its position. Used for GridLayout.alignment.

                  since

                  3.0

                  Index

                  Enumeration Members

                  Location diff --git a/api/symbols/GridArrangement.html b/api/symbols/GridArrangement.html index b4f326571..c420cfae4 100644 --- a/api/symbols/GridArrangement.html +++ b/api/symbols/GridArrangement.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

                  Enumeration GridArrangement

                  GoJS® Diagramming Components
                  version 3.0.2
                  by Northwoods Software®

                  This enumeration specifies how to fill each row. + });

                  Enumeration GridArrangement

                  GoJS® Diagramming Components
                  version 3.0.3
                  by Northwoods Software®

                  This enumeration specifies how to fill each row. Used for GridLayout.arrangement.

                  since

                  3.0

                  Index

                  Enumeration Members

                  LeftToRight diff --git a/api/symbols/GridLayout.html b/api/symbols/GridLayout.html index 5bbc5f696..3e6a99107 100644 --- a/api/symbols/GridLayout.html +++ b/api/symbols/GridLayout.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

                  Class GridLayout

                  GoJS® Diagramming Components
                  version 3.0.2
                  by Northwoods Software®

                  Hierarchy

                  This simple layout places all of the Parts in a grid-like arrangement, ordered, spaced apart, + });

                  Class GridLayout

                  GoJS® Diagramming Components
                  version 3.0.3
                  by Northwoods Software®

                  Hierarchy

                  This simple layout places all of the Parts in a grid-like arrangement, ordered, spaced apart, and wrapping as needed. It ignores any Links connecting the Nodes being laid out. There are many samples that use GridLayout. Every Palette uses a GridLayout by default.

                  diff --git a/api/symbols/GridSorting.html b/api/symbols/GridSorting.html index 4019d79b4..41495f7c4 100644 --- a/api/symbols/GridSorting.html +++ b/api/symbols/GridSorting.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

                  Enumeration GridSorting

                  GoJS® Diagramming Components
                  version 3.0.2
                  by Northwoods Software®

                  This enumeration specifies whether to sort the children of a part, and in what order to position them. + });

                  Enumeration GridSorting

                  GoJS® Diagramming Components
                  version 3.0.3
                  by Northwoods Software®

                  This enumeration specifies whether to sort the children of a part, and in what order to position them. Used for GridLayout.sorting.

                  The default GridLayout.comparer does a case-insensitive comparison of the value of each node's Part.text property.

                  since

                  3.0

                  diff --git a/api/symbols/Group.html b/api/symbols/Group.html index 5e23ae008..8c8cda537 100644 --- a/api/symbols/Group.html +++ b/api/symbols/Group.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

                  Class Group

                  GoJS® Diagramming Components
                  version 3.0.2
                  by Northwoods Software®

                  Hierarchy

                  A Group is a Node that can contain a subgraph of Nodes and Links, + });

                  Class Group

                  GoJS® Diagramming Components
                  version 3.0.3
                  by Northwoods Software®

                  Hierarchy

                  A Group is a Node that can contain a subgraph of Nodes and Links, which are members of the group.

                  For more discussion, see Introduction to Groups. diff --git a/api/symbols/GuidedDraggingTool.html b/api/symbols/GuidedDraggingTool.html index ab4bddbfc..47552c2da 100644 --- a/api/symbols/GuidedDraggingTool.html +++ b/api/symbols/GuidedDraggingTool.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

                  Class GuidedDraggingTool

                  GoJS® Diagramming Components
                  version 3.0.2
                  by Northwoods Software®

                  This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.

                  Hierarchy

                  The GuidedDraggingTool class makes guidelines visible as the parts are dragged around a diagram + });

                  Class GuidedDraggingTool

                  GoJS® Diagramming Components
                  version 3.0.3
                  by Northwoods Software®

                  This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.

                  Hierarchy

                  The GuidedDraggingTool class makes guidelines visible as the parts are dragged around a diagram when the selected part is nearly aligned with another part.

                  If you want to experiment with this extension, try the Guided Dragging sample.

                  Index

                  Constructors

                  constructor diff --git a/api/symbols/HTMLInfo.html b/api/symbols/HTMLInfo.html index 4e0a297ad..a00ba2977 100644 --- a/api/symbols/HTMLInfo.html +++ b/api/symbols/HTMLInfo.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

                  Class HTMLInfo

                  GoJS® Diagramming Components
                  version 3.0.2
                  by Northwoods Software®

                  HTMLInfo is used to show and hide custom HTML page elements, such as a context menu, tooltip, or text editor made of HTML.

                  + });

                  Class HTMLInfo

                  GoJS® Diagramming Components
                  version 3.0.3
                  by Northwoods Software®

                  HTMLInfo is used to show and hide custom HTML page elements, such as a context menu, tooltip, or text editor made of HTML.

                  Properties that can be set to an HTMLInfo include:

                  • TextEditingTool.defaultTextEditor
                    • diff --git a/api/symbols/IKeyValuePair.html b/api/symbols/IKeyValuePair.html index 34d9fbfc0..1b6956e7d 100644 --- a/api/symbols/IKeyValuePair.html +++ b/api/symbols/IKeyValuePair.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

                    Interface IKeyValuePair<K, V>

                    GoJS® Diagramming Components
                    version 3.0.2
                    by Northwoods Software®

                    A (key, value) pair, used in Maps.

                    + });

                    Interface IKeyValuePair<K, V>

                    GoJS® Diagramming Components
                    version 3.0.3
                    by Northwoods Software®

                    A (key, value) pair, used in Maps.

                    Type Parameters

                    • K

                    • V

                    Index

                    Properties

                    key value

                    Properties

                    Readonly key
                    : K

                    Gets a key for a value in a Map.

                    diff --git a/api/symbols/IMapIterator.html b/api/symbols/IMapIterator.html index 1baf03da3..9db686b6a 100644 --- a/api/symbols/IMapIterator.html +++ b/api/symbols/IMapIterator.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

                    Interface IMapIterator<K, T>

                    GoJS® Diagramming Components
                    version 3.0.2
                    by Northwoods Software®

                    This interface defines properties and methods for iterating over a Map; + });

                    Interface IMapIterator<K, T>

                    GoJS® Diagramming Components
                    version 3.0.3
                    by Northwoods Software®

                    This interface defines properties and methods for iterating over a Map; it provides the next predicate and the key and value read-only properties.

                    Iterating over Maps is very similar to an Iterator<IKeyValuePair>, but not exactly, because the type of the value property is T, not an IKeyValuePair.

                    diff --git a/api/symbols/ImageRendererOptions.html b/api/symbols/ImageRendererOptions.html index 8ab523527..36c10747d 100644 --- a/api/symbols/ImageRendererOptions.html +++ b/api/symbols/ImageRendererOptions.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

                    Interface ImageRendererOptions

                    GoJS® Diagramming Components
                    version 3.0.2
                    by Northwoods Software®

                    Hierarchy

                    Used for the options argument to Diagram.makeImage and Diagram.makeImageData.

                    + });

                    Interface ImageRendererOptions

                    GoJS® Diagramming Components
                    version 3.0.3
                    by Northwoods Software®

                    Hierarchy

                    Used for the options argument to Diagram.makeImage and Diagram.makeImageData.

                    Index

                    Properties

                    details? returnType? type? diff --git a/api/symbols/ImageStretch.html b/api/symbols/ImageStretch.html index af1553236..33dba64a4 100644 --- a/api/symbols/ImageStretch.html +++ b/api/symbols/ImageStretch.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

                    Enumeration ImageStretch

                    GoJS® Diagramming Components
                    version 3.0.2
                    by Northwoods Software®

                    This enumeration specifies possible values for Picture.imageStretch.

                    + });

                    Enumeration ImageStretch

                    GoJS® Diagramming Components
                    version 3.0.3
                    by Northwoods Software®

                    This enumeration specifies possible values for Picture.imageStretch.

                    since

                    3.0

                    Index

                    Enumeration Members

                    Fill None diff --git a/api/symbols/IncrementalData.html b/api/symbols/IncrementalData.html index 041dc8ece..fdab312a3 100644 --- a/api/symbols/IncrementalData.html +++ b/api/symbols/IncrementalData.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

                    Interface IncrementalData

                    GoJS® Diagramming Components
                    version 3.0.2
                    by Northwoods Software®

                    Interface for the output object of Model.toIncrementalData.

                    + });

                    Interface IncrementalData

                    GoJS® Diagramming Components
                    version 3.0.3
                    by Northwoods Software®

                    Interface for the output object of Model.toIncrementalData.

                    All properties of this object are optional, as they are only included if changes occurred. For instance, if a transaction didn't include any changes to modelData, the modelData property of this interface won't be included on the output object.

                    Any shared or cyclic references within the model data will be maintained on the data included on this output object.

                    diff --git a/api/symbols/InputEvent.html b/api/symbols/InputEvent.html index 91bc84dba..54c5a4ad7 100644 --- a/api/symbols/InputEvent.html +++ b/api/symbols/InputEvent.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

                    Class InputEvent

                    GoJS® Diagramming Components
                    version 3.0.2
                    by Northwoods Software®

                    An InputEvent represents a mouse or keyboard or touch event. + });

                    Class InputEvent

                    GoJS® Diagramming Components
                    version 3.0.3
                    by Northwoods Software®

                    An InputEvent represents a mouse or keyboard or touch event. The principal properties hold information about a particular input event. These properties include the documentPoint at which a mouse event occurred in document coordinates, diff --git a/api/symbols/Inspector.html b/api/symbols/Inspector.html index 8fdb0555c..6972deab1 100644 --- a/api/symbols/Inspector.html +++ b/api/symbols/Inspector.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

                    Class Inspector

                    GoJS® Diagramming Components
                    version 3.0.2
                    by Northwoods Software®

                    This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.

                    This class implements an inspector for GoJS model data objects. + });

                    Class Inspector

                    GoJS® Diagramming Components
                    version 3.0.3
                    by Northwoods Software®

                    This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.

                    This class implements an inspector for GoJS model data objects. The constructor takes three arguments:

                    • divid string a string referencing the HTML ID of the to-be inspector's div
                      • diff --git a/api/symbols/Iterable.html b/api/symbols/Iterable.html index 536c70c84..27a674fa5 100644 --- a/api/symbols/Iterable.html +++ b/api/symbols/Iterable.html @@ -35,7 +35,7 @@ // set active element // done via active tag below, always API } - });

                      Interface Iterable<T>

                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®

                      Hierarchy

                      This interface is implemented by the List, Set, and Map + });

                      Interface Iterable<T>

                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®

                      Hierarchy

                      This interface is implemented by the List, Set, and Map classes; it provides the iterator read-only property that returns an Iterator.

                      Typical usage is:

                      const it = anIterableCollection.iterator;
                      while (it.next()) {
                        const item = it.value;
                      }
diff --git a/api/symbols/Iterator.html b/api/symbols/Iterator.html
index b0a56eaaf..ead918129 100644
--- a/api/symbols/Iterator.html
+++ b/api/symbols/Iterator.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Interface Iterator<T>
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      Hierarchy
                      This interface defines properties and methods for iterating over a collection;
+  });
                      Interface Iterator<T>
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      Hierarchy
                      This interface defines properties and methods for iterating over a collection;
 it provides the next predicate and the value read-only property.
 Some Iterators also provide key property values along with each value.
                      
 
                      Typical usage is:
                      
diff --git a/api/symbols/Key.html b/api/symbols/Key.html
index 527fecb9c..9ec8bf73a 100644
--- a/api/symbols/Key.html
+++ b/api/symbols/Key.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Type alias Key
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      The Key type is the same as string | number | undefined.
                      
+  });
                      Type alias Key
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      The Key type is the same as string | number | undefined.
                      
 
                      Theme
                      Copyright © 1998-2024 by Northwoods Software Corporation.
                      Class Layer
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      Layers are how named collections of Parts are drawn in front or behind other collections of Parts in a Diagram.
+  });
                      Class Layer
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      Layers are how named collections of Parts are drawn in front or behind other collections of Parts in a Diagram.
 Layers can only contain Parts, such as Nodes and Links. They cannot hold GraphObjects directly.
                      
 
                      You put a Part into a Layer by assigning Part.layerName with the name of the Layer.
 You can use data binding to initialize and remember a Part's layer's name.
diff --git a/api/symbols/LayeredDigraphAggressive.html b/api/symbols/LayeredDigraphAggressive.html
index 5b4601d24..fefa127ae 100644
--- a/api/symbols/LayeredDigraphAggressive.html
+++ b/api/symbols/LayeredDigraphAggressive.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Enumeration LayeredDigraphAggressive
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      This enumeration specifies how much effort LayeredDigraphLayout puts into trying to look for link crossings.
+  });
                      Enumeration LayeredDigraphAggressive
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      This enumeration specifies how much effort LayeredDigraphLayout puts into trying to look for link crossings.
 Used for LayeredDigraphLayout.aggressiveOption.
                      
 
                      since
                      3.0
                      
 
                       Index
                      Enumeration Members
                      Less
diff --git a/api/symbols/LayeredDigraphAlign.html b/api/symbols/LayeredDigraphAlign.html
index 914c1c97b..85228eabc 100644
--- a/api/symbols/LayeredDigraphAlign.html
+++ b/api/symbols/LayeredDigraphAlign.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Enumeration LayeredDigraphAlign
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      These enumerated values can be bitwise combined as values for the LayeredDigraphLayout.alignOption property,
+  });
                      Enumeration LayeredDigraphAlign
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      These enumerated values can be bitwise combined as values for the LayeredDigraphLayout.alignOption property,
 which controls how LayeredDigraphLayout attempts to align nodes during straightening and packing.
                      
 
                      since
                      3.0
                      
 
                       Index
                      Enumeration Members
                      All
diff --git a/api/symbols/LayeredDigraphCycleRemove.html b/api/symbols/LayeredDigraphCycleRemove.html
index 91454f460..5530923d0 100644
--- a/api/symbols/LayeredDigraphCycleRemove.html
+++ b/api/symbols/LayeredDigraphCycleRemove.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Enumeration LayeredDigraphCycleRemove
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      This enumeration specifies how LayeredDigraphLayout changes the graph to make sure it contains no cycles or loops.
+  });
                      Enumeration LayeredDigraphCycleRemove
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      This enumeration specifies how LayeredDigraphLayout changes the graph to make sure it contains no cycles or loops.
 Used for LayeredDigraphLayout.cycleRemoveOption.
                      
 
                      since
                      3.0
                      
 
                       Index
                      Enumeration Members
                      DepthFirst
diff --git a/api/symbols/LayeredDigraphEdge.html b/api/symbols/LayeredDigraphEdge.html
index 3a9fe3141..c4ae76f52 100644
--- a/api/symbols/LayeredDigraphEdge.html
+++ b/api/symbols/LayeredDigraphEdge.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class LayeredDigraphEdgeUnindexed 
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      Hierarchy
                      This holds LayeredDigraphLayout-specific information about Links.
                      
+  });
                      Class LayeredDigraphEdgeUnindexed 
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      Hierarchy
                      This holds LayeredDigraphLayout-specific information about Links.
                      
 
                      This class inherits from LayoutEdge.
                      
 
                       Index
                      Constructors
                      constructor
 
                      Accessors
                      forest
diff --git a/api/symbols/LayeredDigraphInit.html b/api/symbols/LayeredDigraphInit.html
index ef0aa3ed8..c058ebaa9 100644
--- a/api/symbols/LayeredDigraphInit.html
+++ b/api/symbols/LayeredDigraphInit.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Enumeration LayeredDigraphInit
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      This enumeration specifies how LayeredDigraphLayout determines the array of indices for each layer.
+  });
                      Enumeration LayeredDigraphInit
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      This enumeration specifies how LayeredDigraphLayout determines the array of indices for each layer.
 Used for LayeredDigraphLayout.initializeOption.
                      
 
                      since
                      3.0
                      
 
                       Index
                      Enumeration Members
                      DepthFirstIn
diff --git a/api/symbols/LayeredDigraphLayering.html b/api/symbols/LayeredDigraphLayering.html
index ae1b0c2b3..807c21e40 100644
--- a/api/symbols/LayeredDigraphLayering.html
+++ b/api/symbols/LayeredDigraphLayering.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Enumeration LayeredDigraphLayering
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      This enumeration specifies how LayeredDigraphLayout.assignLayers assigns each node of the graph to a layer.
+  });
                      Enumeration LayeredDigraphLayering
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      This enumeration specifies how LayeredDigraphLayout.assignLayers assigns each node of the graph to a layer.
 Used for LayeredDigraphLayout.layeringOption.
                      
 
                      since
                      3.0
                      
 
                       Index
                      Enumeration Members
                      LongestPathSink
diff --git a/api/symbols/LayeredDigraphLayout.html b/api/symbols/LayeredDigraphLayout.html
index 3306fad0f..eba7d4d71 100644
--- a/api/symbols/LayeredDigraphLayout.html
+++ b/api/symbols/LayeredDigraphLayout.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class LayeredDigraphLayout
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      Hierarchy
                      This arranges nodes of directed graphs into layers (rows or columns).
+  });
                      Class LayeredDigraphLayout
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      Hierarchy
                      This arranges nodes of directed graphs into layers (rows or columns).
 There are many samples that use LayeredDigraphLayout.
                      
 
                      
 If you want to experiment interactively with most of the properties, try the Layered Digraph Layout sample.
diff --git a/api/symbols/LayeredDigraphNetwork.html b/api/symbols/LayeredDigraphNetwork.html
index a229f2f54..0b040300f 100644
--- a/api/symbols/LayeredDigraphNetwork.html
+++ b/api/symbols/LayeredDigraphNetwork.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class LayeredDigraphNetworkUnindexed 
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      Hierarchy
                      This class represents an abstract graph of LayeredDigraphVertexes and LayeredDigraphEdges
+  });
                      Class LayeredDigraphNetworkUnindexed 
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      Hierarchy
                      This class represents an abstract graph of LayeredDigraphVertexes and LayeredDigraphEdges
 that can be constructed based on the Nodes and Links of a Diagram
 so that the LayeredDigraphLayout can operate independently of the diagram until it
 is time to commit any node positioning or link routing.
                      
diff --git a/api/symbols/LayeredDigraphPack.html b/api/symbols/LayeredDigraphPack.html
index 767728248..80d447727 100644
--- a/api/symbols/LayeredDigraphPack.html
+++ b/api/symbols/LayeredDigraphPack.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Enumeration LayeredDigraphPack
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      These enumerated values can be bitwise combined as values for the LayeredDigraphLayout.packOption property,
+  });
                      Enumeration LayeredDigraphPack
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      These enumerated values can be bitwise combined as values for the LayeredDigraphLayout.packOption property,
 which controls how much and what kinds of effort LayeredDigraphLayout makes during straightening and packing
 when not using LayeredDigraphLayout.alignOption.
                      
 
                      We recommend using LayeredDigraphLayout.alignOption for better alignment and speed.
                      
diff --git a/api/symbols/LayeredDigraphVertex.html b/api/symbols/LayeredDigraphVertex.html
index 54f680966..42540075f 100644
--- a/api/symbols/LayeredDigraphVertex.html
+++ b/api/symbols/LayeredDigraphVertex.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class LayeredDigraphVertexUnindexed 
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      Hierarchy
                      This holds LayeredDigraphLayout-specific information about Nodes.
                      
+  });
                      Class LayeredDigraphVertexUnindexed 
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      Hierarchy
                      This holds LayeredDigraphLayout-specific information about Nodes.
                      
 
                      This class inherits from LayoutVertex.
                      
 
                       Index
                      Constructors
                      constructor
 
                      Accessors
                      column
diff --git a/api/symbols/Layout.html b/api/symbols/Layout.html
index 66430ded1..30653ccf6 100644
--- a/api/symbols/Layout.html
+++ b/api/symbols/Layout.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class Layout
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      Hierarchy
                      This is the base class for all of the predefined diagram layout implementations.
+  });
                      Class Layout
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      Hierarchy
                      This is the base class for all of the predefined diagram layout implementations.
 They only arrange Parts (primarily Nodes and Links) in a Diagram,
 not to GraphObjects in Panels (i.e. panel layout).
                      
 
                      The layout classes include TreeLayout, ForceDirectedLayout,
diff --git a/api/symbols/LayoutConditions.html b/api/symbols/LayoutConditions.html
index d2e2260d7..5cf4512b3 100644
--- a/api/symbols/LayoutConditions.html
+++ b/api/symbols/LayoutConditions.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Enumeration LayoutConditions
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      This enumeration specifies possible values for Part.layoutConditions. These values can be combined as flags.
                      
+  });
                      Enumeration LayoutConditions
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      This enumeration specifies possible values for Part.layoutConditions. These values can be combined as flags.
                      
 
                      since
                      3.0
                      
 
                       Index
                      Enumeration Members
                      Added
 GroupLayout
diff --git a/api/symbols/LayoutEdge.html b/api/symbols/LayoutEdge.html
index d64ec2690..659365a87 100644
--- a/api/symbols/LayoutEdge.html
+++ b/api/symbols/LayoutEdge.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class LayoutEdge
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      Hierarchy
                      An edge represents a Link in a LayoutNetwork,
+  });
                      Class LayoutEdge
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      Hierarchy
                      An edge represents a Link in a LayoutNetwork,
 along with its fromVertex and toVertex.
 The link property may be null for edges that represent "dummy" links,
 when the layout wants to work with a network that is not isomorphic with the collection of Nodes and Links being laid out.
                      
diff --git a/api/symbols/LayoutNetwork.html b/api/symbols/LayoutNetwork.html
index b19d1bf91..83ca3c892 100644
--- a/api/symbols/LayoutNetwork.html
+++ b/api/symbols/LayoutNetwork.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class LayoutNetwork
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      Hierarchy
                      This provides an abstract view of a diagram as a
+  });
                      Class LayoutNetwork
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      Hierarchy
                      This provides an abstract view of a diagram as a
 network (graph) of vertexes and directed edges.
 The network contains vertexes and edges corresponding to Nodes and Links.
                      
 
                      This class provides a framework for manipulating the
diff --git a/api/symbols/LayoutVertex.html b/api/symbols/LayoutVertex.html
index 4e9f00303..b68d36579 100644
--- a/api/symbols/LayoutVertex.html
+++ b/api/symbols/LayoutVertex.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class LayoutVertex
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      Hierarchy
                      A vertex represents a Node in a LayoutNetwork,
+  });
                      Class LayoutVertex
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      Hierarchy
                      A vertex represents a Node in a LayoutNetwork,
 along with its bounds and focus and collections of LayoutEdges that come into and go out of the vertex.
 The node property may be null for vertexes that represent "dummy" nodes,
 when the layout wants to work with a network that is not isomorphic with the collection of Nodes and Links being laid out.
                      
diff --git a/api/symbols/Link.html b/api/symbols/Link.html
index 65ef7dc61..2f1c0a641 100644
--- a/api/symbols/Link.html
+++ b/api/symbols/Link.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class Link
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      Hierarchy
                      A Link is a Part that connects Nodes.
+  });
                      Class Link
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      Hierarchy
                      A Link is a Part that connects Nodes.
 The link relationship is directional, going from Link.fromNode to Link.toNode.
 A link can connect to a specific port element in a node, as named by the Link.fromPortId
 and Link.toPortId properties.
                      
diff --git a/api/symbols/LinkAdjusting.html b/api/symbols/LinkAdjusting.html
index a7d1140dc..7dd7cef4b 100644
--- a/api/symbols/LinkAdjusting.html
+++ b/api/symbols/LinkAdjusting.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Enumeration LinkAdjusting
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      This enumeration specifies possible values for Link.adjusting.
                      
+  });
                      Enumeration LinkAdjusting
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      This enumeration specifies possible values for Link.adjusting.
                      
 
                      since
                      3.0
                      
 
                       Index
                      Enumeration Members
                      End
 None
diff --git a/api/symbols/LinkLabelDraggingTool.html b/api/symbols/LinkLabelDraggingTool.html
index 0d23d6c1d..aa93b2ef4 100644
--- a/api/symbols/LinkLabelDraggingTool.html
+++ b/api/symbols/LinkLabelDraggingTool.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class LinkLabelDraggingTool
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.
                      Hierarchy
                      • Tool
                        • LinkLabelDraggingTool
                      The LinkLabelDraggingTool class lets the user move a label on a go.Link.
                      
+  });
                      Class LinkLabelDraggingTool
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.
                      Hierarchy
                      • Tool
                        • LinkLabelDraggingTool
                      The LinkLabelDraggingTool class lets the user move a label on a go.Link.
                      
 
                      This tool only works when the Link has a label
 that is positioned at the go.Link.midPoint plus some offset.
 It does not work for labels that have a particular go.GraphObject.segmentIndex.
                      
diff --git a/api/symbols/LinkLabelOnPathDraggingTool.html b/api/symbols/LinkLabelOnPathDraggingTool.html
index 14c5b7ec0..ce37e79bd 100644
--- a/api/symbols/LinkLabelOnPathDraggingTool.html
+++ b/api/symbols/LinkLabelOnPathDraggingTool.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class LinkLabelOnPathDraggingTool
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.
                      Hierarchy
                      • Tool
                        • LinkLabelOnPathDraggingTool
                      The LinkLabelOnPathDraggingTool class lets the user move a label on a go.Link while keeping the label on the link's path.
+  });
                      Class LinkLabelOnPathDraggingTool
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.
                      Hierarchy
                      • Tool
                        • LinkLabelOnPathDraggingTool
                      The LinkLabelOnPathDraggingTool class lets the user move a label on a go.Link while keeping the label on the link's path.
 This tool only works when the Link has a label marked by the "_isLinkLabel" property.
                      
 
                      If you want to experiment with this extension, try the Link Label On Path Dragging sample.
                      
 
                       Index
                      Constructors
                      constructor
diff --git a/api/symbols/LinkLabelRouter.html b/api/symbols/LinkLabelRouter.html
index ba5dfe166..23536eadb 100644
--- a/api/symbols/LinkLabelRouter.html
+++ b/api/symbols/LinkLabelRouter.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class LinkLabelRouter
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.
                      Hierarchy
                      A custom Router for reducing overlaps between label objects on links by moving them apart with a custom ForceDirectedLayout.
+  });
                      Class LinkLabelRouter
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.
                      Hierarchy
                      A custom Router for reducing overlaps between label objects on links by moving them apart with a custom ForceDirectedLayout.
 You can modify the properties of that Layout by setting layoutProps in the constructor.
                      
 
                      By default, this router considers a "link label" to be any GraphObject that is part of a Link which is not a path Shape
 or an arrowhead. You can customize objects that the router operates on by overriding LinkLabelRouter.isLabel.
                      
diff --git a/api/symbols/LinkReshapingTool.html b/api/symbols/LinkReshapingTool.html
index 8ac016c42..d8082707f 100644
--- a/api/symbols/LinkReshapingTool.html
+++ b/api/symbols/LinkReshapingTool.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class LinkReshapingTool
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      Hierarchy
                      The LinkReshapingTool is used to interactively change the route of a Link
+  });
                      Class LinkReshapingTool
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      Hierarchy
                      The LinkReshapingTool is used to interactively change the route of a Link
 by setting its Link.points list.
 You may want to save the route to the model by using a TwoWay Binding on the "points" property of the Link.
                      
 
                      This tool makes use of an Adornment, shown when the adorned Link is selected,
diff --git a/api/symbols/LinkShiftingTool.html b/api/symbols/LinkShiftingTool.html
index c41fc0649..3279e9a87 100644
--- a/api/symbols/LinkShiftingTool.html
+++ b/api/symbols/LinkShiftingTool.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class LinkShiftingTool
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.
                      Hierarchy
                      • Tool
                        • LinkShiftingTool
                      The LinkShiftingTool class lets the user shift the end of a link to be anywhere along the edges of the port;
+  });
                      Class LinkShiftingTool
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.
                      Hierarchy
                      • Tool
                        • LinkShiftingTool
                      The LinkShiftingTool class lets the user shift the end of a link to be anywhere along the edges of the port;
 use it in a diagram.toolManager.mouseDownTools list:
                      
 
                      myDiagram.toolManager.mouseDownTools.add(new LinkShiftingTool());
 
                      
diff --git a/api/symbols/LinkingBaseTool.html b/api/symbols/LinkingBaseTool.html
index 42ecb0215..66354d094 100644
--- a/api/symbols/LinkingBaseTool.html
+++ b/api/symbols/LinkingBaseTool.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class LinkingBaseToolAbstract 
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      Hierarchy
                      This abstract class is the base class for the LinkingTool and RelinkingTool classes.
                      
+  });
                      Class LinkingBaseToolAbstract 
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      Hierarchy
                      This abstract class is the base class for the LinkingTool and RelinkingTool classes.
                      
 
                      This class includes properties for defining and accessing any temporary nodes and temporary link
 that are used during any linking operation, as well as access to the existing diagram's nodes and link
 (if any) that are involved with the linking operation.
                      
diff --git a/api/symbols/LinkingDirection.html b/api/symbols/LinkingDirection.html
index 745f4e3ab..92cd7cc43 100644
--- a/api/symbols/LinkingDirection.html
+++ b/api/symbols/LinkingDirection.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Enumeration LinkingDirection
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      This enumeration specifies possible values for LinkingTool.direction.
                      
+  });
                      Enumeration LinkingDirection
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      This enumeration specifies possible values for LinkingTool.direction.
                      
 
                      since
                      3.0
                      
 
                       Index
                      Enumeration Members
                      BackwardsOnly
 Either
diff --git a/api/symbols/LinkingTool.html b/api/symbols/LinkingTool.html
index ed38e0d80..28772d818 100644
--- a/api/symbols/LinkingTool.html
+++ b/api/symbols/LinkingTool.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class LinkingTool
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      Hierarchy
                      The LinkingTool lets a user draw a new Link between two ports,
+  });
                      Class LinkingTool
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      Hierarchy
                      The LinkingTool lets a user draw a new Link between two ports,
 using a mouse-drag operation.
                      
 
                      By default an instance of this tool is installed as a mouse-move tool in the
 Diagram.toolManager as the ToolManager.linkingTool.
diff --git a/api/symbols/List.html b/api/symbols/List.html
index 5b10be708..fde2f4968 100644
--- a/api/symbols/List.html
+++ b/api/symbols/List.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class List<T>
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      An ordered iterable collection.
+  });
                      Class List<T>
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      An ordered iterable collection.
 In TypeScript it is a generic class that enforces at compile-time the type of elements that may be added to the List.
                      
 
                      An example usage:
                      
 
                        const list = new go.List();  // or in TypeScript: new go.List<go.Point>();
                        list.add(new go.Point(0, 0));
                        list.add(new go.Point(20, 10));
                        list.add(new go.Point(10, 20));
                        // now list.length === 3
                        // and list.elt(1) instanceof go.Point
diff --git a/api/symbols/LocalStorageCommandHandler.html b/api/symbols/LocalStorageCommandHandler.html
index 871a8c4c9..6fe314ba4 100644
--- a/api/symbols/LocalStorageCommandHandler.html
+++ b/api/symbols/LocalStorageCommandHandler.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class LocalStorageCommandHandler
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.
                      Hierarchy
                      This CommandHandler class uses localStorage as the repository for the clipboard,
+  });
                      Class LocalStorageCommandHandler
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.
                      Hierarchy
                      This CommandHandler class uses localStorage as the repository for the clipboard,
 rather than an in-memory global variable.
 It requires that the go.Diagram.model be serializable and deserializable using go.Model.toJson and go.Model.fromJson.
                      
 
                      The copyToClipboard and pasteFromClipboard functions fall back to using the standard definitions
diff --git a/api/symbols/Map.html b/api/symbols/Map.html
index 788643d28..df834b6b2 100644
--- a/api/symbols/Map.html
+++ b/api/symbols/Map.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class Map<K, V>
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      An unordered iterable collection of key/value pairs that cannot contain two instances of the same key.
+  });
                      Class Map<K, V>
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      An unordered iterable collection of key/value pairs that cannot contain two instances of the same key.
 In TypeScript it is a generic class that enforces at compile-time the type of the key and the type of the associated value.
                      
 
                      To create a Map:
                      
 
                        const map = new go.Map(); // In TypeScript: new go.Map<string, number>();
                        map.set("one", 1);
                        map.set("two", 2);
                        map.set("three", 3);
                        // now map.size === 3
                        // and map.get("two") === 2
                        // and map.has("zero") === false
diff --git a/api/symbols/Margin.html b/api/symbols/Margin.html
index e018f7d57..d9eaf0931 100644
--- a/api/symbols/Margin.html
+++ b/api/symbols/Margin.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class Margin
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      A Margin represents a band of space outside or inside a rectangular area,
+  });
                      Class Margin
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      A Margin represents a band of space outside or inside a rectangular area,
 with possibly different values on each of the four sides.
                      
 
                      Example uses include GraphObject.margin, Panel.padding, and Diagram.padding.
                      
 
                      Use the static functions Margin.parse and Margin.stringify to convert to and from
diff --git a/api/symbols/MarginLike.html b/api/symbols/MarginLike.html
index 06f11a4df..6dbe42d44 100644
--- a/api/symbols/MarginLike.html
+++ b/api/symbols/MarginLike.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Type alias MarginLike
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      The MarginLike type is the same as Margin | number.
+  });
                      Type alias MarginLike
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      The MarginLike type is the same as Margin | number.
 A number in place of a Margin object is treated as a uniform Margin with that thickness.
                      
 
                      Theme
                      Copyright © 1998-2024 by Northwoods Software Corporation.
                      Class Model
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      Hierarchy
                      Models hold the essential data of a diagram, describing the basic entities and their properties and relationships
+  });
                      Class Model
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      Hierarchy
                      Models hold the essential data of a diagram, describing the basic entities and their properties and relationships
 without specifying the appearance and behavior of the Nodes and Links and Groups that represent them visually.
 Models tend to hold only relatively simple data, making them easy to persist by serialization as JSON or XML formatted text.
                      
 
                      Models hold simple data objects, not Parts such as Nodes or Links.
diff --git a/api/symbols/Node.html b/api/symbols/Node.html
index f2e3ad1c2..58d709ca0 100644
--- a/api/symbols/Node.html
+++ b/api/symbols/Node.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class Node
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      Hierarchy
                      A Node is a Part that may connect to other nodes with Links,
+  });
                      Class Node
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      Hierarchy
                      A Node is a Part that may connect to other nodes with Links,
 or that may be a member of a Group.
                      
 
                      Group inherits from Node,
 enabling nodes to logically contain other nodes and links.
                      
diff --git a/api/symbols/NodeLabelDraggingTool.html b/api/symbols/NodeLabelDraggingTool.html
index 636637d43..7eb602a18 100644
--- a/api/symbols/NodeLabelDraggingTool.html
+++ b/api/symbols/NodeLabelDraggingTool.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class NodeLabelDraggingTool
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.
                      Hierarchy
                      • Tool
                        • NodeLabelDraggingTool
                      The NodeLabelDraggingTool class lets the user move a label on a Node.
                      
+  });
                      Class NodeLabelDraggingTool
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.
                      Hierarchy
                      • Tool
                        • NodeLabelDraggingTool
                      The NodeLabelDraggingTool class lets the user move a label on a Node.
                      
 
                      This tool only works when the Node has a label (any GraphObject) marked with
 { _isNodeLabel: true } that is positioned in a Spot Panel.
 It works by modifying that label's go.GraphObject.alignment property to have an
diff --git a/api/symbols/NonRealtimeDraggingTool.html b/api/symbols/NonRealtimeDraggingTool.html
index a4f3c6d32..47735810d 100644
--- a/api/symbols/NonRealtimeDraggingTool.html
+++ b/api/symbols/NonRealtimeDraggingTool.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class NonRealtimeDraggingTool
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.
                      Hierarchy
                      The NonRealtimeDraggingTool class lets the user drag an image instead of actually moving any selected nodes,
+  });
                      Class NonRealtimeDraggingTool
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.
                      Hierarchy
                      The NonRealtimeDraggingTool class lets the user drag an image instead of actually moving any selected nodes,
 until the mouse-up event.
                      
 
                      If you want to experiment with this extension, try the Non Realtime Dragging sample.
                      
 
                       Index
                      Constructors
                      constructor
diff --git a/api/symbols/ObjectData.html b/api/symbols/ObjectData.html
index faa5aa57e..59eff79de 100644
--- a/api/symbols/ObjectData.html
+++ b/api/symbols/ObjectData.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Interface ObjectData
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      The ObjectData type is the same as { [index: string]: any; }.
+  });
                      Interface ObjectData
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      The ObjectData type is the same as { [index: string]: any; }.
 This is to ease writing someDataObject.anyPropertyName,
 when dealing with arbitrary JavaScript Objects used as model data.
                      
 
                      Indexable
                      [index: string]: any
                      Theme
                      Copyright © 1998-2024 by Northwoods Software Corporation.
                      Enumeration Orientation
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      This enumeration specifies possible values for GraphObject.segmentOrientation.
                      
+  });
                      Enumeration Orientation
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      This enumeration specifies possible values for GraphObject.segmentOrientation.
                      
 
                      since
                      3.0
                      
 
                       Index
                      Enumeration Members
                      Along
 Minus90
diff --git a/api/symbols/OrthogonalLinkReshapingTool.html b/api/symbols/OrthogonalLinkReshapingTool.html
index 1ec67e17b..d3d93a76a 100644
--- a/api/symbols/OrthogonalLinkReshapingTool.html
+++ b/api/symbols/OrthogonalLinkReshapingTool.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class OrthogonalLinkReshapingTool
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.
                      Hierarchy
                      The OrthogonalLinkReshapingTool class lets a user drag a tool handle along the link segment, which will move the whole segment.
                      
+  });
                      Class OrthogonalLinkReshapingTool
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.
                      Hierarchy
                      The OrthogonalLinkReshapingTool class lets a user drag a tool handle along the link segment, which will move the whole segment.
                      
 
                      If you want to experiment with this extension, try the Orthogonal Link Reshaping sample.
                      
 
                       Index
                      Constructors
                      constructor
 
                      Methods
                      doActivate
diff --git a/api/symbols/Overview.html b/api/symbols/Overview.html
index b44756f4a..d930c6776 100644
--- a/api/symbols/Overview.html
+++ b/api/symbols/Overview.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class Overview
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      Hierarchy
                      An Overview is a Diagram that displays all of a different diagram,
+  });
                      Class Overview
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      Hierarchy
                      An Overview is a Diagram that displays all of a different diagram,
 with a rectangular box showing the viewport displayed by that other diagram.
                      
 
                      
 For more discussion, see Introduction to Overviews.
diff --git a/api/symbols/OverviewResizingTool.html b/api/symbols/OverviewResizingTool.html
index bd9293461..65c724a32 100644
--- a/api/symbols/OverviewResizingTool.html
+++ b/api/symbols/OverviewResizingTool.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class OverviewResizingTool
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.
                      Hierarchy
                      The OverviewResizingTool class lets the user resize the box within an overview.
                      
+  });
                      Class OverviewResizingTool
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.
                      Hierarchy
                      The OverviewResizingTool class lets the user resize the box within an overview.
                      
 
                      If you want to experiment with this extension, try the Overview Resizing sample.
                      
 
                       Index
                      Constructors
                      constructor
 
                      Methods
                      resize
diff --git a/api/symbols/PackMode.html b/api/symbols/PackMode.html
index e766dcd70..613911f1b 100644
--- a/api/symbols/PackMode.html
+++ b/api/symbols/PackMode.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Enumeration PackMode
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.
                      This enumeration is used to determine the size of the PackedLayout.
+  });
                      Enumeration PackMode
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.
                      This enumeration is used to determine the size of the PackedLayout.
 Used for PackedLayout.packShape.
                      
 
                      Note: this enumeration is only exists in extensionsJSM, not in extensions.
                      
 
                      since
                      3.0
                      
diff --git a/api/symbols/PackShape.html b/api/symbols/PackShape.html
index 53280b889..1c112ee44 100644
--- a/api/symbols/PackShape.html
+++ b/api/symbols/PackShape.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Enumeration PackShape
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.
                      This enumeration is used to determine the shape of the PackedLayout.
+  });
                      Enumeration PackShape
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.
                      This enumeration is used to determine the shape of the PackedLayout.
 Used for PackedLayout.packShape.
                      
 
                      Note: this enumeration is only exists in extensionsJSM, not in extensions.
                      
 
                      since
                      3.0
                      
diff --git a/api/symbols/PackedLayout.html b/api/symbols/PackedLayout.html
index b4e11dde3..88d2b9ae5 100644
--- a/api/symbols/PackedLayout.html
+++ b/api/symbols/PackedLayout.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class PackedLayout
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.
                      Hierarchy
                      Custom layout which attempts to pack nodes as close together as possible
+  });
                      Class PackedLayout
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.
                      Hierarchy
                      Custom layout which attempts to pack nodes as close together as possible
 without overlap.  Each node is assumed to be either rectangular or
 circular (dictated by the hasCircularNodes property). This layout
 supports packing nodes into either a rectangle or an ellipse, with the
diff --git a/api/symbols/Palette.html b/api/symbols/Palette.html
index 6d6c6f719..b22cf2a6c 100644
--- a/api/symbols/Palette.html
+++ b/api/symbols/Palette.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class Palette
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      Hierarchy
                      Palette extends the Diagram class to allow objects to be dragged and placed onto other Diagrams.
+  });
                      Class Palette
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      Hierarchy
                      Palette extends the Diagram class to allow objects to be dragged and placed onto other Diagrams.
 Its Diagram.layout is a GridLayout.
 The Palette is Diagram.isReadOnly but to support drag-and-drop its Diagram.allowDragOut is true.
                      
 
                      
diff --git a/api/symbols/Panel.html b/api/symbols/Panel.html
index 40770a131..e847a40dc 100644
--- a/api/symbols/Panel.html
+++ b/api/symbols/Panel.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class Panel
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      Hierarchy
                      A Panel is a GraphObject that holds other GraphObjects as its elements.
+  });
                      Class Panel
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      Hierarchy
                      A Panel is a GraphObject that holds other GraphObjects as its elements.
 A Panel is responsible for sizing and positioning its elements.
 The elements of a panel are drawn in the order in which they appear in the elements collection.
                      
 
                      The Part class inherits from Panel; Part in turn is the base class of Node and Link.
                      
diff --git a/api/symbols/PanelLayout.html b/api/symbols/PanelLayout.html
index 1af7aace1..01c976fe4 100644
--- a/api/symbols/PanelLayout.html
+++ b/api/symbols/PanelLayout.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class PanelLayoutAbstract 
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      Hierarchy
                      This is the abstract base class for all Panel Layouts, which inform the possible Panel types.
+  });
                      Class PanelLayoutAbstract 
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      Hierarchy
                      This is the abstract base class for all Panel Layouts, which inform the possible Panel types.
 It is possible to create your own Panel type by creating a subclass of PanelLayout,
 though this is not common and not recommended for beginners.
                      
 
                      By default, GoJS has 12 Panel types, each corresponding to a PanelLayout subclass:
                      
diff --git a/api/symbols/PanelLayoutFlow.html b/api/symbols/PanelLayoutFlow.html
index 588aa4eb6..dc9859c6c 100644
--- a/api/symbols/PanelLayoutFlow.html
+++ b/api/symbols/PanelLayoutFlow.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class PanelLayoutFlow
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.
                      Hierarchy
                      A custom go.PanelLayout that arranges panel elements in rows or columns.
+  });
                      Class PanelLayoutFlow
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.
                      Hierarchy
                      A custom go.PanelLayout that arranges panel elements in rows or columns.
 A typical use might be:
                      
 
                      $(go.Node,
                        ...
                        $(go.Panel, "Flow",
                          ... the elements to be laid out in rows with no space between them ...
                        )
                        ...
                      )
 
                      
diff --git a/api/symbols/PanningTool.html b/api/symbols/PanningTool.html
index 0859d63b5..6433cbf34 100644
--- a/api/symbols/PanningTool.html
+++ b/api/symbols/PanningTool.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class PanningTool
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      Hierarchy
                      The PanningTool supports manual panning, where the user can shift the
+  });
                      Class PanningTool
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      Hierarchy
                      The PanningTool supports manual panning, where the user can shift the
 Diagram.position by dragging the mouse.
                      
 
                      This tool is a standard mouse-move tool, the ToolManager.panningTool.
 Although the ToolManager.dragSelectingTool takes precedence over this tool,
diff --git a/api/symbols/ParallelLayout.html b/api/symbols/ParallelLayout.html
index f2d5b9c86..dcdec063d 100644
--- a/api/symbols/ParallelLayout.html
+++ b/api/symbols/ParallelLayout.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class ParallelLayout
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.
                      Hierarchy
                      A custom go.TreeLayout that can be used for laying out stylized flowcharts.
+  });
                      Class ParallelLayout
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.
                      Hierarchy
                      A custom go.TreeLayout that can be used for laying out stylized flowcharts.
 Each layout requires a single 'Split' node and a single 'Merge' node.
 The 'Split' node should be the root of a tree-like structure if one excludes links to the 'Merge' node.
 This will position the 'Merge' node to line up with the 'Split' node.
                      
diff --git a/api/symbols/ParallelRouteLink.html b/api/symbols/ParallelRouteLink.html
index 06d7b8d87..00447c862 100644
--- a/api/symbols/ParallelRouteLink.html
+++ b/api/symbols/ParallelRouteLink.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class ParallelRouteLink
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.
                      Hierarchy
                      • Link
                        • ParallelRouteLink
                      This custom go.Link class customizes its route to go parallel to other links connecting the same ports,
+  });
                      Class ParallelRouteLink
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.
                      Hierarchy
                      • Link
                        • ParallelRouteLink
                      This custom go.Link class customizes its route to go parallel to other links connecting the same ports,
 if the link is not orthogonal and is not Bezier curved.
                      
 
                      If you want to experiment with this extension, try the Parallel Route Links sample.
                      
 
                       Index
                      Constructors
                      constructor
diff --git a/api/symbols/Part.html b/api/symbols/Part.html
index cadb030d3..79fee1163 100644
--- a/api/symbols/Part.html
+++ b/api/symbols/Part.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class Part
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      Hierarchy
                      This is the base class for all user-manipulated top-level objects.
+  });
                      Class Part
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      Hierarchy
                      This is the base class for all user-manipulated top-level objects.
 Because it inherits from Panel, it is automatically a visual container
 of other GraphObjects.
 Because it thus also inherits from GraphObject, it also has properties such as
diff --git a/api/symbols/PathFigure.html b/api/symbols/PathFigure.html
index d28575f3d..420efd1ab 100644
--- a/api/symbols/PathFigure.html
+++ b/api/symbols/PathFigure.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class PathFigure
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      A PathFigure represents a section of a Geometry.
+  });
                      Class PathFigure
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      A PathFigure represents a section of a Geometry.
 It is a single connected series of
 two-dimensional geometric PathSegments.
                      
 
                      The Geometry.figures property is a list of PathFigures.
                      
diff --git a/api/symbols/PathSegment.html b/api/symbols/PathSegment.html
index 959d5b2cb..fbfed4b09 100644
--- a/api/symbols/PathSegment.html
+++ b/api/symbols/PathSegment.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class PathSegment
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      A PathSegment represents a straight line or curved segment of a path between
+  });
                      Class PathSegment
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      A PathSegment represents a straight line or curved segment of a path between
 two or more points that are part of a PathFigure.
 The very first point is given by the PathFigure.startX and PathFigure.startY properties.
 After the first segment the beginning point of the next segment is the same as the end point of the previous segment.
diff --git a/api/symbols/Picture.html b/api/symbols/Picture.html
index c1ebdcfbc..14f5c1767 100644
--- a/api/symbols/Picture.html
+++ b/api/symbols/Picture.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class Picture
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      Hierarchy
                      A Picture is a GraphObject that shows an image, video-frame, or Canvas element.
                      
+  });
                      Class Picture
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      Hierarchy
                      A Picture is a GraphObject that shows an image, video-frame, or Canvas element.
                      
 
                      You can specify what to show by either setting the source URL property
 to a URL string or the element property to an HTMLImageElement,
 HTMLCanvasElement, or HTMLVideoElement.
                      
diff --git a/api/symbols/Placeholder.html b/api/symbols/Placeholder.html
index 6a649de61..ea0b24a5b 100644
--- a/api/symbols/Placeholder.html
+++ b/api/symbols/Placeholder.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class Placeholder
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      Hierarchy
                      If a Placeholder is in the visual tree of a Group, it represents the area of all of the member Parts of that Group.
+  });
                      Class Placeholder
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      Hierarchy
                      If a Placeholder is in the visual tree of a Group, it represents the area of all of the member Parts of that Group.
 If a Placeholder is in the visual tree of an Adornment, it represents the area of the Adornment.adornedObject.
 Unlike other GraphObjects, the Placeholder measures itself based on these criteria, and not on its own desiredSize or scale.
 It will set its own natural bounds and scale, and in the case of Groups will set the Group's location.
                      
diff --git a/api/symbols/Point.html b/api/symbols/Point.html
index 4647d65db..d3981fd87 100644
--- a/api/symbols/Point.html
+++ b/api/symbols/Point.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class Point
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      A Point represents an x- and y-coordinate pair in two-dimensional space.
                      
+  });
                      Class Point
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      A Point represents an x- and y-coordinate pair in two-dimensional space.
                      
 
                      Use the static functions Point.parse and Point.stringify to convert to and from
 a standard string representation that is independent of the current locale.
                      
 
                      When an instance of this class is the value of a property of a GraphObject class or Diagram
diff --git a/api/symbols/PolygonDrawingTool.html b/api/symbols/PolygonDrawingTool.html
index af7334de6..492913d3c 100644
--- a/api/symbols/PolygonDrawingTool.html
+++ b/api/symbols/PolygonDrawingTool.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class PolygonDrawingTool
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.
                      Hierarchy
                      • Tool
                        • PolygonDrawingTool
                      The PolygonDrawingTool class lets the user draw a new polygon or polyline shape by clicking where the corners should go.
+  });
                      Class PolygonDrawingTool
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.
                      Hierarchy
                      • Tool
                        • PolygonDrawingTool
                      The PolygonDrawingTool class lets the user draw a new polygon or polyline shape by clicking where the corners should go.
 Right click or type ENTER to finish the operation.
                      
 
                      Set isPolygon to false if you want this tool to draw open unfilled polyline shapes.
 Set archetypePartData to customize the node data object that is added to the model.
diff --git a/api/symbols/PolylineLinkingTool.html b/api/symbols/PolylineLinkingTool.html
index 4f8480a78..4fe8b3be3 100644
--- a/api/symbols/PolylineLinkingTool.html
+++ b/api/symbols/PolylineLinkingTool.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class PolylineLinkingTool
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.
                      Hierarchy
                      The PolylineLinkingTool class the user to draw a new go.Link by clicking where the route should go,
+  });
                      Class PolylineLinkingTool
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.
                      Hierarchy
                      The PolylineLinkingTool class the user to draw a new go.Link by clicking where the route should go,
 until clicking on a valid target port.
                      
 
                      This tool supports routing both orthogonal and straight links.
 You can customize the go.LinkingBaseTool.temporaryLink as needed to affect the
diff --git a/api/symbols/PortShiftingTool.html b/api/symbols/PortShiftingTool.html
index 66213089b..87149ee73 100644
--- a/api/symbols/PortShiftingTool.html
+++ b/api/symbols/PortShiftingTool.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class PortShiftingTool
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.
                      Hierarchy
                      • Tool
                        • PortShiftingTool
                      The PortShiftingTool class lets a user move a port on a go.Node.
                      
+  });
                      Class PortShiftingTool
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.
                      Hierarchy
                      • Tool
                        • PortShiftingTool
                      The PortShiftingTool class lets a user move a port on a go.Node.
                      
 
                      This tool only works when the Node has a port (any GraphObject) marked with
 a non-null and non-empty portId that is positioned in a Spot Panel,
 and the user holds down the Shift key.
diff --git a/api/symbols/PortSpreading.html b/api/symbols/PortSpreading.html
index daa51b2db..6c048a161 100644
--- a/api/symbols/PortSpreading.html
+++ b/api/symbols/PortSpreading.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Enumeration PortSpreading
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      This enumeration specifies possible values for Node.portSpreading.
                      
+  });
                      Enumeration PortSpreading
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      This enumeration specifies possible values for Node.portSpreading.
                      
 
                      since
                      3.0
                      
 
                       Index
                      Enumeration Members
                      Evenly
 None
diff --git a/api/symbols/Quadtree.html b/api/symbols/Quadtree.html
index ffb48c214..06005e8e4 100644
--- a/api/symbols/Quadtree.html
+++ b/api/symbols/Quadtree.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class Quadtree<T>
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.
                      Implementation of the quadtree data structure using the go.Rect class.
+  });
                      Class Quadtree<T>
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.
                      Implementation of the quadtree data structure using the go.Rect class.
 Each Quadtree has defined bounds found at bounds, an array
 of member rectangles, and an array of child nodes
 (Quadtrees themselves). If the Quadtree has no
diff --git a/api/symbols/RadialLayout.html b/api/symbols/RadialLayout.html
index 4f1cbff74..cfecfd3dc 100644
--- a/api/symbols/RadialLayout.html
+++ b/api/symbols/RadialLayout.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class RadialLayout
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.
                      Hierarchy
                      Given a root go.Node, this arranges connected nodes in concentric rings,
+  });
                      Class RadialLayout
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.
                      Hierarchy
                      Given a root go.Node, this arranges connected nodes in concentric rings,
 layered by the minimum link distance from the root.
                      
 
                      If you want to experiment with this extension, try the Radial Layout sample.
                      
 
                       Index
                      Constructors
                      constructor
diff --git a/api/symbols/RadialVertex.html b/api/symbols/RadialVertex.html
index de0eb2182..89dc1cd6b 100644
--- a/api/symbols/RadialVertex.html
+++ b/api/symbols/RadialVertex.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class RadialVertexUnindexed 
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      Hierarchy
                      RadialVertex, a LayoutVertex that holds additional info
                      
+  });
                      Class RadialVertexUnindexed 
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      Hierarchy
                      RadialVertex, a LayoutVertex that holds additional info
                      
 
                       Index
                      Constructors
                      constructor
 
                      Properties
                      angle
 children
diff --git a/api/symbols/RealtimeDragSelectingTool.html b/api/symbols/RealtimeDragSelectingTool.html
index e63208fcf..c60696992 100644
--- a/api/symbols/RealtimeDragSelectingTool.html
+++ b/api/symbols/RealtimeDragSelectingTool.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class RealtimeDragSelectingTool
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.
                      Hierarchy
                      The RealtimeDragSelectingTool class lets the user select and deselect Parts within the go.DragSelectingTool.box
+  });
                      Class RealtimeDragSelectingTool
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.
                      Hierarchy
                      The RealtimeDragSelectingTool class lets the user select and deselect Parts within the go.DragSelectingTool.box
 during a drag, not just at the end of the drag.
                      
 
                      If you want to experiment with this extension, try the Realtime Drag Selecting sample.
                      
 
                       Index
                      Constructors
                      constructor
diff --git a/api/symbols/Rect.html b/api/symbols/Rect.html
index dab6285f1..a602685d8 100644
--- a/api/symbols/Rect.html
+++ b/api/symbols/Rect.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class Rect
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      A Rect describes a rectangular two-dimensional area as a top-left point (x and y values)
+  });
                      Class Rect
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      A Rect describes a rectangular two-dimensional area as a top-left point (x and y values)
 and a size (width and height values).
                      
 
                      Use the static functions Rect.parse and Rect.stringify to convert to and from
 a standard string representation that is independent of the current locale.
                      
diff --git a/api/symbols/RelinkingTool.html b/api/symbols/RelinkingTool.html
index 1550e8c06..0d944a988 100644
--- a/api/symbols/RelinkingTool.html
+++ b/api/symbols/RelinkingTool.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class RelinkingTool
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      Hierarchy
                      The RelinkingTool allows the user to reconnect an existing Link
+  });
                      Class RelinkingTool
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      Hierarchy
                      The RelinkingTool allows the user to reconnect an existing Link
 if the Link.relinkableTo and/or Link.relinkableFrom properties are true.
                      
 
                      
 For a general discussion of validation, see Introduction to Validation.
diff --git a/api/symbols/RescalingTool.html b/api/symbols/RescalingTool.html
index dc5096644..a084a0399 100644
--- a/api/symbols/RescalingTool.html
+++ b/api/symbols/RescalingTool.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class RescalingTool
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.
                      Hierarchy
                      A custom tool for rescaling an object.
                      
+  });
                      Class RescalingTool
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.
                      Hierarchy
                      A custom tool for rescaling an object.
                      
 
                      Install the RescalingTool as a mouse-down tool by calling:
 myDiagram.toolManager.mouseDownTools.add(new RescalingTool());
                      
 
                      Normally it would not make sense for the same object to be both resizable and rescalable.
                      
diff --git a/api/symbols/ReshapingBehavior.html b/api/symbols/ReshapingBehavior.html
index 44148d9f8..2cd8acddb 100644
--- a/api/symbols/ReshapingBehavior.html
+++ b/api/symbols/ReshapingBehavior.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Enumeration ReshapingBehavior
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      This enumeration specifies possible values for LinkReshapingTool.setReshapingBehavior and LinkReshapingTool.setReshapingBehavior.
                      
+  });
                      Enumeration ReshapingBehavior
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      This enumeration specifies possible values for LinkReshapingTool.setReshapingBehavior and LinkReshapingTool.setReshapingBehavior.
                      
 
                      since
                      3.0
                      
 
                       Index
                      Enumeration Members
                      All
 Horizontal
diff --git a/api/symbols/ResizeMultipleTool.html b/api/symbols/ResizeMultipleTool.html
index f319721e5..cc5e959d0 100644
--- a/api/symbols/ResizeMultipleTool.html
+++ b/api/symbols/ResizeMultipleTool.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class ResizeMultipleTool
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.
                      Hierarchy
                      The ResizeMultipleTool class lets the user resize multiple objects at once.
                      
+  });
                      Class ResizeMultipleTool
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.
                      Hierarchy
                      The ResizeMultipleTool class lets the user resize multiple objects at once.
                      
 
                      If you want to experiment with this extension, try the Resize Multiple sample.
                      
 
                       Index
                      Constructors
                      constructor
 
                      Methods
                      resize
diff --git a/api/symbols/ResizingTool.html b/api/symbols/ResizingTool.html
index 436420303..7cefc52d9 100644
--- a/api/symbols/ResizingTool.html
+++ b/api/symbols/ResizingTool.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class ResizingTool
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      Hierarchy
                      The ResizingTool is used to interactively change the size of a GraphObject
+  });
                      Class ResizingTool
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      Hierarchy
                      The ResizingTool is used to interactively change the size of a GraphObject
 in the selected Part or Node by setting its GraphObject.desiredSize property.
 You may want to save the size to the model by using a TwoWay Binding on the "desiredSize" property
 of the GraphObject that is named by Part.resizeObjectName.
diff --git a/api/symbols/Robot.html b/api/symbols/Robot.html
index 3fadcc956..4e6ebb192 100644
--- a/api/symbols/Robot.html
+++ b/api/symbols/Robot.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class Robot
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.
                      A class for simulating mouse and keyboard input.
                      
+  });
                      Class Robot
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.
                      A class for simulating mouse and keyboard input.
                      
 
                      As a special feature, this supports limited simulation of drag-and-drop between Diagrams,
 by setting both the sourceDiagram and targetDiagram properties
 on the eventprops argument of the mouseDown/mouseMove/mouseUp methods.
diff --git a/api/symbols/RotateMultipleTool.html b/api/symbols/RotateMultipleTool.html
index 9824ace31..9e481919e 100644
--- a/api/symbols/RotateMultipleTool.html
+++ b/api/symbols/RotateMultipleTool.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class RotateMultipleTool
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.
                      Hierarchy
                      The RotateMultipleTool class lets the user rotate multiple objects at a time.
+  });
                      Class RotateMultipleTool
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.
                      Hierarchy
                      The RotateMultipleTool class lets the user rotate multiple objects at a time.
 When more than one part is selected, rotates all parts, revolving them about their collective center.
 If the control key is held down during rotation, rotates all parts individually.
                      
 
                      Caution: this only works for Groups that do not have a Placeholder.
                      
diff --git a/api/symbols/RotatingTool.html b/api/symbols/RotatingTool.html
index e2250804d..e057911c4 100644
--- a/api/symbols/RotatingTool.html
+++ b/api/symbols/RotatingTool.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class RotatingTool
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      Hierarchy
                      The RotatingTool is used to interactively change the GraphObject.angle of a GraphObject
+  });
                      Class RotatingTool
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      Hierarchy
                      The RotatingTool is used to interactively change the GraphObject.angle of a GraphObject
 by setting its GraphObject.angle property.
 You may want to save the angle to the model by using a TwoWay Binding on the "angle" property
 of the GraphObject that is named by Part.rotateObjectName.
                      
diff --git a/api/symbols/Router.html b/api/symbols/Router.html
index 8443bd966..7550e68b1 100644
--- a/api/symbols/Router.html
+++ b/api/symbols/Router.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class RouterAbstract 
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      Hierarchy
                      A Router is a class that is responsible for the paths of a collection of Links.
                      
+  });
                      Class RouterAbstract 
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      Hierarchy
                      A Router is a class that is responsible for the paths of a collection of Links.
                      
 
                      Some routers modify the Link.points of some Links in ways that the default
 routing provided by Link.computePoints cannot, because the latter method
 only considers the properties of the Link and its connected ports -- not other Nodes or Links.
                      
diff --git a/api/symbols/Routing.html b/api/symbols/Routing.html
index 3452a10e2..2ceb2d2ad 100644
--- a/api/symbols/Routing.html
+++ b/api/symbols/Routing.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Enumeration Routing
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      This enumeration specifies possible values for Link.routing.
                      
+  });
                      Enumeration Routing
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      This enumeration specifies possible values for Link.routing.
                      
 
                      since
                      3.0
                      
 
                       Index
                      Enumeration Members
                      AvoidsNodes
 Normal
diff --git a/api/symbols/RowColumnDefinition.html b/api/symbols/RowColumnDefinition.html
index 6b8457be6..b24a20bf9 100644
--- a/api/symbols/RowColumnDefinition.html
+++ b/api/symbols/RowColumnDefinition.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class RowColumnDefinition
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      The RowColumnDefinition class describes constraints on a row or a column
+  });
                      Class RowColumnDefinition
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      The RowColumnDefinition class describes constraints on a row or a column
 in a Panel of type "Table".
 It also provides information about the actual layout after the
 Table Panel has been arranged.
                      
diff --git a/api/symbols/RowResizingTool.html b/api/symbols/RowResizingTool.html
index f6f74768c..4f1b8581d 100644
--- a/api/symbols/RowResizingTool.html
+++ b/api/symbols/RowResizingTool.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class RowResizingTool
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.
                      Hierarchy
                      The RowResizingTool class lets the user resize each row of a named Table Panel in a selected Part.
                      
+  });
                      Class RowResizingTool
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.
                      Hierarchy
                      The RowResizingTool class lets the user resize each row of a named Table Panel in a selected Part.
                      
 
                      If you want to experiment with this extension, try the Column Resizing sample.
                      
 
                       Index
                      Constructors
                      constructor
 
                      Accessors
                      adornedTable
diff --git a/api/symbols/ScrollMode.html b/api/symbols/ScrollMode.html
index 3eb092f7e..d0a4dbce2 100644
--- a/api/symbols/ScrollMode.html
+++ b/api/symbols/ScrollMode.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Enumeration ScrollMode
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      This enumeration specifices how a Diagram can be scrolled.
+  });
                      Enumeration ScrollMode
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      This enumeration specifices how a Diagram can be scrolled.
 Used for Diagram.scrollMode.
                      
 
                      since
                      3.0
                      
 
                       Index
                      Enumeration Members
                      Document
diff --git a/api/symbols/SectorReshapingTool.html b/api/symbols/SectorReshapingTool.html
index 7f7e4dc2b..5e222355f 100644
--- a/api/symbols/SectorReshapingTool.html
+++ b/api/symbols/SectorReshapingTool.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class SectorReshapingTool
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.
                      Hierarchy
                      • Tool
                        • SectorReshapingTool
                      The SectorReshapingTool class lets the user interactively modify the angles of a "pie"-shaped sector of a circle.
+  });
                      Class SectorReshapingTool
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.
                      Hierarchy
                      • Tool
                        • SectorReshapingTool
                      The SectorReshapingTool class lets the user interactively modify the angles of a "pie"-shaped sector of a circle.
 When a node is selected, this shows two handles for changing the angles of the sides of the sector and one handle for changing the radius.
                      
 
                      This depends on there being three data properties, "angle", "sweep", and "radius",
 that hold the needed information to be able to reproduce the sector.
                      
diff --git a/api/symbols/SegmentType.html b/api/symbols/SegmentType.html
index 5aa37075f..48753610b 100644
--- a/api/symbols/SegmentType.html
+++ b/api/symbols/SegmentType.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Enumeration SegmentType
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      This enumeration specifies possible values for PathSegment.type.
                      
+  });
                      Enumeration SegmentType
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      This enumeration specifies possible values for PathSegment.type.
                      
 
                      since
                      3.0
                      
 
                       Index
                      Enumeration Members
                      Arc
 Bezier
diff --git a/api/symbols/SerpentineLayout.html b/api/symbols/SerpentineLayout.html
index c8bf3139e..d8f685188 100644
--- a/api/symbols/SerpentineLayout.html
+++ b/api/symbols/SerpentineLayout.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class SerpentineLayout
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.
                      Hierarchy
                      A custom go.Layout that lays out a chain of nodes in a snake-like fashion.
                      
+  });
                      Class SerpentineLayout
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.
                      Hierarchy
                      A custom go.Layout that lays out a chain of nodes in a snake-like fashion.
                      
 
                      This layout assumes the graph is a chain of Nodes,
 positioning nodes in horizontal rows back and forth, alternating between left-to-right
 and right-to-left within the wrap limit.
diff --git a/api/symbols/Set.html b/api/symbols/Set.html
index b23ff5e4a..e547118a2 100644
--- a/api/symbols/Set.html
+++ b/api/symbols/Set.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class Set<T>
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      An unordered iterable collection that cannot contain two instances of the same value.
+  });
                      Class Set<T>
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      An unordered iterable collection that cannot contain two instances of the same value.
 In TypeScript it is a generic class that enforces at compile-time the type of elements that may be added to the Set.
                      
 
                      An example usage:
                      
 
                        const set = new go.Set();  // In TypeScript: new go.Set<string>();
                        set.add("orange");
                        set.add("apple");
                        set.add("orange");
                        // now set.size === 2
                        // and set.has("orange") === true
                        // and set.has("banana") === false
diff --git a/api/symbols/Shape.html b/api/symbols/Shape.html
index 1a105baa0..ce09149f0 100644
--- a/api/symbols/Shape.html
+++ b/api/symbols/Shape.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class Shape
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      Hierarchy
                      A Shape is a GraphObject that shows a geometric figure.
+  });
                      Class Shape
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      Hierarchy
                      A Shape is a GraphObject that shows a geometric figure.
 The Geometry determines what is drawn;
 the properties fill and stroke
 (and other stroke properties) determine how it is drawn.
                      
diff --git a/api/symbols/Size.html b/api/symbols/Size.html
index dec5eb22e..afed3862b 100644
--- a/api/symbols/Size.html
+++ b/api/symbols/Size.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class Size
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      A Size describes a width and a height in two-dimensional coordinates.
+  });
                      Class Size
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      A Size describes a width and a height in two-dimensional coordinates.
 The width and height must both be non-negative.
                      
 
                      Use the static functions Size.parse and Size.stringify to convert to and from
 a standard string representation that is independent of the current locale.
                      
diff --git a/api/symbols/Sizing.html b/api/symbols/Sizing.html
index 3754c2c8f..ce9481308 100644
--- a/api/symbols/Sizing.html
+++ b/api/symbols/Sizing.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Enumeration Sizing
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      This enumeration specifies how rows and columns deal with extra space.
+  });
                      Enumeration Sizing
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      This enumeration specifies how rows and columns deal with extra space.
 Used for RowColumnDefinition.sizing.
                      
 
                      since
                      3.0
                      
 
                       Index
                      Enumeration Members
                      Default
diff --git a/api/symbols/SnapLinkReshapingTool.html b/api/symbols/SnapLinkReshapingTool.html
index d1eafd422..57f3a0455 100644
--- a/api/symbols/SnapLinkReshapingTool.html
+++ b/api/symbols/SnapLinkReshapingTool.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class SnapLinkReshapingTool
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.
                      Hierarchy
                      The SnapLinkReshapingTool class lets the user snap link reshaping handles to the nearest grid point.
+  });
                      Class SnapLinkReshapingTool
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.
                      Hierarchy
                      The SnapLinkReshapingTool class lets the user snap link reshaping handles to the nearest grid point.
 If avoidsNodes is true and the link is orthogonal,
 it also avoids reshaping the link so that any adjacent segments cross over any avoidable nodes.
                      
 
                      If you want to experiment with this extension, try the Snap Link Reshaping sample.
                      
diff --git a/api/symbols/SortMode.html b/api/symbols/SortMode.html
index 68381706c..615b2e0ee 100644
--- a/api/symbols/SortMode.html
+++ b/api/symbols/SortMode.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Enumeration SortMode
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.
                      This enumeration is used to determine an optional method by which to sort nodes before packing the PackedLayout.
+  });
                      Enumeration SortMode
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.
                      This enumeration is used to determine an optional method by which to sort nodes before packing the PackedLayout.
 Used for PackedLayout.sortMode.
                      
 
                      Note: this enumeration is only exists in extensionsJSM, not in extensions.
                      
 
                      since
                      3.0
                      
diff --git a/api/symbols/SortOrder.html b/api/symbols/SortOrder.html
index 229776311..aed08efbc 100644
--- a/api/symbols/SortOrder.html
+++ b/api/symbols/SortOrder.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Enumeration SortOrder
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.
                      This enumeration is used to determine the order that nodes will be sorted, if applicable, by the PackedLayout.
+  });
                      Enumeration SortOrder
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.
                      This enumeration is used to determine the order that nodes will be sorted, if applicable, by the PackedLayout.
 Used for PackedLayout.sortOrder.
                      
 
                      Note: this enumeration is only exists in extensionsJSM, not in extensions.
                      
 
                      since
                      3.0
                      
diff --git a/api/symbols/SpiralLayout.html b/api/symbols/SpiralLayout.html
index bf09b2c10..65c28a749 100644
--- a/api/symbols/SpiralLayout.html
+++ b/api/symbols/SpiralLayout.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class SpiralLayout
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.
                      Hierarchy
                      A custom go.Layout that lays out a chain of nodes in a spiral.
                      
+  });
                      Class SpiralLayout
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.
                      Hierarchy
                      A custom go.Layout that lays out a chain of nodes in a spiral.
                      
 
                      This layout assumes the graph is a chain of go.Nodes,
 spacing controls the spacing between nodes.
                      
 
                      If you want to experiment with this extension, try the Spiral Layout sample.
                      
diff --git a/api/symbols/Spot.html b/api/symbols/Spot.html
index af51bacca..8bb95ca17 100644
--- a/api/symbols/Spot.html
+++ b/api/symbols/Spot.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class Spot
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      A Spot represents a relative point from (0,0) to (1,1) within the bounds of
+  });
                      Class Spot
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      A Spot represents a relative point from (0,0) to (1,1) within the bounds of
 a rectangular area plus an absolute offset.
                      
 
                      Use the static functions Spot.parse and Spot.stringify to convert to and from
 a standard string representation that is independent of the current locale.
                      
diff --git a/api/symbols/SpotRotatingTool.html b/api/symbols/SpotRotatingTool.html
index fd7617f15..3c8ed3a3b 100644
--- a/api/symbols/SpotRotatingTool.html
+++ b/api/symbols/SpotRotatingTool.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class SpotRotatingTool
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.
                      Hierarchy
                      A custom RotatingTool that also supports the user moving the point about which the object is rotated.
                      
+  });
                      Class SpotRotatingTool
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.
                      Hierarchy
                      A custom RotatingTool that also supports the user moving the point about which the object is rotated.
                      
 
                      Typical usage:
                      
 
                        new go.Diagram(. . .,
                          {
                            rotatingTool: new SpotRotatingTool(),
                            . . .
                          })
 
                      
diff --git a/api/symbols/Stretch.html b/api/symbols/Stretch.html
index 37ccfdfe6..0de89b66a 100644
--- a/api/symbols/Stretch.html
+++ b/api/symbols/Stretch.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Enumeration Stretch
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      This enumeration specifies possible values for GraphObject.stretch.
                      
+  });
                      Enumeration Stretch
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      This enumeration specifies possible values for GraphObject.stretch.
                      
 
                      since
                      3.0
                      
 
                       Index
                      Enumeration Members
                      Default
 Fill
diff --git a/api/symbols/SvgRendererOptions.html b/api/symbols/SvgRendererOptions.html
index 64487a288..218a4b316 100644
--- a/api/symbols/SvgRendererOptions.html
+++ b/api/symbols/SvgRendererOptions.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Interface SvgRendererOptions
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      Hierarchy
                      Used for the options argument to Diagram.makeSvg.
                      
+  });
                      Interface SvgRendererOptions
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      Hierarchy
                      Used for the options argument to Diagram.makeSvg.
                      
 
                       Index
                      Properties
                      elementFinished?
 
                      Properties
                      DiagramRendererOptions.background
 DiagramRendererOptions.callback
diff --git a/api/symbols/SwimLaneLayout.html b/api/symbols/SwimLaneLayout.html
index 4cb730ba9..3f5bc7494 100644
--- a/api/symbols/SwimLaneLayout.html
+++ b/api/symbols/SwimLaneLayout.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class SwimLaneLayout
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.
                      Hierarchy
                      A custom LayeredDigraphLayout that knows about "lanes"
+  });
                      Class SwimLaneLayout
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.
                      Hierarchy
                      A custom LayeredDigraphLayout that knows about "lanes"
 and that positions each node in its respective lane.
                      
 
                      This assumes that each Node.data.lane property is a string that names the lane the node should be in.
 You can set the laneProperty property to use a different data property name.
diff --git a/api/symbols/TableLayout.html b/api/symbols/TableLayout.html
index eabeb96cb..5e293bff9 100644
--- a/api/symbols/TableLayout.html
+++ b/api/symbols/TableLayout.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class TableLayout
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.
                      Hierarchy
                      This go.Layout positions non-Link Parts into a table according to the values of
+  });
                      Class TableLayout
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.
                      Hierarchy
                      This go.Layout positions non-Link Parts into a table according to the values of
 go.GraphObject.row, go.GraphObject.column, go.GraphObject.rowSpan, go.GraphObject.columnSpan,
 go.GraphObject.alignment, go.GraphObject.stretch.
 If the value of GraphObject.stretch is not go.Stretch.None, the Part will be sized
diff --git a/api/symbols/TargetConversion.html b/api/symbols/TargetConversion.html
index 90da1236e..b27c5fae9 100644
--- a/api/symbols/TargetConversion.html
+++ b/api/symbols/TargetConversion.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Type alias TargetConversion
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      For bindings: A side-effect-free function converting the data property value to the value to set the target property.
+  });
                      Type alias TargetConversion
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      For bindings: A side-effect-free function converting the data property value to the value to set the target property.
 If the function is null or not supplied, no conversion takes place.
                      
 
                      Type declaration
                        • (val: any, targetObj: any): any
                        • Parameters
                          • val: any
                          • targetObj: any
                          Returns any
                      Theme
                      Copyright © 1998-2024 by Northwoods Software Corporation.
                      Class TextBlock
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      Hierarchy
                      A TextBlock is a GraphObject that displays a text string in a given font.
                      
+  });
                      Class TextBlock
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      Hierarchy
                      A TextBlock is a GraphObject that displays a text string in a given font.
                      
 
                      The size and appearance of the text is specified by font,
 which takes a well-formed CSS string as its value.
 The order of the CSS properties given is important for cross-browser compatibility,
diff --git a/api/symbols/TextEditingAccept.html b/api/symbols/TextEditingAccept.html
index a2573f1cc..466d12382 100644
--- a/api/symbols/TextEditingAccept.html
+++ b/api/symbols/TextEditingAccept.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Enumeration TextEditingAccept
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      This enumeration specifies possible values for TextEditingTool.acceptText.
                      
+  });
                      Enumeration TextEditingAccept
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      This enumeration specifies possible values for TextEditingTool.acceptText.
                      
 
                      since
                      3.0
                      
 
                       Index
                      Enumeration Members
                      Enter
 LostFocus
diff --git a/api/symbols/TextEditingStarting.html b/api/symbols/TextEditingStarting.html
index 0d4428d85..4a9b7a342 100644
--- a/api/symbols/TextEditingStarting.html
+++ b/api/symbols/TextEditingStarting.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Enumeration TextEditingStarting
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      This enumeration specifies possible values for TextEditingTool.starting.
                      
+  });
                      Enumeration TextEditingStarting
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      This enumeration specifies possible values for TextEditingTool.starting.
                      
 
                      since
                      3.0
                      
 
                       Index
                      Enumeration Members
                      DoubleClick
 SingleClick
diff --git a/api/symbols/TextEditingState.html b/api/symbols/TextEditingState.html
index 2d0fa05b5..4f00283e7 100644
--- a/api/symbols/TextEditingState.html
+++ b/api/symbols/TextEditingState.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Enumeration TextEditingState
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      This enumeration specifies possible values for TextEditingTool.state.
                      
+  });
                      Enumeration TextEditingState
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      This enumeration specifies possible values for TextEditingTool.state.
                      
 
                      since
                      3.0
                      
 
                       Index
                      Enumeration Members
                      Active
 Editing
diff --git a/api/symbols/TextEditingTool.html b/api/symbols/TextEditingTool.html
index 084ce91dc..6ead1f1d7 100644
--- a/api/symbols/TextEditingTool.html
+++ b/api/symbols/TextEditingTool.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class TextEditingTool
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      Hierarchy
                      The TextEditingTool is used to let the user interactively edit text in place.
+  });
                      Class TextEditingTool
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      Hierarchy
                      The TextEditingTool is used to let the user interactively edit text in place.
 This sets the TextBlock.text property; you may want to save the changed text to the model
 by using a TwoWay Binding on the "text" property of editable TextBlocks.
                      
 
                      Typically this is used by setting the TextBlock.editable property to true
diff --git a/api/symbols/TextFormat.html b/api/symbols/TextFormat.html
index 1c8286b3f..65afab66e 100644
--- a/api/symbols/TextFormat.html
+++ b/api/symbols/TextFormat.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Enumeration TextFormat
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      This enumeration specifies possible values for TextBlock.formatting.
                      
+  });
                      Enumeration TextFormat
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      This enumeration specifies possible values for TextBlock.formatting.
                      
 
                      since
                      3.0
                      
 
                       Index
                      Enumeration Members
                      None
 Trim
diff --git a/api/symbols/TextOverflow.html b/api/symbols/TextOverflow.html
index c2769834e..ac7dfe2eb 100644
--- a/api/symbols/TextOverflow.html
+++ b/api/symbols/TextOverflow.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Enumeration TextOverflow
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      This enumeration specifies possible values for TextBlock.overflow.
                      
+  });
                      Enumeration TextOverflow
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      This enumeration specifies possible values for TextBlock.overflow.
                      
 
                      since
                      3.0
                      
 
                       Index
                      Enumeration Members
                      Clip
 Ellipsis
diff --git a/api/symbols/Theme.html b/api/symbols/Theme.html
index 2e8cbc349..17bd1f030 100644
--- a/api/symbols/Theme.html
+++ b/api/symbols/Theme.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Interface Theme
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      An interface describing a theme.
                      
+  });
                      Interface Theme
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      An interface describing a theme.
                      
 
                      The various optional properties this interface provides are the default
 object names used to lookup some binding target properties. For example,
 Panel.padding is looked up in the margins object and
diff --git a/api/symbols/ThemeBinding.html b/api/symbols/ThemeBinding.html
index 1daffbb4d..2724a4dff 100644
--- a/api/symbols/ThemeBinding.html
+++ b/api/symbols/ThemeBinding.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class ThemeBinding
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      Hierarchy
                      A ThemeBinding describes how to automatically set a property on a GraphObject
+  });
                      Class ThemeBinding
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      Hierarchy
                      A ThemeBinding describes how to automatically set a property on a GraphObject
 to a value of a property in a Theme.
 The target property name and the data source property name must be strings.
 All name matching is case-sensitive.
                      
diff --git a/api/symbols/ThemeColors.html b/api/symbols/ThemeColors.html
index f5f14c181..d88014ae9 100644
--- a/api/symbols/ThemeColors.html
+++ b/api/symbols/ThemeColors.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Interface ThemeColors
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      An interface describing an object with string or number keys and BrushLike values.
                      
+  });
                      Interface ThemeColors
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      An interface describing an object with string or number keys and BrushLike values.
                      
 
                      The optional properties on this interface outline various values used by default templates.
                      
 
                      Setting these values allows for some customization of built in templates without providing new
 definitions. For example, one could use the default link template and customize the color:
                      
diff --git a/api/symbols/ThemeManager.html b/api/symbols/ThemeManager.html
index 20bfa298c..5b067deab 100644
--- a/api/symbols/ThemeManager.html
+++ b/api/symbols/ThemeManager.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class ThemeManager
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      This class is responsible for managing a Diagram's theming (or multiple Diagrams, if shared).
                      
+  });
                      Class ThemeManager
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      This class is responsible for managing a Diagram's theming (or multiple Diagrams, if shared).
                      
 
                      Read more about theming at Theming.
                      
 
                      Your templates can make use of the values held by the current Theme by calling
 GraphObject.theme or GraphObject.themeData or GraphObject.themeModel methods,
diff --git a/api/symbols/ThemeValues.html b/api/symbols/ThemeValues.html
index 791149e02..78ba0d38d 100644
--- a/api/symbols/ThemeValues.html
+++ b/api/symbols/ThemeValues.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Interface ThemeValues<T>
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      An interface describing an object with string or number keys and values of a given type.
                      
+  });
                      Interface ThemeValues<T>
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      An interface describing an object with string or number keys and values of a given type.
                      
 
                      since
                      3.0
                      
 
                       
                      Type Parameters
                      • T
                       
                      Indexable
                      [index: string]: T
                      Theme
                      Copyright © 1998-2024 by Northwoods Software Corporation.
                      Class Themes
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      This static class specifies the built in themes.
                      
+  });
                      Class Themes
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      This static class specifies the built in themes.
                      
 
                      Light and Dark are the default light and dark themes
 initialized by the ThemeManager. Note that these themes are complete,
 so if you update values in the light theme, you'll also need to update the dark theme since
diff --git a/api/symbols/Tool.html b/api/symbols/Tool.html
index e1c1e2e16..ea41a5462 100644
--- a/api/symbols/Tool.html
+++ b/api/symbols/Tool.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class ToolAbstract 
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      Hierarchy
                      Tools handle mouse, keyboard, and touch events.
+  });
                      Class ToolAbstract 
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      Hierarchy
                      Tools handle mouse, keyboard, and touch events.
 The currently running tool, Diagram.currentTool, receives all input events from the Diagram
 via canonicalized InputEvents.
                      
 
                      
diff --git a/api/symbols/ToolManager.html b/api/symbols/ToolManager.html
index 42175fae1..97b2eaa50 100644
--- a/api/symbols/ToolManager.html
+++ b/api/symbols/ToolManager.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class ToolManager
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      Hierarchy
                      This special Tool is responsible for managing all of the Diagram's
+  });
                      Class ToolManager
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      Hierarchy
                      This special Tool is responsible for managing all of the Diagram's
 mode-less tools, which you can access as the Diagram.toolManager.
                      
 
                      Mode-less tools are tools that are present in one of the following lists:
 mouseDownTools, mouseMoveTools, or mouseUpTools.
diff --git a/api/symbols/Transaction.html b/api/symbols/Transaction.html
index e647a4b40..343f34e29 100644
--- a/api/symbols/Transaction.html
+++ b/api/symbols/Transaction.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class Transaction
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      A Transaction holds a list of ChangedEvents collected during a transaction,
+  });
                      Class Transaction
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      A Transaction holds a list of ChangedEvents collected during a transaction,
 as the value of the read-only changes property.
                      
 
                      Start a transaction by calling UndoManager.startTransaction
 (or Model.startTransaction or Diagram.startTransaction, which call that method).
diff --git a/api/symbols/TreeAlignment.html b/api/symbols/TreeAlignment.html
index cd34ae3b4..8224cccc7 100644
--- a/api/symbols/TreeAlignment.html
+++ b/api/symbols/TreeAlignment.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Enumeration TreeAlignment
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      This enumeration specifies how to position a parent TreeVertex relative to its children,
+  });
                      Enumeration TreeAlignment
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      This enumeration specifies how to position a parent TreeVertex relative to its children,
 or how to align children in a bus.
 Used for TreeLayout.alignment or TreeLayout.alternateAlignment.
                      
 
                      since
                      3.0
                      
diff --git a/api/symbols/TreeArrangement.html b/api/symbols/TreeArrangement.html
index 676701ae9..e604fc06b 100644
--- a/api/symbols/TreeArrangement.html
+++ b/api/symbols/TreeArrangement.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Enumeration TreeArrangement
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      This enumeration specifies how to position the resulting trees in the document.
+  });
                      Enumeration TreeArrangement
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      This enumeration specifies how to position the resulting trees in the document.
 Used for TreeLayout.arrangement.
                      
 
                      since
                      3.0
                      
 
                       Index
                      Enumeration Members
                      FixedRoots
diff --git a/api/symbols/TreeCompaction.html b/api/symbols/TreeCompaction.html
index d59169bc9..211b50222 100644
--- a/api/symbols/TreeCompaction.html
+++ b/api/symbols/TreeCompaction.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Enumeration TreeCompaction
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      This enumeration specifies how closely packed the children of a node should be.
+  });
                      Enumeration TreeCompaction
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      This enumeration specifies how closely packed the children of a node should be.
 Used for TreeLayout.compaction or TreeLayout.alternateCompaction.
                      
 
                      since
                      3.0
                      
 
                       Index
                      Enumeration Members
                      Block
diff --git a/api/symbols/TreeEdge.html b/api/symbols/TreeEdge.html
index 02e3c8668..c0d482cea 100644
--- a/api/symbols/TreeEdge.html
+++ b/api/symbols/TreeEdge.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class TreeEdgeUnindexed 
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      Hierarchy
                      This holds TreeLayout-specific information about Links.
                      
+  });
                      Class TreeEdgeUnindexed 
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      Hierarchy
                      This holds TreeLayout-specific information about Links.
                      
 
                      This class inherits from LayoutEdge.
                      
 
                       Index
                      Constructors
                      constructor
 
                      Accessors
                      fromVertex
diff --git a/api/symbols/TreeLayerStyle.html b/api/symbols/TreeLayerStyle.html
index 850dbaf4d..9a4f0b587 100644
--- a/api/symbols/TreeLayerStyle.html
+++ b/api/symbols/TreeLayerStyle.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Enumeration TreeLayerStyle
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      This enumeration specifies the manner in which nodes are placed into layers.
+  });
                      Enumeration TreeLayerStyle
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      This enumeration specifies the manner in which nodes are placed into layers.
 Used for TreeLayout.layerStyle.
                      
 
                      since
                      3.0
                      
 
                       Index
                      Enumeration Members
                      Individual
diff --git a/api/symbols/TreeLayout.html b/api/symbols/TreeLayout.html
index fe7957eab..075da3956 100644
--- a/api/symbols/TreeLayout.html
+++ b/api/symbols/TreeLayout.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class TreeLayout
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      Hierarchy
                      This layout positions nodes of a tree-structured graph in layers (rows or columns).
                      
+  });
                      Class TreeLayout
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      Hierarchy
                      This layout positions nodes of a tree-structured graph in layers (rows or columns).
                      
 
                      
 For a discussion and examples of the most commonly used properties, see Trees page in the Introduction.
 If you want to experiment interactively with most of the properties, try the Tree Layout sample.
diff --git a/api/symbols/TreeMapLayout.html b/api/symbols/TreeMapLayout.html
index 483dc126b..37047cbea 100644
--- a/api/symbols/TreeMapLayout.html
+++ b/api/symbols/TreeMapLayout.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class TreeMapLayout
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.
                      Hierarchy
                      A custom go.Layout that lays out hierarchical data using nested rectangles.
                      
+  });
                      Class TreeMapLayout
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.
                      Hierarchy
                      A custom go.Layout that lays out hierarchical data using nested rectangles.
                      
 
                      If you want to experiment with this extension, try the TreeMap Layout sample.
                      
 
                       Index
                      Constructors
                      constructor
 
                      Accessors
                      isTopLevelHorizontal
diff --git a/api/symbols/TreeModel.html b/api/symbols/TreeModel.html
index ede846207..9ea149759 100644
--- a/api/symbols/TreeModel.html
+++ b/api/symbols/TreeModel.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class TreeModel
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      Hierarchy
                      TreeModels support tree-structured graphs of nodes and links.
+  });
                      Class TreeModel
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      Hierarchy
                      TreeModels support tree-structured graphs of nodes and links.
 Each node can have at most one "tree parent"; cycles are not permitted.
 The reference to the parent node's key is a property of the child node data.
                      
 
                      TreeModels, unlike GraphLinksModels, do not support arbitrary link relationships between nodes,
diff --git a/api/symbols/TreeNetwork.html b/api/symbols/TreeNetwork.html
index f4e3c9b84..fed3516f5 100644
--- a/api/symbols/TreeNetwork.html
+++ b/api/symbols/TreeNetwork.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class TreeNetworkUnindexed 
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      Hierarchy
                      This class represents an abstract graph of TreeVertexes and TreeEdges
+  });
                      Class TreeNetworkUnindexed 
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      Hierarchy
                      This class represents an abstract graph of TreeVertexes and TreeEdges
 that can be constructed based on the Nodes and Links of a Diagram
 so that the TreeLayout can operate independently of the diagram until it
 is time to commit any node positioning or link routing.
                      
diff --git a/api/symbols/TreePath.html b/api/symbols/TreePath.html
index e3815653f..86f8a5535 100644
--- a/api/symbols/TreePath.html
+++ b/api/symbols/TreePath.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Enumeration TreePath
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      This enumeration specifies how to build a tree from the TreeNetwork.
+  });
                      Enumeration TreePath
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      This enumeration specifies how to build a tree from the TreeNetwork.
 Used for TreeLayout.path.
                      
 
                      since
                      3.0
                      
 
                       Index
                      Enumeration Members
                      Default
diff --git a/api/symbols/TreeSorting.html b/api/symbols/TreeSorting.html
index c12b74c57..81978e912 100644
--- a/api/symbols/TreeSorting.html
+++ b/api/symbols/TreeSorting.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Enumeration TreeSorting
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      This enumeration specifies whether to sort the children of a node, and in what order to position them.
+  });
                      Enumeration TreeSorting
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      This enumeration specifies whether to sort the children of a node, and in what order to position them.
 Used for TreeLayout.sorting or TreeLayout.alternateSorting.
                      
 
                      since
                      3.0
                      
 
                       Index
                      Enumeration Members
                      Ascending
diff --git a/api/symbols/TreeStyle.html b/api/symbols/TreeStyle.html
index 37e1aa9da..8ff5f180f 100644
--- a/api/symbols/TreeStyle.html
+++ b/api/symbols/TreeStyle.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Enumeration TreeStyle
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      This enumeration specifies the general style in which the nodes are laid out.
+  });
                      Enumeration TreeStyle
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      This enumeration specifies the general style in which the nodes are laid out.
 Used for TreeLayout.treeStyle.
                      
 
                      since
                      3.0
                      
 
                       Index
                      Enumeration Members
                      Alternating
diff --git a/api/symbols/TreeVertex.html b/api/symbols/TreeVertex.html
index 995f09748..728ea0e03 100644
--- a/api/symbols/TreeVertex.html
+++ b/api/symbols/TreeVertex.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class TreeVertexUnindexed 
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      Hierarchy
                      This holds TreeLayout-specific information about Nodes.
                      
+  });
                      Class TreeVertexUnindexed 
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      Hierarchy
                      This holds TreeLayout-specific information about Nodes.
                      
 
                      This class inherits from LayoutVertex.
                      
 
                       Index
                      Constructors
                      constructor
 
                      Accessors
                      alignment
diff --git a/api/symbols/TriggerStart.html b/api/symbols/TriggerStart.html
index 5ffbbe519..4273d76c6 100644
--- a/api/symbols/TriggerStart.html
+++ b/api/symbols/TriggerStart.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Enumeration TriggerStart
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      This enumeration specifices how an animation should be triggered.
+  });
                      Enumeration TriggerStart
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      This enumeration specifices how an animation should be triggered.
 Used for AnimationTrigger.startCondition.
                      
 
                      since
                      3.0
                      
 
                       Index
                      Enumeration Members
                      Bundled
diff --git a/api/symbols/UndoManager.html b/api/symbols/UndoManager.html
index 6160f043a..94a9e2ea0 100644
--- a/api/symbols/UndoManager.html
+++ b/api/symbols/UndoManager.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class UndoManager
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      An UndoManager observes and records model and diagram changes in transactions and
+  });
                      Class UndoManager
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      An UndoManager observes and records model and diagram changes in transactions and
 supports undo/redo operations.
 You will need to set the isEnabled property to true in order for
 the UndoManager to record changes and for users to perform an undo or a redo.
                      
diff --git a/api/symbols/ViewboxStretch.html b/api/symbols/ViewboxStretch.html
index 27bd685c5..c0ae3be54 100644
--- a/api/symbols/ViewboxStretch.html
+++ b/api/symbols/ViewboxStretch.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Enumeration ViewboxStretch
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      This enumeration specifies possible values for Panel.viewboxStretch.
                      
+  });
                      Enumeration ViewboxStretch
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      This enumeration specifies possible values for Panel.viewboxStretch.
                      
 
                      since
                      3.0
                      
 
                       Index
                      Enumeration Members
                      Uniform
 UniformToFill
diff --git a/api/symbols/WheelMode.html b/api/symbols/WheelMode.html
index af0bfc102..0b97a510a 100644
--- a/api/symbols/WheelMode.html
+++ b/api/symbols/WheelMode.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Enumeration WheelMode
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      This enumeration specifies possible values for ToolManager.mouseWheelBehavior.
                      
+  });
                      Enumeration WheelMode
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      This enumeration specifies possible values for ToolManager.mouseWheelBehavior.
                      
 
                      since
                      3.0
                      
 
                       Index
                      Enumeration Members
                      None
 Scroll
diff --git a/api/symbols/Wrap.html b/api/symbols/Wrap.html
index d12ecaa5d..dd729ab8e 100644
--- a/api/symbols/Wrap.html
+++ b/api/symbols/Wrap.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Enumeration Wrap
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      This enumeration specifies possible values for TextBlock.wrap.
                      
+  });
                      Enumeration Wrap
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      This enumeration specifies possible values for TextBlock.wrap.
                      
 
                      since
                      3.0
                      
 
                       Index
                      Enumeration Members
                      BreakAll
 DesiredSize
diff --git a/api/symbols/ZoomSlider.html b/api/symbols/ZoomSlider.html
index 35459094b..58b49ef28 100644
--- a/api/symbols/ZoomSlider.html
+++ b/api/symbols/ZoomSlider.html
@@ -35,7 +35,7 @@
       // set active  element
       // done via active tag below, always API
     }
-  });
                      Class ZoomSlider
                      GoJS® Diagramming Components
                      version 3.0.2
                      by Northwoods Software®
                      This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.
                      This class implements a zoom slider for GoJS diagrams.
+  });
                      Class ZoomSlider
                      GoJS® Diagramming Components
                      version 3.0.3
                      by Northwoods Software®
                      This is an extension and not part of the main GoJS library. Note that the API for this class may change at any time. If you intend to use an extension in production, you should copy the code to your own source directory. See the Extensions intro page for more information.
                      This class implements a zoom slider for GoJS diagrams.
 The constructor takes two arguments:
                      
 
                        
 
                      • diagram Diagram a reference to a GoJS Diagram
                        • 
diff --git a/assets/css/style.css b/assets/css/style.css
index 4fa0e7578..4012504ab 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -1 +1 @@
-/*! tailwindcss v3.4.0 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Inter var,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}:root{--topnav-h:72px}*{scrollbar-width:thin}.logo{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.box{margin:1rem;padding:1rem}.bg-danger{--tw-bg-opacity:1;background-color:rgb(254 226 226/var(--tw-bg-opacity))}.bg-info{--tw-bg-opacity:1;background-color:rgb(254 249 195/var(--tw-bg-opacity))}.diagramStyling{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity))}h1{font-size:1.875rem;line-height:2.25rem}h1,h2{margin-top:.75rem;margin-bottom:.75rem;font-weight:700;letter-spacing:-.025em}h2{font-size:1.5rem;line-height:2rem}h3{font-size:1.25rem}h3,h4{margin-top:.75rem;margin-bottom:.75rem;line-height:1.75rem;font-weight:600}h4{font-size:1.125rem}.prose a{border-bottom-width:1px;--tw-border-opacity:1;border-bottom-color:rgb(8 145 178/var(--tw-border-opacity));font-weight:600;text-decoration-line:none}.prose a:hover{border-bottom-width:2px}footer a:hover{--tw-text-opacity:1;color:rgb(8 145 178/var(--tw-text-opacity))}ol,p,ul{margin-bottom:.75rem}ol,ul{list-style-position:inside;list-style-type:disc;padding-left:1rem;padding-right:1rem}input,textarea{border-radius:.125rem;border-width:1px;--tw-border-opacity:1;border-color:rgb(75 85 99/var(--tw-border-opacity))}textarea{padding:.5rem}select{border-radius:.125rem;border-width:1px;--tw-border-opacity:1;border-color:rgb(75 85 99/var(--tw-border-opacity));padding:.25rem}pre{background:#272822;padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em;color:#fff}code[class*=lang],pre[class*=lang],pre[class*=lang] code{background:#272822;color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo,Monaco,Consolas,Andale Mono,Ubuntu Mono,Courier New,monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;hyphens:none}code{border-radius:.125rem;--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity))}canvas:focus,pre code:focus-visible,pre div:focus-visible{outline:2px solid #0000;outline-offset:2px}.\!button,.button,[type=button],button{margin:.25rem;display:inline-block;border-radius:.25rem;--tw-bg-opacity:1;background-color:rgb(31 73 99/var(--tw-bg-opacity));padding:.25rem .5rem;--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity));--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.\!button:hover:not(:disabled),.button:hover:not(:disabled),button:hover:not(:disabled){--tw-bg-opacity:1;background-color:rgb(98 127 145/var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity));--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.bigger{margin-top:.5rem;margin-bottom:.5rem;padding:1rem;font-weight:700}#topnavList a{padding-left:.5rem;padding-right:.5rem;line-height:calc(var(--topnav-h) - 1px)}#topnavList a:hover{--tw-text-opacity:1;color:rgb(8 145 178/var(--tw-text-opacity))}@media (min-width:1024px){#topnavList a{padding-left:1rem;padding-right:1rem}}#topnavList a.active{height:var(--topnav-h);border-bottom-width:2px;--tw-border-opacity:1;border-bottom-color:rgb(8 145 178/var(--tw-border-opacity))}.samples-sidebar-nav>a,aside>nav>a{display:block;padding:.25rem .5rem;font-size:.875rem;line-height:1.25rem;font-weight:600;--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity))}.samples-sidebar-nav>a:hover,aside>nav>a:hover{--tw-text-opacity:1;color:rgb(8 145 178/var(--tw-text-opacity))}aside>nav>a.active{border-right-width:2px;--tw-border-opacity:1;border-right-color:rgb(8 145 178/var(--tw-border-opacity))}*,::backdrop,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.visible{visibility:visible}.invisible{visibility:hidden}.collapse{visibility:collapse}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.-inset-2{inset:-.5rem}.-inset-2\.5{inset:-.625rem}.inset-0{inset:0}.bottom-0{bottom:0}.bottom-20{bottom:5rem}.left-0{left:0}.right-0{right:0}.start-1{inset-inline-start:.25rem}.top-0{top:0}.top-5{top:1.25rem}.z-10{z-index:10}.z-30{z-index:30}.z-50{z-index:50}.m-0{margin:0}.mx-auto{margin-left:auto;margin-right:auto}.my-0{margin-top:0;margin-bottom:0}.my-1{margin-top:.25rem;margin-bottom:.25rem}.my-12{margin-top:3rem;margin-bottom:3rem}.my-16{margin-top:4rem;margin-bottom:4rem}.my-3{margin-top:.75rem;margin-bottom:.75rem}.-ml-3{margin-left:-.75rem}.-ml-3\.5{margin-left:-.875rem}.mb-4{margin-bottom:1rem}.ml-1{margin-left:.25rem}.ml-1\.5{margin-left:.375rem}.ml-12{margin-left:3rem}.mr-2{margin-right:.5rem}.mt-1{margin-top:.25rem}.mt-1\.5{margin-top:.375rem}.mt-10{margin-top:2.5rem}.mt-12{margin-top:3rem}.mt-2{margin-top:.5rem}.mt-20{margin-top:5rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.\!table{display:table!important}.table{display:table}.table-cell{display:table-cell}.grid{display:grid}.contents{display:contents}.hidden{display:none}.aspect-square{aspect-ratio:1/1}.h-1{height:.25rem}.h-10{height:2.5rem}.h-12{height:3rem}.h-16{height:4rem}.h-20{height:5rem}.h-3{height:.75rem}.h-4{height:1rem}.h-6{height:1.5rem}.h-7{height:1.75rem}.h-80{height:20rem}.h-\[calc\(var\(--topnav-h\)_-_1px\)\]{height:calc(var(--topnav-h) - 1px)}.h-\[var\(--topnav-h\)\]{height:var(--topnav-h)}.h-full{height:100%}.h-px{height:1px}.max-h-80{max-height:20rem}.max-h-96{max-height:24rem}.max-h-screen{max-height:100vh}.min-h-screen{min-height:100vh}.w-10{width:2.5rem}.w-20{width:5rem}.w-3{width:.75rem}.w-52{width:13rem}.w-6{width:1.5rem}.w-64{width:16rem}.w-7{width:1.75rem}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-5xl{max-width:64rem}.max-w-md{max-width:28rem}.max-w-screen-lg{max-width:1024px}.max-w-screen-xl{max-width:1280px}.max-w-xl{max-width:36rem}.max-w-xs{max-width:20rem}.flex-1{flex:1 1 0%}.flex-auto{flex:1 1 auto}.flex-shrink{flex-shrink:1}.flex-shrink-0{flex-shrink:0}.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.flex-grow,.grow{flex-grow:1}.border-collapse{border-collapse:collapse}.rotate-1{--tw-rotate:1deg}.rotate-1,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.resize{resize:both}.list-none{list-style-type:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-stretch{align-items:stretch}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-4{gap:1rem}.gap-x-3{-moz-column-gap:.75rem;column-gap:.75rem}.gap-x-6{-moz-column-gap:1.5rem;column-gap:1.5rem}.gap-x-8{-moz-column-gap:2rem;column-gap:2rem}.gap-y-10{row-gap:2.5rem}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.overflow-x-hidden{overflow-x:hidden}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.\!border-0{border-width:0!important}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-\[var\(--color-accent\)\]{border-color:var(--color-accent)}.border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity))}.border-slate-200{--tw-border-opacity:1;border-color:rgb(226 232 240/var(--tw-border-opacity))}.border-b-\[var\(--color-accent\)\]{border-bottom-color:var(--color-accent)}.border-b-gray-200{--tw-border-opacity:1;border-bottom-color:rgb(229 231 235/var(--tw-border-opacity))}.border-t-gray-200{--tw-border-opacity:1;border-top-color:rgb(229 231 235/var(--tw-border-opacity))}.bg-\[\#e1cdab\]\/90{background-color:#e1cdabe6}.bg-\[var\(--color-background-secondary\)\]{background-color:var(--color-background-secondary)}.bg-black\/10{background-color:#0000001a}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.bg-gray-900\/90{background-color:#111827e6}.bg-inherit{background-color:inherit}.bg-nwoods-primary{--tw-bg-opacity:1;background-color:rgb(31 73 99/var(--tw-bg-opacity))}.bg-nwoods-secondary{--tw-bg-opacity:1;background-color:rgb(98 127 145/var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-transparent{--tw-gradient-from:#0000 var(--tw-gradient-from-position);--tw-gradient-to:#0000 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.via-\[\#141e37\]\/90{--tw-gradient-to:#141e3700 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#141e37e6 var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-\[whitesmoke\]\/90{--tw-gradient-to:#f5f5f500 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#f5f5f5e6 var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-gray-300{--tw-gradient-to:#d1d5db00 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#d1d5db var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-slate-50\/90{--tw-gradient-to:#f8fafc00 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#f8fafce6 var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-white\/90{--tw-gradient-to:#fff0 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#ffffffe6 var(--tw-gradient-via-position),var(--tw-gradient-to)}.to-transparent{--tw-gradient-to:#0000 var(--tw-gradient-to-position)}.object-cover{-o-object-fit:cover;object-fit:cover}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-4{padding:1rem}.px-0{padding-left:0;padding-right:0}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-3\.5{padding-left:.875rem;padding-right:.875rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.pb-16{padding-bottom:4rem}.pb-24{padding-bottom:6rem}.pl-12{padding-left:3rem}.pl-16{padding-left:4rem}.pl-2{padding-left:.5rem}.pt-4{padding-top:1rem}.text-center{text-align:center}.text-2xl{font-size:1.5rem;line-height:2rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.italic{font-style:italic}.\!leading-\[calc\(var\(--topnav-h\)_-_1px\)\]{line-height:calc(var(--topnav-h) - 1px)!important}.leading-6{line-height:1.5rem}.leading-7{line-height:1.75rem}.leading-8{line-height:2rem}.text-\[var\(--color-text\)\]{color:var(--color-text)}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity))}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity))}.text-nwoods-accent{--tw-text-opacity:1;color:rgb(8 145 178/var(--tw-text-opacity))}.text-nwoods-primary{--tw-text-opacity:1;color:rgb(31 73 99/var(--tw-text-opacity))}.text-red-600{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.underline{text-decoration-line:underline}.line-through{text-decoration-line:line-through}.accent-nwoods-accent{accent-color:#0891b2}.opacity-0{opacity:0}.shadow{--tw-shadow:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-none{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-none{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}.shadow-sm{--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline{outline-style:solid}.ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring,.ring-1{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring-gray-900\/10{--tw-ring-color:#1118271a}.ring-white\/20{--tw-ring-color:#fff3}.blur{--tw-blur:blur(8px)}.blur,.drop-shadow{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.drop-shadow{--tw-drop-shadow:drop-shadow(0 1px 2px #0000001a) drop-shadow(0 1px 1px #0000000f)}.grayscale{--tw-grayscale:grayscale(100%)}.grayscale,.invert{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.invert{--tw-invert:invert(100%)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.before\:absolute:before{content:var(--tw-content);position:absolute}.before\:-inset-2:before{content:var(--tw-content);inset:-.5rem}.before\:-inset-2\.5:before{content:var(--tw-content);inset:-.625rem}.before\:rounded-lg:before{content:var(--tw-content);border-radius:.5rem}.before\:bg-gray-50:before{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity))}.before\:opacity-0:before{content:var(--tw-content);opacity:0}.hover\:\!bg-inherit:hover{background-color:inherit!important}.hover\:bg-black\/20:hover{background-color:#0003}.hover\:bg-white\/95:hover{background-color:#fffffff2}.hover\:\!text-nwoods-accent:hover{--tw-text-opacity:1!important;color:rgb(8 145 178/var(--tw-text-opacity))!important}.hover\:text-nwoods-accent:hover{--tw-text-opacity:1;color:rgb(8 145 178/var(--tw-text-opacity))}.hover\:text-nwoods-accentHover:hover{--tw-text-opacity:1;color:rgb(21 94 117/var(--tw-text-opacity))}.hover\:no-underline:hover{text-decoration-line:none}.hover\:\!shadow-none:hover{--tw-shadow:0 0 #0000!important;--tw-shadow-colored:0 0 #0000!important;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)!important}.hover\:ring-white\/30:hover{--tw-ring-color:#ffffff4d}.hover\:drop-shadow-md:hover{--tw-drop-shadow:drop-shadow(0 4px 3px #00000012) drop-shadow(0 2px 2px #0000000f);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.hover\:before\:opacity-100:hover:before{content:var(--tw-content);opacity:1}.group:hover .group-hover\:-translate-y-1\/4{--tw-translate-y:-25%}.group:hover .group-hover\:-translate-y-1\/4,.group:hover .group-hover\:-translate-y-8{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:-translate-y-8{--tw-translate-y:-2rem}.group:hover .group-hover\:text-nwoods-accent{--tw-text-opacity:1;color:rgb(8 145 178/var(--tw-text-opacity))}.group:hover .group-hover\:opacity-100{opacity:1}@media (min-width:640px){.sm\:max-w-none{max-width:none}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}}@media (min-width:768px){.md\:sticky{position:sticky}.md\:mb-6{margin-bottom:1.5rem}.md\:block{display:block}.md\:hidden{display:none}.md\:min-h-0{min-height:0}.md\:min-h-screen{min-height:100vh}.md\:w-52{width:13rem}.md\:w-full{width:100%}.md\:max-w-none{max-width:none}.md\:max-w-screen-md{max-width:768px}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:items-start{align-items:flex-start}.md\:space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1rem*var(--tw-space-x-reverse));margin-left:calc(1rem*(1 - var(--tw-space-x-reverse)))}.md\:space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem*var(--tw-space-y-reverse))}.md\:overscroll-auto{overscroll-behavior:auto}.md\:border-0{border-width:0}.md\:border-r{border-right-width:1px}.md\:border-r-gray-200{--tw-border-opacity:1;border-right-color:rgb(229 231 235/var(--tw-border-opacity))}.md\:\!bg-inherit{background-color:inherit!important}.md\:bg-inherit{background-color:inherit}.md\:p-0{padding:0}.md\:p-8{padding:2rem}.md\:shadow-none{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}}@media (min-width:1024px){.lg\:order-first{order:-9999}.lg\:col-span-2{grid-column:span 2/span 2}.lg\:mx-8{margin-left:2rem;margin-right:2rem}.lg\:ml-0{margin-left:0}.lg\:mt-20{margin-top:5rem}.lg\:block{display:block}.lg\:max-h-full{max-height:100%}.lg\:min-h-\[520px\]{min-height:520px}.lg\:max-w-2xl{max-width:42rem}.lg\:max-w-screen-xl{max-width:1280px}.lg\:max-w-xl{max-width:36rem}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:flex-row{flex-direction:row}.lg\:items-start{align-items:flex-start}.lg\:p-6{padding:1.5rem}.lg\:px-0{padding-left:0;padding-right:0}.lg\:px-8{padding-left:2rem;padding-right:2rem}.lg\:text-left{text-align:left}.lg\:text-center{text-align:center}.lg\:text-5xl{font-size:3rem;line-height:1}.lg\:text-6xl{font-size:3.75rem;line-height:1}}@media (min-width:1280px){.xl\:gap-x-6{-moz-column-gap:1.5rem;column-gap:1.5rem}}
\ No newline at end of file
+/*! tailwindcss v3.4.0 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Inter var,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}:root{--topnav-h:72px}*{scrollbar-width:thin}.logo{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}.box{margin:1rem;padding:1rem}.bg-danger{--tw-bg-opacity:1;background-color:rgb(254 226 226/var(--tw-bg-opacity))}.bg-info{--tw-bg-opacity:1;background-color:rgb(254 249 195/var(--tw-bg-opacity))}.diagramStyling{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity))}h1{font-size:1.875rem;line-height:2.25rem}h1,h2{margin-top:.75rem;margin-bottom:.75rem;font-weight:700;letter-spacing:-.025em}h2{font-size:1.5rem;line-height:2rem}h3{font-size:1.25rem}h3,h4{margin-top:.75rem;margin-bottom:.75rem;line-height:1.75rem;font-weight:600}h4{font-size:1.125rem}.prose a{border-bottom-width:1px;--tw-border-opacity:1;border-bottom-color:rgb(8 145 178/var(--tw-border-opacity));font-weight:600;text-decoration-line:none}.prose a:hover{border-bottom-width:2px}footer a:hover{--tw-text-opacity:1;color:rgb(8 145 178/var(--tw-text-opacity))}ol,p,ul{margin-bottom:.75rem}ol,ul{list-style-position:inside;list-style-type:disc;padding-left:1rem;padding-right:1rem}input,textarea{border-radius:.125rem;border-width:1px;--tw-border-opacity:1;border-color:rgb(75 85 99/var(--tw-border-opacity))}textarea{padding:.5rem}select{border-radius:.125rem;border-width:1px;--tw-border-opacity:1;border-color:rgb(75 85 99/var(--tw-border-opacity));padding:.25rem}pre{background:#272822;padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em;color:#fff}code[class*=lang],pre[class*=lang],pre[class*=lang] code{background:#272822;color:#d4d4d4;font-size:13px;text-shadow:none;font-family:Menlo,Monaco,Consolas,Andale Mono,Ubuntu Mono,Courier New,monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;hyphens:none}code{border-radius:.125rem;--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity))}canvas:focus,pre code:focus-visible,pre div:focus-visible{outline:2px solid #0000;outline-offset:2px}.\!button,.button,[type=button],button{margin:.25rem;display:inline-block;border-radius:.25rem;--tw-bg-opacity:1;background-color:rgb(31 73 99/var(--tw-bg-opacity));padding:.25rem .5rem;--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity));--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.\!button:disabled,.button:disabled,[type=button]:disabled,button:disabled{opacity:.5}.\!button:hover:not(:disabled),.button:hover:not(:disabled),button:hover:not(:disabled){--tw-bg-opacity:1;background-color:rgb(98 127 145/var(--tw-bg-opacity));--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity));--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.bigger{margin-top:.5rem;margin-bottom:.5rem;padding:1rem;font-weight:700}#topnavList a{padding-left:.5rem;padding-right:.5rem;line-height:calc(var(--topnav-h) - 1px)}#topnavList a:hover{--tw-text-opacity:1;color:rgb(8 145 178/var(--tw-text-opacity))}@media (min-width:1024px){#topnavList a{padding-left:1rem;padding-right:1rem}}#topnavList a.active{height:var(--topnav-h);border-bottom-width:2px;--tw-border-opacity:1;border-bottom-color:rgb(8 145 178/var(--tw-border-opacity))}.samples-sidebar-nav>a,aside>nav>a{display:block;padding:.25rem .5rem;font-size:.875rem;line-height:1.25rem;font-weight:600;--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity))}.samples-sidebar-nav>a:hover,aside>nav>a:hover{--tw-text-opacity:1;color:rgb(8 145 178/var(--tw-text-opacity))}aside>nav>a.active{border-right-width:2px;--tw-border-opacity:1;border-right-color:rgb(8 145 178/var(--tw-border-opacity))}*,::backdrop,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.visible{visibility:visible}.invisible{visibility:hidden}.collapse{visibility:collapse}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.-inset-2{inset:-.5rem}.-inset-2\.5{inset:-.625rem}.inset-0{inset:0}.bottom-0{bottom:0}.bottom-20{bottom:5rem}.left-0{left:0}.right-0{right:0}.start-1{inset-inline-start:.25rem}.top-0{top:0}.top-5{top:1.25rem}.z-10{z-index:10}.z-30{z-index:30}.z-50{z-index:50}.m-0{margin:0}.mx-auto{margin-left:auto;margin-right:auto}.my-0{margin-top:0;margin-bottom:0}.my-1{margin-top:.25rem;margin-bottom:.25rem}.my-12{margin-top:3rem;margin-bottom:3rem}.my-16{margin-top:4rem;margin-bottom:4rem}.my-3{margin-top:.75rem;margin-bottom:.75rem}.-ml-3{margin-left:-.75rem}.-ml-3\.5{margin-left:-.875rem}.mb-4{margin-bottom:1rem}.ml-1{margin-left:.25rem}.ml-1\.5{margin-left:.375rem}.ml-12{margin-left:3rem}.mr-2{margin-right:.5rem}.mt-1{margin-top:.25rem}.mt-1\.5{margin-top:.375rem}.mt-10{margin-top:2.5rem}.mt-12{margin-top:3rem}.mt-2{margin-top:.5rem}.mt-20{margin-top:5rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.\!table{display:table!important}.table{display:table}.table-cell{display:table-cell}.grid{display:grid}.contents{display:contents}.hidden{display:none}.aspect-square{aspect-ratio:1/1}.h-1{height:.25rem}.h-10{height:2.5rem}.h-12{height:3rem}.h-16{height:4rem}.h-20{height:5rem}.h-3{height:.75rem}.h-4{height:1rem}.h-6{height:1.5rem}.h-7{height:1.75rem}.h-80{height:20rem}.h-\[calc\(var\(--topnav-h\)_-_1px\)\]{height:calc(var(--topnav-h) - 1px)}.h-\[var\(--topnav-h\)\]{height:var(--topnav-h)}.h-full{height:100%}.h-px{height:1px}.max-h-80{max-height:20rem}.max-h-96{max-height:24rem}.max-h-screen{max-height:100vh}.min-h-screen{min-height:100vh}.w-10{width:2.5rem}.w-20{width:5rem}.w-3{width:.75rem}.w-52{width:13rem}.w-6{width:1.5rem}.w-64{width:16rem}.w-7{width:1.75rem}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.max-w-3xl{max-width:48rem}.max-w-4xl{max-width:56rem}.max-w-5xl{max-width:64rem}.max-w-md{max-width:28rem}.max-w-screen-lg{max-width:1024px}.max-w-screen-xl{max-width:1280px}.max-w-xl{max-width:36rem}.max-w-xs{max-width:20rem}.flex-1{flex:1 1 0%}.flex-auto{flex:1 1 auto}.flex-shrink{flex-shrink:1}.flex-shrink-0{flex-shrink:0}.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.flex-grow,.grow{flex-grow:1}.border-collapse{border-collapse:collapse}.rotate-1{--tw-rotate:1deg}.rotate-1,.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.resize{resize:both}.list-none{list-style-type:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-stretch{align-items:stretch}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-4{gap:1rem}.gap-x-3{-moz-column-gap:.75rem;column-gap:.75rem}.gap-x-6{-moz-column-gap:1.5rem;column-gap:1.5rem}.gap-x-8{-moz-column-gap:2rem;column-gap:2rem}.gap-y-10{row-gap:2.5rem}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.overflow-x-hidden{overflow-x:hidden}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.\!border-0{border-width:0!important}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-\[var\(--color-accent\)\]{border-color:var(--color-accent)}.border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity))}.border-slate-200{--tw-border-opacity:1;border-color:rgb(226 232 240/var(--tw-border-opacity))}.border-b-\[var\(--color-accent\)\]{border-bottom-color:var(--color-accent)}.border-b-gray-200{--tw-border-opacity:1;border-bottom-color:rgb(229 231 235/var(--tw-border-opacity))}.border-t-gray-200{--tw-border-opacity:1;border-top-color:rgb(229 231 235/var(--tw-border-opacity))}.bg-\[\#e1cdab\]\/90{background-color:#e1cdabe6}.bg-\[var\(--color-background-secondary\)\]{background-color:var(--color-background-secondary)}.bg-black\/10{background-color:#0000001a}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.bg-gray-900\/90{background-color:#111827e6}.bg-inherit{background-color:inherit}.bg-nwoods-primary{--tw-bg-opacity:1;background-color:rgb(31 73 99/var(--tw-bg-opacity))}.bg-nwoods-secondary{--tw-bg-opacity:1;background-color:rgb(98 127 145/var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-transparent{--tw-gradient-from:#0000 var(--tw-gradient-from-position);--tw-gradient-to:#0000 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.via-\[\#141e37\]\/90{--tw-gradient-to:#141e3700 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#141e37e6 var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-\[whitesmoke\]\/90{--tw-gradient-to:#f5f5f500 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#f5f5f5e6 var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-gray-300{--tw-gradient-to:#d1d5db00 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#d1d5db var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-slate-50\/90{--tw-gradient-to:#f8fafc00 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#f8fafce6 var(--tw-gradient-via-position),var(--tw-gradient-to)}.via-white\/90{--tw-gradient-to:#fff0 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),#ffffffe6 var(--tw-gradient-via-position),var(--tw-gradient-to)}.to-transparent{--tw-gradient-to:#0000 var(--tw-gradient-to-position)}.object-cover{-o-object-fit:cover;object-fit:cover}.p-1{padding:.25rem}.p-2{padding:.5rem}.p-4{padding:1rem}.px-0{padding-left:0;padding-right:0}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-3\.5{padding-left:.875rem;padding-right:.875rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.pb-16{padding-bottom:4rem}.pb-24{padding-bottom:6rem}.pl-12{padding-left:3rem}.pl-16{padding-left:4rem}.pl-2{padding-left:.5rem}.pt-4{padding-top:1rem}.text-center{text-align:center}.text-2xl{font-size:1.5rem;line-height:2rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.lowercase{text-transform:lowercase}.italic{font-style:italic}.\!leading-\[calc\(var\(--topnav-h\)_-_1px\)\]{line-height:calc(var(--topnav-h) - 1px)!important}.leading-6{line-height:1.5rem}.leading-7{line-height:1.75rem}.leading-8{line-height:2rem}.text-\[var\(--color-text\)\]{color:var(--color-text)}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity))}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity))}.text-nwoods-accent{--tw-text-opacity:1;color:rgb(8 145 178/var(--tw-text-opacity))}.text-nwoods-primary{--tw-text-opacity:1;color:rgb(31 73 99/var(--tw-text-opacity))}.text-red-600{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.underline{text-decoration-line:underline}.line-through{text-decoration-line:line-through}.accent-nwoods-accent{accent-color:#0891b2}.opacity-0{opacity:0}.shadow{--tw-shadow:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-none{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-none{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}.shadow-sm{--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline{outline-style:solid}.ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring,.ring-1{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring-gray-900\/10{--tw-ring-color:#1118271a}.ring-white\/20{--tw-ring-color:#fff3}.blur{--tw-blur:blur(8px)}.blur,.drop-shadow{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.drop-shadow{--tw-drop-shadow:drop-shadow(0 1px 2px #0000001a) drop-shadow(0 1px 1px #0000000f)}.grayscale{--tw-grayscale:grayscale(100%)}.grayscale,.invert{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.invert{--tw-invert:invert(100%)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.before\:absolute:before{content:var(--tw-content);position:absolute}.before\:-inset-2:before{content:var(--tw-content);inset:-.5rem}.before\:-inset-2\.5:before{content:var(--tw-content);inset:-.625rem}.before\:rounded-lg:before{content:var(--tw-content);border-radius:.5rem}.before\:bg-gray-50:before{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity))}.before\:opacity-0:before{content:var(--tw-content);opacity:0}.hover\:\!bg-inherit:hover{background-color:inherit!important}.hover\:bg-black\/20:hover{background-color:#0003}.hover\:bg-white\/95:hover{background-color:#fffffff2}.hover\:\!text-nwoods-accent:hover{--tw-text-opacity:1!important;color:rgb(8 145 178/var(--tw-text-opacity))!important}.hover\:text-nwoods-accent:hover{--tw-text-opacity:1;color:rgb(8 145 178/var(--tw-text-opacity))}.hover\:text-nwoods-accentHover:hover{--tw-text-opacity:1;color:rgb(21 94 117/var(--tw-text-opacity))}.hover\:no-underline:hover{text-decoration-line:none}.hover\:\!shadow-none:hover{--tw-shadow:0 0 #0000!important;--tw-shadow-colored:0 0 #0000!important;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)!important}.hover\:ring-white\/30:hover{--tw-ring-color:#ffffff4d}.hover\:drop-shadow-md:hover{--tw-drop-shadow:drop-shadow(0 4px 3px #00000012) drop-shadow(0 2px 2px #0000000f);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.hover\:before\:opacity-100:hover:before{content:var(--tw-content);opacity:1}.group:hover .group-hover\:-translate-y-1\/4{--tw-translate-y:-25%}.group:hover .group-hover\:-translate-y-1\/4,.group:hover .group-hover\:-translate-y-8{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:-translate-y-8{--tw-translate-y:-2rem}.group:hover .group-hover\:text-nwoods-accent{--tw-text-opacity:1;color:rgb(8 145 178/var(--tw-text-opacity))}.group:hover .group-hover\:opacity-100{opacity:1}@media (min-width:640px){.sm\:max-w-none{max-width:none}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}}@media (min-width:768px){.md\:sticky{position:sticky}.md\:mb-6{margin-bottom:1.5rem}.md\:block{display:block}.md\:hidden{display:none}.md\:min-h-0{min-height:0}.md\:min-h-screen{min-height:100vh}.md\:w-52{width:13rem}.md\:w-full{width:100%}.md\:max-w-none{max-width:none}.md\:max-w-screen-md{max-width:768px}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:flex-row{flex-direction:row}.md\:items-start{align-items:flex-start}.md\:space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1rem*var(--tw-space-x-reverse));margin-left:calc(1rem*(1 - var(--tw-space-x-reverse)))}.md\:space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem*var(--tw-space-y-reverse))}.md\:overscroll-auto{overscroll-behavior:auto}.md\:border-0{border-width:0}.md\:border-r{border-right-width:1px}.md\:border-r-gray-200{--tw-border-opacity:1;border-right-color:rgb(229 231 235/var(--tw-border-opacity))}.md\:\!bg-inherit{background-color:inherit!important}.md\:bg-inherit{background-color:inherit}.md\:p-0{padding:0}.md\:p-8{padding:2rem}.md\:shadow-none{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}}@media (min-width:1024px){.lg\:order-first{order:-9999}.lg\:col-span-2{grid-column:span 2/span 2}.lg\:mx-8{margin-left:2rem;margin-right:2rem}.lg\:ml-0{margin-left:0}.lg\:mt-20{margin-top:5rem}.lg\:block{display:block}.lg\:max-h-full{max-height:100%}.lg\:min-h-\[520px\]{min-height:520px}.lg\:max-w-2xl{max-width:42rem}.lg\:max-w-screen-xl{max-width:1280px}.lg\:max-w-xl{max-width:36rem}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:flex-row{flex-direction:row}.lg\:items-start{align-items:flex-start}.lg\:p-6{padding:1.5rem}.lg\:px-0{padding-left:0;padding-right:0}.lg\:px-8{padding-left:2rem;padding-right:2rem}.lg\:text-left{text-align:left}.lg\:text-center{text-align:center}.lg\:text-5xl{font-size:3rem;line-height:1}.lg\:text-6xl{font-size:3.75rem;line-height:1}}@media (min-width:1280px){.xl\:gap-x-6{-moz-column-gap:1.5rem;column-gap:1.5rem}}
\ No newline at end of file
diff --git a/changelog.html b/changelog.html
index 642ad77f7..f38daa547 100644
--- a/changelog.html
+++ b/changelog.html
@@ -23,17 +23,17 @@
 
 
 
-
-
-
+
+
+
 
 
-
-
-
+
+
+
 
-
-
+
+
 
 
 
@@ -144,6 +144,17 @@ 
                        GoJS 3.0
                        
 
 
                        There are a number of other changes, detailed below.
                        
 
+
+
                        Changes for 3.0.3
                        
+
                          
+  
                        • 
+    Fixed some Group layouts failing to invalidate links.
+  
                          • 
+  
                        • 
+    Efficiency improvements for AvoidsNodes Routing.
+  
                          • 
+
                        
+
 
                        Changes for 3.0.2
                        
 
                          
   
                        • 
diff --git a/download.html b/download.html
index a37662d62..65ecf6b03 100644
--- a/download.html
+++ b/download.html
@@ -23,17 +23,17 @@
 
 
 
-
-
-
+
+
+
 
 
-
-
-
+
+
+
 
-
-
+
+
 
 
 
diff --git a/extensions/LinkLabelRouter.js b/extensions/LinkLabelRouter.js
index 232d334b5..b9529b8a5 100644
--- a/extensions/LinkLabelRouter.js
+++ b/extensions/LinkLabelRouter.js
@@ -117,12 +117,15 @@ class LinkLabelRouter extends go.Router {
             return;
         if (coll instanceof go.Group)
             return;
+        this.layout.activeSet = links;
         this.layout.doLayout(coll.links);
         if (this.layout.network === null)
             return;
         for (const vertex of this.layout.network.vertexes) {
             if (!(vertex instanceof LabelVertex))
                 continue;
+            if (vertex.isFixed)
+                continue;
             const object = vertex.object;
             if (!object)
                 continue;
@@ -142,6 +145,7 @@ class LabelVertex extends go.ForceDirectedVertex {
         this.object = null;
         this.objectBounds = null;
         this.currentBounds = null;
+        this.isDummy = false;
     }
 }
 /** @hidden @internal */
@@ -149,6 +153,7 @@ class LabelLayout extends go.ForceDirectedLayout {
     constructor() {
         super(...arguments);
         /** @hidden */ this.router = null;
+        /** @hidden */ this.activeSet = null;
     }
     /**
      * we should not ever do a prelayout on this virtual, "fake" force-directed network
@@ -173,13 +178,14 @@ class LabelLayout extends go.ForceDirectedLayout {
      * @param { LabelVertex } v2
      */
     shouldInteract(v1, v2) {
-        if (v1.isFixed || v2.isFixed)
+        if (v1.isDummy || v2.isDummy)
             return false;
         const b1 = v1.currentBounds;
         const b2 = v2.currentBounds;
         return b1.intersectsRect(b2);
     }
     makeNetwork(coll) {
+        var _a;
         const net = new go.ForceDirectedNetwork(this);
         let allparts;
         if (coll instanceof go.Diagram) {
@@ -208,29 +214,44 @@ class LabelLayout extends go.ForceDirectedLayout {
                 else {
                     documentBounds.grow(margin, margin, margin, margin);
                 }
-                // add vertex for label node
-                const v1 = new LabelVertex(net);
-                v1.centerX = documentBounds.centerX;
-                v1.centerY = documentBounds.centerY;
-                v1.width = documentBounds.width;
-                v1.height = documentBounds.height;
-                v1.object = label;
-                v1.objectBounds = documentBounds.copy();
-                v1.currentBounds = documentBounds.copy();
-                net.addVertex(v1);
-                // add vertex for fixed dummy node at the label's original position
-                const v2 = new LabelVertex(net);
-                v2.centerX = v1.centerX;
-                v2.centerY = v1.centerY;
-                v2.charge = 0;
-                v2.isFixed = true;
-                net.addVertex(v2);
-                // add edge to incentivize the Label to stay near its original position
-                const e = new go.ForceDirectedEdge(net);
-                e.length = 0;
-                e.fromVertex = v1;
-                e.toVertex = v2;
-                net.addEdge(e);
+                if ((_a = this.activeSet) === null || _a === void 0 ? void 0 : _a.contains(part)) {
+                    // add vertex for label node
+                    const v1 = new LabelVertex(net);
+                    v1.centerX = documentBounds.centerX;
+                    v1.centerY = documentBounds.centerY;
+                    v1.width = documentBounds.width;
+                    v1.height = documentBounds.height;
+                    v1.object = label;
+                    v1.objectBounds = documentBounds.copy();
+                    v1.currentBounds = documentBounds.copy();
+                    net.addVertex(v1);
+                    // add vertex for fixed dummy node at the label's original position
+                    const v2 = new LabelVertex(net);
+                    v2.centerX = v1.centerX;
+                    v2.centerY = v1.centerY;
+                    v2.charge = 0;
+                    v2.isFixed = true;
+                    v2.isDummy = true;
+                    net.addVertex(v2);
+                    // add edge to incentivize the Label to stay near its original position
+                    const e = new go.ForceDirectedEdge(net);
+                    e.length = 0;
+                    e.fromVertex = v1;
+                    e.toVertex = v2;
+                    net.addEdge(e);
+                }
+                else {
+                    const v = new LabelVertex(net);
+                    v.centerX = documentBounds.centerX;
+                    v.centerY = documentBounds.centerY;
+                    v.width = documentBounds.width;
+                    v.height = documentBounds.height;
+                    v.object = label;
+                    v.objectBounds = documentBounds.copy();
+                    v.currentBounds = documentBounds.copy();
+                    v.isFixed = true;
+                    net.addVertex(v);
+                }
             }
         }
         return net;
diff --git a/extensions/LinkShiftingTool.js b/extensions/LinkShiftingTool.js
index 22ad4e970..1a604c610 100644
--- a/extensions/LinkShiftingTool.js
+++ b/extensions/LinkShiftingTool.js
@@ -20,260 +20,251 @@
  * @category Tool Extension
  */
 class LinkShiftingTool extends go.Tool {
-    /**
-     * Constructs a LinkShiftingTool and sets the handles and name of the tool.
-     */
-    constructor(init) {
-        super();
-        this.name = 'LinkShifting';
-        const h = new go.Shape();
-        h.geometryString = 'F1 M0 0 L8 0 M8 4 L0 4';
-        h.fill = null;
-        h.stroke = 'dodgerblue';
-        h.background = 'lightblue';
-        h.cursor = 'pointer';
-        h.segmentIndex = 0;
-        h.segmentFraction = 1;
-        h.segmentOrientation = go.Orientation.Along;
-        const g = new go.Shape();
-        g.geometryString = 'F1 M0 0 L8 0 M8 4 L0 4';
-        g.fill = null;
-        g.stroke = 'dodgerblue';
-        g.background = 'lightblue';
-        g.cursor = 'pointer';
-        g.segmentIndex = -1;
-        g.segmentFraction = 1;
-        g.segmentOrientation = go.Orientation.Along;
-        this._fromHandleArchetype = h;
-        this._toHandleArchetype = g;
-        this._originalPoints = null;
-        this._handle = null;
-        this._originalPoints = null;
-        if (init)
-            Object.assign(this, init);
-    }
-    /**
-     * A small GraphObject used as a shifting handle.
-     */
-    get fromHandleArchetype() {
-        return this._fromHandleArchetype;
-    }
-    set fromHandleArchetype(value) {
-        this._fromHandleArchetype = value;
-    }
-    /**
-     * A small GraphObject used as a shifting handle.
-     */
-    get toHandleArchetype() {
-        return this._toHandleArchetype;
-    }
-    set toHandleArchetype(value) {
-        this._toHandleArchetype = value;
-    }
-    /**
-     * Show an {@link go.Adornment} with a reshape handle at each end of the link which allows for shifting of the end points.
-     */
-    updateAdornments(part) {
-        if (part === null || !(part instanceof go.Link))
-            return; // this tool only applies to Links
-        const link = part;
-        // show handles if link is selected, remove them if no longer selected
-        let category = 'LinkShiftingFrom';
-        let adornment = null;
-        if (link.isSelected && !this.diagram.isReadOnly && link.fromPort) {
-            const selelt = link.selectionObject;
-            if (selelt !== null &&
-                link.actualBounds.isReal() &&
-                link.isVisible() &&
-                selelt.actualBounds.isReal() &&
-                selelt.isVisibleObject()) {
-                const spot = link.computeSpot(true);
-                if (spot.isSide() || spot.isSpot()) {
-                    adornment = link.findAdornment(category);
-                    if (adornment === null) {
-                        adornment = this.makeAdornment(selelt, false);
-                        adornment.category = category;
-                        link.addAdornment(category, adornment);
-                    }
-                    else {
-                        // This is just to invalidate the measure, so it recomputes itself based on the adorned link
-                        adornment.segmentFraction = Math.random();
-                    }
-                }
-            }
-        }
-        if (adornment === null)
-            link.removeAdornment(category);
-        category = 'LinkShiftingTo';
-        adornment = null;
-        if (link.isSelected && !this.diagram.isReadOnly && link.toPort) {
-            const selelt = link.selectionObject;
-            if (selelt !== null &&
-                link.actualBounds.isReal() &&
-                link.isVisible() &&
-                selelt.actualBounds.isReal() &&
-                selelt.isVisibleObject()) {
-                const spot = link.computeSpot(false);
-                if (spot.isSide() || spot.isSpot()) {
-                    adornment = link.findAdornment(category);
-                    if (adornment === null) {
-                        adornment = this.makeAdornment(selelt, true);
-                        adornment.category = category;
-                        link.addAdornment(category, adornment);
-                    }
-                    else {
-                        // This is just to invalidate the measure, so it recomputes itself based on the adorned link
-                        adornment.segmentFraction = Math.random();
-                    }
-                }
-            }
+  /**
+   * Constructs a LinkShiftingTool and sets the handles and name of the tool.
+   */
+  constructor(init) {
+    super();
+    this.name = 'LinkShifting';
+    const h = new go.Shape();
+    h.geometryString = 'F1 M0 0 L8 0 M8 4 L0 4';
+    h.fill = null;
+    h.stroke = 'dodgerblue';
+    h.background = 'lightblue';
+    h.cursor = 'pointer';
+    h.segmentIndex = 1;
+    h.segmentFraction = 0.05;
+    h.segmentOrientation = go.Orientation.Along;
+    // h.segmentOffset = new go.Point(10, 0);
+    const g = new go.Shape();
+    g.geometryString = 'F1 M0 0 L8 0 M8 4 L0 4';
+    g.fill = null;
+    g.stroke = 'dodgerblue';
+    g.background = 'lightblue';
+    g.cursor = 'pointer';
+    g.segmentIndex = -2;
+    g.segmentFraction = 0.05;
+    g.segmentOrientation = go.Orientation.Along;
+    // g.segmentOffset = new go.Point(10, 0);
+    this._fromHandleArchetype = h;
+    this._toHandleArchetype = g;
+    this._originalPoints = null;
+    this._handle = null;
+    this._originalPoints = null;
+    if (init) Object.assign(this, init);
+  }
+  /**
+   * A small GraphObject used as a shifting handle.
+   */
+  get fromHandleArchetype() {
+    return this._fromHandleArchetype;
+  }
+  set fromHandleArchetype(value) {
+    this._fromHandleArchetype = value;
+  }
+  /**
+   * A small GraphObject used as a shifting handle.
+   */
+  get toHandleArchetype() {
+    return this._toHandleArchetype;
+  }
+  set toHandleArchetype(value) {
+    this._toHandleArchetype = value;
+  }
+  /**
+   * Show an {@link go.Adornment} with a reshape handle at each end of the link which allows for shifting of the end points.
+   */
+  updateAdornments(part) {
+    if (part === null || !(part instanceof go.Link)) return; // this tool only applies to Links
+    const link = part;
+    // show handles if link is selected, remove them if no longer selected
+    let category = 'LinkShiftingFrom';
+    let adornment = null;
+    if (link.isSelected && !this.diagram.isReadOnly && link.fromPort) {
+      const selelt = link.selectionObject;
+      if (
+        selelt !== null &&
+        link.actualBounds.isReal() &&
+        link.isVisible() &&
+        selelt.actualBounds.isReal() &&
+        selelt.isVisibleObject()
+      ) {
+        const spot = link.computeSpot(true);
+        if (spot.isSide() || spot.isSpot()) {
+          adornment = link.findAdornment(category);
+          if (adornment === null) {
+            adornment = this.makeAdornment(selelt, false);
+            adornment.category = category;
+            link.addAdornment(category, adornment);
+          } else {
+            // This is just to invalidate the measure, so it recomputes itself based on the adorned link
+            adornment.segmentFraction = Math.random();
+          }
         }
-        if (adornment === null)
-            link.removeAdornment(category);
+      }
     }
-    /**
-     * @hidden @internal
-     * @param selelt - the {@link go.GraphObject} of the {@link go.Link} being shifted.
-     * @param toend
-     */
-    makeAdornment(selelt, toend) {
-        const adornment = new go.Adornment();
-        adornment.type = go.Panel.Link;
-        const h = toend ? this.toHandleArchetype : this.fromHandleArchetype;
-        if (h !== null) {
-            // add a single handle for shifting at one end
-            adornment.add(h.copy());
+    if (adornment === null) link.removeAdornment(category);
+    category = 'LinkShiftingTo';
+    adornment = null;
+    if (link.isSelected && !this.diagram.isReadOnly && link.toPort) {
+      const selelt = link.selectionObject;
+      if (
+        selelt !== null &&
+        link.actualBounds.isReal() &&
+        link.isVisible() &&
+        selelt.actualBounds.isReal() &&
+        selelt.isVisibleObject()
+      ) {
+        const spot = link.computeSpot(false);
+        if (spot.isSide() || spot.isSpot()) {
+          adornment = link.findAdornment(category);
+          if (adornment === null) {
+            adornment = this.makeAdornment(selelt, true);
+            adornment.category = category;
+            link.addAdornment(category, adornment);
+          } else {
+            // This is just to invalidate the measure, so it recomputes itself based on the adorned link
+            adornment.segmentFraction = Math.random();
+          }
         }
-        adornment.adornedObject = selelt;
-        return adornment;
+      }
     }
-    /**
-     * This tool may run when there is a mouse-down event on a reshaping handle.
-     */
-    canStart() {
-        if (!this.isEnabled)
-            return false;
-        const diagram = this.diagram;
-        if (diagram.isReadOnly || diagram.isModelReadOnly)
-            return false;
-        if (!diagram.lastInput.left)
-            return false;
-        let h = this.findToolHandleAt(diagram.firstInput.documentPoint, 'LinkShiftingFrom');
-        if (h === null)
-            h = this.findToolHandleAt(diagram.firstInput.documentPoint, 'LinkShiftingTo');
-        return h !== null;
+    if (adornment === null) link.removeAdornment(category);
+  }
+  /**
+   * @hidden @internal
+   * @param selelt - the {@link go.GraphObject} of the {@link go.Link} being shifted.
+   * @param toend
+   */
+  makeAdornment(selelt, toend) {
+    const adornment = new go.Adornment();
+    adornment.type = go.Panel.Link;
+    const h = toend ? this.toHandleArchetype : this.fromHandleArchetype;
+    if (h !== null) {
+      // add a single handle for shifting at one end
+      adornment.add(h.copy());
     }
-    /**
-     * Start shifting, if {@link findToolHandleAt} finds a reshaping handle at the mouse down point.
-     *
-     * If successful this sets the handle to be the reshape handle that it finds.
-     * It also remembers the original points in case this tool is cancelled.
-     * And it starts a transaction.
-     */
-    doActivate() {
-        const diagram = this.diagram;
-        let h = this.findToolHandleAt(diagram.firstInput.documentPoint, 'LinkShiftingFrom');
-        if (h === null)
-            h = this.findToolHandleAt(diagram.firstInput.documentPoint, 'LinkShiftingTo');
-        if (h === null)
-            return;
-        const ad = h.part;
-        if (ad === null || ad.adornedObject === null)
-            return;
-        const link = ad.adornedObject.part;
-        if (!(link instanceof go.Link))
-            return;
-        this._handle = h;
-        this._originalPoints = link.points.copy();
-        this.startTransaction(this.name);
-        diagram.isMouseCaptured = true;
-        diagram.currentCursor = 'pointer';
-        this.isActive = true;
+    adornment.adornedObject = selelt;
+    return adornment;
+  }
+  /**
+   * This tool may run when there is a mouse-down event on a reshaping handle.
+   */
+  canStart() {
+    if (!this.isEnabled) return false;
+    const diagram = this.diagram;
+    if (diagram.isReadOnly || diagram.isModelReadOnly) return false;
+    if (!diagram.lastInput.left) return false;
+    let h = this.findToolHandleAt(diagram.firstInput.documentPoint, 'LinkShiftingFrom');
+    if (h === null) h = this.findToolHandleAt(diagram.firstInput.documentPoint, 'LinkShiftingTo');
+    return h !== null;
+  }
+  /**
+   * Start shifting, if {@link findToolHandleAt} finds a reshaping handle at the mouse down point.
+   *
+   * If successful this sets the handle to be the reshape handle that it finds.
+   * It also remembers the original points in case this tool is cancelled.
+   * And it starts a transaction.
+   */
+  doActivate() {
+    const diagram = this.diagram;
+    let h = this.findToolHandleAt(diagram.firstInput.documentPoint, 'LinkShiftingFrom');
+    if (h === null) h = this.findToolHandleAt(diagram.firstInput.documentPoint, 'LinkShiftingTo');
+    if (h === null) return;
+    const ad = h.part;
+    if (ad === null || ad.adornedObject === null) return;
+    const link = ad.adornedObject.part;
+    if (!(link instanceof go.Link)) return;
+    this._handle = h;
+    this._originalPoints = link.points.copy();
+    this.startTransaction(this.name);
+    diagram.isMouseCaptured = true;
+    diagram.currentCursor = 'pointer';
+    this.isActive = true;
+  }
+  /**
+   * This stops the current shifting operation with the link as it is.
+   */
+  doDeactivate() {
+    this.isActive = false;
+    const diagram = this.diagram;
+    diagram.isMouseCaptured = false;
+    diagram.currentCursor = '';
+    this.stopTransaction();
+  }
+  /**
+   * Perform cleanup of tool state.
+   */
+  doStop() {
+    this._handle = null;
+    this._originalPoints = null;
+  }
+  /**
+   * Restore the link route to be the original points and stop this tool.
+   */
+  doCancel() {
+    if (this._handle !== null) {
+      const ad = this._handle.part;
+      if (ad.adornedObject === null) return;
+      const link = ad.adornedObject.part;
+      if (this._originalPoints !== null) link.points = this._originalPoints;
     }
-    /**
-     * This stops the current shifting operation with the link as it is.
-     */
-    doDeactivate() {
-        this.isActive = false;
-        const diagram = this.diagram;
-        diagram.isMouseCaptured = false;
-        diagram.currentCursor = '';
-        this.stopTransaction();
+    this.stopTool();
+  }
+  /**
+   * Call {@link doReshape} with a new point determined by the mouse
+   * to change the end point of the link.
+   */
+  doMouseMove() {
+    if (this.isActive) {
+      this.doReshape(this.diagram.lastInput.documentPoint);
     }
-    /**
-     * Perform cleanup of tool state.
-     */
-    doStop() {
-        this._handle = null;
-        this._originalPoints = null;
+  }
+  /**
+   * Reshape the link's end with a point based on the most recent mouse point by calling {@link doReshape},
+   * and then stop this tool.
+   */
+  doMouseUp() {
+    if (this.isActive) {
+      this.doReshape(this.diagram.lastInput.documentPoint);
+      this.transactionResult = this.name;
     }
-    /**
-     * Restore the link route to be the original points and stop this tool.
-     */
-    doCancel() {
-        if (this._handle !== null) {
-            const ad = this._handle.part;
-            if (ad.adornedObject === null)
-                return;
-            const link = ad.adornedObject.part;
-            if (this._originalPoints !== null)
-                link.points = this._originalPoints;
-        }
-        this.stopTool();
+    this.stopTool();
+  }
+  /**
+   * Find the closest point along the edge of the link's port and shift the end of the link to that point.
+   */
+  doReshape(pt) {
+    if (this._handle === null) return;
+    const ad = this._handle.part;
+    if (ad.adornedObject === null) return;
+    const link = ad.adornedObject.part;
+    const fromend = ad.category === 'LinkShiftingFrom';
+    let port = null;
+    if (fromend) {
+      port = link.fromPort;
+    } else {
+      port = link.toPort;
     }
-    /**
-     * Call {@link doReshape} with a new point determined by the mouse
-     * to change the end point of the link.
-     */
-    doMouseMove() {
-        if (this.isActive) {
-            this.doReshape(this.diagram.lastInput.documentPoint);
-        }
-    }
-    /**
-     * Reshape the link's end with a point based on the most recent mouse point by calling {@link doReshape},
-     * and then stop this tool.
-     */
-    doMouseUp() {
-        if (this.isActive) {
-            this.doReshape(this.diagram.lastInput.documentPoint);
-            this.transactionResult = this.name;
-        }
-        this.stopTool();
-    }
-    /**
-     * Find the closest point along the edge of the link's port and shift the end of the link to that point.
-     */
-    doReshape(pt) {
-        if (this._handle === null)
-            return;
-        const ad = this._handle.part;
-        if (ad.adornedObject === null)
-            return;
-        const link = ad.adornedObject.part;
-        const fromend = ad.category === 'LinkShiftingFrom';
-        let port = null;
-        if (fromend) {
-            port = link.fromPort;
-        }
-        else {
-            port = link.toPort;
-        }
-        if (port === null)
-            return;
-        // support rotated ports
-        const portang = port.getDocumentAngle();
-        const center = port.getDocumentPoint(go.Spot.Center);
-        const farpt = pt.copy().offset((pt.x - center.x) * 1000, (pt.y - center.y) * 1000);
-        const portb = new go.Rect(port.getDocumentPoint(go.Spot.TopLeft).subtract(center).rotate(-portang).add(center), port.getDocumentPoint(go.Spot.BottomRight).subtract(center).rotate(-portang).add(center));
-        let lp = link.getLinkPointFromPoint(port.part, port, center, farpt, fromend);
-        lp = lp.copy().subtract(center).rotate(-portang).add(center);
-        const spot = new go.Spot(Math.max(0, Math.min(1, (lp.x - portb.x) / (portb.width || 1))), Math.max(0, Math.min(1, (lp.y - portb.y) / (portb.height || 1))));
-        if (fromend) {
-            link.fromSpot = spot;
-        }
-        else {
-            link.toSpot = spot;
-        }
+    if (port === null) return;
+    // support rotated ports
+    const portang = port.getDocumentAngle();
+    const center = port.getDocumentPoint(go.Spot.Center);
+    const farpt = pt.copy().offset((pt.x - center.x) * 1000, (pt.y - center.y) * 1000);
+    const portb = new go.Rect(
+      port.getDocumentPoint(go.Spot.TopLeft).subtract(center).rotate(-portang).add(center),
+      port.getDocumentPoint(go.Spot.BottomRight).subtract(center).rotate(-portang).add(center)
+    );
+    let lp = link.getLinkPointFromPoint(port.part, port, center, farpt, fromend);
+    lp = lp.copy().subtract(center).rotate(-portang).add(center);
+    const spot = new go.Spot(
+      Math.max(0, Math.min(1, (lp.x - portb.x) / (portb.width || 1))),
+      Math.max(0, Math.min(1, (lp.y - portb.y) / (portb.height || 1)))
+    );
+    if (fromend) {
+      link.fromSpot = spot;
+    } else {
+      link.toSpot = spot;
     }
+  }
 }
diff --git a/extensions/PolygonDrawingTool.js b/extensions/PolygonDrawingTool.js
index 2e2f4495e..67d1cc17c 100644
--- a/extensions/PolygonDrawingTool.js
+++ b/extensions/PolygonDrawingTool.js
@@ -24,424 +24,412 @@
  * @category Tool Extension
  */
 class PolygonDrawingTool extends go.Tool {
-    /**
-     * Constructs an PolygonDrawingTool and sets the name for the tool.
-     */
-    constructor(init) {
-        super();
-        this.name = 'PolygonDrawing';
-        this._isPolygon = true;
-        this._hasArcs = false;
-        this._isOrthoOnly = false;
-        this._isGridSnapEnabled = false;
-        this._archetypePartData = {}; // the data to copy for a new polygon Part
-        // this is the Shape that is shown during a drawing operation
-        this._temporaryShape = new go.Shape({ name: 'SHAPE', fill: 'lightgray', strokeWidth: 1.5 });
-        // the Shape has to be inside a temporary Part that is used during the drawing operation
-        new go.Part({ layerName: 'Tool' }).add(this._temporaryShape);
-        if (init)
-            Object.assign(this, init);
+  /**
+   * Constructs an PolygonDrawingTool and sets the name for the tool.
+   */
+  constructor(init) {
+    super();
+    this.name = 'PolygonDrawing';
+    this._isPolygon = true;
+    this._hasArcs = false;
+    this._isOrthoOnly = false;
+    this._isGridSnapEnabled = false;
+    this._archetypePartData = {}; // the data to copy for a new polygon Part
+    // this is the Shape that is shown during a drawing operation
+    this._temporaryShape = new go.Shape({ name: 'SHAPE', fill: 'lightgray', strokeWidth: 1.5 });
+    // the Shape has to be inside a temporary Part that is used during the drawing operation
+    new go.Part({ layerName: 'Tool' }).add(this._temporaryShape);
+    if (init) Object.assign(this, init);
+  }
+  /**
+   * Gets or sets whether this tools draws a filled polygon or an unfilled open polyline.
+   *
+   * The default value is true.
+   */
+  get isPolygon() {
+    return this._isPolygon;
+  }
+  set isPolygon(val) {
+    this._isPolygon = val;
+  }
+  /**
+   * Gets or sets whether this tool draws shapes with quadratic bezier curves for each segment, or just straight lines.
+   *
+   * The default value is false -- only use straight lines.
+   */
+  get hasArcs() {
+    return this._hasArcs;
+  }
+  set hasArcs(val) {
+    this._hasArcs = val;
+  }
+  /**
+   * Gets or sets whether this tool draws shapes with only orthogonal segments, or segments in any direction.
+   * The default value is false -- draw segments in any direction. This does not restrict the closing segment, which may not be orthogonal.
+   */
+  get isOrthoOnly() {
+    return this._isOrthoOnly;
+  }
+  set isOrthoOnly(val) {
+    this._isOrthoOnly = val;
+  }
+  /**
+   * Gets or sets whether this tool only places the shape's corners on the Diagram's visible grid.
+   * The default value is false
+   */
+  get isGridSnapEnabled() {
+    return this._isGridSnapEnabled;
+  }
+  set isGridSnapEnabled(val) {
+    this._isGridSnapEnabled = val;
+  }
+  /**
+   * Gets or sets the node data object that is copied and added to the model
+   * when the drawing operation completes.
+   */
+  get archetypePartData() {
+    return this._archetypePartData;
+  }
+  set archetypePartData(val) {
+    this._archetypePartData = val;
+  }
+  /**
+   * Gets or sets the Shape that is used to hold the line as it is being drawn.
+   *
+   * The default value is a simple Shape drawing an unfilled open thin black line.
+   */
+  get temporaryShape() {
+    return this._temporaryShape;
+  }
+  set temporaryShape(val) {
+    if (this._temporaryShape !== val && val !== null) {
+      val.name = 'SHAPE';
+      const panel = this._temporaryShape.panel;
+      if (panel !== null) {
+        if (panel !== null) panel.remove(this._temporaryShape);
+        this._temporaryShape = val;
+        if (panel !== null) panel.add(this._temporaryShape);
+      }
     }
-    /**
-     * Gets or sets whether this tools draws a filled polygon or an unfilled open polyline.
-     *
-     * The default value is true.
-     */
-    get isPolygon() {
-        return this._isPolygon;
+  }
+  /**
+   * Don't start this tool in a mode-less fashion when the user's mouse-down is on an existing Part.
+   * When this tool is a mouse-down tool, it requires using the left mouse button in the background of a modifiable Diagram.
+   * Modal uses of this tool will not call this canStart predicate.
+   */
+  canStart() {
+    if (!this.isEnabled) return false;
+    const diagram = this.diagram;
+    if (diagram.isReadOnly || diagram.isModelReadOnly) return false;
+    const model = diagram.model;
+    if (model === null) return false;
+    // require left button
+    if (!diagram.firstInput.left) return false;
+    // can't start when mouse-down on an existing Part
+    const obj = diagram.findObjectAt(diagram.firstInput.documentPoint, null, null);
+    return obj === null;
+  }
+  /**
+   * Start a transaction, capture the mouse, use a "crosshair" cursor,
+   * and start accumulating points in the geometry of the {@link temporaryShape}.
+   */
+  doStart() {
+    super.doStart();
+    const diagram = this.diagram;
+    if (!diagram) return;
+    // null for 2nd argument makes this transaction skip the undo manager
+    diagram.commit((d) => (d.allowUndo = false), null);
+    this.startTransaction(this.name);
+    diagram.currentCursor = diagram.defaultCursor = 'crosshair';
+    if (!diagram.lastInput.isTouchEvent) diagram.isMouseCaptured = true;
+  }
+  /**
+   * Start a transaction, capture the mouse, use a "crosshair" cursor,
+   * and start accumulating points in the geometry of the {@link temporaryShape}.
+   */
+  doActivate() {
+    super.doActivate();
+    const diagram = this.diagram;
+    if (!diagram) return;
+    // the first point
+    if (!diagram.lastInput.isTouchEvent) this.addPoint(diagram.lastInput.documentPoint);
+  }
+  /**
+   * Stop the transaction and clean up.
+   */
+  doStop() {
+    super.doStop();
+    const diagram = this.diagram;
+    if (!diagram) return;
+    diagram.allowUndo = true;
+    diagram.currentCursor = diagram.defaultCursor = 'auto';
+    if (this.temporaryShape !== null && this.temporaryShape.part !== null) {
+      diagram.remove(this.temporaryShape.part);
     }
-    set isPolygon(val) {
-        this._isPolygon = val;
+    if (diagram.isMouseCaptured) diagram.isMouseCaptured = false;
+    this.stopTransaction();
+  }
+  /**
+   * @hidden @internal
+   * Given a potential Point for the next segment, return a Point it to snap to the grid, and remain orthogonal, if either is applicable.
+   */
+  modifyPointForGrid(p) {
+    const pregrid = p.copy();
+    const grid = this.diagram.grid;
+    if (grid !== null && grid.visible && this.isGridSnapEnabled) {
+      const cell = grid.gridCellSize;
+      const orig = grid.gridOrigin;
+      p = p.copy();
+      p.snapToGrid(orig.x, orig.y, cell.width, cell.height); // compute the closest grid point (modifies p)
     }
-    /**
-     * Gets or sets whether this tool draws shapes with quadratic bezier curves for each segment, or just straight lines.
-     *
-     * The default value is false -- only use straight lines.
-     */
-    get hasArcs() {
-        return this._hasArcs;
+    if (this.temporaryShape.geometry === null) return p;
+    const geometry = this.temporaryShape.geometry;
+    if (geometry === null) return p;
+    const fig = geometry.figures.first();
+    if (fig === null) return p;
+    const segments = fig.segments;
+    if (this.isOrthoOnly && segments.count > 0) {
+      let lastPt = new go.Point(fig.startX, fig.startY); // assuming segments.count === 1
+      if (segments.count > 1) {
+        // the last segment is the current temporary segment, which we might be altering. We want the segment before
+        const secondLastSegment = segments.elt(segments.count - 2);
+        lastPt = new go.Point(secondLastSegment.endX, secondLastSegment.endY);
+      }
+      if (
+        pregrid.distanceSquared(lastPt.x, pregrid.y) < pregrid.distanceSquared(pregrid.x, lastPt.y)
+      ) {
+        // closer to X coord
+        return new go.Point(lastPt.x, p.y);
+      } else {
+        // closer to Y coord
+        return new go.Point(p.x, lastPt.y);
+      }
     }
-    set hasArcs(val) {
-        this._hasArcs = val;
-    }
-    /**
-     * Gets or sets whether this tool draws shapes with only orthogonal segments, or segments in any direction.
-     * The default value is false -- draw segments in any direction. This does not restrict the closing segment, which may not be orthogonal.
-     */
-    get isOrthoOnly() {
-        return this._isOrthoOnly;
-    }
-    set isOrthoOnly(val) {
-        this._isOrthoOnly = val;
-    }
-    /**
-     * Gets or sets whether this tool only places the shape's corners on the Diagram's visible grid.
-     * The default value is false
-     */
-    get isGridSnapEnabled() {
-        return this._isGridSnapEnabled;
-    }
-    set isGridSnapEnabled(val) {
-        this._isGridSnapEnabled = val;
-    }
-    /**
-     * Gets or sets the node data object that is copied and added to the model
-     * when the drawing operation completes.
-     */
-    get archetypePartData() {
-        return this._archetypePartData;
-    }
-    set archetypePartData(val) {
-        this._archetypePartData = val;
-    }
-    /**
-     * Gets or sets the Shape that is used to hold the line as it is being drawn.
-     *
-     * The default value is a simple Shape drawing an unfilled open thin black line.
-     */
-    get temporaryShape() {
-        return this._temporaryShape;
-    }
-    set temporaryShape(val) {
-        if (this._temporaryShape !== val && val !== null) {
-            val.name = 'SHAPE';
-            const panel = this._temporaryShape.panel;
-            if (panel !== null) {
-                if (panel !== null)
-                    panel.remove(this._temporaryShape);
-                this._temporaryShape = val;
-                if (panel !== null)
-                    panel.add(this._temporaryShape);
-            }
+    return p;
+  }
+  /**
+   * @hidden @internal
+   * This internal method adds a segment to the geometry of the {@link temporaryShape}.
+   */
+  addPoint(p) {
+    const diagram = this.diagram;
+    const shape = this.temporaryShape;
+    if (shape === null) return;
+    // for the temporary Shape, normalize the geometry to be in the viewport
+    const viewpt = diagram.viewportBounds.position;
+    const q = this.modifyPointForGrid(new go.Point(p.x - viewpt.x, p.y - viewpt.y));
+    const part = shape.part;
+    let geo = null;
+    // if it's not in the Diagram, re-initialize the Shape's geometry and add the Part to the Diagram
+    if (part !== null && part.diagram === null) {
+      const fig = new go.PathFigure(q.x, q.y, true); // possibly filled, depending on Shape.fill
+      geo = new go.Geometry().add(fig); // the Shape.geometry consists of a single PathFigure
+      this.temporaryShape.geometry = geo;
+      // position the Shape's Part, accounting for the stroke width
+      part.position = viewpt.copy().offset(-shape.strokeWidth / 2, -shape.strokeWidth / 2);
+      diagram.add(part);
+    } else if (shape.geometry !== null) {
+      // must copy whole Geometry in order to add a PathSegment
+      geo = shape.geometry.copy();
+      const fig = geo.figures.first();
+      if (fig !== null) {
+        if (this.hasArcs) {
+          const lastseg = fig.segments.last();
+          if (lastseg === null) {
+            fig.add(
+              new go.PathSegment(
+                go.SegmentType.QuadraticBezier,
+                q.x,
+                q.y,
+                (fig.startX + q.x) / 2,
+                (fig.startY + q.y) / 2
+              )
+            );
+          } else {
+            fig.add(
+              new go.PathSegment(
+                go.SegmentType.QuadraticBezier,
+                q.x,
+                q.y,
+                (lastseg.endX + q.x) / 2,
+                (lastseg.endY + q.y) / 2
+              )
+            );
+          }
+        } else {
+          fig.add(new go.PathSegment(go.SegmentType.Line, q.x, q.y));
         }
+      }
     }
-    /**
-     * Don't start this tool in a mode-less fashion when the user's mouse-down is on an existing Part.
-     * When this tool is a mouse-down tool, it requires using the left mouse button in the background of a modifiable Diagram.
-     * Modal uses of this tool will not call this canStart predicate.
-     */
-    canStart() {
-        if (!this.isEnabled)
-            return false;
-        const diagram = this.diagram;
-        if (diagram.isReadOnly || diagram.isModelReadOnly)
-            return false;
-        const model = diagram.model;
-        if (model === null)
-            return false;
-        // require left button
-        if (!diagram.firstInput.left)
-            return false;
-        // can't start when mouse-down on an existing Part
-        const obj = diagram.findObjectAt(diagram.firstInput.documentPoint, null, null);
-        return obj === null;
-    }
-    /**
-     * Start a transaction, capture the mouse, use a "crosshair" cursor,
-     * and start accumulating points in the geometry of the {@link temporaryShape}.
-     */
-    doStart() {
-        super.doStart();
-        const diagram = this.diagram;
-        if (!diagram)
-            return;
-        this.startTransaction(this.name);
-        diagram.currentCursor = diagram.defaultCursor = 'crosshair';
-        if (!diagram.lastInput.isTouchEvent)
-            diagram.isMouseCaptured = true;
-    }
-    /**
-     * Start a transaction, capture the mouse, use a "crosshair" cursor,
-     * and start accumulating points in the geometry of the {@link temporaryShape}.
-     */
-    doActivate() {
-        super.doActivate();
-        const diagram = this.diagram;
-        if (!diagram)
-            return;
-        // the first point
-        if (!diagram.lastInput.isTouchEvent)
-            this.addPoint(diagram.lastInput.documentPoint);
-    }
-    /**
-     * Stop the transaction and clean up.
-     */
-    doStop() {
-        super.doStop();
-        const diagram = this.diagram;
-        if (!diagram)
-            return;
-        diagram.currentCursor = diagram.defaultCursor = 'auto';
-        if (this.temporaryShape !== null && this.temporaryShape.part !== null) {
-            diagram.remove(this.temporaryShape.part);
-        }
-        if (diagram.isMouseCaptured)
-            diagram.isMouseCaptured = false;
-        this.stopTransaction();
-    }
-    /**
-     * @hidden @internal
-     * Given a potential Point for the next segment, return a Point it to snap to the grid, and remain orthogonal, if either is applicable.
-     */
-    modifyPointForGrid(p) {
-        const pregrid = p.copy();
-        const grid = this.diagram.grid;
-        if (grid !== null && grid.visible && this.isGridSnapEnabled) {
-            const cell = grid.gridCellSize;
-            const orig = grid.gridOrigin;
-            p = p.copy();
-            p.snapToGrid(orig.x, orig.y, cell.width, cell.height); // compute the closest grid point (modifies p)
-        }
-        if (this.temporaryShape.geometry === null)
-            return p;
-        const geometry = this.temporaryShape.geometry;
-        if (geometry === null)
-            return p;
-        const fig = geometry.figures.first();
-        if (fig === null)
-            return p;
-        const segments = fig.segments;
-        if (this.isOrthoOnly && segments.count > 0) {
-            let lastPt = new go.Point(fig.startX, fig.startY); // assuming segments.count === 1
-            if (segments.count > 1) {
-                // the last segment is the current temporary segment, which we might be altering. We want the segment before
-                const secondLastSegment = segments.elt(segments.count - 2);
-                lastPt = new go.Point(secondLastSegment.endX, secondLastSegment.endY);
-            }
-            if (pregrid.distanceSquared(lastPt.x, pregrid.y) < pregrid.distanceSquared(pregrid.x, lastPt.y)) {
-                // closer to X coord
-                return new go.Point(lastPt.x, p.y);
-            }
-            else {
-                // closer to Y coord
-                return new go.Point(p.x, lastPt.y);
-            }
+    shape.geometry = geo;
+  }
+  /**
+   * @hidden @internal
+   * This internal method changes the last segment of the geometry of the {@link temporaryShape} to end at the given point.
+   */
+  moveLastPoint(p) {
+    p = this.modifyPointForGrid(p);
+    const diagram = this.diagram;
+    // must copy whole Geometry in order to change a PathSegment
+    const shape = this.temporaryShape;
+    if (shape.geometry === null) return;
+    const geo = shape.geometry.copy();
+    const fig = geo.figures.first();
+    if (fig === null) return;
+    const segs = fig.segments;
+    if (segs.count > 0) {
+      // for the temporary Shape, normalize the geometry to be in the viewport
+      const viewpt = diagram.viewportBounds.position;
+      const seg = segs.elt(segs.count - 1);
+      // modify the last PathSegment to be the given Point p
+      seg.endX = p.x - viewpt.x;
+      seg.endY = p.y - viewpt.y;
+      if (seg.type === go.SegmentType.QuadraticBezier) {
+        let prevx = 0.0;
+        let prevy = 0.0;
+        if (segs.count > 1) {
+          const prevseg = segs.elt(segs.count - 2);
+          prevx = prevseg.endX;
+          prevy = prevseg.endY;
+        } else {
+          prevx = fig.startX;
+          prevy = fig.startY;
         }
-        return p;
+        seg.point1X = (seg.endX + prevx) / 2;
+        seg.point1Y = (seg.endY + prevy) / 2;
+      }
+      shape.geometry = geo;
     }
-    /**
-     * @hidden @internal
-     * This internal method adds a segment to the geometry of the {@link temporaryShape}.
-     */
-    addPoint(p) {
-        const diagram = this.diagram;
-        const shape = this.temporaryShape;
-        if (shape === null)
-            return;
-        // for the temporary Shape, normalize the geometry to be in the viewport
-        const viewpt = diagram.viewportBounds.position;
-        const q = this.modifyPointForGrid(new go.Point(p.x - viewpt.x, p.y - viewpt.y));
-        const part = shape.part;
-        let geo = null;
-        // if it's not in the Diagram, re-initialize the Shape's geometry and add the Part to the Diagram
-        if (part !== null && part.diagram === null) {
-            const fig = new go.PathFigure(q.x, q.y, true); // possibly filled, depending on Shape.fill
-            geo = new go.Geometry().add(fig); // the Shape.geometry consists of a single PathFigure
-            this.temporaryShape.geometry = geo;
-            // position the Shape's Part, accounting for the stroke width
-            part.position = viewpt.copy().offset(-shape.strokeWidth / 2, -shape.strokeWidth / 2);
-            diagram.add(part);
-        }
-        else if (shape.geometry !== null) {
-            // must copy whole Geometry in order to add a PathSegment
-            geo = shape.geometry.copy();
-            const fig = geo.figures.first();
-            if (fig !== null) {
-                if (this.hasArcs) {
-                    const lastseg = fig.segments.last();
-                    if (lastseg === null) {
-                        fig.add(new go.PathSegment(go.SegmentType.QuadraticBezier, q.x, q.y, (fig.startX + q.x) / 2, (fig.startY + q.y) / 2));
-                    }
-                    else {
-                        fig.add(new go.PathSegment(go.SegmentType.QuadraticBezier, q.x, q.y, (lastseg.endX + q.x) / 2, (lastseg.endY + q.y) / 2));
-                    }
-                }
-                else {
-                    fig.add(new go.PathSegment(go.SegmentType.Line, q.x, q.y));
-                }
-            }
-        }
-        shape.geometry = geo;
+  }
+  /**
+   * @hidden @internal
+   * This internal method removes the last segment of the geometry of the {@link temporaryShape}.
+   */
+  removeLastPoint() {
+    // must copy whole Geometry in order to remove a PathSegment
+    const shape = this.temporaryShape;
+    if (shape.geometry === null) return;
+    const geo = shape.geometry.copy();
+    const fig = geo.figures.first();
+    if (fig === null) return;
+    const segs = fig.segments;
+    if (segs.count > 0) {
+      segs.removeAt(segs.count - 1);
+      shape.geometry = geo;
     }
-    /**
-     * @hidden @internal
-     * This internal method changes the last segment of the geometry of the {@link temporaryShape} to end at the given point.
-     */
-    moveLastPoint(p) {
-        p = this.modifyPointForGrid(p);
-        const diagram = this.diagram;
-        // must copy whole Geometry in order to change a PathSegment
-        const shape = this.temporaryShape;
-        if (shape.geometry === null)
-            return;
-        const geo = shape.geometry.copy();
-        const fig = geo.figures.first();
-        if (fig === null)
-            return;
-        const segs = fig.segments;
-        if (segs.count > 0) {
-            // for the temporary Shape, normalize the geometry to be in the viewport
-            const viewpt = diagram.viewportBounds.position;
+  }
+  /**
+   * Add a new node data JavaScript object to the model and initialize the Part's
+   * position and its Shape's geometry by copying the {@link temporaryShape}'s {@link go.Shape.geometry}.
+   */
+  finishShape() {
+    const diagram = this.diagram;
+    const shape = this.temporaryShape;
+    if (shape !== null && this.archetypePartData !== null) {
+      // remove the temporary point, which is last, except on touch devices
+      if (!diagram.lastInput.isTouchEvent) this.removeLastPoint();
+      const tempgeo = shape.geometry;
+      // require 3 points (2 segments) if polygon; 2 points (1 segment) if polyline
+      if (tempgeo !== null) {
+        const tempfig = tempgeo.figures.first();
+        if (tempfig !== null && tempfig.segments.count >= (this.isPolygon ? 2 : 1)) {
+          // normalize geometry and node position
+          const viewpt = diagram.viewportBounds.position;
+          const copygeo = tempgeo.copy();
+          const copyfig = copygeo.figures.first();
+          if (this.isPolygon && copyfig !== null) {
+            // if polygon, close the last segment
+            const segs = copyfig.segments;
             const seg = segs.elt(segs.count - 1);
-            // modify the last PathSegment to be the given Point p
-            seg.endX = p.x - viewpt.x;
-            seg.endY = p.y - viewpt.y;
-            if (seg.type === go.SegmentType.QuadraticBezier) {
-                let prevx = 0.0;
-                let prevy = 0.0;
-                if (segs.count > 1) {
-                    const prevseg = segs.elt(segs.count - 2);
-                    prevx = prevseg.endX;
-                    prevy = prevseg.endY;
-                }
-                else {
-                    prevx = fig.startX;
-                    prevy = fig.startY;
-                }
-                seg.point1X = (seg.endX + prevx) / 2;
-                seg.point1Y = (seg.endY + prevy) / 2;
+            seg.isClosed = true;
+          }
+          // create the node data for the model
+          const d = diagram.model.copyNodeData(this.archetypePartData);
+          if (d !== null) {
+            // adding data to model creates the actual Part
+            diagram.model.addNodeData(d);
+            const part = diagram.findPartForData(d);
+            if (part !== null) {
+              // assign the position for the whole Part
+              const pos = copygeo.normalize();
+              pos.x = viewpt.x - pos.x - shape.strokeWidth / 2;
+              pos.y = viewpt.y - pos.y - shape.strokeWidth / 2;
+              part.position = pos;
+              // assign the Shape.geometry
+              const pShape = part.findObject('SHAPE');
+              if (pShape !== null) pShape.geometry = copygeo;
+              this.transactionResult = this.name;
             }
-            shape.geometry = geo;
+          }
         }
+      }
     }
-    /**
-     * @hidden @internal
-     * This internal method removes the last segment of the geometry of the {@link temporaryShape}.
-     */
-    removeLastPoint() {
-        // must copy whole Geometry in order to remove a PathSegment
-        const shape = this.temporaryShape;
-        if (shape.geometry === null)
-            return;
-        const geo = shape.geometry.copy();
-        const fig = geo.figures.first();
-        if (fig === null)
-            return;
-        const segs = fig.segments;
-        if (segs.count > 0) {
-            segs.removeAt(segs.count - 1);
-            shape.geometry = geo;
-        }
+    this.stopTool();
+  }
+  /**
+   * Add another point to the geometry of the {@link temporaryShape}.
+   */
+  doMouseDown() {
+    const diagram = this.diagram;
+    if (!this.isActive) {
+      this.doActivate();
     }
-    /**
-     * Add a new node data JavaScript object to the model and initialize the Part's
-     * position and its Shape's geometry by copying the {@link temporaryShape}'s {@link go.Shape.geometry}.
-     */
-    finishShape() {
-        const diagram = this.diagram;
-        const shape = this.temporaryShape;
-        if (shape !== null && this.archetypePartData !== null) {
-            // remove the temporary point, which is last, except on touch devices
-            if (!diagram.lastInput.isTouchEvent)
-                this.removeLastPoint();
-            const tempgeo = shape.geometry;
-            // require 3 points (2 segments) if polygon; 2 points (1 segment) if polyline
-            if (tempgeo !== null) {
-                const tempfig = tempgeo.figures.first();
-                if (tempfig !== null && tempfig.segments.count >= (this.isPolygon ? 2 : 1)) {
-                    // normalize geometry and node position
-                    const viewpt = diagram.viewportBounds.position;
-                    const copygeo = tempgeo.copy();
-                    const copyfig = copygeo.figures.first();
-                    if (this.isPolygon && copyfig !== null) {
-                        // if polygon, close the last segment
-                        const segs = copyfig.segments;
-                        const seg = segs.elt(segs.count - 1);
-                        seg.isClosed = true;
-                    }
-                    // create the node data for the model
-                    const d = diagram.model.copyNodeData(this.archetypePartData);
-                    if (d !== null) {
-                        // adding data to model creates the actual Part
-                        diagram.model.addNodeData(d);
-                        const part = diagram.findPartForData(d);
-                        if (part !== null) {
-                            // assign the position for the whole Part
-                            const pos = copygeo.normalize();
-                            pos.x = viewpt.x - pos.x - shape.strokeWidth / 2;
-                            pos.y = viewpt.y - pos.y - shape.strokeWidth / 2;
-                            part.position = pos;
-                            // assign the Shape.geometry
-                            const pShape = part.findObject('SHAPE');
-                            if (pShape !== null)
-                                pShape.geometry = copygeo;
-                            this.transactionResult = this.name;
-                        }
-                    }
-                }
-            }
-        }
-        this.stopTool();
+    // a new temporary end point, the previous one is now "accepted"
+    this.addPoint(diagram.lastInput.documentPoint);
+    if (!diagram.lastInput.left) {
+      // e.g. right mouse down
+      this.finishShape();
+    } else if (diagram.lastInput.clickCount > 1) {
+      // e.g. double-click
+      this.removeLastPoint();
+      this.finishShape();
     }
-    /**
-     * Add another point to the geometry of the {@link temporaryShape}.
-     */
-    doMouseDown() {
-        const diagram = this.diagram;
-        if (!this.isActive) {
-            this.doActivate();
-        }
-        // a new temporary end point, the previous one is now "accepted"
-        this.addPoint(diagram.lastInput.documentPoint);
-        if (!diagram.lastInput.left) {
-            // e.g. right mouse down
-            this.finishShape();
-        }
-        else if (diagram.lastInput.clickCount > 1) {
-            // e.g. double-click
-            this.removeLastPoint();
-            this.finishShape();
-        }
-    }
-    /**
-     * Move the last point of the {@link temporaryShape}'s geometry to follow the mouse point.
-     */
-    doMouseMove() {
-        const diagram = this.diagram;
-        if (this.isActive) {
-            this.moveLastPoint(diagram.lastInput.documentPoint);
-        }
-    }
-    /**
-     * Do not stop this tool, but continue to accumulate Points via mouse-down events.
-     */
-    doMouseUp() {
-        // don't stop this tool (the default behavior is to call stopTool)
-    }
-    /**
-     * Typing the "ENTER" key accepts the current geometry (excluding the current mouse point)
-     * and creates a new part in the model by calling {@link finishShape}.
-     *
-     * Typing the "Z" key causes the previous point to be discarded.
-     *
-     * Typing the "ESCAPE" key causes the temporary Shape and its geometry to be discarded and this tool to be stopped.
-     */
-    doKeyDown() {
-        const diagram = this.diagram;
-        if (!this.isActive)
-            return;
-        const e = diagram.lastInput;
-        if (e.code === 'Enter') {
-            // accept
-            this.finishShape(); // all done!
-        }
-        else if (e.code === 'KeyZ') {
-            // undo
-            this.undo();
-        }
-        else {
-            super.doKeyDown();
-        }
+  }
+  /**
+   * Move the last point of the {@link temporaryShape}'s geometry to follow the mouse point.
+   */
+  doMouseMove() {
+    const diagram = this.diagram;
+    if (this.isActive) {
+      this.moveLastPoint(diagram.lastInput.documentPoint);
     }
-    /**
-     * Undo: remove the last point and continue the drawing of new points.
-     */
-    undo() {
-        const diagram = this.diagram;
-        // remove a point, and then treat the last one as a temporary one
-        this.removeLastPoint();
-        const lastInput = diagram.lastInput;
-        if (lastInput.event instanceof MouseEvent)
-            this.moveLastPoint(lastInput.documentPoint);
+  }
+  /**
+   * Do not stop this tool, but continue to accumulate Points via mouse-down events.
+   */
+  doMouseUp() {
+    // don't stop this tool (the default behavior is to call stopTool)
+  }
+  /**
+   * Typing the "ENTER" key accepts the current geometry (excluding the current mouse point)
+   * and creates a new part in the model by calling {@link finishShape}.
+   *
+   * Typing the "Z" key causes the previous point to be discarded.
+   *
+   * Typing the "ESCAPE" key causes the temporary Shape and its geometry to be discarded and this tool to be stopped.
+   */
+  doKeyDown() {
+    const diagram = this.diagram;
+    if (!this.isActive) return;
+    const e = diagram.lastInput;
+    if (e.code === 'Enter') {
+      // accept
+      this.finishShape(); // all done!
+    } else if (e.code === 'KeyZ') {
+      // undo
+      this.undo();
+    } else {
+      super.doKeyDown();
     }
+  }
+  /**
+   * Undo: remove the last point and continue the drawing of new points.
+   */
+  undo() {
+    const diagram = this.diagram;
+    // remove a point, and then treat the last one as a temporary one
+    this.removeLastPoint();
+    const lastInput = diagram.lastInput;
+    if (lastInput.event instanceof MouseEvent) this.moveLastPoint(lastInput.documentPoint);
+  }
 }
diff --git a/extensionsJSM/AvoidsLinksRouter.ts b/extensionsJSM/AvoidsLinksRouter.ts
index d3921bca4..13866cd42 100644
--- a/extensionsJSM/AvoidsLinksRouter.ts
+++ b/extensionsJSM/AvoidsLinksRouter.ts
@@ -366,7 +366,7 @@ export class AvoidsLinksRouter extends go.Router {
         // if there are node overlaps, find the minimum spacing that will avoid node overlaps with some padding
         if(vertical) {
           if (!positions.isUnoccupied(minCoord, minColumn, maxCoord - minCoord, maxColumn - minColumn)) {
-            const availSpace = positions.maxUnoccupiedV(
+            const availSpace = positions.maxAvoidsLinksSpaceV(
               minColumn,
               maxColumn,
               this._coord(gridline[0]),
@@ -376,7 +376,7 @@ export class AvoidsLinksRouter extends go.Router {
           }
         } else {
           if (!positions.isUnoccupied(minColumn, minCoord, maxColumn - minColumn, maxCoord - minCoord)) {
-            const availSpace = positions.maxUnoccupiedH(
+            const availSpace = positions.maxAvoidsLinksSpaceH(
               minColumn,
               maxColumn,
               this._coord(gridline[0]),
diff --git a/extensionsJSM/LinkLabelRouter.js b/extensionsJSM/LinkLabelRouter.js
index 3fbb59067..4af6b19cf 100644
--- a/extensionsJSM/LinkLabelRouter.js
+++ b/extensionsJSM/LinkLabelRouter.js
@@ -117,12 +117,15 @@ export class LinkLabelRouter extends go.Router {
             return;
         if (coll instanceof go.Group)
             return;
+        this.layout.activeSet = links;
         this.layout.doLayout(coll.links);
         if (this.layout.network === null)
             return;
         for (const vertex of this.layout.network.vertexes) {
             if (!(vertex instanceof LabelVertex))
                 continue;
+            if (vertex.isFixed)
+                continue;
             const object = vertex.object;
             if (!object)
                 continue;
@@ -142,6 +145,7 @@ class LabelVertex extends go.ForceDirectedVertex {
         this.object = null;
         this.objectBounds = null;
         this.currentBounds = null;
+        this.isDummy = false;
     }
 }
 /** @hidden @internal */
@@ -149,6 +153,7 @@ class LabelLayout extends go.ForceDirectedLayout {
     constructor() {
         super(...arguments);
         /** @hidden */ this.router = null;
+        /** @hidden */ this.activeSet = null;
     }
     /**
      * we should not ever do a prelayout on this virtual, "fake" force-directed network
@@ -173,13 +178,14 @@ class LabelLayout extends go.ForceDirectedLayout {
      * @param { LabelVertex } v2
      */
     shouldInteract(v1, v2) {
-        if (v1.isFixed || v2.isFixed)
+        if (v1.isDummy || v2.isDummy)
             return false;
         const b1 = v1.currentBounds;
         const b2 = v2.currentBounds;
         return b1.intersectsRect(b2);
     }
     makeNetwork(coll) {
+        var _a;
         const net = new go.ForceDirectedNetwork(this);
         let allparts;
         if (coll instanceof go.Diagram) {
@@ -208,29 +214,44 @@ class LabelLayout extends go.ForceDirectedLayout {
                 else {
                     documentBounds.grow(margin, margin, margin, margin);
                 }
-                // add vertex for label node
-                const v1 = new LabelVertex(net);
-                v1.centerX = documentBounds.centerX;
-                v1.centerY = documentBounds.centerY;
-                v1.width = documentBounds.width;
-                v1.height = documentBounds.height;
-                v1.object = label;
-                v1.objectBounds = documentBounds.copy();
-                v1.currentBounds = documentBounds.copy();
-                net.addVertex(v1);
-                // add vertex for fixed dummy node at the label's original position
-                const v2 = new LabelVertex(net);
-                v2.centerX = v1.centerX;
-                v2.centerY = v1.centerY;
-                v2.charge = 0;
-                v2.isFixed = true;
-                net.addVertex(v2);
-                // add edge to incentivize the Label to stay near its original position
-                const e = new go.ForceDirectedEdge(net);
-                e.length = 0;
-                e.fromVertex = v1;
-                e.toVertex = v2;
-                net.addEdge(e);
+                if ((_a = this.activeSet) === null || _a === void 0 ? void 0 : _a.contains(part)) {
+                    // add vertex for label node
+                    const v1 = new LabelVertex(net);
+                    v1.centerX = documentBounds.centerX;
+                    v1.centerY = documentBounds.centerY;
+                    v1.width = documentBounds.width;
+                    v1.height = documentBounds.height;
+                    v1.object = label;
+                    v1.objectBounds = documentBounds.copy();
+                    v1.currentBounds = documentBounds.copy();
+                    net.addVertex(v1);
+                    // add vertex for fixed dummy node at the label's original position
+                    const v2 = new LabelVertex(net);
+                    v2.centerX = v1.centerX;
+                    v2.centerY = v1.centerY;
+                    v2.charge = 0;
+                    v2.isFixed = true;
+                    v2.isDummy = true;
+                    net.addVertex(v2);
+                    // add edge to incentivize the Label to stay near its original position
+                    const e = new go.ForceDirectedEdge(net);
+                    e.length = 0;
+                    e.fromVertex = v1;
+                    e.toVertex = v2;
+                    net.addEdge(e);
+                }
+                else {
+                    const v = new LabelVertex(net);
+                    v.centerX = documentBounds.centerX;
+                    v.centerY = documentBounds.centerY;
+                    v.width = documentBounds.width;
+                    v.height = documentBounds.height;
+                    v.object = label;
+                    v.objectBounds = documentBounds.copy();
+                    v.currentBounds = documentBounds.copy();
+                    v.isFixed = true;
+                    net.addVertex(v);
+                }
             }
         }
         return net;
diff --git a/index.html b/index.html
index dcbb611e4..c594b90af 100644
--- a/index.html
+++ b/index.html
@@ -25,17 +25,17 @@
 
 
 
-
-
-
+
+
+
 
 
-
-
-
+
+
+
 
-
-
+
+
 
 
 
diff --git a/intro/HTMLInteraction.html b/intro/HTMLInteraction.html
index f00bcbca4..9b423cd00 100644
--- a/intro/HTMLInteraction.html
+++ b/intro/HTMLInteraction.html
@@ -12,17 +12,17 @@
 
 
 
-
-
-
+
+
+
 
 
-
-
-
+
+
+
 
-
-
+
+
 
 
 
diff --git a/intro/SVGContext.html b/intro/SVGContext.html
index 5df911b78..6997f3cc6 100644
--- a/intro/SVGContext.html
+++ b/intro/SVGContext.html
@@ -12,17 +12,17 @@
 
 
 
-
-
-
+
+
+
 
 
-
-
-
+
+
+
 
-
-
+
+
 
 
 
diff --git a/intro/angular.html b/intro/angular.html
index 011bac8c8..e4242b48b 100644
--- a/intro/angular.html
+++ b/intro/angular.html
@@ -12,17 +12,17 @@
 
 
 
-
-
-
+
+
+
 
 
-
-
-
+
+
+
 
-
-
+
+
 
 
 
diff --git a/intro/animation.html b/intro/animation.html
index d5eb211c9..9f9493711 100644
--- a/intro/animation.html
+++ b/intro/animation.html
@@ -12,17 +12,17 @@
 
 
 
-
-
-
+
+
+
 
 
-
-
-
+
+
+
 
-
-
+
+
 
 
 
diff --git a/intro/brush.html b/intro/brush.html
index bad929834..a06b9e8b3 100644
--- a/intro/brush.html
+++ b/intro/brush.html
@@ -12,17 +12,17 @@
 
 
 
-
-
-
+
+
+
 
 
-
-
-
+
+
+
 
-
-
+
+
 
 
 
@@ -548,7 +548,7 @@ 
                          Pattern Brushes
                          
       new go.Shape("Rectangle", { name: 'SHAPE', strokeWidth: 0, stroke: null })
         .bind("fill"),
       new go.TextBlock({ margin: 10, font: "bold 18px Verdana" })
-        .bind("text", "key")
+        .bind("text")
     );
 
   const img = new Image();
@@ -562,8 +562,8 @@ 
                          Pattern Brushes
                          
 
   diagram.model = new go.GraphLinksModel(
     [
-      { key: "Alpha", fill: patternBrush },
-      { key: "Beta",  fill: patternBrush2 }
+      { key: 1, text: "Alpha", fill: patternBrush },
+      { key: 2, text: "Beta",  fill: patternBrush2 }
     ]);
 
                      
 
                      
@@ -662,19 +662,19 @@ 
                      Brush Functions
                      
           .bind("stroke", "color",
                 // dark nodes use white text, light nodes use dark text
                 c => go.Brush.isDark(c) ? "white" : "black")
-          .bind("text", "key")
+          .bind("text")
       );
 
   diagram.model = new go.Model(
     [
-      { key: "Alpha", color: "white" },
-      { key: "Beta", color: "black" },
-      { key: "Gamma", color: "darkblue" },
-      { key: "Delta", color: "lightblue" },
-      { key: "Epsilon", color: "darkgreen" },
-      { key: "Zeta", color: "lightgreen" },
-      { key: "Eta", color: "darkred" },
-      { key: "Theta", color: "lightcoral" }
+      { text: "Alpha", color: "white" },
+      { text: "Beta", color: "black" },
+      { text: "Gamma", color: "darkblue" },
+      { text: "Delta", color: "lightblue" },
+      { text: "Epsilon", color: "darkgreen" },
+      { text: "Zeta", color: "lightgreen" },
+      { text: "Eta", color: "darkred" },
+      { text: "Theta", color: "lightcoral" }
     ]
   )
 
                      
diff --git a/intro/buildingObjects.html b/intro/buildingObjects.html
index bbd7e1d19..9d6c5becb 100644
--- a/intro/buildingObjects.html
+++ b/intro/buildingObjects.html
@@ -12,17 +12,17 @@
 
 
 
-
-
-
+
+
+
 
 
-
-
-
+
+
+
 
-
-
+
+
 
 
 
@@ -728,7 +728,7 @@ 
                      Non-rectangular Nodes
                      
       .add(
         new go.Shape("FivePointedStar", { fill: "lightgray" }),
         new go.TextBlock()
-          .bind("text", "key")
+          .bind("text")
       );
 
   diagram.linkTemplate =
@@ -287,11 +287,11 @@ 
                      Non-rectangular Nodes
                      
       );
 
   var nodeDataArray = [
-    { key: "Alpha", loc: "0 0" },
-    { key: "Beta", loc: "100 50" }
+    { key: 1, text: "Alpha", loc: "0 0" },
+    { key: 2, text: "Beta", loc: "100 50" }
   ];
   var linkDataArray = [
-    { from: "Alpha", to: "Beta" }
+    { from: 1, to: 2 }
   ];
   diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
 
                      
diff --git a/intro/contextMenus.html b/intro/contextMenus.html
index f46cea5f4..42f08ad37 100644
--- a/intro/contextMenus.html
+++ b/intro/contextMenus.html
@@ -12,17 +12,17 @@
 
 
 
-
-
-
+
+
+
 
 
-
-
-
+
+
+
 
-
-
+
+
 
 
 
diff --git a/intro/dataBinding.html b/intro/dataBinding.html
index 14d843b6f..2bd9d4b33 100644
--- a/intro/dataBinding.html
+++ b/intro/dataBinding.html
@@ -12,17 +12,17 @@
 
 
 
-
-
-
+
+
+
 
 
-
-
-
+
+
+
 
-
-
+
+
 
 
 
@@ -796,7 +796,7 @@ 
                      Binding string and number propertiesBinding string and number properties
                      @@ -838,7 +838,7 @@

                      Binding string and number propertiesBinding object properties such as new go.Shape("RoundedRectangle", { fill: "white" }) .bind("fill", "color"), new go.TextBlock({ margin: 5 }) - .bind("text", "key") + .bind("text") ); var nodeDataArray = [ // for each node specify the location using Point values - { key: "Alpha", color: "lightblue", loc: new go.Point(0, 0) }, - { key: "Beta", color: "pink", loc: new go.Point(100, 50) } + { key: 1, text: "Alpha", color: "lightblue", loc: new go.Point(0, 0) }, + { key: 2, text: "Beta", color: "pink", loc: new go.Point(100, 50) } ]; var linkDataArray = [ - { from: "Alpha", to: "Beta" } + { from: 1, to: 2 } ]; diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray); @@ -922,15 +922,15 @@

                      Conversion functions

                      new go.Shape("RoundedRectangle", { fill: "white" }) .bind("fill", "color"), new go.TextBlock({ margin: 5 }) - .bind("text", "key") + .bind("text") ); var nodeDataArray = [ - { key: "Alpha", color: "lightblue", loc: "0 0" }, // note string values for location - { key: "Beta", color: "pink", loc: "100 50" } + { key: 1, text: "Alpha", color: "lightblue", loc: "0 0" }, // note string values for location + { key: 2, text: "Beta", color: "pink", loc: "100 50" } ]; var linkDataArray = [ - { from: "Alpha", to: "Beta" } + { from: 1, to: 2 } ]; diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray); @@ -964,16 +964,16 @@

                      Conversion functions

                      .bind("stroke", "highlight", v => v ? "red" : "blue") .bind("strokeWidth", "highlight", v => v ? 3 : 1), new go.TextBlock({ margin: 5 }) - .bind("text", "key") + .bind("text") ); var nodeDataArray = [ - { key: "Alpha", loc: "0 0", highlight: false }, - { key: "Beta", loc: "100 50", highlight: true }, - { key: "Gamma", loc: "0 100" } // highlight property undefined: use defaults + { key: 1, text: "Alpha", loc: "0 0", highlight: false }, + { key: 2, text: "Beta", loc: "100 50", highlight: true }, + { key: 3, text: "Gamma", loc: "0 100" } // highlight property undefined: use defaults ]; var linkDataArray = [ - { from: "Alpha", to: "Beta" } + { from: 1, to: 2 } ]; diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray); @@ -1019,11 +1019,11 @@

                      Changing data values

                      .bind("stroke", "highlight", v => v ? "red" : "blue") .bind("strokeWidth", "highlight", v => v ? 3 : 1), new go.TextBlock({ margin: 5 }) - .bind("text", "key") + .bind("text") ); diagram.model.nodeDataArray = [ - { key: "Alpha", highlight: false } // just one node, and no links + { text: "Alpha", highlight: false } // just one node, and no links ]; function flash() { @@ -1057,7 +1057,7 @@

                      Changing data values

                      new go.Binding("strokeWidth", "highlight", v => v ? 3 : 1)), $(go.TextBlock, { margin: 5 }, - new go.Binding("text", "key")) + new go.Binding("text")) ); @@ -1091,16 +1091,16 @@

                      Changing graph structure

                      new go.Shape("RoundedRectangle", { fill: "yellow", stroke: "orange", strokeWidth: 2 }), new go.TextBlock({ margin: 5 }) - .bind("text", "key") + .bind("text") ); var nodeDataArray = [ - { key: "Alpha" }, - { key: "Beta" }, - { key: "Gamma" } + { key: 1, text: "Alpha" }, + { key: 2, text: "Beta" }, + { key: 3, text: "Gamma" } ]; var linkDataArray = [ - { from: "Alpha", to: "Beta" } + { from: 1, to: 2 } ]; diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray); @@ -1108,10 +1108,10 @@

                      Changing graph structure

                      // all model changes should happen in a transaction diagram.model.commit(m => { var data = m.linkDataArray[0]; // get the first link data - if (m.getToKeyForLinkData(data) === "Beta") - m.setToKeyForLinkData(data, "Gamma"); + if (m.getToKeyForLinkData(data) === 2) + m.setToKeyForLinkData(data, 3); else - m.setToKeyForLinkData(data, "Beta"); + m.setToKeyForLinkData(data, 2); }, "reconnect link"); } function loop() { @@ -1273,11 +1273,11 @@

                      Two-way data binding

                      .add( new go.Shape("RoundedRectangle", { fill: "lightblue", stroke: "blue", strokeWidth: 2 }), new go.TextBlock({ margin: 5 }) - .bind("text", "key") + .bind("text") ); var nodeDataArray = [ - { key: "Alpha", loc: new go.Point(0, 0) } + { text: "Alpha", loc: new go.Point(0, 0) } ]; diagram.model = new go.GraphLinksModel(nodeDataArray); diff --git a/intro/debugging.html b/intro/debugging.html index ad21989ec..cecfb52e1 100644 --- a/intro/debugging.html +++ b/intro/debugging.html @@ -12,17 +12,17 @@ - - - + + + - - - + + + - - + + diff --git a/intro/deployment.html b/intro/deployment.html index 32ee3c69b..2e47c6f63 100644 --- a/intro/deployment.html +++ b/intro/deployment.html @@ -12,17 +12,17 @@ - - - + + + - - - + + + - - + + diff --git a/intro/events.html b/intro/events.html index a6a31aca8..504e5647b 100644 --- a/intro/events.html +++ b/intro/events.html @@ -12,17 +12,17 @@ - - - + + + - - - + + + - - + + diff --git a/intro/extensions.html b/intro/extensions.html index 27f6539ca..daf4fada5 100644 --- a/intro/extensions.html +++ b/intro/extensions.html @@ -12,17 +12,17 @@ - - - + + + - - - + + + - - + + diff --git a/intro/geometry.html b/intro/geometry.html index d778b174d..259e8eb17 100644 --- a/intro/geometry.html +++ b/intro/geometry.html @@ -12,17 +12,17 @@ - - - + + + - - - + + + - - + + diff --git a/intro/graduatedPanels.html b/intro/graduatedPanels.html index 5c2169a6d..08db6609c 100644 --- a/intro/graduatedPanels.html +++ b/intro/graduatedPanels.html @@ -12,17 +12,17 @@ - - - + + + - - - + + + - - + + diff --git a/intro/grids.html b/intro/grids.html index b84d15375..424bbb7d0 100644 --- a/intro/grids.html +++ b/intro/grids.html @@ -12,17 +12,17 @@ - - - + + + - - - + + + - - + + diff --git a/intro/groups.html b/intro/groups.html index 78d1eec3b..1742bdaea 100644 --- a/intro/groups.html +++ b/intro/groups.html @@ -12,17 +12,17 @@ - - - + + + - - - + + + - - + + @@ -247,171 +247,176 @@

                      Groups

                      -Use the Group class to treat a collection of Nodes and Links as if they were a single Node. -Those nodes and links are members of the group; together they constitute a subgraph. + Use the Group class to treat a collection of Nodes and Links as if they were a single Node. + Those nodes and links are members of the group; together they constitute a subgraph.

                      -A subgraph is not another Diagram, so there is no separate HTML Div element for the subgraph of a group. -All of the Parts that are members of a Group belong to the same Diagram as the Group. -There can be links between member nodes and nodes outside of the group as well as links between the group itself and other nodes. -There can even be links between member nodes and the containing group itself. + A subgraph is not another Diagram, so there is no separate HTML Div element for the subgraph of a group. + All of the Parts that are members of a Group belong to the same Diagram as the Group. + There can be links between member nodes and nodes outside of the group as well as links between the group itself and other nodes. + There can even be links between member nodes and the containing group itself.

                      -Groups can also be collapsed and expanded, to hide or show the member parts. + Groups can also be collapsed and expanded, to hide or show the member parts. + This is distinct from collapsing and expanding trees.

                      -The member parts of a group are available via the Group.memberParts property. -Conversely, the Part.containingGroup property refers to the group, if the part belongs to one. -A part can be member of at most one group at a time. -You can set that property in order to add that part to a group. -However you must make sure that no group contains itself, either directly or indirectly through other groups. + The member parts of a group are available via the Group.memberParts property. + Conversely, the Part.containingGroup property refers to the group, if the part belongs to one. + A part can be member of at most one group at a time. + You can set that property in order to add that part to a group. + However you must make sure that no group contains itself, either directly or indirectly through other groups.

                      -Because every Group is a Node, you can have nested groups. -Although member Nodes and Links belong to the Group that contains them, -they are not in the visual tree of the group -- their GraphObject.panel is null and no member part -is in the group's Panel.elements collection. -No Part can be in the visual tree of another Part. -Parts normally do belong directly to one Layer. + Because every Group is a Node, you can have nested groups. + Although member Nodes and Links belong to the Group that contains them, + they are not in the visual tree of the group -- their GraphObject.panel is null and + no member part is in the group's Panel.elements collection. + No Part can be in the visual tree of another Part. + Parts normally do belong directly to one Layer.

                      -See samples that make use of Groups in the samples index. + See samples that make use of Groups in the samples index.

                      Simple Groups

                      -In a GraphLinksModel the Model.nodeDataArray holds node data, each of which might be -represented by a Group rather than by a regular Node. -You can declare that it should be a group by setting the isGroup data property to true. -You can declare that a node data be a member of a group by referring to the group's key as -the group data property value. + In a GraphLinksModel the Model.nodeDataArray holds node data, each of which might be + represented by a Group rather than by a regular Node. + You can declare that it should be a group by setting the isGroup data property to true. + You can declare that a node data be a member of a group by referring to the group's key as the group data property value.

                      -Here is a group containing two nested groups as well as two regular nodes. -If you move a group, its member parts move along. -If you copy a group, its member parts are copied too. -If you delete a group, its member parts are deleted too. -If you move a member node, its containing group inflates or shrinks to cover the area occupied by all of the members. + Here is a group containing two nested groups as well as two regular nodes. + If you move a group, its member parts move along. + If you copy a group, its member parts are copied too. + If you delete a group, its member parts are deleted too. + If you move a member node, its containing group inflates or shrinks to cover the area occupied by all of the members. 

                      
-  diagram.model.nodeDataArray = [
-    { key: "Alpha", isGroup: true },
-    { key: "Beta", group: "Alpha" },
-    { key: "Gamma", group: "Alpha", isGroup: true },
-    { key: "Delta", group: "Gamma" },
-    { key: "Epsilon", group: "Gamma" },
-    { key: "Zeta", group: "Alpha" },
-    { key: "Eta", group: "Alpha", isGroup: true},
-    { key: "Theta", group: "Eta" }
-  ];
+diagram.model.nodeDataArray = [
+  { key: 1, text: "Alpha", isGroup: true },
+  { key: 2, text: "Beta", group: 1 },
+  { key: 3, text: "Gamma", group: 1, isGroup: true },
+  { key: 4, text: "Delta", group: 3 },
+  { key: 5, text: "Epsilon", group: 3 },
+  { key: 6, text: "Zeta", group: 1 },
+  { key: 7, text: "Eta", group: 1, isGroup: true},
+  { key: 8, text: "Theta", group: 7 }
+];

                      -Because Groups are Nodes, a Link may connect with a group as well as with a plain node. + Because Groups are Nodes, a Link may connect with a group as well as with a plain node.

                      -Here is a simple example of four regular nodes and one group node. -In this example the link from "Alpha" goes directly to the "Beta" node, -but the link to "Delta" actually comes from the "Omega" group rather than from any particular member of the group. + Here is a simple example of four regular nodes and one group node. + In this example the link from "Alpha" goes directly to the "Beta" node, + but the link to "Delta" actually comes from the "Omega" group rather than from any particular member of the group.

                      -If you drag the "Delta" node around you can see how the link from the "Omega" group appears to come from the center -of the group and start at the group's edge rather than at any member node. -This is different than for the link from "Alpha" to "Beta". + If you drag the "Delta" node around you can see how the link from the "Omega" group appears to come from the center + of the group and start at the group's edge rather than at any member node. + This is different than for the link from "Alpha" to "Beta".

                      -Note also how the link from "Beta" to "Gamma" is effectively owned by the "Omega" group because -both of the nodes are owned by that group. Copying the group automatically copies the link too. + Note also how the link from "Beta" to "Gamma" is effectively owned by the "Omega" group because + both of the nodes are owned by that group. Copying the group automatically copies the link too.

                      -This example did not set any of the following properties: -Diagram.nodeTemplate, Diagram.groupTemplate, and Diagram.linkTemplate, -in order to demonstrate the default templates for all kinds of node data and link data. + This example did not set any of the following properties: + Diagram.nodeTemplate, Diagram.groupTemplate, and Diagram.linkTemplate, + in order to demonstrate the default templates for Nodes, Groups, and Links.

                      Group Templates

                      -Here is an example of how one might define templates for nodes and for groups. -The node template is very simple: some text inside an ellipse. -The group template is different from a node template in several aspects. + Here is an example of how one might define templates for nodes and for groups. + The node template is very simple: some text inside an ellipse. + The group template is different from a node template in several aspects.

                      -First, the group template builds a go.Group, not a go.Node or go.Part. -The group can use a number of the panel types, just as a node may use various panel types. + First, the group template builds a go.Group, not a go.Node or go.Part. + The group can use a number of the panel types, just as a node may use various panel types.

                      -Second, the group template includes a Placeholder object. -This object, of which you may have at most one within the visual tree of a group, -gets the size and position of the union of the bounds of the member parts, plus some padding. -The use of a Placeholder results in the Group surrounding the collection of group members, -no matter where the member nodes are placed. + Second, the group template includes a Placeholder object. + This object, of which you may have at most one within the visual tree of a Group, + gets the size and position of the union of the bounds of the member parts, plus some padding. + The use of a Placeholder results in the Group surrounding the collection of group members, + no matter where the member nodes are placed. 

                      
-  diagram.nodeTemplate =
-    $(go.Node, "Auto",
-      $(go.Shape, "Ellipse", { fill: "white" }),
-      $(go.TextBlock,
-        new go.Binding("text", "key"))
+diagram.nodeTemplate =
+  new go.Node("Auto")
+    .add(
+      new go.Shape("Ellipse", { fill: "white" }),
+      new go.TextBlock()
+        .bind("text")
     );
 
-  diagram.groupTemplate =
-    $(go.Group, "Vertical",
-      $(go.Panel, "Auto",
-        $(go.Shape, "RoundedRectangle",  // surrounds the Placeholder
-          { parameter1: 14,
-            fill: "rgba(128,128,128,0.33)" }),
-        $(go.Placeholder,    // represents the area of all member parts,
-          { padding: 5})  // with some extra padding around them
-      ),
-      $(go.TextBlock,         // group title
-        { alignment: go.Spot.Right, font: "Bold 12pt Sans-Serif" },
-        new go.Binding("text", "key"))
+diagram.groupTemplate =
+  new go.Group("Vertical")
+    .add(
+      new go.Panel("Auto")
+        .add(
+          new go.Shape("RoundedRectangle", {  // surrounds the Placeholder
+              parameter1: 14,
+              fill: "rgba(128,128,128,0.33)"
+            }),
+          new go.Placeholder(    // represents the area of all member parts,
+              { padding: 5})  // with some extra padding around them
+        ),
+      new go.TextBlock({         // group title
+          alignment: go.Spot.Right, font: "Bold 12pt Sans-Serif"
+        })
+        .bind("text")
     );
 
-  var nodeDataArray = [
-    { key: "Alpha" },
-    { key: "Beta", group: "Omega" },
-    { key: "Gamma", group: "Omega" },
-    { key: "Omega", isGroup: true },
-    { key: "Delta" }
-  ];
-  var linkDataArray = [
-    { from: "Alpha", to: "Beta" },  // from outside the Group to inside it
-    { from: "Beta", to: "Gamma" },  // this link is a member of the Group
-    { from: "Omega", to: "Delta" }  // from the Group to a Node
-  ];
-  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
-
                      +var nodeDataArray = [ + { key: 1, text: "Alpha" }, + { key: 2, text: "Beta", group: 4 }, + { key: 3, text: "Gamma", group: 4 }, + { key: 4, text: "Omega", isGroup: true }, + { key: 5, text: "Delta" } +]; +var linkDataArray = [ + { from: 1, to: 2 }, // from outside the Group to inside it + { from: 2, to: 3 }, // this link is a member of the Group + { from: 4, to: 5 } // from the Group to a Node +]; +diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray); +

                      -Note how when you move the "Beta" or "Gamma" nodes the "Omega" group automatically resizes so that the -TextBlock on the group stays below and on the right side of the "RoundedRectangle" shape. + Note how when you move the "Beta" or "Gamma" nodes the "Omega" group automatically resizes so that the + TextBlock on the group stays below and on the right side of the "RoundedRectangle" shape.

                      -Just as a Diagram can have its own Layout, a Group can have its own Group.layout. -This is discussed in the page about SubGraphs. + Just as a Diagram can have its own Layout, a Group can have its own Group.layout. + This is discussed in the next page about SubGraphs.

                      diff --git a/intro/highlighting.html b/intro/highlighting.html index 8b2c84438..c0e03eb14 100644 --- a/intro/highlighting.html +++ b/intro/highlighting.html @@ -12,17 +12,17 @@ - - - + + + - - - + + + - - + + @@ -247,63 +247,65 @@

                      Highlighting

                      - It is common to make a Node (or a part of a Node or a Link) stand out by "highlighting" it in some way. This happens with selection when a selection Adornment - is shown. However one frequently wants to highlight Parts independently of selection. This can be done by changing the fill or stroke of a Shape, replacing a - Picture source with another source, adding or removing a shadow, and so on. + It is common to make a Node (or a part of a Node or a Link) stand out by "highlighting" it in some way. + This happens with selection when a selection Adornment is shown. + However one frequently wants to highlight Parts independently of selection. + This can be done by changing the fill or stroke of a Shape, replacing a Picture source with another source, adding or removing a shadow, and so on.

                      Highlighting a Node upon Mouse Over

                      - The most general kind of highlighting is to change appearance when an action occurs, such as mousing over a node. This can draw attention to interactive Nodes - or Links or really any GraphObject, such as buttons. This is why predefined buttons in GoJS highlight on mouse-over. + The most general kind of highlighting is to change appearance when an action occurs, such as mousing over a node. + This can draw attention to interactive Nodes or Links or really any GraphObject, such as buttons. + This is why predefined buttons in GoJS highlight on mouse-over. +

                      +

                      + To achieve this effect you just need to define GraphObject.mouseEnter and GraphObject.mouseLeave event handlers.

                      -

                      To achieve this effect you just need to define GraphObject.mouseEnter and GraphObject.mouseLeave event handlers.

                      
-  function mouseEnter(e, obj) {
-    var shape = obj.findObject("SHAPE");
-    shape.fill = "#6DAB80";
-    shape.stroke = "#A6E6A1";
-    var text = obj.findObject("TEXT");
-    text.stroke = "white";
-  };
+function mouseEnter(e, node) {
+  var shape = node.findObject("SHAPE");
+  shape.fill = "green";
+  shape.stroke = "lightgreen";
+  var text = node.findObject("TEXT");
+  text.stroke = "white";
+};
 
-  function mouseLeave(e, obj) {
-    var shape = obj.findObject("SHAPE");
-    // Return the Shape's fill and stroke to the defaults
-    shape.fill = obj.data.color;
-    shape.stroke = null;
-    // Return the TextBlock's stroke to its default
-    var text = obj.findObject("TEXT");
-    text.stroke = "black";
-  };
+function mouseLeave(e, node) {
+  var shape = node.findObject("SHAPE");
+  // Return the Shape's fill and stroke to the defaults
+  shape.fill = node.data.color;
+  shape.stroke = null;
+  // Return the TextBlock's stroke to its default
+  var text = node.findObject("TEXT");
+  text.stroke = "black";
+};
 
-  diagram.nodeTemplate =
-    $(go.Node, "Auto",
-      {
-        mouseEnter: mouseEnter,
-        mouseLeave: mouseLeave
-      },
-      $(go.Shape, "Rectangle",
-        { strokeWidth: 2, stroke: null, name: "SHAPE" },
-        new go.Binding("fill", "color")),
-      $(go.TextBlock,
-        { margin: 10, font: "bold 18px Verdana", name: "TEXT" },
-        new go.Binding("text", "key"))
+diagram.nodeTemplate =
+  new go.Node("Auto", {
+      mouseEnter: mouseEnter,
+      mouseLeave: mouseLeave
+    })
+    .add(
+      new go.Shape({ strokeWidth: 2, stroke: null, name: "SHAPE" })
+        .bind("fill", "color"),
+      new go.TextBlock({ margin: 10, font: "bold 18px Verdana", name: "TEXT" })
+        .bind("text")
     );
 
-  diagram.model = new go.GraphLinksModel(
+diagram.model = new go.GraphLinksModel(
   [
-    { key: "Alpha", color: "#96D6D9" },
-    { key: "Beta",  color: "#96D6D9" },
-    { key: "Gamma", color: "#EFEBCA" },
-    { key: "Delta", color: "#EFEBCA" }
+    { key: 1, text: "Alpha", color: "#96D6D9" },
+    { key: 2, text: "Beta",  color: "#96D6D9" },
+    { key: 3, text: "Gamma", color: "#EFEBCA" },
+    { key: 4, text: "Delta", color: "#EFEBCA" }
   ],
   [
-    { from: "Alpha", to: "Beta" },
-    { from: "Alpha", to: "Gamma" },
-    { from: "Beta", to: "Beta" },
-    { from: "Gamma", to: "Delta" },
-    { from: "Delta", to: "Alpha" }
+    { from: 1, to: 2 },
+    { from: 1, to: 3 },
+    { from: 2, to: 2 },
+    { from: 3, to: 4 },
+    { from: 4, to: 1 }
   ]);

                      - Click on a node to highlight outbound connected links and nodes. Click in the diagram background to remove all highlights. Note that the highlighting is - independent of selection. + Click on a node to highlight outbound connected links and nodes. + Click in the diagram background to remove all highlights. + Note that the highlighting is independent of selection.

                      - The use of data binding to modify the Shape properties allows you to avoid specifying names for each Shape and writing code to find the Shape and modify its - properties. + The use of data binding to modify the Shape properties allows you to avoid specifying names for each Shape + and writing code to find the Shape and modify its properties. + Note how the call to establish a Binding where the source object is the whole Node instead of the node data + is to GraphObject.bindObject instead of the usual GraphObject.bind.

                      Changing Node Size When Highlighting

                      - You may want to increase the size of a node or of an element in a node in order to highlight it. For example you could have a Binding on - GraphObject.scale or Shape.strokeWidth: + You may want to increase the size of a node or of an element in a node in order to highlight it. + For example you could have a Binding on GraphObject.scale or Shape.strokeWidth: 

                      
-  $(go.Node, ...
-    $(go.Shape, ...,
-      new go.Binding("strokeWidth", "isHighlighted", h => h ? 5 : 1)),
-    ...
-  )
+  new go.Node(...)
+    .add(
+      new go.Shape(...)
+        .bindObject("strokeWidth", "isHighlighted", h => h ? 5 : 1),
+      ...
+    )

                      - However, doing so will change the size of the object. That is likely to invalidate the route of any links that are connected with that node. That might not - matter in many apps, but in some cases the routes of some links may have been reshaped by the user. Any recomputation of the route due to a connected node - moving or changing size might lose that route. + However, doing so will change the size of the object. + That is likely to invalidate the route of any links that are connected with that node. + That might not matter in many apps, but in some cases the routes of some links may have been reshaped by the user. + Any recomputation of the route due to a connected node moving or changing size might lose that route.

                      - If that is a consideration in your app, you might consider instead having each node hold an additional Shape that would provide the highlighting when shown - and that would be unseen otherwise. But do not toggle the GraphObject.visible property, because that would cause the node to change size. Instead - toggle the GraphObject.opacity property between 0.0 and 1.0. + If that is a consideration in your app, you might consider instead having each node hold an additional Shape + that would provide the highlighting when shown and that would be unseen otherwise. + But do not toggle the GraphObject.visible property, because that would cause the node to change size. + Instead toggle the GraphObject.opacity property between 0.0 and 1.0. 

                      
-  diagram.nodeTemplate =
-    $(go.Node, "Auto",
-      {
-        locationSpot: go.Spot.Center,
-        // when the user clicks on a Node, highlight all Links coming out of the node
-        // and all of the Nodes at the other ends of those Links.
-        click: (e, node) => {
-            var diagram = node.diagram;
-            diagram.startTransaction("highlight");
-            diagram.clearHighlighteds();
-            node.findLinksOutOf().each(l => l.isHighlighted = true);
-            node.findNodesOutOf().each(n => n.isHighlighted = true);
-            diagram.commitTransaction("highlight");
-          }
-      },
-      $(go.Panel, "Auto",
-        $(go.Shape, "Ellipse",
-          { strokeWidth: 2, portId: "" },
-          new go.Binding("fill", "color")),
-        $(go.TextBlock,
-          { margin: 5, font: "bold 18px Verdana" },
-          new go.Binding("text", "key"))
-      ),
+diagram.nodeTemplate =
+  new go.Node("Auto", {
+      locationSpot: go.Spot.Center,
+      // when the user clicks on a Node, highlight all Links coming out of the node
+      // and all of the Nodes at the other ends of those Links.
+      click: (e, node) => {
+          const diagram = node.diagram;
+          diagram.startTransaction("highlight");
+          diagram.clearHighlighteds();
+          node.findLinksOutOf().each(l => l.isHighlighted = true);
+          node.findNodesOutOf().each(n => n.isHighlighted = true);
+          diagram.commitTransaction("highlight");
+        }
+    })
+    .add(
+      new go.Panel("Auto")
+        .add(
+          new go.Shape("Ellipse", { strokeWidth: 2, portId: "" })
+            .bind("fill", "color"),
+          new go.TextBlock({ margin: 5, font: "bold 18px Verdana" })
+            .bind("text")
+        ),
       // the highlight shape, which is always a thick red ellipse
-      $(go.Shape, "Ellipse",
-        // this shape is the "border" of the Auto Panel, but is drawn in front of the
-        // regular Auto Panel holding the black-bordered ellipse and text
-        { isPanelMain: true, spot1: go.Spot.TopLeft, spot2: go.Spot.BottomRight },
-        { strokeWidth: 6, stroke: "red", fill: null },
+      new go.Shape("Ellipse", {
+          // this shape is the "border" of the Auto Panel, but is drawn in front of the
+          // regular Auto Panel holding the black-bordered ellipse and text
+          isPanelMain: true, spot1: go.Spot.TopLeft, spot2: go.Spot.BottomRight,
+          strokeWidth: 6, stroke: "red", fill: null
+        })
         // only show this ellipse when Part.isHighlighted is true
-        new go.Binding("opacity", "isHighlighted", h => h ? 1.0 : 0.0)
-            .ofObject())
+        .bindObject("opacity", "isHighlighted", h => h ? 1.0 : 0.0)
     );
 
-  // define the Link template
-  diagram.linkTemplate =
-    $(go.Link,
-      { toShortLength: 4, reshapable: true, resegmentable: true },
-      $(go.Shape,
+// define the Link template
+diagram.linkTemplate =
+  new go.Link({ toShortLength: 4, reshapable: true, resegmentable: true })
+    .add(
+      new go.Shape()
         // when highlighted, draw as a thick red line
-        new go.Binding("stroke", "isHighlighted", h => h ? "red" : "black")
-            .ofObject(),
-        new go.Binding("strokeWidth", "isHighlighted", h => h ? 3 : 1)
-            .ofObject()),
-      $(go.Shape,
-        { toArrow: "Standard", strokeWidth: 0 },
-        new go.Binding("fill", "isHighlighted", h => h ? "red" : "black")
-            .ofObject())
+        .bindObject("stroke", "isHighlighted", h => h ? "red" : "black")
+        .bindObject("strokeWidth", "isHighlighted", h => h ? 3 : 1),
+      new go.Shape({ toArrow: "Standard", strokeWidth: 0 })
+        .bindObject("fill", "isHighlighted", h => h ? "red" : "black")
     );
 
-  // when the user clicks on the background of the Diagram, remove all highlighting
-  diagram.click = e => {
-    diagram.startTransaction("no highlighteds");
-    diagram.clearHighlighteds();
-    diagram.commitTransaction("no highlighteds");
-  };
+// when the user clicks on the background of the Diagram, remove all highlighting
+diagram.click = e => {
+  e.diagram.commit(d => d.clearHighlighteds(), "no highlighteds");
+};
 
-  diagram.model = new go.GraphLinksModel(
-    [
-      { key: "Alpha", color: "#96D6D9" },
-      { key: "Beta",  color: "#96D6D9" },
-      { key: "Gamma", color: "#EFEBCA" },
-      { key: "Delta", color: "#EFEBCA" }
-    ],
-    [
-      { from: "Alpha", to: "Beta" },
-      { from: "Alpha", to: "Gamma" },
-      { from: "Beta", to: "Beta" },
-      { from: "Gamma", to: "Delta" },
-      { from: "Delta", to: "Alpha" }
-    ]);
+diagram.model = new go.GraphLinksModel(
+  [
+    { key: 1, text: "Alpha", color: "#96D6D9" },
+    { key: 2, text: "Beta",  color: "#96D6D9" },
+    { key: 3, text: "Gamma", color: "#EFEBCA" },
+    { key: 4, text: "Delta", color: "#EFEBCA" }
+  ],
+  [
+    { from: 1, to: 2 },
+    { from: 1, to: 3 },
+    { from: 2, to: 2 },
+    { from: 3, to: 4 },
+    { from: 4, to: 1 }
+  ]);

                      - The highlight Shape is the outer ellipse that always has a thick red stroke. It is normally hidden by having zero opacity, but the Binding will change its - opacity to one when Part.isHighlighted is true. + The highlight Shape is the outer ellipse that always has a thick red stroke. + It is normally hidden by having zero opacity, but the Binding will change its opacity to one when Part.isHighlighted is true.

                      - That highlight Shape is always shown in front of the panel of the colored ellipse and text by putting it afterwards in the list of the panel's child elements. - However since the "Auto" Panel assumes the first element acts as the border, we need to set GraphObject.isPanelMain - to true on the highlight Shape so that it is the border for the inner panel. + That highlight Shape is always shown in front of the panel of the colored ellipse and text by putting it + afterwards in the list of the panel's child elements. + However since the "Auto" Panel assumes the first element acts as the border, + we need to set GraphObject.isPanelMain to true on the highlight Shape so that it is the border for the inner panel.

                      diff --git a/intro/index.html b/intro/index.html index 175b45b08..8c4f5cdc6 100644 --- a/intro/index.html +++ b/intro/index.html @@ -17,17 +17,17 @@ - - - + + + - - - + + + - - + + diff --git a/intro/initialView.html b/intro/initialView.html index cf013ff32..b46954ffc 100644 --- a/intro/initialView.html +++ b/intro/initialView.html @@ -12,17 +12,17 @@ - - - + + + - - - + + + - - + + diff --git a/intro/itemArrays.html b/intro/itemArrays.html index 028c439a7..d255f7e7d 100644 --- a/intro/itemArrays.html +++ b/intro/itemArrays.html @@ -12,17 +12,17 @@ - - - + + + - - - + + + - - + + diff --git a/intro/layers.html b/intro/layers.html index dd30748a8..377e9cce5 100644 --- a/intro/layers.html +++ b/intro/layers.html @@ -12,17 +12,17 @@ - - - + + + - - - + + + - - + + diff --git a/intro/layouts.html b/intro/layouts.html index 220f82120..288f4be05 100644 --- a/intro/layouts.html +++ b/intro/layouts.html @@ -12,17 +12,17 @@ - - - + + + - - - + + + - - + + @@ -247,45 +247,53 @@

                      Diagram Layouts

                      - In general terms, a "layout" is a way of sizing and positioning a collection of objects. HTML has its own layouts for its HTML elements. In GoJS you - have already seen many examples of Panel layout, such as Auto or Table, which sizes and positions GraphObjects within a Panel. GoJS also - provides Diagram layouts, which position Nodes and route Links within a Diagram or a Group. + In general terms, a "layout" is a way of sizing and positioning a collection of objects. HTML has its own layouts for its HTML elements. + In GoJS you have already seen many examples of Panel layout, such as Auto or Table, which sizes and positions GraphObjects within a Panel. + GoJS also provides Diagram layouts, which position Nodes and route Links within a Diagram or a Group.

                      - Naturally the principal purpose of each diagram Layout is to position nodes, typically by calling Part.move. But layouts also may also result in - custom routing of the links, by setting properties on each Link. For example TreeLayout also ensures that links are routed in the expected - direction by setting Link.fromSpot and Link.toSpot depending on the TreeLayout.angle. (However, that behavior can be disabled by setting - TreeLayout.setsPortSpot and TreeLayout.setsChildPortSpot. The same is true for some other layouts.) + Naturally the principal purpose of each diagram Layout is to position nodes, typically by calling Part.move. + But layouts also may also result in custom routing of the links, by setting properties on each Link. + For example TreeLayout also ensures that links are routed in the expected direction by setting + Link.fromSpot and Link.toSpot depending on the TreeLayout.angle. + (However, that behavior can be disabled by setting TreeLayout.setsPortSpot and TreeLayout.setsChildPortSpot. + The same is true for some other layouts.)

                      - Diagram layouts can be accomplished in several manners. Manual layouts occur because the user moves nodes, thereby establishing new positions for those nodes. - Such layouts might be saved in some persistent data format and later loaded using data binding or assignments in code. Programmatic layouts happen when some - code executes to set the Part position or location. Automatic layouts are programmatic layouts that are implemented by the Layout class or its - subclasses. + Diagram layouts can be accomplished in several manners. + Manual layouts occur because the user moves nodes, thereby establishing new positions for those nodes. + Such layouts might be saved in some persistent data format and later loaded using data binding or assignments in code. + Programmatic layouts happen when some code executes to set the Part position or location. + Automatic layouts are programmatic layouts that are implemented by the Layout class or its subclasses.

                      Default Layout

                      - The value of Diagram.layout defaults to an instance of Layout. This kind of layout is unlike all of the other layout subclasses, in that it only - sets the position of nodes that do not already have a position -- i.e. where the X or Y of the GraphObject.actualBounds is NaN. It leaves unmodified - all nodes that do have a defined position, and it ignores all links. + The value of Diagram.layout defaults to an instance of Layout. + This kind of layout is unlike all of the other layout subclasses, in that it only sets the position of nodes that do not already + have a position -- i.e. where the X or Y of the GraphObject.actualBounds is NaN. + It leaves unmodified all nodes that do have a defined position, and it ignores all links.

                      -

                      - Many of the examples you have seen so far do not set Diagram.layout and thus use the default layout. Some of the examples data bind the - Part.location or GraphObject.position to a data property. Those examples are basically using manual layout, but with the node positions coming - from the node data rather than from arrangement by the user. + The default layout is used in apps where the user is expected to position each Node, perhaps with the aid of grid-snapping or with a tool. + Many of the examples you have seen so far do not set Diagram.layout and thus use the default layout. + Some of the examples data bind the Part.location or GraphObject.position to a data property. + Those examples are basically using manual layout, but with the node positions coming from the node data rather than from arrangement by the user. +

                      +

                      + Often such apps are diagram editors, where the user places and adjusts the locations of nodes, and those locations are saved in the server. + Such bindings are usually TwoWay, in order to automatically save the node locations to the model data.

                      -

                      - However many of the examples just allow the standard behavior of the Layout class to assign positions to the nodes in the order in which they are seen - by the layout. Those examples are exhibiting automatic layout behavior. + However many of the examples just allow the standard behavior of a Layout class or subclass to assign positions to the nodes + in the order in which they are seen by the layout and considering any link relationships between the nodes. + Those examples are exhibiting automatic layout behavior.

                      Automatic Layouts

                      -

                      GoJS offers several kinds of automatic layouts, including:

                      +

                      GoJS offers several kinds of built-in automatic layouts, including:

                      -

                      There are samples for each of these layouts, demonstrating the effects of setting various detailed layout properties:

                      +

                      + There are samples for each of these layouts, demonstrating the effects of setting various detailed layout properties. + Many of the properties are very specific to the particular kind of layout that they are trying to affect. +

                      - In the introduction pages and samples you will see many examples that make use of automatic layout by setting the - Diagram.layout property. - Search the sources of the samples for many more examples. + In the introduction pages and samples you will see many examples that make use of automatic layout by setting the Diagram.layout property.

                      Layout Usage

                      -

                      You can set Diagram.layout in a JavaScript statement:

                      +

                      + You can set Diagram.layout in a JavaScript statement: +

                      diagram.layout = new go.ForceDirectedLayout();
                      +or: 
                      
 var diagram =
   new go.Diagram("myDiagramDiv",
@@ -328,46 +338,48 @@ 
                      Grid Layout
                      
 
                      A simple layout for placing Nodes in a grid-like arrangement.
                      
 
 
 
 
 
                      
@@ -509,54 +527,57 @@ 
                      Force-Directed Layout
                      
 
 
                      Layered Digraph Layout
                      
 
-
                      This arranges nodes of directed graphs into layers (rows or columns).
                      
+
                      
+  This arranges nodes of directed graphs into layers, rows or columns depending on the LayeredDigraphLayout.direction.
+  Unlike TreeLayout, this works not only with tree-structured graphs, but with any graph, although it's best with directed acyclic graphs.
+
                      
 
 
 
 
 
                      
@@ -632,12 +655,13 @@ 
                      Circular Layout
                      
 
                      Custom Layouts
                      
 
 
                      
-  GoJS allows for the creation of custom layouts. The intro page on GoJS extensions gives a simple example of a custom layout. See
-  more samples that make use of custom layouts in the samples index.
+  GoJS encourages creation of custom layouts.
+  The intro page on GoJS extensions gives a simple example of a custom layout.
+  See more samples that make use of custom layouts in the samples index.
 
                      
 
                      
-  There are also many layouts that are extensions -- not predefined in the go.js or go-debug.js library, but available as source code
-  in one of the three extension directories, with some documentation, and with corresponding samples.
+  There are also many layouts that are extensions -- not predefined in the go.js or go-debug.js library,
+  but available as source code in one of the three extension directories, with some documentation, and with corresponding samples.
 
                      
 
                        
   
                      • 
@@ -684,37 +708,43 @@ 
                        Custom Layouts
                        
 
 
                        Layout Invalidation
                        
 
                        
-  A layout is considered "valid" when it has performed its positioning of its nodes and perhaps routed its links. However some kinds of changes cause a layout
-  to become "invalid", thereby causing it to be performed again in the near future. Because layouts can be computationally expensive, automatic layouts are not
-  performed as soon as a layout is invalidated. Instead they are typically performed at the end of a transaction.
+  A layout is considered "valid" when it has performed its positioning of its nodes and perhaps routed its links.
+  However some kinds of changes cause a layout to become "invalid", thereby causing it to be performed again in the near future.
+  Because layouts can be computationally expensive, automatic layouts are not performed as soon as a layout is invalidated.
+  Instead they are typically performed at the end of a transaction.
 
                        
 
                        
-  The most common reasons for a layout to be invalidated are because a node or a link has been added or removed from the collection of nodes and links that a
-  layout is responsible for, or because a node or a link has changed visibility, or because a node has changed size. If you do not want an automatic layout to
-  happen when such a change occurs, it may be easiest to set
-  Layout.isOngoing to false.
+  The most common reasons for a layout to be invalidated are because a node or a link has been added or removed from the collection of
+  nodes and links that a layout is responsible for, or because a node or a link has changed visibility, or because a node has changed size.
+  If you do not want an automatic layout to happen when such a change occurs, it may be easiest to set Layout.isOngoing to false.
 
                        
 
                        
-  Another common situation is where you have set Diagram.layout to some kind of layout but you want to load a diagram (model) that contains manually
-  positioned or adjusted node locations. The Binding of Part.location to the model data is effective, but the locations are lost when a layout is
-  performed immediately after loading. This situation can be avoided by setting Layout.isInitial to false. After the initial layout the layout might
-  still be invalidated by adding or removing or changing the visibility of a node or a link or by a change in node size, unless you have also set
-  Layout.isOngoing to false. When both Layout.isInitial and Layout.isOngoing are false, you can still explicitly cause a layout to happen
+  Another common situation is where you have set Diagram.layout to some kind of layout but you want to load a diagram (model)
+  that contains manually positioned or adjusted node locations.
+  The Binding of Part.location to the model data is effective,
+  but the locations are lost when a layout is performed immediately after loading.
+  This situation can be avoided by setting Layout.isInitial to false.
+  After the initial layout the layout might still be invalidated by adding or removing or changing the visibility of a node or a link
+  or by a change in node size, unless you have also set Layout.isOngoing to false.
+  When both Layout.isInitial and Layout.isOngoing are false, you can still explicitly cause a layout to happen
   by either calling Layout.invalidateLayout or by calling Diagram.layoutDiagram with a true argument.
 
                        
 
                        
-  For example, in editors it is commonplace to have TwoWay Bindings on Node.location to save manually adjusted node locations. This means that saved
-  models will have saved locations for all of the nodes. But if you create a new model without all of the node data objects having real locations, you will want
-  a layout to be performed initially when the model is loaded. You can accomplish this by setting Layout.isInitial to false (and optionally
-  Layout.isOngoing to false, if that is what you want when users add or remove nodes or links) and then implementing an "InitialLayoutCompleted"
-  DiagramEvent listener that decides whether a layout is needed. The decision could be to look at a flag that you add to the Model.modelData. Or
-  you could look at all of the nodes to make sure their locations have real values:
+  For example, in diagram editors it is commonplace to have TwoWay Bindings on Node.location to save manually adjusted node locations.
+  This means that saved models will have saved locations for all of the nodes.
+  But if you create a new model without all of the node data objects having real locations,
+  you will want a layout to be performed initially when the model is loaded.
+  You can accomplish this by setting Layout.isInitial to false (and optionally Layout.isOngoing to false,
+  if that is what you want when users add or remove nodes or links) and then implementing an "InitialLayoutCompleted"
+  DiagramEvent listener that decides whether a layout is needed.
+  The decision could be to look at a flag that you add to the Model.modelData.
+  Or you could look at all of the nodes to make sure their locations have real values:
 
                        
 
                        
 new go.Diagram(. . .,
   {
     . . .,
-    layout: $(go.TreeLayout, { isInitial: false, isOngoing: false }, . . .),
+    layout: new go.TreeLayout({ isInitial: false, isOngoing: false }, . . .),
     "InitialLayoutCompleted": e => {
       // if not all Nodes have real locations, force a layout to happen
       if (!e.diagram.nodes.all(n => n.location.isReal())) {
@@ -724,23 +754,30 @@ 
                        Layout Invalidation
                        
   })
 
                        
 
                        
-  But if you do not want a change to a particular Node or Link to cause an automatic layout, yet you do want that invalidation for other Nodes or Links, you can
-  set the Part.layoutConditions property to the combination of Part "Layout..." flags that suits your needs. It is most common to not want a
-  layout for the LayoutConditions.NodeSized condition:
+  But if you do not want a change to a particular Node or Link to cause an automatic layout,
+  yet you do want that invalidation for other Nodes or Links, you can set the Part.layoutConditions property to
+  the combination of Part "Layout..." flags that suits your needs.
+  It is most common to not want a layout for the LayoutConditions.NodeSized condition:
 
                        
 
                        
-  $(go.Node, . . .,
-    { layoutConditions: go.LayoutConditions.Standard & ~go.LayoutConditions.NodeSized },
+  new go.Node(. . ., {
+      layoutConditions: go.LayoutConditions.Standard & ~go.LayoutConditions.NodeSized,
+      . . .
+    })
     . . .
-  )
 
                        
-
                        Parts that remain not visible or that are in layers that are Layer.isTemporary also never invalidate any Layout.
                        
 
                        
-  Finally, you can set Part.isLayoutPositioned to false in order for the Layout to completely ignore that Part. But you will have to make sure that that
-  Part does have a real Part.location, since no layout will set it for you. Without a real location the part will not be visible anywhere in the diagram.
-  Furthermore if a node has isLayoutPositioned set to false, Layouts will not only ignore that node but also all links connecting with that node. Because the
-  node will not be moved by the layout, it might overlap with the laid-out nodes and links. You can also set or bind Part.isLayoutPositioned to false on
-  Links in order to have the layout ignore those links. This is demonstrated in Org Chart Extras.
+  Parts that remain not visible or that are in layers that are Layer.isTemporary also never invalidate any Layout.
+
                        
+
                        
+  Finally, you can set Part.isLayoutPositioned to false in order for the Layout to completely ignore that Part.
+  But you will have to make sure that that Part does have a real Part.location, since no layout will set it for you.
+  Without a real location the part will not be visible anywhere in the diagram.
+  Furthermore if a node has isLayoutPositioned set to false, Layouts will not only ignore that node
+  but also all links connecting with that node.
+  Because the node will not be moved by the layout, it might overlap with the laid-out nodes and links.
+  You can also set or bind Part.isLayoutPositioned to false on Links in order to have the layout ignore those links.
+  This is demonstrated in Org Chart Extras.
                      diff --git a/intro/legends.html b/intro/legends.html index 6fc9b63bb..8f2b520bf 100644 --- a/intro/legends.html +++ b/intro/legends.html @@ -12,17 +12,17 @@ - - - + + + - - - + + + - - + + diff --git a/intro/linkLabels.html b/intro/linkLabels.html index 4bed1fb9c..a9e4647b4 100644 --- a/intro/linkLabels.html +++ b/intro/linkLabels.html @@ -12,17 +12,17 @@ - - - + + + - - - + + + - - + + diff --git a/intro/links.html b/intro/links.html index 598dd37cf..520e812a3 100644 --- a/intro/links.html +++ b/intro/links.html @@ -12,17 +12,17 @@ - - - + + + - - - + + + - - + + diff --git a/intro/makingImages.html b/intro/makingImages.html index 398ea1d13..d91344903 100644 --- a/intro/makingImages.html +++ b/intro/makingImages.html @@ -12,17 +12,17 @@ - - - + + + - - - + + + - - + + diff --git a/intro/makingSVG.html b/intro/makingSVG.html index 56fb5c56e..33048144d 100644 --- a/intro/makingSVG.html +++ b/intro/makingSVG.html @@ -12,17 +12,17 @@ - - - + + + - - - + + + - - + + diff --git a/intro/nodeScript.html b/intro/nodeScript.html index 42da83feb..c588929f8 100644 --- a/intro/nodeScript.html +++ b/intro/nodeScript.html @@ -12,17 +12,17 @@ - - - + + + - - - + + + - - + + diff --git a/intro/nodes.html b/intro/nodes.html index f9e2b6aa2..0b80476ad 100644 --- a/intro/nodes.html +++ b/intro/nodes.html @@ -12,17 +12,17 @@ - - - + + + - - - + + + - - + + @@ -272,11 +272,11 @@

                      Simple borders

                      new go.Shape("Rectangle") .bind("fill", "color"), new go.TextBlock({ margin: 5 }) - .bind("text", "key") + .bind("text") ); diagram.model.nodeDataArray = [ - { key: "Alpha", color: "lightblue" } + { text: "Alpha", color: "lightblue" } ];                       @@ -294,16 +294,16 @@

                      Shaped nodes

                      .bind("figure", "fig") .bind("fill", "color"), new go.TextBlock({ margin: 5 }) - .bind("text", "key") + .bind("text") ); diagram.model.nodeDataArray = [ - { key: "Alpha", color: "lightblue", fig: "RoundedRectangle" }, - { key: "Beta", color: "lightblue", fig: "Ellipse" }, - { key: "Gamma", color: "lightblue", fig: "Hexagon" }, - { key: "Delta", color: "lightblue", fig: "FramedRectangle" }, - { key: "Epsilon", color: "lightblue", fig: "Cloud" }, - { key: "Zeta", color: "lightblue", fig: "Procedure" } + { text: "Alpha", color: "lightblue", fig: "RoundedRectangle" }, + { text: "Beta", color: "lightblue", fig: "Ellipse" }, + { text: "Gamma", color: "lightblue", fig: "Hexagon" }, + { text: "Delta", color: "lightblue", fig: "FramedRectangle" }, + { text: "Epsilon", color: "lightblue", fig: "Cloud" }, + { text: "Zeta", color: "lightblue", fig: "Procedure" } ]; @@ -333,7 +333,7 @@

                      Complex contents

                      row: 0, column: 0, columnSpan: 3, alignment: go.Spot.Center, font: "bold 12pt sans-serif" }) - .bind("text", "key"), + .bind("text"), new go.TextBlock("First: ", { row: 1, column: 0 }), new go.TextBlock({ row: 1, column: 2 }) .bind("text", "prop1"), @@ -344,7 +344,7 @@

                      Complex contents

                      ); diagram.model.nodeDataArray = [ - { key: "Alpha", prop1: "value of 'prop1'", prop2: "the other property" } + { text: "Alpha", prop1: "value of 'prop1'", prop2: "the other property" } ]; @@ -369,16 +369,16 @@

                      Fixed-size nodes

                      .bind("figure", "fig") .bind("fill", "color"), new go.TextBlock({ margin: 5 }) - .bind("text", "key") + .bind("text") ); diagram.model.nodeDataArray = [ - { key: "Alpha", color: "lightblue", fig: "RoundedRectangle" }, - { key: "Beta", color: "lightblue", fig: "Ellipse" }, - { key: "Gamma", color: "lightblue", fig: "Hexagon" }, - { key: "Delta", color: "lightblue", fig: "FramedRectangle" }, - { key: "Epsilon,Epsilon,Epsilon", color: "lightblue", fig: "Cloud" }, - { key: "Z", color: "lightblue", fig: "Procedure" } + { text: "Alpha", color: "lightblue", fig: "RoundedRectangle" }, + { text: "Beta", color: "lightblue", fig: "Ellipse" }, + { text: "Gamma", color: "lightblue", fig: "Hexagon" }, + { text: "Delta", color: "lightblue", fig: "FramedRectangle" }, + { text: "Epsilon,Epsilon,Epsilon", color: "lightblue", fig: "Cloud" }, + { text: "Z", color: "lightblue", fig: "Procedure" } ]; @@ -398,16 +398,16 @@

                      Fixed-size nodes

                      .bind("figure", "fig") .bind("fill", "color"), new go.TextBlock({ margin: 5 }) - .bind("text", "key") + .bind("text") ); diagram.model.nodeDataArray = [ - { key: "Alpha", color: "lightblue", fig: "RoundedRectangle" }, - { key: "Beta", color: "lightblue", fig: "Ellipse" }, - { key: "Gamma", color: "lightblue", fig: "Hexagon" }, - { key: "Delta", color: "lightblue", fig: "FramedRectangle" }, - { key: "Epsilon,Epsilon,Epsilon", color: "lightblue", fig: "Cloud" }, - { key: "Z", color: "lightblue", fig: "Procedure" } + { text: "Alpha", color: "lightblue", fig: "RoundedRectangle" }, + { text: "Beta", color: "lightblue", fig: "Ellipse" }, + { text: "Gamma", color: "lightblue", fig: "Hexagon" }, + { text: "Delta", color: "lightblue", fig: "FramedRectangle" }, + { text: "Epsilon,Epsilon,Epsilon", color: "lightblue", fig: "Cloud" }, + { text: "Z", color: "lightblue", fig: "Procedure" } ]; @@ -436,7 +436,7 @@

                      Icons

                      maxSize: new go.Size(100, 30), isMultiline: false }) - .bind("text", "text") + .bind("text") ); diagram.model.nodeDataArray = [ @@ -486,7 +486,7 @@

                      Small icons

                      new go.Picture({ maxSize: new go.Size(16, 16) }) .bind("source", "img"), new go.TextBlock({ margin: new go.Margin(0, 0, 0, 2) }) - .bind("text", "text") + .bind("text") ); diagram.model.nodeDataArray = [ @@ -739,28 +739,30 @@

                      Position and Location

                      diagram.grid.visible = true; diagram.add( - new go.Node("Vertical", - { position: new go.Point(0, 0) }, // set the Node.position - new go.TextBlock("position", { editable: true }), - new go.Panel("Auto", - new go.Shape("Circle", { name: "SHAPE", width: 16, height: 16, fill: "lightgreen" }), - new go.Shape("Circle", { width: 6, height: 6, strokeWidth: 0 }) - ) - )); + new go.Node("Vertical", { position: new go.Point(0, 0) }) // set the Node.position + .add( + new go.TextBlock("position", { editable: true }), + new go.Panel("Auto") + .add( + new go.Shape("Circle", { name: "SHAPE", width: 16, height: 16, fill: "lightgreen" }), + new go.Shape("Circle", { width: 6, height: 6, strokeWidth: 0 }) + ) + )); diagram.add( - new go.Node("Vertical", - { + new go.Node("Vertical", { location: new go.Point(100, 0), // set the Node.location locationObjectName: "SHAPE", // the location point is at the center of "SHAPE" locationSpot: go.Spot.Center - }, - new go.TextBlock("location", { editable: true }), - new go.Panel("Auto", - new go.Shape("Circle", { name: "SHAPE", width: 16, height: 16, fill: "lightgreen" }), - new go.Shape("Circle", { width: 6, height: 6, strokeWidth: 0 }) - ) - )); + }) + .add( + new go.TextBlock("location", { editable: true }), + new go.Panel("Auto") + .add( + new go.Shape("Circle", { name: "SHAPE", width: 16, height: 16, fill: "lightgreen" }), + new go.Shape("Circle", { width: 6, height: 6, strokeWidth: 0 }) + ) + ));

                      diff --git a/intro/overview.html b/intro/overview.html index 1d6189dc9..7e26d8077 100644 --- a/intro/overview.html +++ b/intro/overview.html @@ -12,17 +12,17 @@ - - - + + + - - - + + + - - + + diff --git a/intro/palette.html b/intro/palette.html index 7dd2eb8b3..dfb7063e7 100644 --- a/intro/palette.html +++ b/intro/palette.html @@ -12,17 +12,17 @@ - - - + + + - - - + + + - - + + diff --git a/intro/panels.html b/intro/panels.html index c5e372b65..8cfa0db42 100644 --- a/intro/panels.html +++ b/intro/panels.html @@ -12,17 +12,17 @@ - - - + + + - - - + + + - - + + diff --git a/intro/performance.html b/intro/performance.html index 5c09c8c17..4f594cd60 100644 --- a/intro/performance.html +++ b/intro/performance.html @@ -12,17 +12,17 @@ - - - + + + - - - + + + - - + + diff --git a/intro/permissions.html b/intro/permissions.html index ce5b741a9..e277bf3c0 100644 --- a/intro/permissions.html +++ b/intro/permissions.html @@ -12,17 +12,17 @@ - - - + + + - - - + + + - - + + diff --git a/intro/pictures.html b/intro/pictures.html index fe0e352bb..145aa60b1 100644 --- a/intro/pictures.html +++ b/intro/pictures.html @@ -12,17 +12,17 @@ - - - + + + - - - + + + - - + + diff --git a/intro/platforms.html b/intro/platforms.html index 1690526c2..e5e62ddeb 100644 --- a/intro/platforms.html +++ b/intro/platforms.html @@ -12,17 +12,17 @@ - - - + + + - - - + + + - - + + diff --git a/intro/ports.html b/intro/ports.html index 2355bc259..8581a25dc 100644 --- a/intro/ports.html +++ b/intro/ports.html @@ -12,17 +12,17 @@ - - - + + + - - - + + + - - + + diff --git a/intro/printing.html b/intro/printing.html index ac2304d97..c76d7bc9e 100644 --- a/intro/printing.html +++ b/intro/printing.html @@ -12,17 +12,17 @@ - - - + + + - - - + + + - - + + diff --git a/intro/react.html b/intro/react.html index 6f42397f9..f1be6e6cb 100644 --- a/intro/react.html +++ b/intro/react.html @@ -12,17 +12,17 @@ - - - + + + - - - + + + - - + + diff --git a/intro/replacingDeleting.html b/intro/replacingDeleting.html index bdc9a3f5e..6d8d4cd32 100644 --- a/intro/replacingDeleting.html +++ b/intro/replacingDeleting.html @@ -12,17 +12,17 @@ - - - + + + - - - + + + - - + + diff --git a/intro/resizing.html b/intro/resizing.html index c9d12acb3..542794997 100644 --- a/intro/resizing.html +++ b/intro/resizing.html @@ -12,17 +12,17 @@ - - - + + + - - - + + + - - + + diff --git a/intro/routers.html b/intro/routers.html index 36a8890a1..8f0a4c056 100644 --- a/intro/routers.html +++ b/intro/routers.html @@ -12,17 +12,17 @@ - - - + + + - - - + + + - - + + diff --git a/intro/selection.html b/intro/selection.html index 5c77a6cbf..23b535dff 100644 --- a/intro/selection.html +++ b/intro/selection.html @@ -12,17 +12,17 @@ - - - + + + - - - + + + - - + + @@ -247,227 +247,239 @@

                      Selection

                      - Users normally select Parts manually by clicking on them and they deselect them by clicking in the background or pressing the Esc key. You can select - parts programmatically by setting Part.isSelected. + Users normally select Parts manually by clicking on them and they deselect them by clicking in the background or pressing the Esc key. + You can select parts programmatically by setting Part.isSelected or calling one of several Diagram methods.

                      - Users can also drag in the background in order to select the Parts that are within a rectangular area, via the DragSelectingTool. Read more about that - in the Introduction to Tools at DragSelectingTool. + Users can also drag in the background in order to select the Parts that are within a rectangular area, via the DragSelectingTool. + Read more about that in the Introduction to Tools at DragSelectingTool.

                      - The Diagram keeps a collection of selected parts, Diagram.selection. That collection is read-only -- the only way to select or deselect a Part - is by setting its Part.isSelected property. You can limit how many parts are selected by setting Diagram.maxSelectionCount. Prevent all - selection by the user by setting Diagram.allowSelect to false. Or prevent a particular Part from being selected by setting Part.selectable to - false. + The Diagram keeps a collection of selected parts, Diagram.selection. + That collection is read-only -- the only way to select or deselect a Part is by setting its Part.isSelected property. + You can limit how many parts are selected by setting Diagram.maxSelectionCount. + Prevent all selection by the user by setting Diagram.allowSelect to false. + Or prevent a particular Part from being selected by setting or binding its Part.selectable property to false.

                      - You can show that a part is selected by either or both of two general techniques: adding Adornments or changing the appearance of some of the elements - in the visual tree of the selected Part. + You can show that a part is selected by either or both of two general techniques: + adding Adornments or changing the appearance of some of the elements in the visual tree of the selected Part.

                      Selection Adornments

                      - It is common to display that a Part is selected by having it show a selection Adornment when the Part is selected. For nodes this is normally a blue - rectangle surrounding the whole Node. This is the default behavior; if you do not want such an adornment, you can set Part.selectionAdorned to false. + It is common to display that a Part is selected by having it show a selection Adornment when the Part is selected. + For nodes this is normally a blue rectangle surrounding the whole Node. + This is the default behavior; if you do not want such an adornment, you can set Part.selectionAdorned to false. 

                      
-  diagram.nodeTemplate =
-    $(go.Node, "Vertical",
+diagram.nodeTemplate =
+  new go.Node("Vertical", {
       // the location is the center of the Shape, not the center of the whole Node
-      { locationSpot: go.Spot.Center, locationObjectName: "ICON" },
-      new go.Binding("location", "loc", go.Point.parse),
-      $(go.Shape,
-        {
+      locationSpot: go.Spot.Center, locationObjectName: "ICON"
+    })
+    .bind("location", "loc", go.Point.parse)
+    .add(
+      new go.Shape({
           name: "ICON",
           width: 40, height: 40,
           fill: "gray",
           portId: ""  // the port is this Shape, not the whole Node
-        },
-        new go.Binding("figure")),
-      $(go.TextBlock,
-        { margin: new go.Margin(5, 0, 0, 0) },
-        new go.Binding("text", "key"))
+        })
+        .bind("figure"),
+      new go.TextBlock({ margin: new go.Margin(5, 0, 0, 0) })
+        .bind("text", "key")
     );
 
-  var nodeDataArray = [
-    { key: "Alpha", figure: "Club", loc: "0 0" },
-    { key: "Beta", figure: "Spade", loc: "200 50" }
-  ];
-  var linkDataArray = [
-    { from: "Alpha", to: "Beta" }
-  ];
-  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
-  diagram.commandHandler.selectAll();
+var nodeDataArray = [
+  { key: "Alpha", figure: "Club", loc: "0 0" },
+  { key: "Beta", figure: "Spade", loc: "200 50" }
+];
+var linkDataArray = [
+  { from: "Alpha", to: "Beta" }
+];
+diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
+
+diagram.commandHandler.selectAll();

                      - By default an Adornment will apply to the whole Node. What if you want attention to be drawn only to the main piece of a node? You can - accomplish that by naming that object and setting Part.selectionObjectName to that name. + By default an Adornment will apply to the whole Node. + What if you want attention to be drawn only to the main piece of a node? + You can accomplish that by naming that object and setting Part.selectionObjectName to that name. 

                      
-  diagram.nodeTemplate =
-    $(go.Node, "Vertical",
-      { selectionObjectName: "ICON" },  // added this property!
-        // the location is the center of the Shape, not the center of the whole Node
-      { locationSpot: go.Spot.Center, locationObjectName: "ICON" },
-      new go.Binding("location", "loc", go.Point.parse),
-      $(go.Shape,
-        {
+diagram.nodeTemplate =
+  new go.Node("Vertical", {
+      selectionObjectName: "ICON",  // added this property!
+      // the location is the center of the Shape, not the center of the whole Node
+      locationSpot: go.Spot.Center, locationObjectName: "ICON"
+    })
+    .bind("location", "loc", go.Point.parse)
+    .add(
+      new go.Shape({
           name: "ICON",
           width: 40, height: 40,
           fill: "gray",
           portId: ""  // the port is this Shape, not the whole Node
-        },
-        new go.Binding("figure")),
-      $(go.TextBlock,
-        { margin: new go.Margin(5, 0, 0, 0) },
-        new go.Binding("text", "key"))
+        })
+        .bind("figure"),
+      new go.TextBlock({ margin: new go.Margin(5, 0, 0, 0) })
+        .bind("text", "key")
     );
 
-  var nodeDataArray = [
-    { key: "Alpha", figure: "Club", loc: "0 0" },
-    { key: "Beta", figure: "Spade", loc: "200 50" }
-  ];
-  var linkDataArray = [
-    { from: "Alpha", to: "Beta" }
-  ];
-  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
-  diagram.selectCollection(diagram.nodes);
+var nodeDataArray = [
+  { key: "Alpha", figure: "Club", loc: "0 0" },
+  { key: "Beta", figure: "Spade", loc: "200 50" }
+];
+var linkDataArray = [
+  { from: "Alpha", to: "Beta" }
+];
+diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
+
+diagram.selectCollection(diagram.nodes);

                      Note how the Part.selectionObjectName property is similar to the Part.locationObjectName - in helping to treat a node as if only one piece of it really mattered. + in helping to treat a node as if only one piece of it really matters.

                      Custom Selection Adornments

                      - If you do want a selection adornment but want something different than the standard one, you can customize it. Such customization can be done by setting the - Part.selectionAdornmentTemplate. In this example, nodes get thick blue rounded rectangles surrounding the selected node, and links get thick blue lines + If you do want a selection adornment but want something different than the standard one, you can customize it. + Such customization can be done by setting the Part.selectionAdornmentTemplate. + In this example, nodes get thick blue rounded rectangles surrounding the selected node, and links get thick blue lines following the selected link's path. 

                      
-  diagram.nodeTemplate =
-    $(go.Node, "Auto",
-      new go.Binding("location", "loc", go.Point.parse),
-      $(go.Shape, "RoundedRectangle", { fill: "lightgray" }),
-      $(go.TextBlock,
-        { margin: 5 },
-        new go.Binding("text", "key")),
-      {
-        selectionAdornmentTemplate:
-          $(go.Adornment, "Auto",
-            $(go.Shape, "RoundedRectangle",
-            { fill: null, stroke: "dodgerblue", strokeWidth: 8 }),
-            $(go.Placeholder)
+diagram.nodeTemplate =
+  new go.Node("Auto", {
+      selectionAdornmentTemplate:
+        new go.Adornment("Auto")
+          .add(
+            new go.Shape("RoundedRectangle", {
+                fill: null, stroke: "dodgerblue", strokeWidth: 8
+              }),
+            new go.Placeholder()
           )  // end Adornment
-      }
+    })
+    .bind("location", "loc", go.Point.parse)
+    .add(
+      new go.Shape("RoundedRectangle", { fill: "lightgray" }),
+      new go.TextBlock({ margin: 5 })
+        .bind("text", "key")
     );
 
-  diagram.linkTemplate =
-    $(go.Link,
-      $(go.Shape, { strokeWidth: 2 }),
-      $(go.Shape, { toArrow: "Standard" }),
-      {
-        selectionAdornmentTemplate:
-          $(go.Adornment,
-            $(go.Shape,
-              { isPanelMain: true, stroke: "dodgerblue", strokeWidth: 8 }),
-            $(go.Shape,
-              { toArrow: "Standard", fill: "dodgerblue", stroke: null, scale: 2.5 })
+diagram.linkTemplate =
+  new go.Link({
+      selectionAdornmentTemplate:
+        new go.Adornment()
+          .add(
+            new go.Shape({ isPanelMain: true, stroke: "dodgerblue", strokeWidth: 8 }),
+            new go.Shape({ toArrow: "Standard", fill: "dodgerblue", stroke: null, scale: 2.5 })
           )  // end Adornment
-      }
+    })
+    .add(
+      new go.Shape({ strokeWidth: 2 }),
+      new go.Shape({ toArrow: "Standard" })
     );
 
-  var nodeDataArray = [
-    { key: "Alpha", loc: "0 0" },
-    { key: "Beta", loc: "200 50" }
-  ];
-  var linkDataArray = [
-    { from: "Alpha", to: "Beta" }
-  ];
-  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
-  diagram.commandHandler.selectAll();
+var nodeDataArray = [
+  { key: "Alpha", loc: "0 0" },
+  { key: "Beta", loc: "200 50" }
+];
+var linkDataArray = [
+  { from: "Alpha", to: "Beta" }
+];
+diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
+
+diagram.commandHandler.selectAll();

                      - Note that an Adornment is just a Part. Adornments for nodes must contain a Placeholder in their visual tree. The Placeholder gets - positioned where the selected object is. + Note that an Adornment is just a Part. + Adornments for nodes must contain a Placeholder in their visual tree. + The Placeholder gets positioned where the selected object is.

                      - Adornments for links are assumed to be panels of Panel.type that is Panel.Link. Hence the main element may be a Shape that gets the - geometry of the selected Link's path shape, and the other elements of the adornment may be positioned on or near the segments of the link route just as for a - regular Link. + Adornments for links are assumed to be panels of Panel.type that is Panel.Link. + Hence the main element may be a Shape that gets the geometry of the selected Link's path shape, + and the other elements of the adornment may be positioned on or near the segments of the link route just as for a regular Link.

                      More Complex Adornments

                      - The custom Adornment for a Node need not be only a simple Shape outlining the selected node. Here is an adornment that adds a button to - the adornment which inserts a node and a link to that new node. + The custom Adornment for a Node need not be only a simple Shape outlining the selected node. + Here is an adornment that adds a button to the adornment which inserts a node and a link to that new node. 

                      
-  function addNodeAndLink(e, b) {
-    // take a button panel in an Adornment, get its Adornment, and then get its adorned Node
-    var node = b.part.adornedPart;
-    // we are modifying the model, so conduct a transaction
-    var diagram = node.diagram;
-    diagram.startTransaction("add node and link");
-    // have the Model add the node data
-    var newnode = { key: "N" };
-    diagram.model.addNodeData(newnode);
-    // locate the node initially where the parent node is
-    diagram.findNodeForData(newnode).location = node.location;
-    // and then add a link data connecting the original node with the new one
-    var newlink = { from: node.data.key, to: newnode.key };
-    diagram.model.addLinkData(newlink);
-    // finish the transaction -- will automatically perform a layout
-    diagram.commitTransaction("add node and link");
-  }
-
-  diagram.nodeTemplate =
-    $(go.Node, "Auto",
-      $(go.Shape, "RoundedRectangle", { fill: "lightgray" }),
-      $(go.TextBlock,
-        { margin: 5 },
-        new go.Binding("text", "key")),
-      {
-        selectionAdornmentTemplate:
-          $(go.Adornment, "Spot",
-            $(go.Panel, "Auto",
-              // this Adornment has a rectangular blue Shape around the selected node
-              $(go.Shape, { fill: null, stroke: "dodgerblue", strokeWidth: 3 }),
-              $(go.Placeholder)
-            ),
+function addNodeAndLink(e, b) {
+  // take a button panel in an Adornment, get its Adornment, and then get its adorned Node
+  var node = b.part.adornedPart;
+  // we are modifying the model, so conduct a transaction
+  var diagram = node.diagram;
+  diagram.startTransaction("add node and link");
+  // have the Model add the node data
+  var newnode = { text: "N" + diagram.model.nodeDataArray.length };
+  diagram.model.addNodeData(newnode);
+  // locate the node initially where the parent node is
+  diagram.findNodeForData(newnode).location = node.location;
+  // and then add a link data connecting the original node with the new one
+  var newlink = { from: node.data.key, to: newnode.key };
+  diagram.model.addLinkData(newlink);
+  // finish the transaction -- will automatically perform a layout
+  diagram.commitTransaction("add node and link");
+}
+
+diagram.nodeTemplate =
+  new go.Node("Auto", {
+      selectionAdornmentTemplate:
+        new go.Adornment("Spot")
+          .add(
+            new go.Panel("Auto")
+              .add(
+                // this Adornment has a rectangular blue Shape around the selected node
+                new go.Shape({ fill: null, stroke: "dodgerblue", strokeWidth: 3 }),
+                new go.Placeholder()
+              ),
             // and this Adornment has a Button to the right of the selected node
-            $("Button",
-              { alignment: go.Spot.Right, alignmentFocus: go.Spot.Left,
-                click: addNodeAndLink },  // define click behavior for Button in Adornment
-              $(go.TextBlock, "ADD",  // the Button content
-                { font: "bold 6pt sans-serif" })
-            )
+            go.GraphObject.make("Button", {
+                alignment: go.Spot.Right, alignmentFocus: go.Spot.Left,
+                click: addNodeAndLink
+              })  // define click behavior for Button in Adornment
+              .add(
+                new go.TextBlock("ADD",  // the Button content
+                    { stroke: "blue", font: "bold 8pt sans-serif" })
+              )
           )  // end Adornment
-      }
+    })
+    .add(
+      new go.Shape("RoundedRectangle", { fill: "lightgray" }),
+      new go.TextBlock({ margin: 5 })
+        .bind("text")
     );
 
-  diagram.layout = $(go.TreeLayout);
-
-  var nodeDataArray = [
-    { key: "Alpha" },
-    { key: "Beta" }
-  ];
-  var linkDataArray = [
-    { from: "Alpha", to: "Beta" }
-  ];
-  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
-  diagram.select(diagram.findNodeForKey("Beta"));
+diagram.layout = new go.TreeLayout();
+
+var nodeDataArray = [
+  { key: 1, text: "Alpha" },
+  { key: 2, text: "Beta" }
+];
+var linkDataArray = [
+  { from: 1, to: 2 }
+];
+diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
+
+diagram.select(diagram.findNodeForKey("Beta"));
                      -

                      Notice how each Adornment has the same color as the selected node's data.color.

                      +

                      + Notice how each Adornment has the same color as the selected node's data.color. +

                      Selection Appearance changes

                      - Adding a selection adornment is not the only way to indicate visually that a Part is selected. You can also modify the appearance of one or more - objects in your Part. + Adding a selection adornment is not the only way to indicate visually that a Part is selected. + You can also modify the appearance of one or more objects in your Part.

                      - One way to do this is with data binding. Here we data bind the Shape.fill to the Part.isSelected property with a converter function that - converts the boolean value to a color string or brush. We also turn off the regular rectangular blue selection adornment. + One way to do this is with data binding. Here we data bind the Shape.fill to the Part.isSelected property + with a converter function that converts the boolean value to a color string or brush. + We also turn off the regular rectangular blue selection adornment. 

                      
-  diagram.nodeTemplate =
-    $(go.Node, "Auto",
-      { selectionAdorned: false },  // don't bother with any selection adornment
-      new go.Binding("location", "loc", go.Point.parse),
-      $(go.Shape, "RoundedRectangle", { fill: "lightgray", strokeWidth: 2 },
+diagram.nodeTemplate =
+  new go.Node("Auto", { selectionAdorned: false })  // don't bother with any selection adornment
+    .bind("location", "loc", go.Point.parse)
+    .add(
+      new go.Shape("RoundedRectangle", { fill: "lightgray", strokeWidth: 2 })
         // when this Part.isSelected changes value, change this Shape.fill value:
-        new go.Binding("fill", "isSelected", sel => {
-          if (sel) return "cyan"; else return "lightgray";
-        }).ofObject("")),  // The object named "" is the root visual element, the Node itself
-      $(go.TextBlock,
-        { margin: 5 },
-        new go.Binding("text", "key"))
+        .bindObject("fill", "isSelected", sel => {
+            if (sel) return "cyan"; else return "lightgray";
+          }), // The object named "" is the root visual element, the Node itself
+      new go.TextBlock({ margin: 5 })
+        .bind("text")
     );
 
-  var nodeDataArray = [
-    { key: "Alpha", loc: "0 0" },
-    { key: "Beta", loc: "200 50" }
-  ];
-  var linkDataArray = [
-    { from: "Alpha", to: "Beta" }
-  ];
-  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
-  diagram.select(diagram.findNodeForKey("Beta"));
+var nodeDataArray = [
+  { key: 1, text: "Alpha", loc: "0 0", color: "blue" },
+  { key: 2, text: "Beta", loc: "200 50", color: "red" }
+];
+var linkDataArray = [
+  { from: 1, to: 2 }
+];
+diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
+
+diagram.select(diagram.findNodeForKey(2));
                      -

                      Now when you select a node its background color changes to cyan.

                      +

                      + Here the "Beta" node is selected initially. + Now when you select a node its background color changes to cyan. +

                      - More generally you can execute code to modify the Part when Part.isSelected has changed value. In this example we will have the same side effects as - the previous example. + More generally you can execute code to modify the Part when Part.isSelected has changed value. + In this example we will have the same side effects as the previous example. 

                      
-  function onSelectionChanged(node) {
-    var icon = node.findObject("Icon");
-    if (icon !== null) {
-      if (node.isSelected)
-        icon.fill = "cyan";
-      else
-        icon.fill = "lightgray";
-    }
+function onSelectionChanged(node) {
+  var icon = node.findObject("ICON");
+  if (icon !== null) {
+    if (node.isSelected)
+      icon.fill = "cyan";
+    else
+      icon.fill = "lightgray";
   }
-
-  diagram.nodeTemplate =
-    $(go.Node, "Auto",
-      { selectionAdorned: false,  // don't bother with any selection adornment
-        selectionChanged: onSelectionChanged },  // executed when Part.isSelected has changed
-      new go.Binding("location", "loc", go.Point.parse),
-      $(go.Shape, "RoundedRectangle",
-        { name: "Icon", fill: "lightgray", strokeWidth: 2 }),
-      $(go.TextBlock,
-        { margin: 5 },
-        new go.Binding("text", "key"))
+}
+
+diagram.nodeTemplate =
+  new go.Node("Auto", {
+      selectionAdorned: false,  // don't bother with any selection adornment
+      selectionChanged: onSelectionChanged
+    })
+    .bind("location", "loc", go.Point.parse)
+    .add(
+      new go.Shape("RoundedRectangle", { fill: "lightgray", strokeWidth: 2 })
+        // when this Part.isSelected changes value, change this Shape.fill value:
+        .bindObject("fill", "isSelected", sel => {
+            if (sel) return "cyan"; else return "lightgray";
+          }), // The object named "" is the root visual element, the Node itself
+      new go.TextBlock({ margin: 5 })
+        .bind("text")
     );
 
-  var nodeDataArray = [
-    { key: "Alpha", loc: "0 0" },
-    { key: "Beta", loc: "200 50" }
-  ];
-  var linkDataArray = [
-    { from: "Alpha", to: "Beta" }
-  ];
-  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
-  diagram.select(diagram.findNodeForKey("Beta"));
+var nodeDataArray = [
+  { key: 1, text: "Alpha", loc: "0 0", color: "blue" },
+  { key: 2, text: "Beta", loc: "200 50", color: "red" }
+];
+var linkDataArray = [
+  { from: 1, to: 2 }
+];
+diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
+
+diagram.select(diagram.findNodeForKey(2));

                      - There are some restrictions on what you can do in such an event handler: you should not select or deselect any parts, and you should not add or remove any - parts from the diagram. + This basically has the same effect as the GraphObject.bindObject binding of the previous example, + but the possible changes you could make to that node are much greater and probably simpler than trying to use Bindings. +

                      +

                      + There are some restrictions on what you can do in such an event handler: + you should not select or deselect any parts, and you should not add or remove any parts from the diagram.

                      diff --git a/intro/serverSideImages.html b/intro/serverSideImages.html index a4e9c714c..b5df4207e 100644 --- a/intro/serverSideImages.html +++ b/intro/serverSideImages.html @@ -12,17 +12,17 @@ - - - + + + - - - + + + - - + + diff --git a/intro/shapes.html b/intro/shapes.html index 9d6fd14f5..815d53427 100644 --- a/intro/shapes.html +++ b/intro/shapes.html @@ -12,17 +12,17 @@ - - - + + + - - - + + + - - + + diff --git a/intro/sizedGroups.html b/intro/sizedGroups.html index 68cfcf2c9..385834062 100644 --- a/intro/sizedGroups.html +++ b/intro/sizedGroups.html @@ -12,17 +12,17 @@ - - - + + + - - - + + + - - + + @@ -247,56 +247,63 @@

                      Groups Without Placeholders

                      - Although it is very common to use a Placeholder inside a Group, it is not required. Using a Shape, for example, instead of a - Placeholder permits features such as having a group maintain a fixed size, independent of the sizes and positions of its member nodes, and even when - there are no member nodes at all. It also may allow the user to resize the "area" if that functionality is desired. + Although it is very common to use a Placeholder inside a Group, it is not required. + Using a Shape, for example, instead of a Placeholder permits features such as having a group maintain a fixed size, + independent of the sizes and positions of its member nodes, and even when there are no member nodes at all. + It also may allow the user to resize the "area" if that functionality is desired.

                      Fixed size Groups

                      - Not using a Placeholder in a Group means that you have to maintain the size and position of the group, because it cannot depend on the size and - position of its member nodes. In these examples we will explicitly set and/or bind the Part.location of the nodes, including the groups. The - Shape that replaces the Placeholder in the group's template should also get its GraphObject.desiredSize set or bound. + Not using a Placeholder in a Group means that you have to maintain the size and position of the group, + because it cannot depend on the size and position of its member nodes. + In these examples we will explicitly set and/or bind the Part.location of the nodes, including the groups. + The Shape that replaces the Placeholder in the group's template should also get its GraphObject.desiredSize set or bound. 

                      
-  diagram.nodeTemplate =
-    $(go.Node,
-      new go.Binding("location", "loc", go.Point.parse),
-      $(go.TextBlock,
-        new go.Binding("text", "key"))
+diagram.nodeTemplate =
+  new go.Node("Auto")
+    .bind("location", "loc", go.Point.parse)
+    .add(
+      new go.Shape("Ellipse", { fill: "white" }),
+      new go.TextBlock()
+        .bind("text")
     );
 
-  diagram.groupTemplate =
-    $(go.Group, "Vertical",
-      { selectionObjectName: "PH",
-        locationObjectName: "PH" },
-      new go.Binding("location", "loc", go.Point.parse),
-      $(go.TextBlock,  // group title
-        { font: "Bold 12pt Sans-Serif" },
-        new go.Binding("text", "key")),
-      $(go.Shape,  // using a Shape instead of a Placeholder
-        { name: "PH",
-          fill: "lightyellow" },
-        new go.Binding("desiredSize", "size", go.Size.parse))
+diagram.groupTemplate =
+  new go.Group("Vertical", {
+      selectionObjectName: "PH",
+      locationObjectName: "PH"
+    })
+    .bind("location", "loc", go.Point.parse)
+    .add(
+      new go.TextBlock({ font: "Bold 12pt Sans-Serif" })  // group title
+        .bind("text"),
+      new go.Shape({  // using a Shape instead of a Placeholder
+          name: "PH",
+          fill: "lightyellow"
+        })
+        .bind("desiredSize", "size", go.Size.parse)
     );
 
-  var nodeDataArray = [
-    { key: "Alpha", loc: "0 0" },
-    { key: "Beta", group: "Omega", loc: "75 75" },
-    { key: "Gamma", group: "Omega", loc: "125 75" },
-    { key: "Omega", isGroup: true, loc: "50 50", size: "150 50" },
-    { key: "Delta", loc: "200 0" }
-  ];
-  var linkDataArray = [
-    { from: "Alpha", to: "Beta" },  // from outside the Group to inside it
-    { from: "Beta", to: "Gamma" },  // this link is a member of the Group
-    { from: "Omega", to: "Delta" }  // from the Group to a Node
-  ];
-  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
-  diagram.select(diagram.findNodeForKey("Omega"));
+var nodeDataArray = [
+  { key: 1, text: "Alpha", loc: "0 0" },
+  { key: 2, text: "Beta", group: 4, loc: "60 60" },
+  { key: 3, text: "Gamma", group: 4, loc: "125 75" },
+  { key: 4, text: "Omega", isGroup: true, loc: "50 50", size: "150 50" },
+  { key: 5, text: "Delta", loc: "200 0" }
+];
+var linkDataArray = [
+  { from: 1, to: 2 },  // from outside the Group to inside it
+  { from: 2, to: 3 },  // this link is a member of the Group
+  { from: 4, to: 5 }  // from the Group to a Node
+];
+diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
+
+diagram.select(diagram.findNodeForKey(4));

                      Note that moving the "Beta" or "Gamma" nodes does not change the size or position of the "Omega" group. However moving or copying or deleting the group @@ -314,51 +321,56 @@

                      Resizable Groups

                      main shapes, the data in the model is updated automatically. 

                      
-  diagram.nodeTemplate =
-    $(go.Node,
-      new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
-      $(go.TextBlock,
-        new go.Binding("text", "key"))
+diagram.nodeTemplate =
+  new go.Node()
+    .bindTwoWay("location", "loc", go.Point.parse, go.Point.stringify)
+    .add(
+      new go.TextBlock()
+        .bind("text")
     );
 
-  diagram.groupTemplate =
-    $(go.Group, "Vertical",
-      { selectionObjectName: "PH",
-        locationObjectName: "PH",
-        resizable: true,
-        resizeObjectName: "PH" },
-      new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
-      $(go.TextBlock,  // group title
-        { font: "Bold 12pt Sans-Serif" },
-        new go.Binding("text", "key")),
-      $(go.Shape,  // using a Shape instead of a Placeholder
-        { name: "PH",
-          fill: "lightyellow" },
-        new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify))
+diagram.groupTemplate =
+  new go.Group("Vertical", {
+      selectionObjectName: "PH",
+      locationObjectName: "PH",
+      resizable: true,
+      resizeObjectName: "PH"
+    })
+    .bindTwoWay("location", "loc", go.Point.parse, go.Point.stringify)
+    .add(
+      new go.TextBlock({ font: "Bold 12pt Sans-Serif" })  // group title
+        .bind("text"),
+      new go.Shape({  // using a Shape instead of a Placeholder
+          name: "PH",
+          fill: "lightyellow"
+        })
+        .bindTwoWay("desiredSize", "size", go.Size.parse, go.Size.stringify)
     );
 
-  var nodeDataArray = [
-    { key: "Alpha", loc: "0 0" },
-    { key: "Beta", group: "Omega", loc: "75 75" },
-    { key: "Gamma", group: "Omega", loc: "125 75" },
-    { key: "Omega", isGroup: true, loc: "50 50", size: "150 50" },
-    { key: "Delta", loc: "200 0" }
-  ];
-  var linkDataArray = [
-    { from: "Alpha", to: "Beta" },  // from outside the Group to inside it
-    { from: "Beta", to: "Gamma" },  // this link is a member of the Group
-    { from: "Omega", to: "Delta" }  // from the Group to a Node
-  ];
-  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
-  diagram.select(diagram.findNodeForKey("Omega"));
+var nodeDataArray = [
+  { key: 1, text: "Alpha", loc: "0 0" },
+  { key: 2, text: "Beta", group: 4, loc: "60 60" },
+  { key: 3, text: "Gamma", group: 4, loc: "125 75" },
+  { key: 4, text: "Omega", isGroup: true, loc: "50 50", size: "150 50" },
+  { key: 5, text: "Delta", loc: "200 0" }
+];
+var linkDataArray = [
+  { from: 1, to: 2 },  // from outside the Group to inside it
+  { from: 2, to: 3 },  // this link is a member of the Group
+  { from: 4, to: 5 }  // from the Group to a Node
+];
+diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
+
+diagram.select(diagram.findNodeForKey("Omega"));

                      - It is also possible to control how the user resizes a group. For example, the Swim Lanes sample - demonstrates a custom ResizingTool that limits how small each lane can go. It also demonstrates a custom Adornment that has only two resize - handles. + It is also possible to control how the user resizes a group. + For example, the Swim Lanes sample demonstrates a custom ResizingTool + that limits how small each lane can go. + It also demonstrates a custom Adornment that has only two resize handles.

                      Containers that are not Groups

                      diff --git a/intro/sizing.html b/intro/sizing.html index 075aa719b..116b4c0ee 100644 --- a/intro/sizing.html +++ b/intro/sizing.html @@ -12,17 +12,17 @@ - - - + + + - - - + + + - - + + diff --git a/intro/source.html b/intro/source.html index 5866b9d7a..96611193d 100644 --- a/intro/source.html +++ b/intro/source.html @@ -12,17 +12,17 @@ - - - + + + - - - + + + - - + + diff --git a/intro/subgraphs.html b/intro/subgraphs.html index 39d31d620..645df2f1c 100644 --- a/intro/subgraphs.html +++ b/intro/subgraphs.html @@ -12,17 +12,17 @@ - - - + + + - - - + + + - - + + @@ -247,203 +247,236 @@

                      Groups as SubGraphs

                      - There are some common ways of treating the nodes and links that are the members of a group as if it were its own graph. One way to declutter a diagram is to - "collapse" a Group to hide the subgraph that it holds. + There are some common ways of treating the nodes and links that are the members of a group as if it were its own graph. + One way to declutter a diagram is to "collapse" a Group to hide the subgraph that it holds.

                      - A Group has its own Group.layout that is responsible for the positioning of member Nodes and the routing of member Links. This is - exactly like a Diagram having its own Diagram.layout that positions top-level Nodes and routes top-level Links. + A Group has its own Group.layout that is responsible for the positioning of member Nodes and the routing of member Links. + This is exactly like a Diagram having its own Diagram.layout that positions top-level Nodes and routes top-level Links.

                      - Keep in mind that subgraphs are not separate Diagrams and that Groups are just one way of organizing Parts. Because subgraphs are collections of Nodes and - Links in the same Diagram as the Group itself, it is possible to have Links that connect Nodes that are inside a Group with Nodes that are outside of the - group. It is also possible to have links that connect nodes with the group of which they are a member. + Keep in mind that subgraphs are not separate Diagrams and that Groups are just one way of organizing Parts. + Because subgraphs are collections of Nodes and Links in the same Diagram as the Group itself, + it is possible to have Links that connect Nodes that are inside a Group with Nodes that are outside of the group. + It is also possible to have links that connect nodes with the group of which they are a member.

                      Layouts of SubGraphs

                      - You can specify a Layout that applies to a group's subgraph by setting the Group.layout property. This operates on the group's member nodes and - links as if it were its own diagram. A diagram layout of nodes that include groups with their own layout will treat those groups as if they were simple nodes, + You can specify a Layout that applies to a group's subgraph by setting the Group.layout property. + This operates on the group's member nodes and links as if it were its own diagram. + A diagram layout of nodes that include groups with their own layout will treat those groups as if they were simple nodes, albeit probably larger than normal nodes.

                      - In this example the group has a different layout than the layout for the whole diagram. In this case the only difference is the direction in which the layout - works, but you could use a completely different layout algorithm. + In this example the group has a different layout than the layout for the whole diagram. + In this case the only difference is the direction in which the layout works, but you could use a completely different layout algorithm. +

                      +

                      + For simplicity these examples use the default templates for nodes and links.

                      -

                      For simplicity these examples use the default templates for nodes and links.

                      
-  diagram.groupTemplate =
-    $(go.Group, "Auto",
+diagram.groupTemplate =
+  new go.Group("Auto", {
       // declare the Group.layout:
-      { layout: $(go.LayeredDigraphLayout,
-                  { direction: 0, columnSpacing: 10 }) },
-      $(go.Shape, "RoundedRectangle",  // surrounds everything
-        { parameter1: 10, fill: "rgba(128,128,128,0.33)" }),
-      $(go.Panel, "Vertical",  // position header above the subgraph
-        $(go.TextBlock,     // group title near top, next to button
-          { font: "Bold 12pt Sans-Serif" },
-          new go.Binding("text", "key")),
-        $(go.Placeholder,     // represents area for all member parts
-          { padding: 5, background: "white" })
-      )
+      layout: new go.LayeredDigraphLayout({
+          direction: 0,
+          columnSpacing: 10
+        })
+    })
+    .add(
+      new go.Shape("RoundedRectangle", {  // surrounds everything
+          parameter1: 10, fill: "rgba(128,128,128,0.33)"  // translucent!
+        }),
+      new go.Panel("Vertical")  // position header above the subgraph
+        .add(
+          // group title near top, next to button
+          new go.TextBlock({ font: "Bold 12pt Sans-Serif" })
+            .bind("text"),
+          // represents area for all member parts
+          new go.Placeholder({ padding: 5, background: "white" })
+        )
     );
 
-  // declare the Diagram.layout:
-  diagram.layout = $(go.LayeredDigraphLayout,
-                     {
-                       direction: 90,
-                       layerSpacing: 10,
-                       isRealtime: false
-                     });
+// declare the Diagram.layout:
+diagram.layout =
+  new go.LayeredDigraphLayout({
+      direction: 90,
+      layerSpacing: 10,
+      isRealtime: false
+    });
 
-  var nodeDataArray = [
-    { key: "Alpha" },
-    { key: "Omega", isGroup: true },
-    { key: "Beta", group: "Omega" },
-    { key: "Gamma", group: "Omega" },
-    { key: "Epsilon", group: "Omega" },
-    { key: "Zeta", group: "Omega" },
-    { key: "Delta" }
-  ];
-  var linkDataArray = [
-    { from: "Alpha", to: "Omega" }, // from a Node to the Group
-    { from: "Beta", to: "Gamma" },  // this link is a member of the Group
-    { from: "Beta", to: "Epsilon" },  // this link is a member of the Group
-    { from: "Gamma", to: "Zeta" },  // this link is a member of the Group
-    { from: "Epsilon", to: "Zeta" },  // this link is a member of the Group
-    { from: "Omega", to: "Delta" }  // from the Group to a Node
-  ];
-  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
+var nodeDataArray = [
+  { key: 1, text: "Alpha" },
+  { key: 2, text: "Omega", isGroup: true },
+  { key: 3, text: "Beta", group: 2 },
+  { key: 4, text: "Gamma", group: 2 },
+  { key: 5, text: "Epsilon", group: 2 },
+  { key: 6, text: "Zeta", group: 2 },
+  { key: 7, text: "Delta" }
+];
+var linkDataArray = [
+  { from: 1, to: 2 }, // from a Node to the Group
+  { from: 3, to: 4 },  // this link is a member of the Group
+  { from: 3, to: 5 },  // this link is a member of the Group
+  { from: 4, to: 6 },  // this link is a member of the Group
+  { from: 5, to: 6 },  // this link is a member of the Group
+  { from: 2, to: 7 }  // from the Group to a Node
+];
+  
+diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

                      - The default layout for a Group is an instance of Layout, just as it is for Diagram. So if you do not specify a value for Group.layout, + The default layout for a Group is an instance of Layout, just as it is for Diagram. + So if you do not specify a value for Group.layout, the default layout for the group will position all member nodes that do not have a real Part.location.

                      - If you explicitly set Group.layout to null, the Diagram will be responsible for laying out all of Nodes and Links as if the Group did not exist. This - is possible because a subgraph is not another Diagram. + If you explicitly set Group.layout to null, the Diagram will be responsible for laying out all of Nodes and Links as if the Group did not exist. + This is possible because a subgraph is not another Diagram.

                      Collapsing and Expanding Groups

                      - One common technique to visually simplify a diagram is to hide parts of them by "collapsing" them. In the case of Groups, it may make sense to be able - to hide the subgraph. + One common technique to visually simplify a diagram is to hide parts of them by "collapsing" them. + In the case of Groups, it may make sense to be able to hide the subgraph. +

                      +

                      + To collapse a group, set Group.isSubGraphExpanded to false; to make sure it is expanded, set that property to true.

                      -

                      To collapse a group, set Group.isSubGraphExpanded to false; to make sure it is expanded, set that property to true.

                      It is commonplace to provide a button on a group to allow users to collapse and expand groups as they wish. - GoJS makes this easy to implement by providing a predefined kind of Panel, named "SubGraphExpanderButton", that acts as a button to collapse and - expand Groups. This button changes the visibility of the member nodes and links but does not change the visibility of the group itself. When the - group's visual tree includes a Placeholder, the placeholder will automatically shrink when the member parts become invisible and will inflate when the - member parts become visible again. + GoJS makes this easy to implement by providing a predefined kind of Panel, named "SubGraphExpanderButton", + that acts as a button to collapse and expand Groups. + This button changes the visibility of the member nodes and links but does not change the visibility of the group itself. + When the group's visual tree includes a Placeholder, the placeholder will automatically shrink when the member parts + become invisible and will inflate when the member parts become visible again.

                      - Click on the expander button to collapse or expand the group. Changing the size of the group also invalidates the layout that is responsible for positioning - the group as a single node. Often the size of the group changes greatly, so a layout usually needs to be performed again. + Click on the expander button to collapse or expand the group. + Changing the size of the group also invalidates the layout that is responsible for positioning the group as a single node. + Often the size of the group changes greatly, so a layout usually needs to be performed again. 

                      
-  diagram.groupTemplate =
-    $(go.Group, "Auto",
-      { layout: $(go.LayeredDigraphLayout,
-                  { direction: 0, columnSpacing: 10 }) },
-      $(go.Shape, "RoundedRectangle", // surrounds everything
-        { parameter1: 10, fill: "rgba(128,128,128,0.33)" }),
-      $(go.Panel, "Vertical",  // position header above the subgraph
-        { defaultAlignment: go.Spot.Left },
-        $(go.Panel, "Horizontal",  // the header
-          { defaultAlignment: go.Spot.Top },
-          $("SubGraphExpanderButton"),  // this Panel acts as a Button
-          $(go.TextBlock,     // group title near top, next to button
-            { font: "Bold 12pt Sans-Serif" },
-            new go.Binding("text", "key"))
-        ),
-        $(go.Placeholder,     // represents area for all member parts
-          { padding: new go.Margin(0, 10), background: "white" })
-      )
+diagram.groupTemplate =
+  new go.Group("Auto", {
+      // declare the Group.layout:
+      layout: new go.LayeredDigraphLayout({
+          direction: 0,
+          columnSpacing: 10
+        })
+    })
+    .add(
+      new go.Shape("RoundedRectangle", {  // surrounds everything
+          parameter1: 10, fill: "rgba(128,128,128,0.33)"
+        }),
+      new go.Panel("Vertical",  // position header above the subgraph
+            { defaultAlignment: go.Spot.Left })
+        .add(
+          new go.Panel("Horizontal",  // the header
+              { defaultAlignment: go.Spot.Top })
+            .add(
+              // the button for the user to expand/collapse the group
+              go.GraphObject.make("SubGraphExpanderButton"),
+              // group title near top, next to button
+              new go.TextBlock({ font: "Bold 12pt Sans-Serif" })
+                .bind("text")
+            ),
+          // represents area for all member parts
+          new go.Placeholder({ padding: new go.Margin(0, 10), background: "white" })
+        )
     );
 
-  diagram.layout = $(go.LayeredDigraphLayout,
-                     {
-                       direction: 90,
-                       layerSpacing: 10,
-                       isRealtime: false
-                     });
+// declare the Diagram.layout:
+diagram.layout =
+  new go.LayeredDigraphLayout({
+      direction: 90,
+      layerSpacing: 10,
+      isRealtime: false
+    });
 
-  var nodeDataArray = [
-    { key: "Alpha" },
-    { key: "Omega", isGroup: true },
-    { key: "Beta", group: "Omega" },
-    { key: "Gamma", group: "Omega" },
-    { key: "Epsilon", group: "Omega" },
-    { key: "Zeta", group: "Omega" },
-    { key: "Delta" }
-  ];
-  var linkDataArray = [
-    { from: "Alpha", to: "Omega" }, // from a Node to the Group
-    { from: "Beta", to: "Gamma" },  // this link is a member of the Group
-    { from: "Beta", to: "Epsilon" },  // this link is a member of the Group
-    { from: "Gamma", to: "Zeta" },  // this link is a member of the Group
-    { from: "Epsilon", to: "Zeta" },  // this link is a member of the Group
-    { from: "Omega", to: "Delta" }  // from the Group to a Node
-  ];
-  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
+var nodeDataArray = [
+  { key: 1, text: "Alpha" },
+  { key: 2, text: "Omega", isGroup: true },
+  { key: 3, text: "Beta", group: 2 },
+  { key: 4, text: "Gamma", group: 2 },
+  { key: 5, text: "Epsilon", group: 2 },
+  { key: 6, text: "Zeta", group: 2 },
+  { key: 7, text: "Delta" }
+];
+var linkDataArray = [
+  { from: 1, to: 2 }, // from a Node to the Group
+  { from: 3, to: 4 },  // this link is a member of the Group
+  { from: 3, to: 5 },  // this link is a member of the Group
+  { from: 4, to: 6 },  // this link is a member of the Group
+  { from: 5, to: 6 },  // this link is a member of the Group
+  { from: 2, to: 7 }  // from the Group to a Node
+];
+diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

                      - If you do not want a layout to be performed again when the group changes size, you can set the Part.layoutConditions property to control the - circumstances under which the layout will be invalidated. + If you do not want a layout to be performed again when the group changes size, + you can set the Part.layoutConditions property to control the circumstances under which the layout will be invalidated.

                      - Placeholders can be part of complex panels. The following example demonstrates a different way to have each Group have a header holding a button and - some text. + A Placeholder can be a piece within complex panels. + The following example demonstrates a different way to have each Group have a header holding a button and some text. 

                      
-  diagram.groupTemplate =
-    $(go.Group, "Auto",
-      { layout: $(go.TreeLayout) },
-      $(go.Shape, "Rectangle", { fill: "orange", stroke: "darkorange" }),
-      $(go.Panel, "Table",
-        { margin: 0.5 },  // avoid overlapping border with table contents
-        $(go.RowColumnDefinition, { row: 0, background: "white" }),  // header is white
-        $("SubGraphExpanderButton", { row: 0, column: 0, margin: 3 }),
-        $(go.TextBlock,  // title is centered in header
-          { row: 0, column: 1, font: "bold 14px Sans-Serif", stroke: "darkorange",
-            textAlign: "center", stretch: go.Stretch.Horizontal },
-          new go.Binding("text")),
-        $(go.Placeholder,  // becomes zero-sized when Group.isSubGraphExpanded is false
-          { row: 1, columnSpan: 2, padding: 10, alignment: go.Spot.TopLeft },
-          new go.Binding("padding", "isSubGraphExpanded",
-                         exp => exp ? 10 : 0).ofObject())
-      )
+diagram.groupTemplate =
+  new go.Group("Auto", { layout: $(go.TreeLayout) })
+    .add(
+      new go.Shape("Rectangle", { fill: "orange", stroke: "darkorange" }),
+      new go.Panel("Table", { margin: 0.5 })
+        // avoid overlapping border with table contents
+        .addRowDefinition(0, { background: "white" })  // header is white
+        .add(
+          go.GraphObject.make("SubGraphExpanderButton", { row: 0, column: 0, margin: 3 }),
+          new go.TextBlock({  // title is centered in header
+              row: 0, column: 1, font: "bold 14px Sans-Serif", stroke: "darkorange",
+              textAlign: "center", stretch: go.Stretch.Horizontal
+            })
+            .bind("text"),
+          new go.Placeholder({  // becomes zero-sized when Group.isSubGraphExpanded is false
+              row: 1, columnSpan: 2, padding: 10, alignment: go.Spot.TopLeft
+            })
+            .bindObject("padding", "isSubGraphExpanded", exp => exp ? 10 : 0)
+        )
     );
 
-  diagram.layout = $(go.TreeLayout, { isRealtime: false });
+diagram.layout =
+  new go.TreeLayout({ isRealtime: false });
 
-  diagram.model = new go.GraphLinksModel([
-      { key: 1, text: "Alpha" },
-      { key: 2, text: "GROUP", isGroup: true },
-      { key: 3, text: "Beta", group: 2 },
-      { key: 4, text: "Gamma", group: 2 },
-      { key: 5, text: "Delta" }
-    ], [
-      { from: 1, to: 3 },
-      { from: 3, to: 4 },
-      { from: 1, to: 5 }
-    ]);
+diagram.model = new go.GraphLinksModel([
+    { key: 1, text: "Alpha" },
+    { key: 2, text: "GROUP", isGroup: true },
+    { key: 3, text: "Beta", group: 2 },
+    { key: 4, text: "Gamma", group: 2 },
+    { key: 5, text: "Delta" }
+  ], [
+    { from: 1, to: 3 },
+    { from: 3, to: 4 },
+    { from: 1, to: 5 }
+  ]);
                      +

                      + Note how when collapsing the group, the link from "Alpha" to "Beta" changes to appear to connect with the Group + rather than with the now hidden "Beta" Node. +

                      diff --git a/intro/subtrees.html b/intro/subtrees.html index 9f98538df..5c0c725bc 100644 --- a/intro/subtrees.html +++ b/intro/subtrees.html @@ -12,17 +12,17 @@ - - - + + + - - - + + + - - + + @@ -247,101 +247,110 @@

                      SubTrees

                      - Tree diagrams can get very large. One way to simplify the diagram is to hide branches of the tree. "Collapsing" a tree node means making all of its children - and the links to them not visible, and recursively collapsing all of the children that have children. + Tree diagrams can get very large. + One way to simplify the diagram is to hide branches of the tree. + "Collapsing" a tree node means making all of its children and the links to them not visible, + and recursively collapsing all of the children that have children.

                      - To collapse a node in a tree, set Node.isTreeExpanded to false; to make sure it is expanded, set that property to true. You should not set this - property to true on a Node that is not GraphObject.visible. + To collapse a node in a tree, set Node.isTreeExpanded to false; to make sure it is expanded, set that property to true. + You should not set this property to true on a Node that is not GraphObject.visible.

                      It is commonplace to provide a button on a node to allow users to collapse and expand subtrees as they wish. - GoJS makes this easy to implement by providing a predefined kind of Panel, named "TreeExpanderButton", that acts as a button to collapse and - expand the subtree of a node. This button changes the visibility of all parts of the subtree except for the node itself. + GoJS makes this easy to implement by providing a predefined kind of Panel, named "TreeExpanderButton", + that acts as a button to collapse and expand the subtree of a node. + This button changes the visibility of all parts of the subtree except for the node itself.

                      - Clicking on an expander button also invalidates the layout that is responsible for the node. Collapsing a subtree often results in a large empty area, and - expanding a subtree often results in overlapping nodes, so a new layout ought to be performed again to make the tree look better. + Clicking on an expander button also invalidates the layout that is responsible for the node. + Collapsing a subtree often results in a large empty area, and expanding a subtree often results in overlapping nodes, + so a new layout ought to be performed again to make the tree look better. 

                      
-  diagram.nodeTemplate =
-    $(go.Node, "Horizontal",
-      $(go.Panel, "Auto",
-        $(go.Shape, "Ellipse", { fill: null }),
-        $(go.TextBlock,
-          new go.Binding("text", "key"))
-      ),
-      $("TreeExpanderButton")
+diagram.nodeTemplate =
+  new go.Node("Horizontal")
+    .add(
+      new go.Panel("Auto")
+        .add(
+          new go.Shape("Ellipse", { fill: "white" }),
+          new go.TextBlock()
+            .bind("text", "key")
+        ),
+      go.GraphObject.make("TreeExpanderButton")
     );
 
-  diagram.layout = $(go.TreeLayout);
+diagram.layout = new go.TreeLayout();
 
-  var nodeDataArray = [
-    { key: "Alpha" }, { key: "Beta" }, { key: "Gamma" }, { key: "Delta" },
-    { key: "Epsilon" }, { key: "Zeta" }, { key: "Eta" }, { key: "Theta" }
-  ];
-  var linkDataArray = [
-    { from: "Alpha", to: "Beta" },
-    { from: "Beta", to: "Gamma" },
-    { from: "Beta", to: "Delta" },
-    { from: "Alpha", to: "Epsilon" },
-    { from: "Epsilon", to: "Zeta" },
-    { from: "Epsilon", to: "Eta" },
-    { from: "Epsilon", to: "Theta" }
-  ];
-  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
+var nodeDataArray = [
+  { key: "Alpha" }, { key: "Beta" }, { key: "Gamma" }, { key: "Delta" },
+  { key: "Epsilon" }, { key: "Zeta" }, { key: "Eta" }, { key: "Theta" }
+];
+var linkDataArray = [
+  { from: "Alpha", to: "Beta" },
+  { from: "Beta", to: "Gamma" },
+  { from: "Beta", to: "Delta" },
+  { from: "Alpha", to: "Epsilon" },
+  { from: "Epsilon", to: "Zeta" },
+  { from: "Epsilon", to: "Eta" },
+  { from: "Epsilon", to: "Theta" }
+];
+diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

                      - Notice that if you first collapse the "Beta" node and then collapse the "Alpha" root node, if you then expand the "Alpha" node, the "Beta" node remains - collapsed, whereas the "Epsilon" node remains expanded. This is because the collapsing operation remembers the state of nodes within the subtree, as the - property Node.wasTreeExpanded. The expanding operation respects the value of that property when recursing through the subtree. + Notice that if you first collapse the "Beta" node and then collapse the "Alpha" root node, + if you then expand the "Alpha" node, the "Beta" node remains collapsed, whereas the "Epsilon" node remains expanded. + This is because the collapsing operation remembers the state of nodes within the subtree, as the property Node.wasTreeExpanded. + The expanding operation respects the value of that property when recursing through the subtree.

                      - You may also want to start off the tree mostly or completely collapsed. First, set Node.isTreeExpanded to false in the template. That will cause only - the roots of the tree to be shown. Second, if you want to show three levels of the tree, call Node.expandTree. + You may also want to start off the tree mostly or completely collapsed. + First, set Node.isTreeExpanded to false in the template. + That will cause only the roots of the tree to be shown. + Second, if you want to show some levels of the tree, call Node.expandTree on each root node. 

                      
-  diagram.nodeTemplate =
-    $(go.Node, "Horizontal",
-      { isTreeExpanded: false },  // by default collapsed
-      $(go.Panel, "Auto",
-        $(go.Shape, "Ellipse", { fill: null }),
-        $(go.TextBlock,
-          new go.Binding("text", "key"))
-      ),
-      $("TreeExpanderButton")
+diagram.nodeTemplate =
+  // by default each node is collapsed
+  new go.Node("Horizontal", { isTreeExpanded: false })
+    .add(
+      new go.Panel("Auto")
+        .add(
+          new go.Shape("Ellipse", { fill: "white" }),
+          new go.TextBlock()
+            .bind("text", "key")
+        ),
+      go.GraphObject.make("TreeExpanderButton")
     );
 
-  diagram.layout = $(go.TreeLayout);
+diagram.layout = new go.TreeLayout({ });
 
-  // After the nodes and links have been created,
-  // expand each of the tree roots to 3 levels deep.
-  diagram.addDiagramListener("InitialLayoutCompleted", e => {
-      e.diagram.findTreeRoots().each(r => r.expandTree(3));
-    });
+var nodeDataArray = [
+  { key: "Alpha" }, { key: "Beta" }, { key: "Gamma" }, { key: "Delta" },
+  { key: "Epsilon" }, { key: "Zeta" }, { key: "Eta" }, { key: "Theta" },
+  { key: "Iota" }, { key: "Kappa" }, { key: "Lambda" }
+];
+var linkDataArray = [
+  { from: "Alpha", to: "Beta" },
+  { from: "Beta", to: "Gamma" },
+  { from: "Beta", to: "Delta" },
+  { from: "Alpha", to: "Epsilon" },
+  { from: "Epsilon", to: "Zeta" },
+  { from: "Epsilon", to: "Eta" },
+  { from: "Eta", to: "Theta" },
+  { from: "Gamma", to: "Iota" },
+  { from: "Iota", to: "Kappa" },
+  { from: "Iota", to: "Lambda" }
+];
+diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
 
-  var nodeDataArray = [
-    { key: "Alpha" }, { key: "Beta" }, { key: "Gamma" }, { key: "Delta" },
-    { key: "Epsilon" }, { key: "Zeta" }, { key: "Eta" }, { key: "Theta" },
-    { key: "Iota" }, { key: "Kappa" }, { key: "Lambda" }
-  ];
-  var linkDataArray = [
-    { from: "Alpha", to: "Beta" },
-    { from: "Beta", to: "Gamma" },
-    { from: "Beta", to: "Delta" },
-    { from: "Alpha", to: "Epsilon" },
-    { from: "Epsilon", to: "Zeta" },
-    { from: "Epsilon", to: "Eta" },
-    { from: "Eta", to: "Theta" },
-    { from: "Gamma", to: "Iota" },
-    { from: "Iota", to: "Kappa" },
-    { from: "Iota", to: "Lambda" }
-  ];
-  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
+// After the nodes and links have been created,
+// expand each of the tree roots to 3 levels deep.
+diagram.findTreeRoots().each(r => r.expandTree(3));

                      - For a complete list of themed properties on predefined templates, see Templates.js in the Extensions directory. + For a complete list of themed properties on predefined templates, + see Templates.js in the ExtensionsJSM directory.

                      Basic Theming

                      - The simplest way to theme your diagram is to use the predefined Themes available and call GraphObject.theme or create a new - ThemeBinding when constructing templates. + The simplest way to theme your diagram is to use the predefined Themes available and call GraphObject.theme + or create a new ThemeBinding when constructing templates. By default, a light and dark theme are provided in the ThemeManager. These are the Themes.Light and Themes.Dark objects, respectively.

                      @@ -311,26 +313,26 @@

                      Basic Theming

                      'light' or 'dark' theme depending on the end user's browser preference. 

                      
-  diagram.themeManager.currentTheme = document.getElementById('themeSelect1').value
-
-  // Update the div background color when theme changes;
-  // in most applications, the div background will be transparent,
-  // and the page background should be updated.
-  diagram.themeManager.changesDivBackground = true;
-
-  diagram.nodeTemplate =
-    new go.Node('Auto')
-      .add(new go.Shape('RoundedRectangle', { strokeWidth: 0 })
-        .theme('fill', 'group')  // fill color is a semi-transparent gray
-      )
-      .add(new go.TextBlock({ margin: 8 })
+diagram.themeManager.currentTheme = document.getElementById('themeSelect1').value;
+
+// Update the div background color when theme changes;
+// in most applications, the div background will be transparent,
+// and the page background should be updated.
+diagram.themeManager.changesDivBackground = true;
+
+diagram.nodeTemplate =
+  new go.Node('Auto')
+    .add(
+      new go.Shape('RoundedRectangle', { strokeWidth: 0 })
+        .theme('fill', 'group'),  // fill color is a semi-transparent gray
+      new go.TextBlock({ margin: 8 })
         .bind('text')
         .theme('stroke', 'text')  // stroke color is a dark or light gray
-      );
+    );
 
-  // the default link template changes color based on the theme's 'link' color
+// the default link template changes color based on the theme's 'link' color
 
-  diagram.model = new go.GraphLinksModel(
+diagram.model = new go.GraphLinksModel(
   [
     { key: 1, text: 'Alpha' },
     { key: 2, text: 'Beta' }
@@ -339,9 +341,9 @@ 
                      Basic Theming
                      
     { from: 1, to: 2 }
   ]);
 
-  changeTheme1 = () => {
-    diagram.themeManager.currentTheme = document.getElementById('themeSelect1').value;
-  };
+changeTheme1 = () => {
+  diagram.themeManager.currentTheme = document.getElementById('themeSelect1').value;
+};
                      -

                      You can also get the same results by using a TreeModel.

                      +

                      + You can also get the same results by using a TreeModel. + Note how the node template and the link template are exactly the same as when using a GraphLinksModel, above. +

                      
   diagram.nodeTemplate =
-    $(go.Node, "Auto",
-      new go.Binding("location", "loc", go.Point.parse),
-      $(go.Shape, "Ellipse", { fill: "white" }),
-      $(go.TextBlock,
-        new go.Binding("text", "key"))
-    );
+    new go.Node("Auto")
+      .bind("location", "loc", go.Point.parse)
+      .add(
+        new go.Shape("Ellipse", { fill: "white" }),
+        new go.TextBlock()
+          .bind("text", "key")
+      );
 
   diagram.linkTemplate =
-    $(go.Link,
-      { routing: go.Routing.Orthogonal, corner: 5 },
-      $(go.Shape));
+    new go.Link({ routing: go.Routing.Orthogonal, corner: 5 })
+      .add(
+        new go.Shape()
+      );
 
   var nodeDataArray = [
     { key: "Alpha", loc: "0 60" },
@@ -328,22 +339,25 @@ 
                      Manual layout of a tree structure
                      
 
 
                      Automatic TreeLayout
                      
 
                      
-  It is most common to use TreeLayout for laying out trees. Just assign Diagram.layout to a new instance of TreeLayout. This example also
-  defines the setupTree function that is used in later examples on this page.
+  It is most common to use TreeLayout for laying out trees.
+  Just assign Diagram.layout to an instance of TreeLayout.
+  This example also defines the setupTree function that is used in later examples on this page.
 
                      
 
                      
 function setupTree(diagram) {
   diagram.nodeTemplate =
-    $(go.Node, "Auto",
-      $(go.Shape, "Ellipse", { fill: "white" }),
-      $(go.TextBlock,
-        new go.Binding("text", "key"))
-    );
+    new go.Node("Auto")
+      .add(
+        new go.Shape("Ellipse", { fill: "white" }),
+        new go.TextBlock()
+          .bind("text", "key")
+      );
 
   diagram.linkTemplate =
-    $(go.Link,
-      { routing: go.Routing.Orthogonal, corner: 5 },
-      $(go.Shape));
+    new go.Link({ routing: go.Routing.Orthogonal, corner: 5 })
+      .add(
+        new go.Shape()
+      );
 
   var nodeDataArray = [
     { key: "Alpha" },
@@ -358,9 +372,9 @@ 
                      Automatic TreeLayout
                      
   diagram.model = new go.TreeModel(nodeDataArray);
 }
 
-  setupTree(diagram);
-  // automatic tree layout
-  diagram.layout = $(go.TreeLayout);
+setupTree(diagram);
+// automatic tree layout
+diagram.layout = new go.TreeLayout();
 
                      
 
 
                      
   
                      
-  
                      This uses the "HyperlinkText" builder defined in HyperlinkText.js.
                      
+  
                      This uses the "HyperlinkText" builder defined in HyperlinkText.js.
                      
   
                      
     Click on the text to open a window to a computed URL. A mouse-over on the text will underline the text. Hover on the text and you will see a tooltip showing
     the destination URL.
diff --git a/samples/IVRtree.html b/samples/IVRtree.html
index eb457456c..d3adb98d7 100644
--- a/samples/IVRtree.html
+++ b/samples/IVRtree.html
@@ -18,17 +18,17 @@
 
 
 
-
-
-
+
+
+
 
 
-
-
-
+
+
+
 
-
-
+
+
 
 
 
diff --git a/samples/LinkLabelDragging.html b/samples/LinkLabelDragging.html
index 146e877a7..003091687 100644
--- a/samples/LinkLabelDragging.html
+++ b/samples/LinkLabelDragging.html
@@ -18,17 +18,17 @@
 
 
 
-
-
-
+
+
+
 
 
-
-
-
+
+
+
 
-
-
+
+
 
 
 
@@ -295,7 +295,7 @@
   
                      
   
                      
     This sample is a modification of the State Chart sample that makes use of the LinkLabelDraggingTool that is defined
-    in its own file, as LinkLabelDraggingTool.js.
+    in its own file, as LinkLabelDraggingTool.js.
   
                      
   
                      
     Note that after dragging a link label you can move a node connected by that link and the label maintains the same position relative to the link route. That
diff --git a/samples/LinkLabelOnPathDragging.html b/samples/LinkLabelOnPathDragging.html
index 325664c45..9ccc77e79 100644
--- a/samples/LinkLabelOnPathDragging.html
+++ b/samples/LinkLabelOnPathDragging.html
@@ -18,17 +18,17 @@
 
 
 
-
-
-
+
+
+
 
 
-
-
-
+
+
+
 
-
-
+
+
 
 
 
@@ -210,7 +210,7 @@
   
                      
   
                      
     This sample demonstrates a custom Tool, LinkLabelOnPathDraggingTool, that allows the user to drag the label of a Link, but that keeps the label exactly on
-    the path of the link. The tool is defined at LinkLabelOnPathDraggingTool.js.
+    the path of the link. The tool is defined at LinkLabelOnPathDraggingTool.js.
   
                      
   
                      
     The label on the link can be any arbitrarily complex object. It is positioned by the GraphObject.segmentIndex and
@@ -219,7 +219,7 @@
     model.
   
                      
   
                      
-    The tool is derived from a similar tool, LinkLabelDraggingTool.js, that allows the user to drag the label in any
+    The tool is derived from a similar tool, LinkLabelDraggingTool.js, that allows the user to drag the label in any
     direction from the mid-point of the Link path.
   
                      
 
                      
diff --git a/samples/LinkLabelRouter.html b/samples/LinkLabelRouter.html
index 941cc6dac..da5e18b09 100644
--- a/samples/LinkLabelRouter.html
+++ b/samples/LinkLabelRouter.html
@@ -18,17 +18,17 @@
 
 
 
-
-
-
+
+
+
 
 
-
-
-
+
+
+
 
-
-
+
+
 
 
 
diff --git a/samples/LinkShifting.html b/samples/LinkShifting.html
index b3a6d7cb2..cacd82a7e 100644
--- a/samples/LinkShifting.html
+++ b/samples/LinkShifting.html
@@ -18,17 +18,17 @@
 
 
 
-
-
-
+
+
+
 
 
-
-
-
+
+
+
 
-
-
+
+
 
 
 
@@ -188,7 +188,7 @@
   
                      
     This sample demonstrates the LinkShiftingTool, which is an extra tool that can be installed in the ToolManager to allow users to shift the end point of the
     link to be anywhere along the sides of the port with which it remains connected. This extension tool is defined in its own file, as
-    LinkShiftingTool.js.
+    LinkShiftingTool.js.
   
                      
   
                      
     This only looks good for ports that occupy the whole of a rectangular node. If you want to restrict the user's permitted sides, you can adapt the
diff --git a/samples/LocalStorageCommandHandler.html b/samples/LocalStorageCommandHandler.html
index 1a5f27a3d..320c29c08 100644
--- a/samples/LocalStorageCommandHandler.html
+++ b/samples/LocalStorageCommandHandler.html
@@ -18,17 +18,17 @@
 
 
 
-
-
-
+
+
+
 
 
-
-
-
+
+
+
 
-
-
+
+
 
 
 
diff --git a/samples/NodeLabelDragging.html b/samples/NodeLabelDragging.html
index 328e22029..37c79ff9d 100644
--- a/samples/NodeLabelDragging.html
+++ b/samples/NodeLabelDragging.html
@@ -18,17 +18,17 @@
 
 
 
-
-
-
+
+
+
 
 
-
-
-
+
+
+
 
-
-
+
+
 
 
 
@@ -304,7 +304,7 @@
   
                      
   
                      
     This sample is a modification of the State Chart sample that makes use of the NodeLabelDraggingTool that is defined
-    in its own file, as NodeLabelDraggingTool.js.
+    in its own file, as NodeLabelDraggingTool.js.
   
                      
   
                      
     Note that after dragging a node label you can move that node and the label maintains the same position relative to the node. That relative position is
diff --git a/samples/NonRealtimeDragging.html b/samples/NonRealtimeDragging.html
index 07e9f3c5e..6dae2219f 100644
--- a/samples/NonRealtimeDragging.html
+++ b/samples/NonRealtimeDragging.html
@@ -18,17 +18,17 @@
 
 
 
-
-
-
+
+
+
 
 
-
-
-
+
+
+
 
-
-
+
+
 
 
 
@@ -192,7 +192,7 @@
     This custom DraggingTool class causes the user to drag around a translucent image of the Nodes and Links being moved, leaving the selected Parts in
     place, rather than actually moving those Nodes and Links in realtime. Only when the mouse up occurs does the move happen.
   
                      
-  
                      This tool is defined in its own file, as NonRealtimeDraggingTool.js
                      
+  
                      This tool is defined in its own file, as NonRealtimeDraggingTool.js
                    diff --git a/samples/OrthogonalLinkReshaping.html b/samples/OrthogonalLinkReshaping.html index a8f9cd92a..841272af1 100644 --- a/samples/OrthogonalLinkReshaping.html +++ b/samples/OrthogonalLinkReshaping.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + @@ -197,7 +197,7 @@ AvoidsNodes

                    This sample demonstrates the OrthogonalLinkReshapingTool that is defined in its own file, as - OrthogonalLinkReshapingTool.js. This tool allow users to shift the sections of orthogonal links in addition to + OrthogonalLinkReshapingTool.js. This tool allow users to shift the sections of orthogonal links in addition to resegmenting them. The Diagram's ToolManager.linkReshapingTool and link template's Part.reshapable properties must be set to use this tool. The Link.resegmentable property can still optionally be used.

                    diff --git a/samples/OverviewResizing.html b/samples/OverviewResizing.html index 7f5d1df04..46b87d692 100644 --- a/samples/OverviewResizing.html +++ b/samples/OverviewResizing.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + @@ -268,7 +268,7 @@

                    This sample demonstrates a custom ResizingTool which allows the user to resize the overview box. It is defined in its own file, as - OverviewResizingTool.js. + OverviewResizingTool.js.

                    diff --git a/samples/PERT.html b/samples/PERT.html index f4de17444..34a01fd60 100644 --- a/samples/PERT.html +++ b/samples/PERT.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/PackedHierarchy.html b/samples/PackedHierarchy.html index 9774dec11..edcdd56fc 100644 --- a/samples/PackedHierarchy.html +++ b/samples/PackedHierarchy.html @@ -29,17 +29,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/PackedLayout.html b/samples/PackedLayout.html index 47a04af88..e1f396ed5 100644 --- a/samples/PackedLayout.html +++ b/samples/PackedLayout.html @@ -29,17 +29,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/PanelLayoutFlow.html b/samples/PanelLayoutFlow.html index e8e9bf52d..e80cd1cde 100644 --- a/samples/PanelLayoutFlow.html +++ b/samples/PanelLayoutFlow.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + @@ -244,7 +244,7 @@ shape's figure. These tab panels use a "Flow" PanelLayout to arrange the shapes in columns, by setting PanelLayoutFlow.direction to 90. Note how for a custom PanelLayout one cannot use its name directly, but must construct and initialize an instance of the PanelLayout.

                    -

                    This extension is defined in its own file, as PanelLayoutFlow.js.

                    +

                    This extension is defined in its own file, as PanelLayoutFlow.js.

                    diff --git a/samples/Parallel.html b/samples/Parallel.html index caf2c15c5..222051b23 100644 --- a/samples/Parallel.html +++ b/samples/Parallel.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + @@ -263,7 +263,7 @@

                    This sample demonstrates a custom TreeLayout, ParallelLayout, which assumes that there is a single "Split" node that is the root of a tree, other - than links that connect with a single "Merge" node. The layout is defined in its own file, as ParallelLayout.js. + than links that connect with a single "Merge" node. The layout is defined in its own file, as ParallelLayout.js.

                    Both the Diagram.layout and the Group.layout are instances of ParallelLayout, allowing for nested layouts that appear in parallel.

                    diff --git a/samples/ParallelRoute.html b/samples/ParallelRoute.html index ee1089ab1..4a7216901 100644 --- a/samples/ParallelRoute.html +++ b/samples/ParallelRoute.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + @@ -187,7 +187,7 @@ A ParallelRouteLink is a custom Link that overrides Link.computePoints in order to produce a middle segment that is parallel to the routes of other ParallelRouteLinks connecting the same two ports.

                    -

                    This Link extension is defined in its own file, as ParallelRouteLink.js.

                    +

                    This Link extension is defined in its own file, as ParallelRouteLink.js.

                    diff --git a/samples/PolygonDrawing.html b/samples/PolygonDrawing.html index ca6feb244..e40f1925d 100644 --- a/samples/PolygonDrawing.html +++ b/samples/PolygonDrawing.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + @@ -141,8 +141,8 @@

                    This sample demonstrates the PolygonDrawingTool, a custom Tool added to the Diagram's mouseDownTools. It is defined in its own file, as - PolygonDrawingTool.js. It also demonstrates the GeometryReshapingTool, another custom tool, defined in - GeometryReshapingTool.js. + PolygonDrawingTool.js. It also demonstrates the GeometryReshapingTool, another custom tool, defined in + GeometryReshapingTool.js.

                    These extensions serve as examples of features that can be added to GoJS by writing new classes. With the PolygonDrawingTool, a new mode is supported that diff --git a/samples/PolylineLinking.html b/samples/PolylineLinking.html index 560f64bdd..8466262f0 100644 --- a/samples/PolylineLinking.html +++ b/samples/PolylineLinking.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + @@ -192,7 +192,7 @@

                    This sample demonstrates the PolylineLinkingTool, which replaces the standard LinkingTool. The tool is defined in its own file, as - PolylineLinkingTool.js. + PolylineLinkingTool.js.

                    The user starts drawing a new link from a node in the normal manner, by dragging from a port, which for feedback purposes has a "pointer" cursor. Normally diff --git a/samples/PortShifting.html b/samples/PortShifting.html index 79cf9a3f4..fd3896c06 100644 --- a/samples/PortShifting.html +++ b/samples/PortShifting.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + @@ -484,7 +484,7 @@

                    This is exactly like the Logic Circuit sample but also makes use of the PortShiftingTool, which is defined in - PortShiftingTool.js + PortShiftingTool.js

                    When the user wants to shift the position of a port on a node, the user can hold down the Shift key during a mouse-down on a port element. Dragging then diff --git a/samples/RealtimeDragSelecting.html b/samples/RealtimeDragSelecting.html index 03af20073..6fe3b436c 100644 --- a/samples/RealtimeDragSelecting.html +++ b/samples/RealtimeDragSelecting.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + @@ -194,7 +194,7 @@ how the selection changes.

                    - Load it in your own app by including RealtimeDragSelectingTool.js. Initialize your Diagram by setting + Load it in your own app by including RealtimeDragSelectingTool.js. Initialize your Diagram by setting ToolManager.dragSelectingTool to a new instance of this tool. For example: 

                    diff --git a/samples/Rescaling.html b/samples/Rescaling.html
index e3779d098..215f32699 100644
--- a/samples/Rescaling.html
+++ b/samples/Rescaling.html
@@ -18,17 +18,17 @@
 
 
 
-
-
-
+
+
+
 
 
-
-
-
+
+
+
 
-
-
+
+
 
 
 
@@ -178,7 +178,7 @@
     Just as the ResizingTool changes the GraphObject.desiredSize of an object, and just as the RotatingTool changes the
     GraphObject.angle of an object, the RescalingTool changes the GraphObject.scale of an object.
   
                    
-  
                    This extension tool is defined in its own file, as RescalingTool.js.
                    
+  
                    This extension tool is defined in its own file, as RescalingTool.js.
                    diff --git a/samples/ResizeMultiple.html b/samples/ResizeMultiple.html index 8dd265de6..3fd660899 100644 --- a/samples/ResizeMultiple.html +++ b/samples/ResizeMultiple.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + @@ -187,7 +187,7 @@

                    This sample demonstrates a custom ResizingTool which allows the user to resize many selected objects at once. It is defined in its own file, as - ResizeMultipleTool.js. + ResizeMultipleTool.js.

                    Usage can also be seen in the Floor Plan Editor sample.

                    diff --git a/samples/Robot.html b/samples/Robot.html index 8e2e79a08..2005a77e8 100644 --- a/samples/Robot.html +++ b/samples/Robot.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + @@ -326,7 +326,7 @@
                    -

                    To simulate mouse events the buttons below use the Robot class that is defined in Robot.js.

                    +

                    To simulate mouse events the buttons below use the Robot class that is defined in Robot.js.

                    Click these buttons in order from top to bottom:

                    diff --git a/samples/RotateMultiple.html b/samples/RotateMultiple.html index 9162701e3..22ffadf55 100644 --- a/samples/RotateMultiple.html +++ b/samples/RotateMultiple.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + @@ -186,7 +186,7 @@

                    This sample demonstrates a custom RotatingTool which allows the user to rotate many selected objects at once. It is defined in its own file, as - RotateMultipleTool.js. + RotateMultipleTool.js.

                    Hold down the control key in order to rotate each selected node individually, rather than all of them collectively.

                    diff --git a/samples/ScrollingTable.html b/samples/ScrollingTable.html index 7036729b2..ac0e237ab 100644 --- a/samples/ScrollingTable.html +++ b/samples/ScrollingTable.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + @@ -260,7 +260,7 @@

                    - This makes use of the "ScrollingTable" Panel defined in ScrollingTable.js. The "AutoRepeatButton" Panel is also defined in + This makes use of the "ScrollingTable" Panel defined in ScrollingTable.js. The "AutoRepeatButton" Panel is also defined in that file. Each node is resizable.

                    diff --git a/samples/SectorReshaping.html b/samples/SectorReshaping.html index 3bf9ef709..a74f26746 100644 --- a/samples/SectorReshaping.html +++ b/samples/SectorReshaping.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + @@ -215,7 +215,7 @@ Note that the Geometry returned by makeSector always returns a Geometry that occupies the area that would be occupied by a full circle. That Geometry-creating function also depends on three data properties, radius, angle, and sweep.

                    -

                    This extension tool is defined in its own file, as SectorReshapingTool.js.

                    +

                    This extension tool is defined in its own file, as SectorReshapingTool.js.

                    diff --git a/samples/Serpentine.html b/samples/Serpentine.html index 800fe4f1f..15a17bab4 100644 --- a/samples/Serpentine.html +++ b/samples/Serpentine.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + @@ -184,7 +184,7 @@

                    This sample demonstrates a custom Layout, SerpentineLayout, which assumes the graph consists of a chain of nodes. The layout is defined in its own file, as - SerpentineLayout.js. + SerpentineLayout.js.

                    It also has Layout.isViewportSized set to true, so that resizing the Diagram DIV will automatically re-layout.

                    diff --git a/samples/SnapLinkReshaping.html b/samples/SnapLinkReshaping.html index 0116aa3d9..efea82c44 100644 --- a/samples/SnapLinkReshaping.html +++ b/samples/SnapLinkReshaping.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + @@ -324,7 +324,7 @@ Adornments, nodes are not rotatable, and links do not have text labels.

                    - Its purpose is to demonstrate the SnapLinkReshapingTool, an extension of LinkReshapingTool that snaps each + Its purpose is to demonstrate the SnapLinkReshapingTool, an extension of LinkReshapingTool that snaps each dragged reshape handle of selected Links to the nearest grid point. If the SnapLinkReshapingTool.avoidsNodes option is true, as it is by default, then the reshaping is limited to points where the adjacent segments would not be crossing over any avoidable nodes.

                    diff --git a/samples/Spiral.html b/samples/Spiral.html index c238235ad..0dfb7ffa6 100644 --- a/samples/Spiral.html +++ b/samples/Spiral.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + @@ -209,7 +209,7 @@

                    This sample demonstrates a custom Layout, SpiralLayout, which assumes the graph consists of a chain of nodes. The layout is defined in its own file, as - SpiralLayout.js. + SpiralLayout.js.

                    diff --git a/samples/SpotRotating.html b/samples/SpotRotating.html index ae69916a5..18a775cd8 100644 --- a/samples/SpotRotating.html +++ b/samples/SpotRotating.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + @@ -186,7 +186,7 @@ rotationPoint and the Part.rotationSpot. When the handle is inside the rectangular area of the Part.rotateObject, the Spot is purely fractional. When the handle moves outside of the object's rectangular area, the spot will be at the edge of the rectangle plus an offset.

                    -

                    This extension tool is defined in its own file, as SpotRotatingTool.js.

                    +

                    This extension tool is defined in its own file, as SpotRotatingTool.js.

                    diff --git a/samples/SwimLaneLayout.html b/samples/SwimLaneLayout.html index e18204e3d..057d07541 100644 --- a/samples/SwimLaneLayout.html +++ b/samples/SwimLaneLayout.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/Table.html b/samples/Table.html index 1d15e0524..e4ffdaac7 100644 --- a/samples/Table.html +++ b/samples/Table.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + @@ -440,7 +440,7 @@

                    This sample demonstrates a custom Layout, TableLayout, that is very much like a simplified "Table" Panel layout, but working on non-Link Parts in a Diagram - or a Group rather than on GraphObjects in a Panel. The layout is defined in its own file, as TableLayout.js. + or a Group rather than on GraphObjects in a Panel. The layout is defined in its own file, as TableLayout.js.

                    You can drag-and-drop nodes from the Palette into any Group. Dragging into a Group highlights the Group. Drops must occur inside Groups; otherwise the diff --git a/samples/TextEditor.html b/samples/TextEditor.html index 2a85acee4..e35e7f2a5 100644 --- a/samples/TextEditor.html +++ b/samples/TextEditor.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/TreeMap.html b/samples/TreeMap.html index 2f5516610..ecdef0965 100644 --- a/samples/TreeMap.html +++ b/samples/TreeMap.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + @@ -304,7 +304,7 @@ and sized to fill an area of the viewport proportionate to its "size", as determined by its Node.data.size property. Each Group gets a size that is the sum of all of its member Nodes.

                    -

                    The layout is defined in its own file, as TreeMapLayout.js.

                    +

                    The layout is defined in its own file, as TreeMapLayout.js.

                    Clicking repeatedly at the same point will initially select the Node at that point, and then its containing Group, and so on up the chain of containers.

                    diff --git a/samples/VirtualizedPacked.html b/samples/VirtualizedPacked.html index d52874040..1a51a1697 100644 --- a/samples/VirtualizedPacked.html +++ b/samples/VirtualizedPacked.html @@ -29,17 +29,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/ZoomSlider.html b/samples/ZoomSlider.html index a48ee04f4..7c9cd2f1f 100644 --- a/samples/ZoomSlider.html +++ b/samples/ZoomSlider.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + @@ -285,7 +285,7 @@ using position: relative or position: absolute, so that the ZoomSlider HTML DOM can be positioned correctly relative to the Diagram Div.

                    -

                    This extension HTML is defined in its own file, as ZoomSlider.js and ZoomSlider.css.

                    +

                    This extension HTML is defined in its own file, as ZoomSlider.js and ZoomSlider.css.

                    diff --git a/samples/absolute.html b/samples/absolute.html index 9683ff728..3402be247 100644 --- a/samples/absolute.html +++ b/samples/absolute.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/addRemoveColumns.html b/samples/addRemoveColumns.html index 4e967f931..5697d935a 100644 --- a/samples/addRemoveColumns.html +++ b/samples/addRemoveColumns.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/addToPalette.html b/samples/addToPalette.html index d5181e1b2..f77af45ba 100644 --- a/samples/addToPalette.html +++ b/samples/addToPalette.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/adornmentButtons.html b/samples/adornmentButtons.html index 7f790b77f..7c2dc6b38 100644 --- a/samples/adornmentButtons.html +++ b/samples/adornmentButtons.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/all.html b/samples/all.html index f4f17b2d3..3fc7d581b 100644 --- a/samples/all.html +++ b/samples/all.html @@ -23,17 +23,17 @@ - - - + + + - - - + + + - - + + @@ -341,8 +341,8 @@

                    PanelLayout Extensions

                    Router Extensions

                    Tool Extensions:

                    diff --git a/samples/animatedFocus.html b/samples/animatedFocus.html index 3ed43c8e9..57ab85db8 100644 --- a/samples/animatedFocus.html +++ b/samples/animatedFocus.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/arrowheads.html b/samples/arrowheads.html index 155f07ea6..f1fa812cc 100644 --- a/samples/arrowheads.html +++ b/samples/arrowheads.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/barCharts.html b/samples/barCharts.html index 88090f2bc..03cb467f8 100644 --- a/samples/barCharts.html +++ b/samples/barCharts.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/basic.html b/samples/basic.html index 3ea9ba614..36d18b02a 100644 --- a/samples/basic.html +++ b/samples/basic.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/beatPaths.html b/samples/beatPaths.html index 37ee07970..14d49c367 100644 --- a/samples/beatPaths.html +++ b/samples/beatPaths.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/belts.html b/samples/belts.html index a277aee54..efaad0bdf 100644 --- a/samples/belts.html +++ b/samples/belts.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/blockEditor.html b/samples/blockEditor.html index 86e2ff5dc..c383356b1 100644 --- a/samples/blockEditor.html +++ b/samples/blockEditor.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/cLayout.html b/samples/cLayout.html index f9224f72e..01543e00c 100644 --- a/samples/cLayout.html +++ b/samples/cLayout.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/candlestickCharts.html b/samples/candlestickCharts.html index eb83d2a22..7670ee9eb 100644 --- a/samples/candlestickCharts.html +++ b/samples/candlestickCharts.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/canvases.html b/samples/canvases.html index 754815696..8d2bb3d78 100644 --- a/samples/canvases.html +++ b/samples/canvases.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/classHierarchy.html b/samples/classHierarchy.html index 0b5bc9bf7..326092785 100644 --- a/samples/classHierarchy.html +++ b/samples/classHierarchy.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/comments.html b/samples/comments.html index aa86ff539..be299da10 100644 --- a/samples/comments.html +++ b/samples/comments.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/conceptMap.html b/samples/conceptMap.html index a4fd75721..3fcc35654 100644 --- a/samples/conceptMap.html +++ b/samples/conceptMap.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/connectionBoxNode.html b/samples/connectionBoxNode.html index 51e31f524..3c43668d7 100644 --- a/samples/connectionBoxNode.html +++ b/samples/connectionBoxNode.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/constantSize.html b/samples/constantSize.html index 98ed13d5a..5432b0b46 100644 --- a/samples/constantSize.html +++ b/samples/constantSize.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/contentAlign.html b/samples/contentAlign.html index a8aa9fa20..285e95802 100644 --- a/samples/contentAlign.html +++ b/samples/contentAlign.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/controlGauges.html b/samples/controlGauges.html index 59525b87d..e443592cc 100644 --- a/samples/controlGauges.html +++ b/samples/controlGauges.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/customAnimations.html b/samples/customAnimations.html index 800e8f4a1..c687e37dc 100644 --- a/samples/customAnimations.html +++ b/samples/customAnimations.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/customContextMenu.html b/samples/customContextMenu.html index bd9e6ce36..c92755405 100644 --- a/samples/customContextMenu.html +++ b/samples/customContextMenu.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/customExpandCollapse.html b/samples/customExpandCollapse.html index 775978107..e52bf3579 100644 --- a/samples/customExpandCollapse.html +++ b/samples/customExpandCollapse.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/customTextEditingTool.html b/samples/customTextEditingTool.html index 5cf110540..6200535fe 100644 --- a/samples/customTextEditingTool.html +++ b/samples/customTextEditingTool.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/dataFlow.html b/samples/dataFlow.html index 25402777d..fcd98e7f2 100644 --- a/samples/dataFlow.html +++ b/samples/dataFlow.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/dataFlowVertical.html b/samples/dataFlowVertical.html index bacf1d3fd..360323368 100644 --- a/samples/dataFlowVertical.html +++ b/samples/dataFlowVertical.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/dataVisualization.html b/samples/dataVisualization.html index fcb8f4cc4..e4624bfbd 100644 --- a/samples/dataVisualization.html +++ b/samples/dataVisualization.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/decisionTree.html b/samples/decisionTree.html index 68395ea97..57e564ade 100644 --- a/samples/decisionTree.html +++ b/samples/decisionTree.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + @@ -123,7 +123,6 @@ -
                    diff --git a/samples/distances.html b/samples/distances.html index 039ac8c25..86390f0a2 100644 --- a/samples/distances.html +++ b/samples/distances.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/donutCharts.html b/samples/donutCharts.html index 1d48cb3ff..6ff07070d 100644 --- a/samples/donutCharts.html +++ b/samples/donutCharts.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/doubleCircle.html b/samples/doubleCircle.html index d67fad7a7..b8ed28b39 100644 --- a/samples/doubleCircle.html +++ b/samples/doubleCircle.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/doubleTree.html b/samples/doubleTree.html index d5fd8db8b..411b35107 100644 --- a/samples/doubleTree.html +++ b/samples/doubleTree.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/dragDropFields.html b/samples/dragDropFields.html index be1a831ab..9a1619bd3 100644 --- a/samples/dragDropFields.html +++ b/samples/dragDropFields.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/dragOutFields.html b/samples/dragOutFields.html index 3b6f4ca39..042facd4e 100644 --- a/samples/dragOutFields.html +++ b/samples/dragOutFields.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/dragUnoccupied.html b/samples/dragUnoccupied.html index a2c6b8fcb..699b7e690 100644 --- a/samples/dragUnoccupied.html +++ b/samples/dragUnoccupied.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/draggableLink.html b/samples/draggableLink.html index b15fed397..556b8df22 100644 --- a/samples/draggableLink.html +++ b/samples/draggableLink.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/dynamicPieChart.html b/samples/dynamicPieChart.html index b7e9af738..557680634 100644 --- a/samples/dynamicPieChart.html +++ b/samples/dynamicPieChart.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/dynamicPorts.html b/samples/dynamicPorts.html index 00c4e941a..c3958bc90 100644 --- a/samples/dynamicPorts.html +++ b/samples/dynamicPorts.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/entityRelationship.html b/samples/entityRelationship.html index 935269852..309d6f69c 100644 --- a/samples/entityRelationship.html +++ b/samples/entityRelationship.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/euler.html b/samples/euler.html index 2f6bd7c12..569053c72 100644 --- a/samples/euler.html +++ b/samples/euler.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/familyTree.html b/samples/familyTree.html index 5ba247b97..0354164d2 100644 --- a/samples/familyTree.html +++ b/samples/familyTree.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/familyTreeJP.html b/samples/familyTreeJP.html index acc67f73d..64c8710d6 100644 --- a/samples/familyTreeJP.html +++ b/samples/familyTreeJP.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/faultTree.html b/samples/faultTree.html index ff37ebcc8..bd1644d1a 100644 --- a/samples/faultTree.html +++ b/samples/faultTree.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/fdLayout.html b/samples/fdLayout.html index c3b3b02fd..1c953cc9b 100644 --- a/samples/fdLayout.html +++ b/samples/fdLayout.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/flowBuilder.html b/samples/flowBuilder.html index aa0abb5e2..1bafe191b 100644 --- a/samples/flowBuilder.html +++ b/samples/flowBuilder.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/flowchart.html b/samples/flowchart.html index 840c5a42c..b0b4f5a69 100644 --- a/samples/flowchart.html +++ b/samples/flowchart.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/flowgrammer.html b/samples/flowgrammer.html index a97523df2..ddafa394b 100644 --- a/samples/flowgrammer.html +++ b/samples/flowgrammer.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/friendWheel.html b/samples/friendWheel.html index e517d1ec1..fb719b342 100644 --- a/samples/friendWheel.html +++ b/samples/friendWheel.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/gLayout.html b/samples/gLayout.html index fb649d1da..7280293a3 100644 --- a/samples/gLayout.html +++ b/samples/gLayout.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/gameOfLife.html b/samples/gameOfLife.html index f612b220a..aebfe06d5 100644 --- a/samples/gameOfLife.html +++ b/samples/gameOfLife.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/gantt.html b/samples/gantt.html index e7062d350..864314035 100644 --- a/samples/gantt.html +++ b/samples/gantt.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/genogram.html b/samples/genogram.html index 665250432..28bd4b2e3 100644 --- a/samples/genogram.html +++ b/samples/genogram.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/gestureBehavior.html b/samples/gestureBehavior.html index e65bf64f9..ef93570df 100644 --- a/samples/gestureBehavior.html +++ b/samples/gestureBehavior.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/grafcet.html b/samples/grafcet.html index a49135530..11ec40bd6 100644 --- a/samples/grafcet.html +++ b/samples/grafcet.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/grouping.html b/samples/grouping.html index f462353cd..446313cb2 100644 --- a/samples/grouping.html +++ b/samples/grouping.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/hoverButtons.html b/samples/hoverButtons.html index 316c3f573..aac975eb8 100644 --- a/samples/hoverButtons.html +++ b/samples/hoverButtons.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/htmlDragDrop.html b/samples/htmlDragDrop.html index 324e8d211..276fa1c4a 100644 --- a/samples/htmlDragDrop.html +++ b/samples/htmlDragDrop.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/htmlInteraction.html b/samples/htmlInteraction.html index 37ea4d242..8b38fa778 100644 --- a/samples/htmlInteraction.html +++ b/samples/htmlInteraction.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/htmlLightBoxContextMenu.html b/samples/htmlLightBoxContextMenu.html index 14e9c49a9..ec30f6654 100644 --- a/samples/htmlLightBoxContextMenu.html +++ b/samples/htmlLightBoxContextMenu.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/icons.html b/samples/icons.html index 784786f0e..798b67973 100644 --- a/samples/icons.html +++ b/samples/icons.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/incrementalTree.html b/samples/incrementalTree.html index f30e13b1f..95dae7483 100644 --- a/samples/incrementalTree.html +++ b/samples/incrementalTree.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/index.html b/samples/index.html index bd828a5a5..826e27ab1 100644 --- a/samples/index.html +++ b/samples/index.html @@ -21,12 +21,12 @@ - - - + + + - - + + diff --git a/samples/industrialDiagram.html b/samples/industrialDiagram.html index 9b175a7de..d969c7939 100644 --- a/samples/industrialDiagram.html +++ b/samples/industrialDiagram.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/industrialMonitor.html b/samples/industrialMonitor.html index fd84eeaf9..144b88c0c 100644 --- a/samples/industrialMonitor.html +++ b/samples/industrialMonitor.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/instrumentGauge.html b/samples/instrumentGauge.html index 47a0cfc30..a580a71e7 100644 --- a/samples/instrumentGauge.html +++ b/samples/instrumentGauge.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/interactiveForce.html b/samples/interactiveForce.html index 9d624f7bc..5d537106b 100644 --- a/samples/interactiveForce.html +++ b/samples/interactiveForce.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/kanban.html b/samples/kanban.html index 5b6d46e60..30c745298 100644 --- a/samples/kanban.html +++ b/samples/kanban.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/kittenMonitor.html b/samples/kittenMonitor.html index 8e51f1586..746325109 100644 --- a/samples/kittenMonitor.html +++ b/samples/kittenMonitor.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/ldLayout.html b/samples/ldLayout.html index bdd1f6707..e7f97851c 100644 --- a/samples/ldLayout.html +++ b/samples/ldLayout.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/leaflet.html b/samples/leaflet.html index 002d769de..42c2a475b 100644 --- a/samples/leaflet.html +++ b/samples/leaflet.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/linksToLinks.html b/samples/linksToLinks.html index d44decd79..2f953f392 100644 --- a/samples/linksToLinks.html +++ b/samples/linksToLinks.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/localView.html b/samples/localView.html index 3e1035cf4..5cccd8601 100644 --- a/samples/localView.html +++ b/samples/localView.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/logicCircuit.html b/samples/logicCircuit.html index 72d248d17..3d8cb1d49 100644 --- a/samples/logicCircuit.html +++ b/samples/logicCircuit.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/macros.html b/samples/macros.html index 19b1d4a40..e6c95ea37 100644 --- a/samples/macros.html +++ b/samples/macros.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/magnifier.html b/samples/magnifier.html index 263268555..a8005b9c7 100644 --- a/samples/magnifier.html +++ b/samples/magnifier.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/mindMap.html b/samples/mindMap.html index 8b9c64aea..55bb9b09e 100644 --- a/samples/mindMap.html +++ b/samples/mindMap.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/minimal.html b/samples/minimal.html index a1ee25320..426190853 100644 --- a/samples/minimal.html +++ b/samples/minimal.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/minimalBlob.html b/samples/minimalBlob.html index 11ebe072c..5e7f2220a 100644 --- a/samples/minimalBlob.html +++ b/samples/minimalBlob.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/minimalSvg.html b/samples/minimalSvg.html index c0443cbf8..082fe9853 100644 --- a/samples/minimalSvg.html +++ b/samples/minimalSvg.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/multiArrow.html b/samples/multiArrow.html index 0dd49a56b..f131eefcb 100644 --- a/samples/multiArrow.html +++ b/samples/multiArrow.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/multiColorLinks.html b/samples/multiColorLinks.html index 903cb49fc..981b6ff43 100644 --- a/samples/multiColorLinks.html +++ b/samples/multiColorLinks.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/multiNodePathLinks.html b/samples/multiNodePathLinks.html index 9ec2a190c..418f25d13 100644 --- a/samples/multiNodePathLinks.html +++ b/samples/multiNodePathLinks.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/navigation.html b/samples/navigation.html index 41ad7b188..f745a907b 100644 --- a/samples/navigation.html +++ b/samples/navigation.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/network.html b/samples/network.html index 8cd417c81..6578c2e2c 100644 --- a/samples/network.html +++ b/samples/network.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/networkConfig.html b/samples/networkConfig.html index 9ec76b606..cc76a1788 100644 --- a/samples/networkConfig.html +++ b/samples/networkConfig.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/orgChartAssistants.html b/samples/orgChartAssistants.html index 6b4c43edb..4a6521140 100644 --- a/samples/orgChartAssistants.html +++ b/samples/orgChartAssistants.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/orgChartEditor.html b/samples/orgChartEditor.html index 10e08d6a7..a9024b949 100644 --- a/samples/orgChartEditor.html +++ b/samples/orgChartEditor.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/orgChartExtras.html b/samples/orgChartExtras.html index eb54cb23b..f8e3aa051 100644 --- a/samples/orgChartExtras.html +++ b/samples/orgChartExtras.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/orgChartStatic.html b/samples/orgChartStatic.html index d367f6c62..e6dafb9f3 100644 --- a/samples/orgChartStatic.html +++ b/samples/orgChartStatic.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/pageFlow.html b/samples/pageFlow.html index f9fe45ae8..74efcc146 100644 --- a/samples/pageFlow.html +++ b/samples/pageFlow.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/panelLayout.html b/samples/panelLayout.html index eb9c9c58c..25cda1b32 100644 --- a/samples/panelLayout.html +++ b/samples/panelLayout.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/parseTree.html b/samples/parseTree.html index 955f804b0..e6be2969c 100644 --- a/samples/parseTree.html +++ b/samples/parseTree.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/pathAnimation.html b/samples/pathAnimation.html index 8706bcf3c..543dd0136 100644 --- a/samples/pathAnimation.html +++ b/samples/pathAnimation.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/pieCharts.html b/samples/pieCharts.html index d860dc2ed..3e4cefe09 100644 --- a/samples/pieCharts.html +++ b/samples/pieCharts.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/pinchResizing.html b/samples/pinchResizing.html index 6c9cbe7bf..de983e8f6 100644 --- a/samples/pinchResizing.html +++ b/samples/pinchResizing.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/pipeTree.html b/samples/pipeTree.html index d717cd7b2..13b78ed3e 100644 --- a/samples/pipeTree.html +++ b/samples/pipeTree.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/pipes.html b/samples/pipes.html index 9e1ed1688..66fb980dd 100644 --- a/samples/pipes.html +++ b/samples/pipes.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/planogram.html b/samples/planogram.html index 11835d30c..bfb972708 100644 --- a/samples/planogram.html +++ b/samples/planogram.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/processFlow.html b/samples/processFlow.html index 60dd0bffb..3615f6399 100644 --- a/samples/processFlow.html +++ b/samples/processFlow.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/productionEditor.html b/samples/productionEditor.html index bdba9fb4a..ce4c4b330 100644 --- a/samples/productionEditor.html +++ b/samples/productionEditor.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/productionProcess.html b/samples/productionProcess.html index b5065b47f..5e460037d 100644 --- a/samples/productionProcess.html +++ b/samples/productionProcess.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/radial.html b/samples/radial.html index 6e0c57e17..6c13c0a0c 100644 --- a/samples/radial.html +++ b/samples/radial.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/radialAdornment.html b/samples/radialAdornment.html index dd036c1b4..9ff6d3e94 100644 --- a/samples/radialAdornment.html +++ b/samples/radialAdornment.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/radialPartition.html b/samples/radialPartition.html index 0e2690384..4692a74d2 100644 --- a/samples/radialPartition.html +++ b/samples/radialPartition.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/records.html b/samples/records.html index 7b0b0f3c7..4a5669d0c 100644 --- a/samples/records.html +++ b/samples/records.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/regrouping.html b/samples/regrouping.html index 23fa12519..21ca6f849 100644 --- a/samples/regrouping.html +++ b/samples/regrouping.html @@ -22,17 +22,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/regroupingTreeView.html b/samples/regroupingTreeView.html index ffc495866..6d4e0970d 100644 --- a/samples/regroupingTreeView.html +++ b/samples/regroupingTreeView.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/relationships.html b/samples/relationships.html index 70a63c9b9..d73dc3a6e 100644 --- a/samples/relationships.html +++ b/samples/relationships.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/roundedGroups.html b/samples/roundedGroups.html index 7bdea7f55..b562b2b99 100644 --- a/samples/roundedGroups.html +++ b/samples/roundedGroups.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/ruleredDiagram.html b/samples/ruleredDiagram.html index 96763e9a8..2bd7397fe 100644 --- a/samples/ruleredDiagram.html +++ b/samples/ruleredDiagram.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/sankey.html b/samples/sankey.html index 701d46901..8f2dd1e5f 100644 --- a/samples/sankey.html +++ b/samples/sankey.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/scrollModes.html b/samples/scrollModes.html index af2426f17..bf0f8f99d 100644 --- a/samples/scrollModes.html +++ b/samples/scrollModes.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/seatingChart.html b/samples/seatingChart.html index bf85ca8bb..0937211a9 100644 --- a/samples/seatingChart.html +++ b/samples/seatingChart.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/selectableFields.html b/samples/selectableFields.html index d9c46e78c..143b94684 100644 --- a/samples/selectableFields.html +++ b/samples/selectableFields.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/selectablePorts.html b/samples/selectablePorts.html index 84e0b8cd0..06d6b182c 100644 --- a/samples/selectablePorts.html +++ b/samples/selectablePorts.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/sequenceDiagram.html b/samples/sequenceDiagram.html index eafe65781..bd936262b 100644 --- a/samples/sequenceDiagram.html +++ b/samples/sequenceDiagram.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/sequentialFunction.html b/samples/sequentialFunction.html index b33f10c58..9a23795d0 100644 --- a/samples/sequentialFunction.html +++ b/samples/sequentialFunction.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/shapes.html b/samples/shapes.html index e234dea72..d99079a29 100644 --- a/samples/shapes.html +++ b/samples/shapes.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/sharedStates.html b/samples/sharedStates.html index 54200813d..58a8a4a50 100644 --- a/samples/sharedStates.html +++ b/samples/sharedStates.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/shopFloorMonitor.html b/samples/shopFloorMonitor.html index 6d1c0efeb..03835aca7 100644 --- a/samples/shopFloorMonitor.html +++ b/samples/shopFloorMonitor.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/singlePage.html b/samples/singlePage.html index 6db28b8a8..c101f7e2d 100644 --- a/samples/singlePage.html +++ b/samples/singlePage.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/spacingZoom.html b/samples/spacingZoom.html index c84d56804..565f34a1b 100644 --- a/samples/spacingZoom.html +++ b/samples/spacingZoom.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/sparklineGraphs.html b/samples/sparklineGraphs.html index 992411904..566be77a2 100644 --- a/samples/sparklineGraphs.html +++ b/samples/sparklineGraphs.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/spreadsheet.html b/samples/spreadsheet.html index 720fe0073..8e1c80dd3 100644 --- a/samples/spreadsheet.html +++ b/samples/spreadsheet.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/stateChart.html b/samples/stateChart.html index 8a485e842..3ab6a78e9 100644 --- a/samples/stateChart.html +++ b/samples/stateChart.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/stateChartIncremental.html b/samples/stateChartIncremental.html index 7161a492d..a444da041 100644 --- a/samples/stateChartIncremental.html +++ b/samples/stateChartIncremental.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/svgDataUrl.html b/samples/svgDataUrl.html index 3ca44efa4..de3919799 100644 --- a/samples/svgDataUrl.html +++ b/samples/svgDataUrl.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/swimBands.html b/samples/swimBands.html index decee4ce7..06c2fbb5d 100644 --- a/samples/swimBands.html +++ b/samples/swimBands.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/swimLanes.html b/samples/swimLanes.html index 1e29677c1..c471a5cdc 100644 --- a/samples/swimLanes.html +++ b/samples/swimLanes.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/swimLanesVertical.html b/samples/swimLanesVertical.html index 0db2241ec..6132c2d30 100644 --- a/samples/swimLanesVertical.html +++ b/samples/swimLanesVertical.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/systemDynamics.html b/samples/systemDynamics.html index 42a2309cc..1fe819920 100644 --- a/samples/systemDynamics.html +++ b/samples/systemDynamics.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/tLayout.html b/samples/tLayout.html index 812e872ff..2ba80eee4 100644 --- a/samples/tLayout.html +++ b/samples/tLayout.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/taperedLinks.html b/samples/taperedLinks.html index bf7affa62..64aa95cc9 100644 --- a/samples/taperedLinks.html +++ b/samples/taperedLinks.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/thermometer.html b/samples/thermometer.html index 718d3a68b..de656f099 100644 --- a/samples/thermometer.html +++ b/samples/thermometer.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/tiger.html b/samples/tiger.html index db87e9f84..14fd3cfc0 100644 --- a/samples/tiger.html +++ b/samples/tiger.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/timeline.html b/samples/timeline.html index d48ac8361..cffe3e599 100644 --- a/samples/timeline.html +++ b/samples/timeline.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/tournament.html b/samples/tournament.html index dc5f01c1d..817ab2900 100644 --- a/samples/tournament.html +++ b/samples/tournament.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/treeLoadAnimation.html b/samples/treeLoadAnimation.html index ebc48190c..257ef4ba5 100644 --- a/samples/treeLoadAnimation.html +++ b/samples/treeLoadAnimation.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/treeMapper.html b/samples/treeMapper.html index 9871e1d9b..e5540299d 100644 --- a/samples/treeMapper.html +++ b/samples/treeMapper.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/treeView.html b/samples/treeView.html index 7c20588c3..2d905bfc4 100644 --- a/samples/treeView.html +++ b/samples/treeView.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/triStateCheckBoxTree.html b/samples/triStateCheckBoxTree.html index 92053f05f..90abceaca 100644 --- a/samples/triStateCheckBoxTree.html +++ b/samples/triStateCheckBoxTree.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/twoDiagrams.html b/samples/twoDiagrams.html index d5baff646..95304c240 100644 --- a/samples/twoDiagrams.html +++ b/samples/twoDiagrams.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/twoHalves.html b/samples/twoHalves.html index dc334835d..984e098aa 100644 --- a/samples/twoHalves.html +++ b/samples/twoHalves.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/umlClass.html b/samples/umlClass.html index 57bb9495e..7f19d4367 100644 --- a/samples/umlClass.html +++ b/samples/umlClass.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/updateDemo.html b/samples/updateDemo.html index 11c98ad99..50144315c 100644 --- a/samples/updateDemo.html +++ b/samples/updateDemo.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/virtualized.html b/samples/virtualized.html index 70971c163..b6c46209f 100644 --- a/samples/virtualized.html +++ b/samples/virtualized.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/virtualizedForceLayout.html b/samples/virtualizedForceLayout.html index 97b39a4df..2be399815 100644 --- a/samples/virtualizedForceLayout.html +++ b/samples/virtualizedForceLayout.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/virtualizedTree.html b/samples/virtualizedTree.html index 48314cbe0..3fa266fab 100644 --- a/samples/virtualizedTree.html +++ b/samples/virtualizedTree.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/virtualizedTreeLayout.html b/samples/virtualizedTreeLayout.html index 15d527893..c142aad1e 100644 --- a/samples/virtualizedTreeLayout.html +++ b/samples/virtualizedTreeLayout.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/visualTree.html b/samples/visualTree.html index c75b801fa..78964452a 100644 --- a/samples/visualTree.html +++ b/samples/visualTree.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/visualTreeGrouping.html b/samples/visualTreeGrouping.html index a1ca20424..311cc207b 100644 --- a/samples/visualTreeGrouping.html +++ b/samples/visualTreeGrouping.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/vue.html b/samples/vue.html index a95d5241d..7a31c8d4e 100644 --- a/samples/vue.html +++ b/samples/vue.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/warehouse.html b/samples/warehouse.html index e81fe4b00..c5927f58c 100644 --- a/samples/warehouse.html +++ b/samples/warehouse.html @@ -18,17 +18,17 @@ - - - + + + - - - + + + - - + + diff --git a/samples/wordcloud.html b/samples/wordcloud.html index a941ff8d3..4bc896219 100644 --- a/samples/wordcloud.html +++ b/samples/wordcloud.html @@ -29,17 +29,17 @@ - - - + + + - - - + + + - - + +