1271 lines
308 KiB
HTML
1271 lines
308 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
<meta name="generator" content="JsDoc Toolkit" />
|
|
<title>GoJS® Reference - Index</title>
|
|
<script src="../assets/js/jquery.min.js"></script>
|
|
<script src="../assets/js/bootstrap.min.js"></script>
|
|
<script src="../assets/js/highlight.js"></script>
|
|
<script src="../assets/js/api.js"></script>
|
|
|
|
<link href="../assets/css/bootstrap.min.css" rel="stylesheet" >
|
|
<!-- custom CSS after bootstrap -->
|
|
<link href="../assets/css/main.css" rel="stylesheet" type="text/css"/>
|
|
<link href="../assets/css/api.css" rel="stylesheet" type="text/css"/>
|
|
<link rel="stylesheet" href="../assets/css/highlight.css" type="text/css" media="all" />
|
|
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<!-- non-fixed navbar -->
|
|
<nav id="non-fixed-nav" class="navbar navbar-inverse navbar-top">
|
|
<div class="container-fluid">
|
|
<div class="navbar-header">
|
|
<div class="navheader-container">
|
|
<div class="navheader-collapse" data-toggle="collapse" data-target="#navbar">
|
|
<a id="toplogo" class="navbar-brand" href="../index.html">GoJS</a>
|
|
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
|
|
<span class="sr-only">Toggle navigation</span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="navbar" class="navbar-collapse collapse">
|
|
<ul class="nav navbar-nav navbar-right">
|
|
<li><a href="../index.html">Home</a></li>
|
|
<li><a href="../learn/index.html">Learn</a></li>
|
|
<li><a href="../samples/index.html">Samples</a></li>
|
|
<li><a href="../intro/index.html">Intro</a></li>
|
|
<li><a href="../api/index.html">API</a></li>
|
|
<li><a href="https://www.nwoods.com/components/evalform.htm">Register</a></li>
|
|
<li><a href="../doc/download.html">Download</a></li>
|
|
<li><a href="https://forum.nwoods.com/c/gojs">Forum</a></li>
|
|
<li><a href="https://www.nwoods.com/contact.html" onclick="ga('send','event','Outbound Link','click','contact');">Contact</a></li>
|
|
<li class="buy"><a href="https://www.nwoods.com/sales/index.html" onclick="ga('send','event','Outbound Link','click','buy');">Buy</a></li>
|
|
<li class="activate"><a href="https://www.nwoods.com/app/activate.aspx?sku=gojs">Activate</a></li>
|
|
</ul>
|
|
</div><!--/.nav-collapse -->
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="container-fluid">
|
|
<div id="navindex" class="col-md-2">
|
|
<!-- <div><a href="index.html">GoJS Class Index</a></div> -->
|
|
|
|
<div class="sidebar-nav">
|
|
<div class="navbar navbar-default" role="navigation">
|
|
<div class="navbar-header">
|
|
<div class="navheader-container">
|
|
<div class="navheader-collapse" data-toggle="collapse" data-target="#DiagramNavbar">
|
|
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#DiagramNavbar">
|
|
<span class="sr-only">Toggle navigation</span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
</button>
|
|
</div>
|
|
<span class="navbar-brand">Diagram Classes</span>
|
|
</div>
|
|
</div>
|
|
<div id="DiagramNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
|
|
<ul class="classList nav navbar-nav">
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="symbols/Adornment.html" class="linkConstructor">Adornment</a></li>
|
|
|
|
<li><a href="symbols/AnimationManager.html" class="linkConstructor">AnimationManager</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="symbols/CommandHandler.html" class="linkConstructor">CommandHandler</a></li>
|
|
|
|
|
|
|
|
<li><a href="symbols/Diagram.html" class="linkConstructor">Diagram</a></li>
|
|
|
|
<li><a href="symbols/DiagramEvent.html" class="linkConstructor">DiagramEvent</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a></li>
|
|
|
|
|
|
|
|
<li><a href="symbols/Group.html" class="linkConstructor">Group</a></li>
|
|
|
|
|
|
|
|
<li><a href="symbols/InputEvent.html" class="linkConstructor">InputEvent</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="symbols/Layer.html" class="linkConstructor">Layer</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="symbols/Link.html" class="linkConstructor">Link</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="symbols/Node.html" class="linkConstructor">Node</a></li>
|
|
|
|
<li><a href="symbols/Overview.html" class="linkConstructor">Overview</a></li>
|
|
|
|
<li><a href="symbols/Palette.html" class="linkConstructor">Palette</a></li>
|
|
|
|
<li><a href="symbols/Panel.html" class="linkConstructor">Panel</a></li>
|
|
|
|
|
|
|
|
<li><a href="symbols/Part.html" class="linkConstructor">Part</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="symbols/Picture.html" class="linkConstructor">Picture</a></li>
|
|
|
|
<li><a href="symbols/Placeholder.html" class="linkConstructor">Placeholder</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="symbols/RowColumnDefinition.html" class="linkConstructor">RowColumnDefinition</a></li>
|
|
|
|
|
|
|
|
<li><a href="symbols/Shape.html" class="linkConstructor">Shape</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="symbols/TextBlock.html" class="linkConstructor">TextBlock</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="navbar navbar-default" role="navigation">
|
|
<div class="navbar-header">
|
|
<div class="navheader-container">
|
|
<div class="navheader-collapse" data-toggle="collapse" data-target="#GeometryNavbar">
|
|
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#GeometryNavbar">
|
|
<span class="sr-only">Toggle navigation</span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
</button>
|
|
</div>
|
|
<span class="navbar-brand">Geometry Classes</span>
|
|
</div>
|
|
</div>
|
|
<div id="GeometryNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
|
|
<ul class="classList nav navbar-nav">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="symbols/Brush.html" class="linkConstructor">Brush</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="symbols/Geometry.html" class="linkConstructor">Geometry</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="symbols/Margin.html" class="linkConstructor">Margin</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="symbols/PathFigure.html" class="linkConstructor">PathFigure</a></li>
|
|
|
|
<li><a href="symbols/PathSegment.html" class="linkConstructor">PathSegment</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="symbols/Point.html" class="linkConstructor">Point</a></li>
|
|
|
|
<li><a href="symbols/Rect.html" class="linkConstructor">Rect</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="symbols/Size.html" class="linkConstructor">Size</a></li>
|
|
|
|
<li><a href="symbols/Spot.html" class="linkConstructor">Spot</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="navbar navbar-default" role="navigation">
|
|
<div class="navbar-header">
|
|
<div class="navheader-container">
|
|
<div class="navheader-collapse" data-toggle="collapse" data-target="#ModelNavbar">
|
|
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#ModelNavbar">
|
|
<span class="sr-only">Toggle navigation</span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
</button>
|
|
</div>
|
|
<span class="navbar-brand">Model Classes</span>
|
|
</div>
|
|
</div>
|
|
<div id="ModelNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
|
|
<ul class="classList nav navbar-nav">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="symbols/Binding.html" class="linkConstructor">Binding</a></li>
|
|
|
|
|
|
|
|
<li><a href="symbols/ChangedEvent.html" class="linkConstructor">ChangedEvent</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="symbols/GraphLinksModel.html" class="linkConstructor">GraphLinksModel</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="symbols/Model.html" class="linkConstructor">Model</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="symbols/Transaction.html" class="linkConstructor">Transaction</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="symbols/TreeModel.html" class="linkConstructor">TreeModel</a></li>
|
|
|
|
|
|
|
|
<li><a href="symbols/UndoManager.html" class="linkConstructor">UndoManager</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="navbar navbar-default" role="navigation">
|
|
<div class="navbar-header">
|
|
<div class="navheader-container">
|
|
<div class="navheader-collapse" data-toggle="collapse" data-target="#LayoutNavbar">
|
|
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#LayoutNavbar">
|
|
<span class="sr-only">Toggle navigation</span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
</button>
|
|
</div>
|
|
<span class="navbar-brand">Layout Classes</span>
|
|
</div>
|
|
</div>
|
|
<div id="LayoutNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
|
|
<ul class="classList nav navbar-nav">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="symbols/CircularLayout.html" class="linkConstructor">CircularLayout</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="symbols/ForceDirectedLayout.html" class="linkConstructor">ForceDirectedLayout</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="symbols/GridLayout.html" class="linkConstructor">GridLayout</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="symbols/LayeredDigraphLayout.html" class="linkConstructor">LayeredDigraphLayout</a></li>
|
|
|
|
|
|
|
|
<li><a href="symbols/Layout.html" class="linkConstructor">Layout</a></li>
|
|
|
|
|
|
|
|
<li><a href="symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="symbols/TreeLayout.html" class="linkConstructor">TreeLayout</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="navbar navbar-default" role="navigation">
|
|
<div class="navbar-header">
|
|
<div class="navheader-container">
|
|
<div class="navheader-collapse" data-toggle="collapse" data-target="#ToolNavbar">
|
|
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#ToolNavbar">
|
|
<span class="sr-only">Toggle navigation</span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
</button>
|
|
</div>
|
|
<span class="navbar-brand">Tool Classes</span>
|
|
</div>
|
|
</div>
|
|
<div id="ToolNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
|
|
<ul class="classList nav navbar-nav">
|
|
|
|
|
|
|
|
<li><a href="symbols/ActionTool.html" class="linkConstructor">ActionTool</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="symbols/ClickCreatingTool.html" class="linkConstructor">ClickCreatingTool</a></li>
|
|
|
|
<li><a href="symbols/ClickSelectingTool.html" class="linkConstructor">ClickSelectingTool</a></li>
|
|
|
|
|
|
|
|
<li><a href="symbols/ContextMenuTool.html" class="linkConstructor">ContextMenuTool</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="symbols/DraggingTool.html" class="linkConstructor">DraggingTool</a></li>
|
|
|
|
<li><a href="symbols/DragSelectingTool.html" class="linkConstructor">DragSelectingTool</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="symbols/HTMLInfo.html" class="linkConstructor">HTMLInfo</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="symbols/LinkingBaseTool.html" class="linkConstructor">LinkingBaseTool</a></li>
|
|
|
|
<li><a href="symbols/LinkingTool.html" class="linkConstructor">LinkingTool</a></li>
|
|
|
|
<li><a href="symbols/LinkReshapingTool.html" class="linkConstructor">LinkReshapingTool</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="symbols/PanningTool.html" class="linkConstructor">PanningTool</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="symbols/RelinkingTool.html" class="linkConstructor">RelinkingTool</a></li>
|
|
|
|
<li><a href="symbols/ResizingTool.html" class="linkConstructor">ResizingTool</a></li>
|
|
|
|
<li><a href="symbols/RotatingTool.html" class="linkConstructor">RotatingTool</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="symbols/TextEditingTool.html" class="linkConstructor">TextEditingTool</a></li>
|
|
|
|
<li><a href="symbols/Tool.html" class="linkConstructor">Tool</a></li>
|
|
|
|
<li><a href="symbols/ToolManager.html" class="linkConstructor">ToolManager</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="navbar navbar-default" role="navigation">
|
|
<div class="navbar-header">
|
|
<div class="navheader-container">
|
|
<div class="navheader-collapse" data-toggle="collapse" data-target="#CollectionNavbar">
|
|
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#CollectionNavbar">
|
|
<span class="sr-only">Toggle navigation</span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
<span class="icon-bar"></span>
|
|
</button>
|
|
</div>
|
|
<span class="navbar-brand">Collection Classes</span>
|
|
</div>
|
|
</div>
|
|
<div id="CollectionNavbar" class="navbar-collapse collapse sidebar-navbar-collapse">
|
|
<ul class="classList nav navbar-nav">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="symbols/Iterable.html" class="linkConstructor">Iterable</a></li>
|
|
|
|
<li><a href="symbols/Iterator.html" class="linkConstructor">Iterator</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="symbols/List.html" class="linkConstructor">List</a></li>
|
|
|
|
<li><a href="symbols/Map.html" class="linkConstructor">Map</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<li><a href="symbols/Set.html" class="linkConstructor">Set</a></li>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div> <!-- /class="sidebar-nav -->
|
|
|
|
|
|
|
|
|
|
</div>
|
|
<div id="contentBody" class="col-md-10">
|
|
<div id="header" class="fineprint">
|
|
<b>GoJS</b>® Diagramming Components<br/>version 1.8.5 for JavaScript/HTML<br/>by <a href="https://www.nwoods.com/">Northwoods Software®</a>
|
|
</div>
|
|
<h1 class="classTitle">GoJS Class Index</h1>
|
|
<span class="hideshowall"><span class="nodetails"><button id="buttonShow">Show Details</button></span><span class="details"><button id="buttonHide">Show Summaries</button></span></span>
|
|
|
|
|
|
|
|
<div><h2><a href="symbols/ActionTool.html" class="linkConstructor">ActionTool</a></h2><p>The ActionTool is responsible for handling and dispatching mouse events on <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a>s
|
|
that have <a href="symbols/GraphObject.html#isActionable" class="linkProperty">GraphObject.isActionable</a> set to true.<span class="nodetails" id="xActionTool"><a class="morelink" onclick="hst('ActionTool')">More...</a></span> <span class="details" id="ActionTool">
|
|
This is how one implements "controls", such as buttons or sliders or knobs, as <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a>s
|
|
that can be inside <a href="symbols/Part.html" class="linkConstructor">Part</a>s without interfering with the standard tool behaviors.
|
|
</span><div class="details" id="dActionTool"><p>
|
|
This tool allows individual GraphObjects (usually Panels) to handle mouse-down-move-up events without
|
|
having to define new <a href="symbols/Tool.html" class="linkConstructor">Tool</a>s.
|
|
It does this by calling <a href="symbols/GraphObject.html#actionDown" class="linkProperty">GraphObject.actionDown</a>, <a href="symbols/GraphObject.html#actionMove" class="linkProperty">GraphObject.actionMove</a>, <a href="symbols/GraphObject.html#actionUp" class="linkProperty">GraphObject.actionUp</a>,
|
|
and <a href="symbols/GraphObject.html#actionCancel" class="linkProperty">GraphObject.actionCancel</a> on objects that have <a href="symbols/GraphObject.html#isActionable" class="linkProperty">GraphObject.isActionable</a> set to true.
|
|
<p>
|
|
This tool is a standard mouse-down tool, the <a href="symbols/ToolManager.html#actionTool" class="linkProperty">ToolManager.actionTool</a>.
|
|
<p>
|
|
This tool does not utilize any <a href="symbols/Adornment.html" class="linkConstructor">Adornment</a>s or tool handles.
|
|
This tool does not modify the model or conduct any transaction, although the actions that this invokes may do so.
|
|
<p>
|
|
It would be very unusual to want to customize this tool.</div></div>
|
|
|
|
<div><h2><a href="symbols/Adornment.html" class="linkConstructor">Adornment</a></h2><p>An adornment is a special kind of <a href="symbols/Part.html" class="linkConstructor">Part</a> that is associated with another Part,
|
|
the <a href="symbols/Adornment.html#adornedPart" class="linkProperty">Adornment.adornedPart</a>.<span class="nodetails" id="xAdornment"><a class="morelink" onclick="hst('Adornment')">More...</a></span> <span class="details" id="Adornment">
|
|
</span><div class="details" id="dAdornment"><p>
|
|
Adornments are normally associated with a particular <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a> in the adorned part --
|
|
that is the value of #adornedObject.
|
|
However, the #adornedObject may be null, in which case the #adornedPart will also be null.
|
|
<p>
|
|
The area occupied by the adorned object is represented in the adornment's visual tree by a <a href="symbols/Placeholder.html" class="linkConstructor">Placeholder</a>.
|
|
The placeholder is always the <a href="symbols/Part.html#locationObject" class="linkProperty">Part.locationObject</a>,
|
|
although you may specify any <a href="symbols/Spot.html" class="linkConstructor">Spot</a> as the <a href="symbols/Part.html#locationSpot" class="linkProperty">Part.locationSpot</a>.
|
|
An adornment need not have a placeholder, but it may have at most one.
|
|
<p>
|
|
Adornments can be distinguished by their <a href="symbols/Part.html#category" class="linkProperty">Part.category</a>.
|
|
This property can be an arbitrary string value determined by the code creating the adornment,
|
|
typically a tool that wants to be able to tell various adornments apart from each other.
|
|
Use the <a href="symbols/Part.html#findAdornment" class="linkMethod">Part.findAdornment</a> method to find an adornment for a part of a given category.
|
|
<p>
|
|
For example, one of the Adornments created by <a href="symbols/Part.html#updateAdornments" class="linkMethod">Part.updateAdornments</a> when the part
|
|
<a href="symbols/Part.html#isSelected" class="linkProperty">Part.isSelected</a> has the <a href="symbols/Part.html#category" class="linkProperty">Part.category</a> of "Selection".
|
|
Those created by <a href="symbols/ResizingTool.html#updateAdornments" class="linkMethod">ResizingTool.updateAdornments</a> have a category of "Resize"
|
|
and normally contain eight resize handles.
|
|
<p>
|
|
Besides the selection adornment and tool adornments, adornments are also used for
|
|
context menus and tooltips.
|
|
The #adornedObject in such cases refers to the <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a> to which the
|
|
the context menu or tooltip applies.
|
|
<p>
|
|
There cannot be any links connected to an adornment,
|
|
nor can an adornment have members or be a member of a group.
|
|
<p>
|
|
An adornment cannot have its own adornments.
|
|
An adornment cannot be selected.
|
|
<p>
|
|
Adornments are not positioned by a <a href="symbols/Layout.html" class="linkConstructor">Layout</a> because they are normally positioned
|
|
according to the Part that they adorn.
|
|
<p>
|
|
For more discussion and examples, see <a href="../../intro/selection.html">Selection</a>,
|
|
<a href="../../intro/toolTips.html">ToolTips</a>,
|
|
<a href="../../intro/contextMenus.html">Context Menus</a>, and
|
|
<a href="../../intro/tools.html">Tools</a>.</div></div>
|
|
|
|
<div><h2><a href="symbols/AnimationManager.html" class="linkConstructor">AnimationManager</a></h2><p>AnimationManager handles animations in a <a href="symbols/Diagram.html" class="linkConstructor">Diagram</a>.<span class="nodetails" id="xAnimationManager"><a class="morelink" onclick="hst('AnimationManager')">More...</a></span> <span class="details" id="AnimationManager"> Each Diagram has one, <a href="symbols/Diagram.html#animationManager" class="linkProperty">Diagram.animationManager</a>.
|
|
Layouts, Group expansion and Tree expansion automatically start animations.
|
|
</span><div class="details" id="dAnimationManager"><p>
|
|
Animation is enabled by default, setting the <a href="symbols/UndoManager.html#isEnabled" class="linkProperty">isEnabled</a> property to false will turn off animations for a Diagram.
|
|
<p>
|
|
When an animations begins it raises the "AnimationStarting" diagram event,
|
|
upon completion it raises the "AnimationFinished" diagram event.
|
|
<p>
|
|
Animation will stop if a new transaction is started, if an undo or redo is called,
|
|
if a layout is invalidated, or if a model is replaced.
|
|
When an animation is stopped, the Diagram immediately finishes the animation and draws the final state.
|
|
Animations can be stopped programatically with the method <a href="symbols/AnimationManager.html#stopAnimation" class="linkMethod">AnimationManager.stopAnimation</a>.</div></div>
|
|
|
|
<div><h2><a href="symbols/Binding.html" class="linkConstructor">Binding</a></h2><p>A Binding describes how to automatically set a property on a <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a>
|
|
to a value of a property of data in the model.<span class="nodetails" id="xBinding"><a class="morelink" onclick="hst('Binding')">More...</a></span> <span class="details" id="Binding">
|
|
The target property name and the data source property name are strings.
|
|
All name matching is case-sensitive.
|
|
</span><div class="details" id="dBinding"><p>
|
|
Register bindings by calling <a href="symbols/GraphObject.html#bind" class="linkMethod">GraphObject.bind</a> with a new Binding.
|
|
Existing bindings become read-only, and no new bindings may be added,
|
|
when a template (a <a href="symbols/Part.html" class="linkConstructor">Part</a>) is copied.
|
|
Bindings will be shared by all copies of the template's GraphObjects.
|
|
<p>
|
|
For example, your node data might be like:
|
|
<pre>
|
|
{ key: 23, say: "hello!" }
|
|
</pre>
|
|
<p>
|
|
Your simple node template might be like:
|
|
<pre>
|
|
var template = new go.Node(go.Panel.Auto);
|
|
// . . . define the rest of the Node's visual tree . . .
|
|
var txt = new go.TextBlock();
|
|
txt.bind(new go.Binding("text", "say"));
|
|
template.add(txt);
|
|
myDiagram.nodeTemplate = template;
|
|
</pre>
|
|
Using <a>GraphObject.make</a> it might look like:
|
|
<pre>
|
|
var $ = go.GraphObject.make;
|
|
myDiagram.nodeTemplate =
|
|
$(go.Node, "Auto",
|
|
. . .
|
|
$(go.TextBlock, new go.Binding("text", "say"))
|
|
)
|
|
</pre>
|
|
<p>
|
|
The data binding causes the <a href="symbols/TextBlock.html#text" class="linkProperty">TextBlock.text</a> property of
|
|
the TextBlock to be set to the value of the data's "say" property.
|
|
If the value of the "say" property of a particular data object is undefined,
|
|
the binding is not evaluated: the target property is not set.
|
|
If there is an error with the binding, you may see a message in the console log.
|
|
For this reason you may want to explicitly set the initial value for a property
|
|
when defining the GraphObject, since that value will remain as the default value
|
|
if the Binding is not evaluated.
|
|
<p>
|
|
Bindings are not necessarily evaluated in any particular order.
|
|
Binding sources should not be (or depend in a conversion function on) the category of the data
|
|
if you might be modifying the category (e.g. by calling <a href="symbols/Model.html#setCategoryForNodeData" class="linkMethod">Model.setCategoryForNodeData</a>),
|
|
because then some bindings might be evaluated before or after the category has been changed.
|
|
<h4>Conversions</h4>
|
|
Sometimes the data value needs to be modified or converted in order
|
|
to be used as the new value of a <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a> property.
|
|
The most common conversion functions are provided for you --
|
|
they convert a string to a geometric class:
|
|
<a href="symbols/Point.html#.parse" class="linkStatic">Point.parse</a>, <a href="symbols/Size.html#.parse" class="linkStatic">Size.parse</a>, <a href="symbols/Rect.html#.parse" class="linkStatic">Rect.parse</a>,
|
|
<a href="symbols/Margin.html#.parse" class="linkStatic">Margin.parse</a>, <a href="symbols/Spot.html#.parse" class="linkStatic">Spot.parse</a>, and <a href="symbols/Geometry.html#.parse" class="linkStatic">Geometry.parse</a>.
|
|
But you can easily define your own conversion function.
|
|
<p>
|
|
As an example of a conversion function, let's use a function that adds some
|
|
text prefixing the data property value:
|
|
<pre>
|
|
new go.Binding("text", "say", function(v) { return "I say: " + v; })
|
|
</pre>
|
|
Although simple conversions cover almost all binding cases, there are some infrequent uses
|
|
that are covered by "Advanced Conversions", discussed below.
|
|
Conversion functions must not have any side-effects.
|
|
Conversion functions may be called frequently, so they should be fast and avoid allocating memory.
|
|
The order in which conversion functions are called is not specified and may vary.
|
|
<h4>OneWay and TwoWay Bindings</h4>
|
|
By default bindings are <a href="symbols/Binding.html#OneWay" class="linkConstant">Binding.OneWay</a>.
|
|
OneWay bindings are evaluated when the <a href="symbols/Panel.html#data" class="linkProperty">Panel.data</a> property is set
|
|
or when you call <a href="symbols/Panel.html#updateTargetBindings" class="linkMethod">Panel.updateTargetBindings</a> or <a href="symbols/Model.html#setDataProperty" class="linkMethod">Model.setDataProperty</a>.
|
|
OneWay bindings only transfer values from the source to the target.
|
|
<p>
|
|
TwoWay bindings are evaluated in the source-to-target direction just as OneWay
|
|
bindings are evaluated.
|
|
However when the <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a> target property is set, the TwoWay
|
|
bindings are evaluated in the target-to-source direction.
|
|
There is no point in having a TwoWay binding on a GraphObject property that cannot be set.
|
|
For efficiency, avoid TwoWay bindings on GraphObject properties that do not change value in your app.
|
|
<p>
|
|
You should not have a TwoWay binding with a source that is a node data object's key property,
|
|
i.e. on the data property whose name is the same as the value of <a href="symbols/Model.html#nodeKeyProperty" class="linkProperty">Model.nodeKeyProperty</a>.
|
|
Unintentionally changing the node key value to be the same as another node data's key value
|
|
may cause indeterminate behavior.
|
|
Furthermore, changing a node data key without changing any references to that node
|
|
using the key value will result in "dangling" references and inconsistent relationships.
|
|
You can make that change safely by calling <a href="symbols/Model.html#setKeyForNodeData" class="linkMethod">Model.setKeyForNodeData</a>,
|
|
but not via a data binding.
|
|
<p>
|
|
The target-to-source update can also go through a conversion function.
|
|
The most common back-conversion functions are provided for you.
|
|
They convert a geometric class to a string:
|
|
<a href="symbols/Point.html#.stringify" class="linkStatic">Point.stringify</a>, <a href="symbols/Size.html#.stringify" class="linkStatic">Size.stringify</a>, <a href="symbols/Rect.html#.stringify" class="linkStatic">Rect.stringify</a>,
|
|
<a href="symbols/Margin.html#.stringify" class="linkStatic">Margin.stringify</a>, <a href="symbols/Spot.html#.stringify" class="linkStatic">Spot.stringify</a>, and <a href="symbols/Geometry.html#.stringify" class="linkStatic">Geometry.stringify</a>.
|
|
<p>
|
|
It is common to want to update some data properties based on changes to the diagram.
|
|
For example, as the user changes the <a href="symbols/Part.html#location" class="linkProperty">Part.location</a> by dragging a Node,
|
|
you can automatically keep the node's model data in sync using a TwoWay binding.
|
|
<pre>
|
|
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify)
|
|
</pre>
|
|
The call to <a href="symbols/Binding.html#makeTwoWay" class="linkMethod">Binding.makeTwoWay</a> changes the <a href="symbols/Binding.html#mode" class="linkProperty">Binding.mode</a>
|
|
to be <a href="symbols/Binding.html#TwoWay" class="linkConstant">Binding.TwoWay</a> and specifies the <a href="symbols/Binding.html#backConverter" class="linkProperty">Binding.backConverter</a>
|
|
function to be the <a href="symbols/Point.html#.stringify" class="linkStatic">Point.stringify</a> static function.
|
|
<p>
|
|
Because the Binding is on the whole node (<code>template</code>),
|
|
the target object is the whole <a href="symbols/Node.html" class="linkConstructor">Node</a> and the target property is "location".
|
|
The value of <code>data.loc</code> will be a string representation of the <code>Node.location</code> value.
|
|
<h4>Binding Sources</h4>
|
|
The target of a Binding is always a property of a <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a> or a <a href="symbols/RowColumnDefinition.html" class="linkConstructor">RowColumnDefinition</a>.
|
|
The source of a Binding is normally a property of a data object in the model.
|
|
But it is also possible to have the source of a Binding be the shared JavaScript object that is the value of <a href="symbols/Model.html#modelData" class="linkProperty">Model.modelData</a>.
|
|
You can specify such a binding by calling <a href="symbols/Binding.html#ofModel" class="linkMethod">Binding.ofModel</a>, meaning "a binding of a source that is a property of the Model.modelData".
|
|
<p>
|
|
As an example, you might want all Nodes to use the same color.
|
|
It would be possible but not natural to bind to a property on the node data object, because that property would have to be
|
|
duplicated on all of the node data objects in the model, and updating the property would mean calling <a href="symbols/Model.html#setDataProperty" class="linkMethod">Model.setDataProperty</a>
|
|
on each node data object with the same new value. Furthermore if there happened to be no nodes at all in the model,
|
|
there would be no place to save the data. Hence using the shared <a href="symbols/Model.html#modelData" class="linkProperty">Model.modelData</a> object
|
|
would be the sensible place for that shared information.
|
|
<pre>
|
|
new go.Binding("stroke", "strokeColor").ofModel()
|
|
</pre>
|
|
and to set or modify that color one would just call, within a transaction:
|
|
<pre>
|
|
model.setDataProperty(model.modelData, "strokeColor", "red");
|
|
</pre>
|
|
That would cause all nodes with that model data binding to be re-evaluated.
|
|
It is not commonplace to have a TwoWay Binding on "ofModel" Bindings, but that should work.
|
|
Converters also work with "ofModel" Bindings.
|
|
<p>
|
|
And it is also possible to have the source of a Binding be another GraphObject that is in the same Part.
|
|
You can enable such a binding by calling <a href="symbols/Binding.html#ofObject" class="linkMethod">Binding.ofObject</a>, meaning "a binding of a source that is a property of a GraphObject".
|
|
You just have to make sure that object has a unique <a href="symbols/GraphObject.html#name" class="linkProperty">GraphObject.name</a> or is the Part itself.
|
|
The source property on the GraphObject has to be settable, and the Part must have a value for <a href="symbols/Panel.html#data" class="linkProperty">Panel.data</a>.
|
|
(If the source property setter does not notify about property value changes, the binding mechanism will not be invoked.
|
|
Similarly, if there is no Panel.data, the binding mechanism is not active.)
|
|
<p>
|
|
As a common kind of example of data binding between two properties of GraphObjects,
|
|
consider this Binding on a <a href="symbols/Shape.html" class="linkConstructor">Shape</a> which changes the color of the <a href="symbols/Shape.html#stroke" class="linkProperty">Shape.stroke</a>
|
|
depending on whether the Node is selected (<a href="symbols/Part.html#isSelected" class="linkProperty">Part.isSelected</a>):
|
|
<pre>
|
|
new go.Binding("stroke", "isSelected", function(s) { return s ? "dodgerblue" : "gray"; }).ofObject()
|
|
</pre>
|
|
Note the call to <a href="symbols/Binding.html#ofObject" class="linkMethod">Binding.ofObject</a>, which tells the Binding that it should use as the source
|
|
a GraphObject with a particular name. However that name argument is optional -- supplying no name
|
|
(or supplying an empty string) will cause the binding to operate with the root GraphObject.
|
|
In this case that would be the Node itself.
|
|
Now with this binding whenever the value of <a href="symbols/Part.html#isSelected" class="linkProperty">Part.isSelected</a> changes, this Shape's stroke changes color.
|
|
The conversion function is what changes the boolean "isSelected" value to a brush color specifier.
|
|
<h4>Advanced Conversions</h4>
|
|
The binding functionality also has more advanced features for less common situations.
|
|
The source property name may be an empty string, to convert the object as a whole.
|
|
Conversion functions may take a second argument that takes the object that is bound.
|
|
For source-to-target conversions, the second argument will be the <a>GraphObject</a> whose property is bound.
|
|
For target-to-source (back-)conversions, the second argument will be the source data object and
|
|
the third argument will be the <a>Model</a>.
|
|
<p>
|
|
Here's an example of a two-way data-binding using two custom conversion functions working with two separate data properties.
|
|
First we define the two conversion functions.
|
|
<pre>
|
|
function toLocation(data, node) {
|
|
return new go.Point(data.x, data.y);
|
|
};
|
|
function fromLocation(loc, data, model) {
|
|
model.setDataProperty(data, "x", loc.x);
|
|
model.setDataProperty(data, "y", loc.y);
|
|
};
|
|
</pre>
|
|
<p>
|
|
Then to data-bind the default template's <a href="symbols/Part.html#location" class="linkProperty">Part.location</a> property
|
|
to two separate data properties, "x" and "y":
|
|
<pre>
|
|
new go.Binding("location", "", toLocation).makeTwoWay(fromLocation)
|
|
</pre>
|
|
<p>
|
|
An empty string argument for the <i>sourceprop</i> parameter indicates
|
|
that the whole data object should be passed to the <code>toLocation</code> function,
|
|
rather than the value of some property of that data.
|
|
The return value is used as the new value for the <a href="symbols/Part.html#location" class="linkProperty">Part.location</a> property.
|
|
In almost all cases the second argument is not used.
|
|
Caution: for efficiency reasons you should try to avoid using an empty source property name.
|
|
Such bindings will be evaluated much more frequently than ones whose source is a particular property name.
|
|
<p>
|
|
The binding works normally for the source-to-target direction.
|
|
But when the target property is modified it is the source property that is
|
|
set with the back-converted property value from the target object.
|
|
Because in this example the source property name is the empty string,
|
|
and because one cannot replace the whole source data object,
|
|
any return value from the conversion function is ignored.
|
|
Instead the conversion function has to modify the data object directly,
|
|
as this example <code>fromLocation</code> function does.
|
|
<p>
|
|
Note that because the source property name is the empty string, the binding system will not know
|
|
which properties are modified in the call to <code>fromLocation</code>.
|
|
Hence to support undo and redo, in order to make the data changes we have to call
|
|
<a href="symbols/Model.html#setDataProperty" class="linkMethod">Model.setDataProperty</a> so that the <a href="symbols/UndoManager.html" class="linkConstructor">UndoManager</a> can record the change,
|
|
including the previous value.
|
|
<h4>Replacing Items in Arrays</h4>
|
|
However, although a TwoWay Binding cannot replace the node data object in the <a>Model.nodeDataArray</a>,
|
|
it is possible to replace an item in an <a>Panel.itemArray</a>.
|
|
So if your node data were:
|
|
<pre>{ key: 1, items: ["one", "two", "three"] }</pre>
|
|
And if your node template included something like:
|
|
<pre>
|
|
$(go.Panel, "Vertical",
|
|
new go.Binding("itemArray", "items"),
|
|
{
|
|
itemTemplate: $(go.Panel,
|
|
$(go.TextBlock, { editable: true },
|
|
new go.Binding("text", "").makeTwoWay())
|
|
)
|
|
}
|
|
)</pre>
|
|
Then the user would be able to edit any of the <a>TextBlock</a>s, causing the item Array to be modified,
|
|
for example resulting in this node data:
|
|
<pre>{ key: 1, items: ["one", "SOME NEW TEXT HERE", "three"] }</pre></div></div>
|
|
|
|
<div><h2><a href="symbols/Brush.html" class="linkConstructor">Brush</a></h2><p>A Brush holds color information and describes how to draw the inside
|
|
of a <a href="symbols/Shape.html" class="linkConstructor">Shape</a> or the stroke of a shape or a <a href="symbols/TextBlock.html" class="linkConstructor">TextBlock</a> or the
|
|
background of any <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a>.<span class="nodetails" id="xBrush"><a class="morelink" onclick="hst('Brush')">More...</a></span> <span class="details" id="Brush">
|
|
</span><div class="details" id="dBrush"><p>
|
|
A Brush must not be modified once it has been assigned to a <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a>,
|
|
such as the <a href="symbols/Shape.html#fill" class="linkProperty">Shape.fill</a> or <a href="symbols/TextBlock.html#stroke" class="linkProperty">TextBlock.stroke</a>
|
|
or <a href="symbols/GraphObject.html#background" class="linkProperty">GraphObject.background</a>.
|
|
However, a Brush may be shared by multiple GraphObjects.</div></div>
|
|
|
|
<div><h2><a href="symbols/ChangedEvent.html" class="linkConstructor">ChangedEvent</a></h2><p>A ChangedEvent represents a change to an object, typically a <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a>,
|
|
but also for model data, a <a href="symbols/Model.html" class="linkConstructor">Model</a>, or a <a href="symbols/Diagram.html" class="linkConstructor">Diagram</a>.<span class="nodetails" id="xChangedEvent"><a class="morelink" onclick="hst('ChangedEvent')">More...</a></span> <span class="details" id="ChangedEvent">
|
|
The most common case is for remembering the name of a property
|
|
and the before-and-after values for that property.
|
|
</span><div class="details" id="dChangedEvent"><p>
|
|
You can listen for changed events on the model using <a href="symbols/Model.html#addChangedListener" class="linkMethod">Model.addChangedListener</a>
|
|
and on the Diagram using <a href="symbols/Diagram.html#addChangedListener" class="linkMethod">Diagram.addChangedListener</a>.
|
|
<p>
|
|
There are four kinds of changes, represented by enumerated values:
|
|
<a href="symbols/ChangedEvent.html#Property" class="linkConstant">ChangedEvent.Property</a> (the most common), <a href="symbols/ChangedEvent.html#Insert" class="linkConstant">ChangedEvent.Insert</a> and <a href="symbols/ChangedEvent.html#Remove" class="linkConstant">ChangedEvent.Remove</a>
|
|
(to represent inserting or removing objects from collections),
|
|
and <a href="symbols/ChangedEvent.html#Transaction" class="linkConstant">ChangedEvent.Transaction</a> (to notify about beginning or ending transactions or undo or redo).
|
|
<p>
|
|
The most common kind of ChangedEvent is a Property change.
|
|
The name of the property is given by #propertyName.
|
|
The modified object is given by #object.
|
|
Use the #oldValue and #newValue properties for the before and after property values.
|
|
<p>
|
|
For an Insert ChangedEvent, the modified collection (often an Array) is a property value on the #object.
|
|
The #propertyName helps distinguish between different collections on the object.
|
|
Use the #newValue property to indicate the value that was inserted.
|
|
Use the #newParam property to indicate where or how, such as an array index or dictionary key.
|
|
<p>
|
|
For a Remove ChangedEvent, the modified collection is a property value on the #object.
|
|
The #propertyName helps distinguish between different collections on the object.
|
|
Use the #oldValue property to indicate the value that was removed.
|
|
Use the #oldParam property to indicate where or how, such as an array index or dictionary key.
|
|
<p>
|
|
Transaction ChangedEvents are generated by the <a href="symbols/UndoManager.html" class="linkConstructor">UndoManager</a>.
|
|
The #propertyName names the nature of the ChangedEvent.
|
|
For the very first transaction, the property name is "StartingFirstTransaction".
|
|
This ChangedEvent precedes a ChangedEvent whose property name is "StartedTransaction",
|
|
which occurs for every top-level transaction.
|
|
<p>
|
|
When ending a transaction, there is first a ChangedEvent whose name is "ComittingTransaction".
|
|
This is followed by one with either "CommittedTransaction" or "RolledBackTransaction",
|
|
depending on how the transaction is ending.
|
|
The #oldValue provides the transaction name and the #object is the <a href="symbols/Transaction.html" class="linkConstructor">Transaction</a> being finished.
|
|
(Note that the Transaction value may be null if no Transaction is available at that time,
|
|
perhaps because there were no changes made during the transaction.)
|
|
That Transaction can be scanned to look for ChangedEvents that you may wish to record in a database,
|
|
all within a single database transaction.
|
|
<p>
|
|
There are also Transaction ChangedEvents corresponding to "StartingUndo", "FinishedUndo",
|
|
"StartingRedo", and "FinishedRedo".
|
|
The #object property provides the <a href="symbols/Transaction.html" class="linkConstructor">Transaction</a> that is about-to-be or just-was undone or redone.
|
|
<p>
|
|
Non-Transaction ChangedEvents are remembered by the <a href="symbols/UndoManager.html" class="linkConstructor">UndoManager</a>, if <a href="symbols/UndoManager.html#isEnabled" class="linkProperty">UndoManager.isEnabled</a>,
|
|
and held in the <a href="symbols/UndoManager.html#history" class="linkProperty">UndoManager.history</a> as <a href="symbols/Transaction.html" class="linkConstructor">Transaction</a>s which hold lists of ChangedEvents.
|
|
That is why ChangedEvent implements <a href="symbols/UndoManager.html#undo" class="linkMethod">undo</a> and <a href="symbols/UndoManager.html#redo" class="linkMethod">redo</a> of the change that it remembers.
|
|
<p>
|
|
When the ChangedEvent represents a change to a <a href="symbols/Model.html" class="linkConstructor">Model</a>, the value of #model is non-null
|
|
and the value of #diagram is meaningless.
|
|
If the change is a structural change to the model,
|
|
the value of #modelChange indicates the kind of change.
|
|
Currently defined model changed event names include:
|
|
<ul>
|
|
<li><b>"nodeDataArray"</b>, after the model's <a href="symbols/Model.html#nodeDataArray" class="linkProperty">Model.nodeDataArray</a> is replaced, inserted into or removed from
|
|
(setting <a href="symbols/Model.html#nodeDataArray" class="linkProperty">Model.nodeDataArray</a> or calling <a href="symbols/Model.html#addNodeData" class="linkMethod">Model.addNodeData</a> or <a href="symbols/Model.html#removeNodeData" class="linkMethod">Model.removeNodeData</a>)
|
|
</li>
|
|
<li><b>"nodeKey"</b>, after changing a node data's unique key (<a href="symbols/Model.html#setKeyForNodeData" class="linkMethod">Model.setKeyForNodeData</a>)</li>
|
|
<li><b>"nodeCategory"</b>, after changing a node data's category (<a href="symbols/Model.html#setCategoryForNodeData" class="linkMethod">Model.setCategoryForNodeData</a>)</li>
|
|
<li><b>"linkFromKey"</b>, after changing a link data's "from" node key (<a href="symbols/GraphLinksModel.html#setFromKeyForLinkData" class="linkMethod">GraphLinksModel.setFromKeyForLinkData</a>)</li>
|
|
<li><b>"linkToKey"</b>, after changing a link data's "to" node key (<a href="symbols/GraphLinksModel.html#setToKeyForLinkData" class="linkMethod">GraphLinksModel.setToKeyForLinkData</a>)</li>
|
|
<li><b>"linkFromPortId"</b>, after changing a link data's "from" port (<a href="symbols/GraphLinksModel.html#setFromPortIdForLinkData" class="linkMethod">GraphLinksModel.setFromPortIdForLinkData</a>)</li>
|
|
<li><b>"linkToPortId"</b>, after changing a link data's "to" port (<a href="symbols/GraphLinksModel.html#setToPortIdForLinkData" class="linkMethod">GraphLinksModel.setToPortIdForLinkData</a>)</li>
|
|
<li><b>"linkLabelKeys"</b>, after replacing, inserting into, or removing from a link data's array of keys to label nodes
|
|
(calling <a href="symbols/GraphLinksModel.html#setLabelKeysForLinkData" class="linkMethod">GraphLinksModel.setLabelKeysForLinkData</a>, <a href="symbols/GraphLinksModel.html#addLabelKeyForLinkData" class="linkMethod">GraphLinksModel.addLabelKeyForLinkData</a>,
|
|
or <a href="symbols/GraphLinksModel.html#removeLabelKeyForLinkData" class="linkMethod">GraphLinksModel.removeLabelKeyForLinkData</a>)
|
|
</li>
|
|
<li><b>"linkDataArray"</b>, after the model's <a href="symbols/GraphLinksModel.html#linkDataArray" class="linkProperty">GraphLinksModel.linkDataArray</a> is replaced, inserted into or removed from
|
|
(setting <a href="symbols/GraphLinksModel.html#linkDataArray" class="linkProperty">GraphLinksModel.linkDataArray</a> or calling <a href="symbols/GraphLinksModel.html#addLinkData" class="linkMethod">GraphLinksModel.addLinkData</a>
|
|
or <a href="symbols/GraphLinksModel.html#removeLinkData" class="linkMethod">GraphLinksModel.removeLinkData</a>)
|
|
</li>
|
|
<li><b>"nodeGroupKey"</b>, after changing a node data's key for a containing group data (<a href="symbols/GraphLinksModel.html#setGroupKeyForNodeData" class="linkMethod">GraphLinksModel.setGroupKeyForNodeData</a>)</li>
|
|
<li><b>"linkCategory"</b>, after changing a link data's category (<a href="symbols/GraphLinksModel.html#setCategoryForLinkData" class="linkMethod">GraphLinksModel.setCategoryForLinkData</a>)</li>
|
|
<li><b>"nodeParentKey"</b>, after changing a node data's "parent" node key (<a href="symbols/TreeModel.html#setParentKeyForNodeData" class="linkMethod">TreeModel.setParentKeyForNodeData</a>)</li>
|
|
<li><b>"parentLinkCategory"</b>, after changing a node data's "parent" link's category(<a href="symbols/TreeModel.html#setParentLinkCategoryForNodeData" class="linkMethod">TreeModel.setParentLinkCategoryForNodeData</a>)</li>
|
|
<li><b>"SourceChanged"</b>, for internal implementation use only</li>
|
|
</ul>
|
|
The value of <a href="symbols/ChangedEvent.html#propertyName" class="linkProperty">ChangedEvent.propertyName</a> indicates the actual name of the property that was modified.
|
|
<a href="symbols/ChangedEvent.html#modelChange" class="linkProperty">ChangedEvent.modelChange</a> is a non-empty string only when there is a known structural change to the model,
|
|
not just the setting of some property on some object.
|
|
<p>
|
|
When the ChangedEvent represents a change to a <a href="symbols/Diagram.html" class="linkConstructor">Diagram</a> or a <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a> within a diagram,
|
|
the value of #diagram is non-null and
|
|
the values of #model and #modelChange are meaningless.</div></div>
|
|
|
|
<div><h2><a href="symbols/CircularEdge.html" class="linkConstructor">CircularEdge</a></h2><p>This holds <a href="symbols/CircularLayout.html" class="linkConstructor">CircularLayout</a>-specific information about <a href="symbols/Link.html" class="linkConstructor">Link</a>s.<span class="nodetails" id="xCircularEdge"><a class="morelink" onclick="hst('CircularEdge')">More...</a></span> <span class="details" id="CircularEdge">
|
|
</span><div class="details" id="dCircularEdge"><p>
|
|
This class inherits from <a href="symbols/LayoutEdge.html" class="linkConstructor">LayoutEdge</a>.</div></div>
|
|
|
|
<div><h2><a href="symbols/CircularLayout.html" class="linkConstructor">CircularLayout</a></h2><p>This layout positions nodes in a circular arrangement.<span class="nodetails" id="xCircularLayout"><a class="morelink" onclick="hst('CircularLayout')">More...</a></span> <span class="details" id="CircularLayout">
|
|
There are several samples that use CircularLayout.
|
|
The layout cannot guarantee that it provides optimal positioning of nodes when trying to minimize link crossings.
|
|
<p class="boxrun">
|
|
If you want to experiment interactively with most of the properties, try the <a href="../../samples/cLayout.html">Circular Layout</a> sample.
|
|
See samples that make use of CircularLayout in the <a href="../../samples/index.html#circularlayout">samples index</a>.
|
|
</span><div class="details" id="dCircularLayout"><p>
|
|
This layout makes use of a <a href="symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a> of
|
|
<a href="symbols/CircularVertex.html" class="linkConstructor">CircularVertex</a>es and <a href="symbols/CircularEdge.html" class="linkConstructor">CircularEdge</a>s that normally
|
|
correspond to the <a href="symbols/Node.html" class="linkConstructor">Node</a>s and <a href="symbols/Link.html" class="linkConstructor">Link</a>s of the <a href="symbols/Diagram.html" class="linkConstructor">Diagram</a>.</div></div>
|
|
|
|
<div><h2><a href="symbols/CircularVertex.html" class="linkConstructor">CircularVertex</a></h2><p>This holds <a href="symbols/CircularLayout.html" class="linkConstructor">CircularLayout</a>-specific information about <a href="symbols/Node.html" class="linkConstructor">Node</a>s.<span class="nodetails" id="xCircularVertex"><a class="morelink" onclick="hst('CircularVertex')">More...</a></span> <span class="details" id="CircularVertex">
|
|
</span><div class="details" id="dCircularVertex"><p>
|
|
This class inherits from <a href="symbols/LayoutVertex.html" class="linkConstructor">LayoutVertex</a>.</div></div>
|
|
|
|
<div><h2><a href="symbols/ClickCreatingTool.html" class="linkConstructor">ClickCreatingTool</a></h2><p>The ClickCreatingTool lets the user create a node by clicking where they want the new node to be.<span class="nodetails" id="xClickCreatingTool"><a class="morelink" onclick="hst('ClickCreatingTool')">More...</a></span> <span class="details" id="ClickCreatingTool">
|
|
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.
|
|
</span><div class="details" id="dClickCreatingTool"><p>
|
|
This tool is a standard mouse-up tool, the <a href="symbols/ToolManager.html#clickCreatingTool" class="linkProperty">ToolManager.clickCreatingTool</a>.
|
|
However, it will not be able to start running unless you have set the
|
|
#archetypeNodeData property to an object that can be copied and added to the diagram's model.
|
|
<p>
|
|
This tool does not utilize any <a href="symbols/Adornment.html" class="linkConstructor">Adornment</a>s or tool handles.
|
|
This tool does conduct a transaction when inserting the new node.</div></div>
|
|
|
|
<div><h2><a href="symbols/ClickSelectingTool.html" class="linkConstructor">ClickSelectingTool</a></h2><p>The ClickSelectingTool selects and deselects <a href="symbols/Part.html" class="linkConstructor">Part</a>s when there is a click.<span class="nodetails" id="xClickSelectingTool"><a class="morelink" onclick="hst('ClickSelectingTool')">More...</a></span> <span class="details" id="ClickSelectingTool">
|
|
It does this by calling <a href="symbols/Tool.html#standardMouseSelect" class="linkMethod">Tool.standardMouseSelect</a>.
|
|
It is also responsible for handling and dispatching click events on <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a>s
|
|
by calling <a href="symbols/Tool.html#standardMouseClick" class="linkMethod">Tool.standardMouseClick</a>.
|
|
</span><div class="details" id="dClickSelectingTool"><p>
|
|
Note that this tool avoids raising click events on objects that are in temporary layers.
|
|
This is to prevent parts such as selection adornments from interfering with clicking on selected nodes or links.
|
|
(Adornments are in the "Adornment" <a href="symbols/Layer.html" class="linkConstructor">Layer</a>, which <a href="symbols/Layer.html#isTemporary" class="linkProperty">Layer.isTemporary</a>.)
|
|
However this means that if you add a <a href="symbols/GraphObject.html#click" class="linkProperty">GraphObject.click</a> event handler on a GraphObject in an Adornment,
|
|
it will not be called.
|
|
You can get it to be called by setting <a href="symbols/GraphObject.html#isActionable" class="linkProperty">GraphObject.isActionable</a> to true on that object in the adornment.
|
|
<p>
|
|
This tool is a standard mouse-up tool, the <a href="symbols/ToolManager.html#clickSelectingTool" class="linkProperty">ToolManager.clickSelectingTool</a>.
|
|
<p>
|
|
This tool does not utilize any <a href="symbols/Adornment.html" class="linkConstructor">Adornment</a>s or tool handles.
|
|
This tool does not modify the model or conduct any transaction.
|
|
<p>
|
|
An example customization of this tool is shown in the <a href="../../extensions/TreeMap.html">Tree Map</a> sample,
|
|
where the <a href="symbols/Tool.html#standardMouseSelect" class="linkMethod">Tool.standardMouseSelect</a> method is overridden to permit the user to cycle through
|
|
the chain of containing groups, changing the selection on each click to the next containing group.</div></div>
|
|
|
|
<div><h2><a href="symbols/CommandHandler.html" class="linkConstructor">CommandHandler</a></h2><p>The <a href="symbols/Diagram.html#commandHandler" class="linkProperty">Diagram.commandHandler</a> implements various
|
|
commands such as <a href="symbols/CommandHandler.html#deleteSelection" class="linkMethod">CommandHandler.deleteSelection</a> or <a href="symbols/CommandHandler.html#redo" class="linkMethod">CommandHandler.redo</a>.<span class="nodetails" id="xCommandHandler"><a class="morelink" onclick="hst('CommandHandler')">More...</a></span> <span class="details" id="CommandHandler">
|
|
The CommandHandler includes keyboard event handling to interpret
|
|
key presses as commands.
|
|
</span><div class="details" id="dCommandHandler"><p>
|
|
CommandHandlers cannot be shared amongst multiple Diagrams.
|
|
<p>
|
|
You may define a CommandHandler subclass and override methods.
|
|
However you must seriously consider calling the base method in order to get its default behavior.
|
|
There may be situations where not calling the base method may cause subtle bugs,
|
|
but that depends on the method.
|
|
Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call a base method.
|
|
<p>
|
|
There is an example custom CommandHandler in the extensions directory: <a href="../../extensions/DrawCommandHandler.js">DrawCommandHandler.js</a>,
|
|
which provides alignment commands and additional behaviors for the arrow keys.
|
|
<p class="boxread">
|
|
For additional discussion, please read the <a href="../../intro/commands.html">Introduction page on Commands</a>.
|
|
<h3>Keyboard Shortcuts</h3>
|
|
The CommandHandler implements the following command bindings for keyboard input in #doKeyDown:
|
|
<ul>
|
|
<li><code>Ctrl-X</code> & <code>Shift-Del</code> invoke #cutSelection</li>
|
|
<li><code>Ctrl-C</code> & <code>Ctrl-Insert</code> invoke #copySelection</li>
|
|
<li><code>Ctrl-V</code> & <code>Shift-Insert</code> invoke #pasteSelection</li>
|
|
<li><code>Del</code> & <code>Backspace</code> invoke #deleteSelection</li>
|
|
<li><code>Ctrl-A</code> invokes #selectAll</li>
|
|
<li><code>Ctrl-Z</code> & <code>Alt-Backspace</code> invoke <a href="symbols/UndoManager.html#undo" class="linkMethod">undo</a></li>
|
|
<li><code>Ctrl-Y</code> & <code>Alt-Shift-Backspace</code> invoke <a href="symbols/UndoManager.html#redo" class="linkMethod">redo</a></li>
|
|
<li><code>Up</code> & <code>Down</code> & <code>Left</code> & <code>Right</code> (arrow keys) call <a href="symbols/Diagram.html#scroll" class="linkMethod">Diagram.scroll</a></li>
|
|
<li><code>PageUp</code> & <code>PageDown</code> call <a href="symbols/Diagram.html#scroll" class="linkMethod">Diagram.scroll</a></li>
|
|
<li><code>Home</code> & <code>End</code> call <a href="symbols/Diagram.html#scroll" class="linkMethod">Diagram.scroll</a></li>
|
|
<li><code>Space</code> invokes #scrollToPart</li>
|
|
<li><code>Ctrl-- & Keypad--</code> (minus) invoke #decreaseZoom</li>
|
|
<li><code>Ctrl-+ & Keypad-+</code> (plus) invoke #increaseZoom</li>
|
|
<li><code>Ctrl-0</code> invokes #resetZoom</li>
|
|
<li><code>Shift-Z</code> invokes #zoomToFit; repeat to return to the original scale and position</li>
|
|
<li><code>Ctrl-G</code> invokes #groupSelection</li>
|
|
<li><code>Ctrl-Shift-G</code> invokes #ungroupSelection</li>
|
|
<li><code>F2</code> invokes #editTextBlock</li>
|
|
<li><code>Menu Key</code> invokes #showContextMenu</li>
|
|
<li><code>Esc</code> invokes #stopCommand</li>
|
|
</ul>
|
|
<p>
|
|
On a Macintosh the Command key is used as the modifier instead of the Control key.
|
|
</p>
|
|
<p>
|
|
On touch devices there is a default context menu that shows many commonly-used commands
|
|
when you hold a finger down on the diagram.
|
|
</p></div></div>
|
|
|
|
<div><h2><a href="symbols/ContextMenuTool.html" class="linkConstructor">ContextMenuTool</a></h2><p>The ContextMenuTool is used to create and show a context menu.<span class="nodetails" id="xContextMenuTool"><a class="morelink" onclick="hst('ContextMenuTool')">More...</a></span> <span class="details" id="ContextMenuTool">
|
|
It automatically disables any browser context menu.
|
|
</span><div class="details" id="dContextMenuTool"><p>
|
|
Define context menus on individual <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a>s by setting <a href="symbols/GraphObject.html#contextMenu" class="linkProperty">GraphObject.contextMenu</a>.
|
|
Define a context menu for the diagram background by setting <a href="symbols/Diagram.html#contextMenu" class="linkProperty">Diagram.contextMenu</a>.
|
|
<p>
|
|
This tool is a standard mouse-down tool, the <a href="symbols/ToolManager.html#contextMenuTool" class="linkProperty">ToolManager.contextMenuTool</a>.
|
|
<p>
|
|
This tool does not utilize any tool handles.
|
|
This tool does not modify the model or conduct any transaction,
|
|
although any code invoked by context menu commands might do so.
|
|
<p>
|
|
There are examples of customizing this tool in the
|
|
<a href="../../samples/customContextMenu.html">Custom Context Menu</a> and
|
|
<a href="../../samples/htmlLightBoxContextMenu.html">HTML LightBox Context Menu</a> samples.
|
|
<p>
|
|
If you want to programmatically show a context menu for a particular GraphObject or for the
|
|
whole diagram, call <a href="symbols/CommandHandler.html#showContextMenu" class="linkMethod">CommandHandler.showContextMenu</a>.
|
|
That command method is also invoked by the Menu key on the keyboard.
|
|
<p>
|
|
Normally this shows a context menu (if available) on a right-mouse-up event.
|
|
If you want it to happen on a right-mouse-down event, you'll need to move this tool
|
|
from the <a href="symbols/ToolManager.html#mouseUpTools" class="linkProperty">ToolManager.mouseUpTools</a> list to the <a href="symbols/ToolManager.html#mouseDownTools" class="linkProperty">ToolManager.mouseDownTools</a> list:
|
|
<pre class="javascript">
|
|
myDiagram.toolManager.mouseDownTools.add(myDiagram.toolManager.replaceTool("ContextMenu", null));
|
|
</pre></div></div>
|
|
|
|
<div><h2><a href="symbols/Diagram.html" class="linkConstructor">Diagram</a></h2><p>A Diagram is associated with an HTML DIV element.<span class="nodetails" id="xDiagram"><a class="morelink" onclick="hst('Diagram')">More...</a></span> <span class="details" id="Diagram"> Constructing a Diagram creates
|
|
an HTML Canvas element which it places inside of the given DIV element, in addition to several helper DIVs.
|
|
<b>GoJS</b> 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.
|
|
</span><div class="details" id="dDiagram"><p>
|
|
Minimal Diagram construction looks like this. HTML:
|
|
|
|
<pre class="html"><div id="myDiagramDiv" style="border: solid 1px black; width:400px; height:400px"></div></pre>
|
|
<p>
|
|
JavaScript:
|
|
<pre class="javascript">var $ = go.GraphObject.make; // for conciseness
|
|
|
|
myDiagram = $(go.Diagram, "myDiagramDiv", // create a Diagram for the DIV HTML element
|
|
{
|
|
initialContentAlignment: go.Spot.Center, // center the content
|
|
"undoManager.isEnabled": true // enable undo & redo
|
|
});</pre>
|
|
|
|
<p>
|
|
The diagram will draw onto an HTML Canvas element, created inside the Diagram DIV.
|
|
<p>
|
|
Each Diagram holds a set of <a href="symbols/Layer.html" class="linkConstructor">Layer</a>s each of which holds some number of <a href="symbols/Part.html" class="linkConstructor">Part</a>s
|
|
such as <a href="symbols/Node.html" class="linkConstructor">Node</a>s and <a href="symbols/Link.html" class="linkConstructor">Link</a>s.
|
|
Each <a href="symbols/Part.html" class="linkConstructor">Part</a> consists of <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a>s such as <a href="symbols/TextBlock.html" class="linkConstructor">TextBlock</a>s and <a href="symbols/Shape.html" class="linkConstructor">Shape</a>s
|
|
and <a href="symbols/Panel.html" class="linkConstructor">Panel</a>s holding yet more GraphObjects.
|
|
<p>
|
|
A Diagram and its Parts provide the visual representation of a <a href="symbols/Model.html" class="linkConstructor">Model</a> that holds JavaScript
|
|
data objects for the nodes and the links.
|
|
The model provides the way to recognize the relationships between the data.
|
|
<p class="boxrun">
|
|
Two Diagrams can display and manipulate the same Model. (<a href="../../samples/updateDemo.html">Example</a>)
|
|
<p>
|
|
A diagram will automatically create <a href="symbols/Node.html" class="linkConstructor">Node</a>s and <a href="symbols/Link.html" class="linkConstructor">Link</a>s corresponding to the model data.
|
|
The diagram has a number of named templates it uses to create the actual parts:
|
|
#nodeTemplateMap, #groupTemplateMap, and #linkTemplateMap.
|
|
Each template may have some data <a href="symbols/Binding.html" class="linkConstructor">Binding</a>s that set the part's <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a>s' properties
|
|
based on the value of properties of the data.
|
|
<p>
|
|
A simple Node template and Model data (both nodes and links) may look like this:
|
|
|
|
<pre class="javascript">var $ = go.GraphObject.make; // for conciseness
|
|
|
|
// define a simple Node template
|
|
myDiagram.nodeTemplate =
|
|
$(go.Node, "Auto", // the Shape will go around the TextBlock
|
|
$(go.Shape, "RoundedRectangle",
|
|
// Shape.fill is bound to Node.data.color
|
|
new go.Binding("fill", "color")),
|
|
$(go.TextBlock,
|
|
{ margin: 3 }, // some room around the text
|
|
// TextBlock.text is bound to Node.data.key
|
|
new go.Binding("text", "key"))
|
|
);
|
|
|
|
// create the model data that will be represented by Nodes and Links
|
|
myDiagram.model = new go.GraphLinksModel(
|
|
[
|
|
{ key: "Alpha", color: "lightblue" },
|
|
{ key: "Beta", color: "orange" },
|
|
{ key: "Gamma", color: "lightgreen" },
|
|
{ key: "Delta", color: "pink" }
|
|
],
|
|
[
|
|
{ from: "Alpha", to: "Beta" },
|
|
{ from: "Alpha", to: "Gamma" },
|
|
{ from: "Beta", to: "Beta" },
|
|
{ from: "Gamma", to: "Delta" },
|
|
{ from: "Delta", to: "Alpha" }
|
|
]);</pre>
|
|
<p class="boxrun">
|
|
The above code is used to make the <a href="../../samples/minimal.html">Minimal sample</a>, a simple example of
|
|
creating a Diagram and setting its model.
|
|
<p class="boxread">
|
|
Read about models on the <a href="../../intro/usingModels.html">Using Models</a> page in the introduction.
|
|
A diagram is responsible for scrolling (#position) and zooming (#scale) all of the parts that it shows.
|
|
Each <a href="symbols/Part.html" class="linkConstructor">Part</a> occupies some area given by its <a href="symbols/GraphObject.html#actualBounds" class="linkProperty">GraphObject.actualBounds</a>.
|
|
<p>
|
|
The union of all of the parts' bounds constitutes the #documentBounds.
|
|
The document bounds determines the area that the diagram can be scrolled to.
|
|
There are several properties that you can set, such as #initialContentAlignment,
|
|
that control the initial size and position of the diagram contents.
|
|
<p>
|
|
At any later time you can also explicitly set the #position and/or #scale to
|
|
get the appearance that you want. But you may find it easier to call methods to get the desired effect.
|
|
For example, if you want to make a particular Node be centered in the viewport,
|
|
call either #centerRect or #scrollToRect with the Node's <a href="symbols/GraphObject.html#actualBounds" class="linkProperty">GraphObject.actualBounds</a>,
|
|
depending on whether or not you want the view to be scrolled if the node is already in view.
|
|
<p class="boxread">
|
|
Read in the Introduction about <a href="../../intro/viewport.html">Viewports</a>
|
|
and the <a href="../../intro/initialView.html">Initial Viewport</a>.
|
|
You can have the diagram perform automatic layouts of its nodes and links by setting
|
|
#layout to an instance of the <a href="symbols/Layout.html" class="linkConstructor">Layout</a> subclass of your choice.
|
|
The default #layout is an instance of the <a href="symbols/Layout.html" class="linkConstructor">Layout</a> base class that ignores links and
|
|
only positions <a href="symbols/Node.html" class="linkConstructor">Node</a>s that do not have a location.
|
|
This default layout will allow you to programmatically position nodes (including by loading
|
|
from a database) and will also allow the user to manually position nodes using the <a href="symbols/DraggingTool.html" class="linkConstructor">DraggingTool</a>.
|
|
<p>
|
|
If you do supply a particular layout as the #layout, you can control which <a href="symbols/Part.html" class="linkConstructor">Part</a>s it operates
|
|
on by setting <a href="symbols/Part.html#isLayoutPositioned" class="linkProperty">Part.isLayoutPositioned</a>.
|
|
Normally, of course, it works on all top-level nodes and links.
|
|
The layout is performed both after the model is first loaded as well as after any part is added or removed
|
|
or changes visibility or size.
|
|
You can disable the initial layout by setting <a href="symbols/Layout.html#isInitial" class="linkProperty">Layout.isInitial</a> to false.
|
|
You can disable later automatic layouts by setting <a href="symbols/Layout.html#isOngoing" class="linkProperty">Layout.isOngoing</a> to false.
|
|
<p class="boxread">
|
|
See the <a href="../../intro/layouts.html">Layouts</a> page in the Introduction for a summary of layout behavior.
|
|
<p>
|
|
A diagram maintains a collection of selected parts, the <a href="symbols/Diagram.html#selection" class="linkProperty">Diagram.selection</a>.
|
|
To select a Part you set its <a href="symbols/Part.html#isSelected" class="linkProperty">Part.isSelected</a> property to true.
|
|
<p>
|
|
There are many properties, named "allow...", that control what operations the user
|
|
may perform on the parts in the diagram. These correspond to the same named
|
|
properties on <a href="symbols/Layer.html" class="linkConstructor">Layer</a> that govern the behavior for those parts in a particular layer.
|
|
Furthermore for some of these properties there are corresponding properties on
|
|
<a href="symbols/Part.html" class="linkConstructor">Part</a>, named "...able", that govern the behavior for that individual part.
|
|
For example, the #allowCopy property corresponds to <a href="symbols/Layer.html#allowCopy" class="linkProperty">Layer.allowCopy</a> and
|
|
to the property <a href="symbols/Part.html#copyable" class="linkProperty">Part.copyable</a>.
|
|
The <a href="symbols/Part.html#canCopy" class="linkMethod">Part.canCopy</a> predicate is false if any of these properties is false.
|
|
<p class="boxread">
|
|
See the <a href="../../intro/permissions.html">Permissions</a> page for a more thorough discussion.
|
|
<p>
|
|
The #commandHandler implements various standard commands,
|
|
such as the <a href="symbols/CommandHandler.html#deleteSelection" class="linkMethod">CommandHandler.deleteSelection</a> method and the
|
|
<a href="symbols/CommandHandler.html#canDeleteSelection" class="linkMethod">CommandHandler.canDeleteSelection</a> predicate.
|
|
<p class="boxread">
|
|
See the <a href="../../intro/commands.html">Commands</a> page for a listing of keyboard commands and
|
|
the use of commands in general.
|
|
<p>
|
|
The diagram supports modular behavior for mouse events by implementing "tools".
|
|
All mouse and keyboard events are represented by <a href="symbols/InputEvent.html" class="linkConstructor">InputEvent</a>s and redirected
|
|
to the #currentTool.
|
|
The default tool is an instance of <a href="symbols/ToolManager.html" class="linkConstructor">ToolManager</a> which keeps three lists of mode-less tools:
|
|
<a href="symbols/ToolManager.html#mouseDownTools" class="linkProperty">ToolManager.mouseDownTools</a>, <a href="symbols/ToolManager.html#mouseMoveTools" class="linkProperty">ToolManager.mouseMoveTools</a>, and <a href="symbols/ToolManager.html#mouseUpTools" class="linkProperty">ToolManager.mouseUpTools</a>.
|
|
The ToolManager searches these lists when a mouse event happens to find the first tool that can run.
|
|
It then makes that tool the new #currentTool, where it can continue to process input events.
|
|
When the tool is done, it stops itself, causing the #defaultTool to be the new #currentTool.
|
|
<p>
|
|
Mouse-down tools include:
|
|
<ul>
|
|
<li><a href="symbols/ToolManager.html#actionTool" class="linkProperty">ToolManager.actionTool</a>, to support objects like "buttons"</li>
|
|
<li><a href="symbols/ToolManager.html#relinkingTool" class="linkProperty">ToolManager.relinkingTool</a>, to reconnect an existing link</li>
|
|
<li><a href="symbols/ToolManager.html#linkReshapingTool" class="linkProperty">ToolManager.linkReshapingTool</a>, to modify the route of an existing link</li>
|
|
<li><a href="symbols/ToolManager.html#resizingTool" class="linkProperty">ToolManager.resizingTool</a>, to change the size of an object</li>
|
|
<li><a href="symbols/ToolManager.html#rotatingTool" class="linkProperty">ToolManager.rotatingTool</a>, to change the angle of an object</li>
|
|
</ul>
|
|
Mouse-move tools include:
|
|
<ul>
|
|
<li><a href="symbols/ToolManager.html#linkingTool" class="linkProperty">ToolManager.linkingTool</a>, to draw a new link</li>
|
|
<li><a href="symbols/ToolManager.html#draggingTool" class="linkProperty">ToolManager.draggingTool</a>, to move or copy the selection</li>
|
|
<li><a href="symbols/ToolManager.html#dragSelectingTool" class="linkProperty">ToolManager.dragSelectingTool</a>, to select parts within a rectangular area</li>
|
|
<li><a href="symbols/ToolManager.html#panningTool" class="linkProperty">ToolManager.panningTool</a>, to pan the diagram</li>
|
|
</ul>
|
|
Mouse-up tools include:
|
|
<ul>
|
|
<li><a href="symbols/ToolManager.html#contextMenuTool" class="linkProperty">ToolManager.contextMenuTool</a>, to manage context menus</li>
|
|
<li><a href="symbols/ToolManager.html#textEditingTool" class="linkProperty">ToolManager.textEditingTool</a>, to support in-place text editing</li>
|
|
<li><a href="symbols/ToolManager.html#clickCreatingTool" class="linkProperty">ToolManager.clickCreatingTool</a>, to create new parts where the user clicks</li>
|
|
<li><a href="symbols/ToolManager.html#clickSelectingTool" class="linkProperty">ToolManager.clickSelectingTool</a>, to select parts</li>
|
|
<p>
|
|
</ul>
|
|
<p>
|
|
You can also run a tool in a modal fashion by explicitly setting #currentTool.
|
|
That tool will keep running until some code replaces the #currentTool/
|
|
This normally happens when the current tool calls <a href="symbols/Tool.html#stopTool" class="linkMethod">Tool.stopTool</a>, such as on a mouse-up event.
|
|
<p class="boxread">
|
|
See the <a href="../../intro/tools.html">Tools</a> page for a listing of predefined tools and how they operate.
|
|
<p>
|
|
A diagram raises various <a href="symbols/DiagramEvent.html" class="linkConstructor">DiagramEvent</a>s when interesting things happen that may have affected the whole diagram.
|
|
See the documentation for <a href="symbols/DiagramEvent.html" class="linkConstructor">DiagramEvent</a> for a complete listing.</div></div>
|
|
|
|
<div><h2><a href="symbols/DiagramEvent.html" class="linkConstructor">DiagramEvent</a></h2><p>A DiagramEvent represents a more abstract event than an <a href="symbols/InputEvent.html" class="linkConstructor">InputEvent</a>.<span class="nodetails" id="xDiagramEvent"><a class="morelink" onclick="hst('DiagramEvent')">More...</a></span> <span class="details" id="DiagramEvent">
|
|
They are raised on the <a href="symbols/Diagram.html" class="linkConstructor">Diagram</a> class.
|
|
One can receive such events by registering a DiagramEvent listener on a Diagram
|
|
by calling <a href="symbols/Diagram.html#addDiagramListener" class="linkMethod">Diagram.addDiagramListener</a>.
|
|
The listener function, when called, will be passed an instance of a <a href="symbols/DiagramEvent.html" class="linkConstructor">DiagramEvent</a>.
|
|
Use the #name property to decide what kind of diagram event it is.
|
|
The #diagram property refers to the Diagram, and you can get additional information
|
|
from that, such as the <a href="symbols/Diagram.html#lastInput" class="linkProperty">Diagram.lastInput</a>, which in turn provides information
|
|
such as <a href="symbols/InputEvent.html#documentPoint" class="linkProperty">InputEvent.documentPoint</a> that may be relevant for that kind of DiagramEvent.
|
|
</span><div class="details" id="dDiagramEvent"><p>
|
|
The #subject and #parameter properties optionally provide additional information
|
|
about the diagram event. The subject could be a collection of <a href="symbols/Part.html" class="linkConstructor">Part</a>s or it could be
|
|
an individual object such as a <a href="symbols/Link.html" class="linkConstructor">Link</a> or a <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a> within a <a href="symbols/Node.html" class="linkConstructor">Node</a>.
|
|
Everything depends on the kind of diagram event that it is.
|
|
<p>
|
|
Some DiagramEvents such as "ObjectSingleClicked" or "BackgroundDoubleClicked" are normally
|
|
associated with <a href="symbols/InputEvent.html" class="linkConstructor">InputEvent</a>s.
|
|
Some DiagramEvents such as "SelectionMoved" or "PartRotated" are associated with the
|
|
results of <a href="symbols/Tool.html" class="linkConstructor">Tool</a>-handled gestures or <a href="symbols/CommandHandler.html" class="linkConstructor">CommandHandler</a> actions.
|
|
Some DiagramEvents are not necessarily associated with any input events at all,
|
|
such as "ViewportBoundsChanged", which can happen due to programmatic
|
|
changes to the <a href="symbols/Diagram.html#position" class="linkProperty">Diagram.position</a> and <a href="symbols/Diagram.html#scale" class="linkProperty">Diagram.scale</a> properties.
|
|
<p>
|
|
DiagramEvents that occur during a transaction may be called before the state of the whole diagram has settled down.
|
|
This often means that such events occur before a layout, so nodes may not have their final positions,
|
|
links may not have their final routes, and the <a>Diagram.documentBounds</a> and <a>Diagram.viewportBounds</a>
|
|
may not yet have been updated.
|
|
Such events may make additional changes to the diagram, which may in turn result in additional side-effects.
|
|
<p>
|
|
DiagramEvents that occur outside of a transaction require you to start and commit a transaction around any side-effects that you want to do.
|
|
However, some DiagramEvents do not allow you to make any changes to the Diagram or Model.
|
|
<p>
|
|
Currently defined diagram event names include:
|
|
<ul>
|
|
<li><b>"AnimationStarting"</b>, an animation is about to start;<br/>
|
|
do not modify the Diagram or its Model in the event listener.</li>
|
|
<li><b>"AnimationFinished"</b>, an animation just completed;<br/>
|
|
do not modify the Diagram or its Model in the event listener.</li>
|
|
<li><b>"BackgroundSingleClicked"</b>, a click that was not on any Part;<br/>
|
|
if you make any changes, start and commit your own transaction.</li>
|
|
<li><b>"BackgroundDoubleClicked"</b>, a double-click that was not on any Part;<br/>
|
|
if you make any changes, start and commit your own transaction.</li>
|
|
<li><b>"BackgroundContextClicked"</b>, a context-click that was not on any Part;<br/>
|
|
if you make any changes, start and commit your own transaction.</li>
|
|
<li><b>"ChangingSelection"</b>, an operation is about to change the <a href="symbols/Diagram.html#selection" class="linkProperty">Diagram.selection</a> collection;<br/>
|
|
do not make any changes to the selection or the diagram in the event listener;
|
|
note that just setting <a>Part.isSelected</a> will not raise this event, but tools and commands will.</li>
|
|
<li><b>"ChangedSelection"</b>, an operation has just changed the <a href="symbols/Diagram.html#selection" class="linkProperty">Diagram.selection</a> collection;<br/>
|
|
do not make any changes to the selection or the diagram in the event listener;
|
|
note that just setting <a>Part.isSelected</a> will not raise this event, but tools and commands will.</li>
|
|
<li><b>"ClipboardChanged"</b>, Parts have been copied to the clipboard by <a href="symbols/CommandHandler.html#copySelection" class="linkMethod">CommandHandler.copySelection</a>;<br/>
|
|
the <a href="symbols/DiagramEvent.html#subject" class="linkProperty">DiagramEvent.subject</a> is the collection of <a href="symbols/Part.html" class="linkConstructor">Part</a>s;<br/>
|
|
if you make any changes, start and commit your own transaction.</li>
|
|
<li><b>"ClipboardPasted"</b>, Parts have been copied from the clipboard into the Diagram by <a href="symbols/CommandHandler.html#pasteSelection" class="linkMethod">CommandHandler.pasteSelection</a>;<br/>
|
|
the <a href="symbols/DiagramEvent.html#subject" class="linkProperty">DiagramEvent.subject</a> is the <a href="symbols/Diagram.html#selection" class="linkProperty">Diagram.selection</a>,<br/>
|
|
and this is called within a transaction.</li>
|
|
<li><b>"DocumentBoundsChanged"</b>, the area of the diagram's Parts, <a href="symbols/Diagram.html#documentBounds" class="linkProperty">Diagram.documentBounds</a>, has changed;<br/>
|
|
the <a href="symbols/DiagramEvent.html#parameter" class="linkProperty">DiagramEvent.parameter</a> is the old <a href="symbols/Rect.html" class="linkConstructor">Rect</a></li>
|
|
<li><b>"ExternalObjectsDropped"</b>, Parts have been copied into the Diagram by drag-and-drop from outside of the Diagram;<br/>
|
|
the <a href="symbols/DiagramEvent.html#subject" class="linkProperty">DiagramEvent.subject</a> is the set of <a href="symbols/Part.html" class="linkConstructor">Part</a>s that were dropped (which is also the <a href="symbols/Diagram.html#selection" class="linkProperty">Diagram.selection</a>),
|
|
the <a href="symbols/DiagramEvent.html#parameter" class="linkProperty">DiagramEvent.parameter</a> is the source <a href="symbols/Diagram.html" class="linkConstructor">Diagram</a>,
|
|
and this is called within a transaction.</li>
|
|
<li><b>"InitialLayoutCompleted"</b>, the whole diagram layout has updated for the first time since a major change to the Diagram, such as replacing the Model;<br/>
|
|
if you make any changes, you do not need to perform a transaction.</li>
|
|
<li><b>"LayoutCompleted"</b>, the whole diagram layout has just been updated;<br/>
|
|
if you make any changes, you do not need to perform a transaction.</li>
|
|
<li><b>"LinkDrawn"</b>, the user has just created a new Link using <a href="symbols/LinkingTool.html" class="linkConstructor">LinkingTool</a>;<br/>
|
|
the <a href="symbols/DiagramEvent.html#subject" class="linkProperty">DiagramEvent.subject</a> is the new <a href="symbols/Link.html" class="linkConstructor">Link</a>,<br/>
|
|
and this is called within a transaction.</li>
|
|
<li><b>"LinkRelinked"</b>, the user has just reconnected an existing Link using <a href="symbols/RelinkingTool.html" class="linkConstructor">RelinkingTool</a> or <a href="symbols/DraggingTool.html" class="linkConstructor">DraggingTool</a>;<br/>
|
|
the <a href="symbols/DiagramEvent.html#subject" class="linkProperty">DiagramEvent.subject</a> is the modified <a href="symbols/Link.html" class="linkConstructor">Link</a>,<br/>
|
|
the <a href="symbols/DiagramEvent.html#parameter" class="linkProperty">DiagramEvent.parameter</a> is the <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a> port that the link was disconnected from,<br/>
|
|
and this is called within a transaction.</li>
|
|
<li><b>"LinkReshaped"</b>, the user has just rerouted an existing Link using <a href="symbols/LinkReshapingTool.html" class="linkConstructor">LinkReshapingTool</a>;<br/>
|
|
the <a href="symbols/DiagramEvent.html#subject" class="linkProperty">DiagramEvent.subject</a> is the modified <a href="symbols/Link.html" class="linkConstructor">Link</a>,<br/>
|
|
the <a href="symbols/DiagramEvent.html#parameter" class="linkProperty">DiagramEvent.parameter</a> is the List of Points of the link's original route,
|
|
and this is called within a transaction.</li>
|
|
<li><b>"Modified"</b>, the <a href="symbols/Diagram.html#isModified" class="linkProperty">Diagram.isModified</a> property has been set to a new value --
|
|
useful for marking a window as having been modified since the last save;<br/>
|
|
do not modify the Diagram or its Model in the event listener.</li>
|
|
<li><b>"ObjectSingleClicked"</b>, a click that occurred on a GraphObject;<br/>
|
|
the <a href="symbols/DiagramEvent.html#subject" class="linkProperty">DiagramEvent.subject</a> is the <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a>;<br/>
|
|
if you make any changes, start and commit your own transaction.</li>
|
|
<li><b>"ObjectDoubleClicked"</b>, a double-click that occurred on a GraphObject;<br/>
|
|
the <a href="symbols/DiagramEvent.html#subject" class="linkProperty">DiagramEvent.subject</a> is the <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a>;<br/>
|
|
if you make any changes, start and commit your own transaction.</li>
|
|
<li><b>"ObjectContextClicked"</b>, a context-click that occurred on a GraphObject;<br/>
|
|
the <a href="symbols/DiagramEvent.html#subject" class="linkProperty">DiagramEvent.subject</a> is the <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a>;<br/>
|
|
if you make any changes, start and commit your own transaction.</li>
|
|
<li><b>"PartCreated"</b>, the user inserted a new Part by <a href="symbols/ClickCreatingTool.html" class="linkConstructor">ClickCreatingTool</a>;<br/>
|
|
the <a href="symbols/DiagramEvent.html#subject" class="linkProperty">DiagramEvent.subject</a> is the new <a href="symbols/Part.html" class="linkConstructor">Part</a>,<br/>
|
|
and this is called within a transaction.</li>
|
|
<li><b>"PartResized"</b>, the user has changed the size of a GraphObject by <a href="symbols/ResizingTool.html" class="linkConstructor">ResizingTool</a>;<br/>
|
|
the <a href="symbols/DiagramEvent.html#subject" class="linkProperty">DiagramEvent.subject</a> is the <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a>,<br/>
|
|
the <a href="symbols/DiagramEvent.html#parameter" class="linkProperty">DiagramEvent.parameter</a> is the original Size,<br/>
|
|
and this is called within a transaction.</li>
|
|
<li><b>"PartRotated"</b>, the user has changed the angle of a GraphObject by <a href="symbols/RotatingTool.html" class="linkConstructor">RotatingTool</a>;<br/>
|
|
the <a href="symbols/DiagramEvent.html#subject" class="linkProperty">DiagramEvent.subject</a> is the <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a>,<br/>
|
|
the <a href="symbols/DiagramEvent.html#parameter" class="linkProperty">DiagramEvent.parameter</a> is the original angle in degrees,<br/>
|
|
and this is called within a transaction.</li>
|
|
<li><b>"SelectionMoved"</b>, the user has moved selected Parts by <a href="symbols/DraggingTool.html" class="linkConstructor">DraggingTool</a>;<br/>
|
|
the <a href="symbols/DiagramEvent.html#subject" class="linkProperty">DiagramEvent.subject</a> is the moved <a href="symbols/Diagram.html#selection" class="linkProperty">Diagram.selection</a>,<br/>
|
|
and this is called within a transaction.</li>
|
|
<li><b>"SelectionCopied"</b>, the user has copied selected Parts by <a href="symbols/DraggingTool.html" class="linkConstructor">DraggingTool</a>;<br/>
|
|
the <a href="symbols/DiagramEvent.html#subject" class="linkProperty">DiagramEvent.subject</a> is the newly copied <a href="symbols/Diagram.html#selection" class="linkProperty">Diagram.selection</a>,<br/>
|
|
and this is called within a transaction.</li>
|
|
<li><b>"SelectionDeleted"</b>, the user has deleted selected Parts by <a href="symbols/CommandHandler.html#deleteSelection" class="linkMethod">CommandHandler.deleteSelection</a>;<br/>
|
|
the <a href="symbols/DiagramEvent.html#subject" class="linkProperty">DiagramEvent.subject</a> is the collection of <a href="symbols/Part.html" class="linkConstructor">Part</a>s that were deleted,<br/>
|
|
and this is called within a transaction.</li>
|
|
<li><b>"SelectionDeleting"</b>, the user is about to delete selected Parts by <a href="symbols/CommandHandler.html#deleteSelection" class="linkMethod">CommandHandler.deleteSelection</a>;<br/>
|
|
the <a href="symbols/DiagramEvent.html#subject" class="linkProperty">DiagramEvent.subject</a> is the <a href="symbols/Diagram.html#selection" class="linkProperty">Diagram.selection</a> collection of Parts to be deleted.</li>
|
|
<li><b>"SelectionGrouped"</b>, the user has made a new Group out of the selected Parts by <a href="symbols/CommandHandler.html#groupSelection" class="linkMethod">CommandHandler.groupSelection</a>;<br/>
|
|
the <a href="symbols/DiagramEvent.html#subject" class="linkProperty">DiagramEvent.subject</a> is the new <a href="symbols/Group.html" class="linkConstructor">Group</a>,<br/>
|
|
and this is called within a transaction.</li>
|
|
<li><b>"SelectionUngrouped"</b>, the user has removed a selected Group but kept its members by <a href="symbols/CommandHandler.html#ungroupSelection" class="linkMethod">CommandHandler.ungroupSelection</a>;<br/>
|
|
the <a href="symbols/DiagramEvent.html#subject" class="linkProperty">DiagramEvent.subject</a> is the collection of <a href="symbols/Group.html" class="linkConstructor">Group</a>s that were ungrouped,<br/>
|
|
the <a href="symbols/DiagramEvent.html#parameter" class="linkProperty">DiagramEvent.parameter</a> is the collection of former member <a href="symbols/Part.html" class="linkConstructor">Part</a>s that were ungrouped,<br/>
|
|
and this is called within a transaction.</li>
|
|
<li><b>"SubGraphCollapsed"</b>, the user has collapsed selected Groups by <a href="symbols/CommandHandler.html#collapseSubGraph" class="linkMethod">CommandHandler.collapseSubGraph</a>;<br/>
|
|
the <a href="symbols/DiagramEvent.html#subject" class="linkProperty">DiagramEvent.subject</a> is the collection of <a href="symbols/Group.html" class="linkConstructor">Group</a>s that were collapsed,<br/>
|
|
and this is called within a transaction.</li>
|
|
<li><b>"SubGraphExpanded"</b>, the user has expanded selected Groups by <a href="symbols/CommandHandler.html#expandSubGraph" class="linkMethod">CommandHandler.expandSubGraph</a>;<br/>
|
|
the <a href="symbols/DiagramEvent.html#subject" class="linkProperty">DiagramEvent.subject</a> is the collection of <a href="symbols/Group.html" class="linkConstructor">Group</a>s that were expanded,<br/>
|
|
and this is called within a transaction.</li>
|
|
<li><b>"TextEdited"</b>, the user has changed the string value of a TextBlock by <a href="symbols/TextEditingTool.html" class="linkConstructor">TextEditingTool</a>;<br/>
|
|
the <a href="symbols/DiagramEvent.html#subject" class="linkProperty">DiagramEvent.subject</a> is the edited <a href="symbols/TextBlock.html" class="linkConstructor">TextBlock</a>,<br/>
|
|
the <a href="symbols/DiagramEvent.html#parameter" class="linkProperty">DiagramEvent.parameter</a> is the original string,<br/>
|
|
and this is called within a transaction.</li>
|
|
<li><b>"TreeCollapsed"</b>, the user has collapsed selected Nodes with subtrees by <a href="symbols/CommandHandler.html#collapseTree" class="linkMethod">CommandHandler.collapseTree</a>;<br/>
|
|
the <a href="symbols/DiagramEvent.html#subject" class="linkProperty">DiagramEvent.subject</a> is the collection of <a href="symbols/Node.html" class="linkConstructor">Node</a>s that were collapsed,<br/>
|
|
and this is called within a transaction.</li>
|
|
<li><b>"TreeExpanded"</b>, the user has expanded selected Nodes with subtrees by <a href="symbols/CommandHandler.html#expandTree" class="linkMethod">CommandHandler.expandTree</a>;<br/>
|
|
the <a href="symbols/DiagramEvent.html#subject" class="linkProperty">DiagramEvent.subject</a> is the collection of <a href="symbols/Node.html" class="linkConstructor">Node</a>s that were expanded,<br/>
|
|
and this is called within a transaction.</li>
|
|
<li><b>"ViewportBoundsChanged"</b>, the visible area of the Diagram, <a href="symbols/Diagram.html#viewportBounds" class="linkProperty">Diagram.viewportBounds</a>, has changed;<br/>
|
|
the <a href="symbols/DiagramEvent.html#subject" class="linkProperty">DiagramEvent.subject</a> is an object whose "scale" property is the old <a href="symbols/Diagram.html#scale" class="linkProperty">Diagram.scale</a> value,
|
|
whose "position" property is the old <a href="symbols/Diagram.html#position" class="linkProperty">Diagram.position</a> value,
|
|
and whose "bounds" property is the old <a href="symbols/Diagram.html#viewportBounds" class="linkProperty">Diagram.viewportBounds</a> value;
|
|
the <a href="symbols/DiagramEvent.html#parameter" class="linkProperty">DiagramEvent.parameter</a> is also the old viewportBounds <a href="symbols/Rect.html" class="linkConstructor">Rect</a>.</li>
|
|
</ul></div></div>
|
|
|
|
<div><h2><a href="symbols/DraggingTool.html" class="linkConstructor">DraggingTool</a></h2><p>The DraggingTool is used to move or copy selected parts with the mouse.<span class="nodetails" id="xDraggingTool"><a class="morelink" onclick="hst('DraggingTool')">More...</a></span> <span class="details" id="DraggingTool">
|
|
This sets the <a href="symbols/Part.html#location" class="linkProperty">Part.location</a> property; you may want to save the location to the model
|
|
by using a TwoWay <a href="symbols/Binding.html" class="linkConstructor">Binding</a> on the "location" property in your Parts/Nodes/Groups templates.
|
|
</span><div class="details" id="dDraggingTool"><p>
|
|
Dragging the selection moves parts for which <a href="symbols/Part.html#canMove" class="linkMethod">Part.canMove</a> is true.
|
|
If the user holds down the Control key (Option key on Mac), this tool will make a copy of the parts being dragged,
|
|
for those parts for which <a href="symbols/Part.html#canCopy" class="linkMethod">Part.canCopy</a> is true.
|
|
<p>
|
|
When the drag starts it calls #computeEffectiveCollection to find the actual collection
|
|
of <a href="symbols/Part.html" class="linkConstructor">Part</a>s to be dragged.
|
|
Normally this collection includes not only the <a href="symbols/Diagram.html#selection" class="linkProperty">Diagram.selection</a>, but also parts that belong
|
|
to those selected parts, such as members of groups.
|
|
If #dragsTree is true, the effective collection also includes all of the nodes and links that
|
|
constitute the subtree starting from selected nodes.
|
|
The result of #computeEffectiveCollection is not a <a href="symbols/Set.html" class="linkConstructor">Set</a> but a <a href="symbols/Map.html" class="linkConstructor">Map</a>
|
|
which remembers the original <a href="symbols/Part.html#location" class="linkProperty">Part.location</a> for all of the dragged parts.
|
|
This map is saved as the value of #draggedParts.
|
|
<p>
|
|
During the drag if the user holds down the Control/Option key this tool makes a copy of the #draggedParts
|
|
and proceeds to drag it around.
|
|
(It only copies the <a href="symbols/Diagram.html#selection" class="linkProperty">Diagram.selection</a>, not the whole effective collection,
|
|
if #copiesEffectiveCollection is false.)
|
|
The collection of copied parts is held by #copiedParts.
|
|
It too is a <a href="symbols/Map.html" class="linkConstructor">Map</a> remembering the original locations of the parts.
|
|
#copiedParts will be null when this tool is moving (not copying) at the moment.
|
|
<p>
|
|
Each Part's movement is limited by the #computeMove method.
|
|
By default it limits the <a href="symbols/Part.html#location" class="linkProperty">Part.location</a> to be within the bounds given by <a href="symbols/Part.html#minLocation" class="linkProperty">Part.minLocation</a> and <a href="symbols/Part.html#maxLocation" class="linkProperty">Part.maxLocation</a>.
|
|
(Those default to minus Infinity to plus Infinity.)
|
|
As a further convenience, the value of NaN in minLocation and maxLocation cause #computeMove to use the
|
|
part's current location.
|
|
So, for example, an easy way to declare that the user may only drag a node horizontally is to just set:
|
|
<pre>
|
|
$(go.Node,
|
|
. . .
|
|
{ minLocation: new go.Point(-Infinity, NaN), maxLocation: new go.Point(Infinity, NaN) },
|
|
. . .
|
|
)
|
|
</pre>
|
|
<p>
|
|
If you set #isGridSnapEnabled to true, dragged or copied parts will be snapped to points on a grid.
|
|
The snapping occurs continuously during a drag unless you set #isGridSnapRealtime to false.
|
|
Normally the grid points come from the <a href="symbols/Diagram.html#grid" class="linkProperty">Diagram.grid</a>, even if that grid is not <a href="symbols/GraphObject.html#visible" class="linkProperty">GraphObject.visible</a>.
|
|
However you can override those grid's properties for the snapping grid cell size and offset
|
|
by setting the properties here: #gridSnapCellSize and #gridSnapOrigin.
|
|
This computes the point to snap to for each dragged part.
|
|
The resulting point is used as the new <a href="symbols/Part.html#location" class="linkProperty">Part.location</a>.
|
|
<p>
|
|
For the most general control over where a part may be dragged, either set the <a href="symbols/Part.html#dragComputation" class="linkProperty">Part.dragComputation</a> property
|
|
or override #computeMove.
|
|
For the common case of wanting to keep member nodes within the <a href="symbols/Group.html" class="linkConstructor">Group</a> that they are members of,
|
|
you can do something like:
|
|
<pre>
|
|
// this is a Part.dragComputation function for limiting where a Node may be dragged
|
|
function stayInGroup(part, pt, gridpt) {
|
|
// don't constrain top-level nodes
|
|
var grp = part.containingGroup;
|
|
if (grp === null) return pt;
|
|
// try to stay within the background Shape of the Group
|
|
var back = grp.findObject("SHAPE");
|
|
if (back === null) return pt;
|
|
// allow dragging a Node out of a Group if the Shift key is down
|
|
//if (part.diagram.lastInput.shift) return pt;
|
|
var p1 = back.getDocumentPoint(go.Spot.TopLeft);
|
|
var p2 = back.getDocumentPoint(go.Spot.BottomRight);
|
|
var b = part.actualBounds;
|
|
var loc = part.location;
|
|
// find the padding inside the group's placeholder that is around the member parts
|
|
var m = (grp.placeholder !== null ? grp.placeholder.padding : new go.Margin(0));
|
|
// now limit the location appropriately
|
|
var x = Math.max(p1.x + m.left, Math.min(pt.x, p2.x - m.right - b.width - 1)) + (loc.x-b.x);
|
|
var y = Math.max(p1.y + m.top, Math.min(pt.y, p2.y - m.bottom - b.height - 1)) + (loc.y-b.y);
|
|
return new go.Point(x, y);
|
|
}
|
|
</pre>
|
|
Note that this expects there to be a "SHAPE" object within the Group's visual tree that delimits
|
|
where the part may be dragged within the group.
|
|
This also expects that <a href="symbols/Group.html#computesBoundsIncludingLinks" class="linkProperty">Group.computesBoundsIncludingLinks</a> is false.
|
|
Then in your node template(s), just set:
|
|
<pre>
|
|
$(go.Node,
|
|
. . .,
|
|
{ dragComputation: stayInGroup },
|
|
. . .
|
|
)
|
|
</pre>
|
|
<p>
|
|
This tool does not utilize any <a href="symbols/Adornment.html" class="linkConstructor">Adornment</a>s or tool handles.
|
|
If the drag is successful, it raises the "SelectionMoved" or "SelectionCopied" <a href="symbols/DiagramEvent.html" class="linkConstructor">DiagramEvent</a>
|
|
and produces a "Move" or a "Copy" transaction.
|
|
<p>
|
|
If you want to programmatically start a new user mouse-gesture to drag a particular existing node,
|
|
you can set the #currentPart property and then start and activate the tool.
|
|
<pre>
|
|
var tool = myDiagram.toolManager.draggingTool;
|
|
tool.currentPart = ...;
|
|
myDiagram.currentTool = tool;
|
|
tool.doActivate();
|
|
</pre></div></div>
|
|
|
|
<div><h2><a href="symbols/DragSelectingTool.html" class="linkConstructor">DragSelectingTool</a></h2><p>The DragSelectingTool lets the user select multiple parts within a rectangular area drawn by the user.<span class="nodetails" id="xDragSelectingTool"><a class="morelink" onclick="hst('DragSelectingTool')">More...</a></span> <span class="details" id="DragSelectingTool">
|
|
There is a temporary part, the #box,
|
|
that shows the current area encompassed between the mouse-down
|
|
point and the current mouse point.
|
|
The default drag selection box is a magenta rectangle.
|
|
You can change the #box to customize its appearance -- see its documentation for an example.
|
|
</span><div class="details" id="dDragSelectingTool"><p>
|
|
This tool is a standard mouse-move tool, the <a href="symbols/ToolManager.html#dragSelectingTool" class="linkProperty">ToolManager.dragSelectingTool</a>.
|
|
However this cannot start running unless there has been a motionless delay
|
|
after the mouse-down event of at least #delay milliseconds.
|
|
<p>
|
|
This tool does not utilize any <a href="symbols/Adornment.html" class="linkConstructor">Adornment</a>s or tool handles,
|
|
but it does temporarily add the #box part to the diagram.
|
|
This tool does not modify the model or conduct any transaction.
|
|
<p>
|
|
Selection occurs on a mouse-up when it calls #selectInRect
|
|
with the value of #computeBoxBounds.
|
|
Selectable parts are selected when their bounds fall entirely within the rectangle,
|
|
unless #isPartialInclusion is set to true.
|
|
<p class="boxread">
|
|
For customizing the DragSelectingTool, see <a href="../../intro/tools.html#DragSelectingTool">Introduction to the DragSelectingTool</a>.
|
|
<p>
|
|
If you implement your own drag-in-the-background-to-do-something tool, you may need to disable
|
|
this tool or insert your new tool in the <a href="symbols/ToolManager.html#mouseMoveTools" class="linkProperty">ToolManager.mouseMoveTools</a> list before this tool,
|
|
in order for your tool to run. There are examples of such tools defined in the extensions directory:
|
|
<a href="../../extensions/RealtimeDragSelecting.html">Realtime Drag Selecting Tool</a>,
|
|
<a href="../../extensions/DragCreating.html">Drag Creating Tool</a>, and
|
|
<a href="../../extensions/DragZooming.html">Drag Zooming Tool</a>.</div></div>
|
|
|
|
<div><h2><a href="symbols/ForceDirectedEdge.html" class="linkConstructor">ForceDirectedEdge</a></h2><p>This holds <a href="symbols/ForceDirectedLayout.html" class="linkConstructor">ForceDirectedLayout</a>-specific information about <a href="symbols/Link.html" class="linkConstructor">Link</a>s.<span class="nodetails" id="xForceDirectedEdge"><a class="morelink" onclick="hst('ForceDirectedEdge')">More...</a></span> <span class="details" id="ForceDirectedEdge">
|
|
</span><div class="details" id="dForceDirectedEdge"><p>
|
|
This class inherits from <a href="symbols/LayoutEdge.html" class="linkConstructor">LayoutEdge</a>.</div></div>
|
|
|
|
<div><h2><a href="symbols/ForceDirectedLayout.html" class="linkConstructor">ForceDirectedLayout</a></h2><p>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.<span class="nodetails" id="xForceDirectedLayout"><a class="morelink" onclick="hst('ForceDirectedLayout')">More...</a></span> <span class="details" id="ForceDirectedLayout">
|
|
</span><div class="details" id="dForceDirectedLayout"><p>
|
|
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.
|
|
Spring forces are only exerted between two different vertexes that are connected by an edge and are linear by distance.
|
|
<p>
|
|
The electrical forces on a vertex are the sum of the electrical charge times the electrical field at that location
|
|
(#electricalCharge, #electricalFieldX, #electricalFieldY)
|
|
and the electrical forces of all nearby vertexes divided by the square of the distance between them.
|
|
You can easily assign the electrical charge for all vertexes by assigning #defaultElectricalCharge.
|
|
By default there is no electrical field, so all forces are due to nearby charged vertexes.
|
|
For efficiency, #infinityDistance determines a cut-off distance between vertexes for which to consider any influence.
|
|
<p>
|
|
The gravitational forces on a vertex are the sum of the gravitational mass times the gravitational field at that location
|
|
(#gravitationalMass, #gravitationalFieldX, #gravitationalFieldY).
|
|
You can easily assign the gravitational mass for all vertexes by assigning #defaultGravitationalMass.
|
|
By default there is no gravitational field.
|
|
<p>
|
|
The spring forces on a vertex are only exerted by the edges connecting it with other vertexes.
|
|
The force along an edge is the stiffness of the spring times the difference of the distance between the vertexes and the nominal length of the spring
|
|
(#springStiffness, #springLength) divided by the distance between the vertexes.
|
|
When the distance is less than the nominal length, the force pushes the vertexes apart; when the distance is greater, the force pulls them together.
|
|
You can easily assign the spring length and stiffness for all edges by assigning #defaultSpringLength and #defaultSpringStiffness.
|
|
<p>
|
|
When the distance between two vertexes is less than one unit, this uses a random number generator to decide which direction the forces should go.
|
|
For layouts that start with all of the vertexes at the same location, this results in potentially dramatically different results.
|
|
Set #randomNumberGenerator to null in order to produce reproducible results given the same initial vertex locations.
|
|
<p>
|
|
The algorithm seeks a configuration of the bodies with locally minimal energy,
|
|
i.e. vertex positions such that the sum of the forces on each vertex is zero.
|
|
This is achieved by repeatedly computing the forces on each vertex, moving them, and repeating.
|
|
Computations stop when no vertex moves more than #epsilonDistance or when #maxIterations have happened.
|
|
<p>
|
|
The layout cannot guarantee that it provides optimal positioning of nodes.
|
|
Nodes will normally not overlap each other, but when there is a dense interconnectivity overlaps might not be avoidable.
|
|
<p class="boxrun">
|
|
If you want to experiment interactively with most of the properties, try the <a href="../../samples/fdLayout.html">Force Directed Layout</a> sample.
|
|
See samples that make use of ForceDirectedLayout in the <a href="../../samples/index.html#forcedirectedlayout">samples index</a>.
|
|
<p>
|
|
This layout makes use of a <a href="symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a> of
|
|
<a href="symbols/ForceDirectedVertex.html" class="linkConstructor">ForceDirectedVertex</a>es and <a href="symbols/ForceDirectedEdge.html" class="linkConstructor">ForceDirectedEdge</a>s that normally
|
|
correspond to the <a href="symbols/Node.html" class="linkConstructor">Node</a>s and <a href="symbols/Link.html" class="linkConstructor">Link</a>s of the <a href="symbols/Diagram.html" class="linkConstructor">Diagram</a>.</div></div>
|
|
|
|
<div><h2><a href="symbols/ForceDirectedVertex.html" class="linkConstructor">ForceDirectedVertex</a></h2><p>This holds <a href="symbols/ForceDirectedLayout.html" class="linkConstructor">ForceDirectedLayout</a>-specific information about <a href="symbols/Node.html" class="linkConstructor">Node</a>s.<span class="nodetails" id="xForceDirectedVertex"><a class="morelink" onclick="hst('ForceDirectedVertex')">More...</a></span> <span class="details" id="ForceDirectedVertex">
|
|
</span><div class="details" id="dForceDirectedVertex"><p>
|
|
This class inherits from <a href="symbols/LayoutVertex.html" class="linkConstructor">LayoutVertex</a>.</div></div>
|
|
|
|
<div><h2><a href="symbols/Geometry.html" class="linkConstructor">Geometry</a></h2><p>The Geometry class is used to define the "shape" of a <a href="symbols/Shape.html" class="linkConstructor">Shape</a>.<span class="nodetails" id="xGeometry"><a class="morelink" onclick="hst('Geometry')">More...</a></span> <span class="details" id="Geometry">
|
|
A Geometry can be simple straight lines, rectangles, or ellipses.
|
|
A Geometry can also be an arbitrarily complex path, consisting of a list of <a href="symbols/PathFigure.html" class="linkConstructor">PathFigure</a>s.
|
|
</span><div class="details" id="dGeometry"><p>
|
|
A Geometry must not be modified once it has been used by a <a href="symbols/Shape.html" class="linkConstructor">Shape</a>.
|
|
However, a Geometry may be shared by multiple Shapes.
|
|
<p>
|
|
It is commonplace to create Geometries using geometry path string syntax:
|
|
<a href="../../intro/geometry.html">Geometry Path Strings</a>.
|
|
However it is much more efficient to create Geometries programmatically.
|
|
One way to do that is illustrated by several of the samples that evaluate JavaScript such as:
|
|
<pre>
|
|
new go.Geometry()
|
|
.add(new go.PathFigure(p.x, p.y)
|
|
.add(new go.PathSegment(go.PathSegment.Arc, -sweep/2, sweep, 0, 0, radius+layerThickness, radius+layerThickness))
|
|
.add(new go.PathSegment(go.PathSegment.Line, q.x, q.y))
|
|
.add(new go.PathSegment(go.PathSegment.Arc, sweep/2, -sweep, 0, 0, radius, radius).close()));
|
|
</pre>
|
|
See samples that make use of Geometries in the <a href="../../samples/index.html#geometries">samples index</a>.</div></div>
|
|
|
|
<div><h2><a href="symbols/GraphLinksModel.html" class="linkConstructor">GraphLinksModel</a></h2><p>GraphLinksModels support links between nodes and grouping nodes and links into subgraphs.<span class="nodetails" id="xGraphLinksModel"><a class="morelink" onclick="hst('GraphLinksModel')">More...</a></span> <span class="details" id="GraphLinksModel">
|
|
GraphLinksModels hold node data and link data in separate arrays.
|
|
Node data is normally represented in a <a href="symbols/Diagram.html" class="linkConstructor">Diagram</a> by instances of <a href="symbols/Node.html" class="linkConstructor">Node</a>,
|
|
but they could be represented by simple <a href="symbols/Part.html" class="linkConstructor">Part</a>s or by <a href="symbols/Group.html" class="linkConstructor">Group</a>s.
|
|
Link data should be represented by instances of <a href="symbols/Link.html" class="linkConstructor">Link</a>.
|
|
</span><div class="details" id="dGraphLinksModel"><p>
|
|
Each link data object is assumed to have two values, one referring to the node that the
|
|
link is coming from and one that the link is going to.
|
|
The #linkFromKeyProperty property names the property on the link data whose value
|
|
is the key of the "from" node.
|
|
The #linkToKeyProperty property names the property on the link data whose value
|
|
is the key of the "to" node.
|
|
The default values for these properties are "from" and "to" respectively.
|
|
<p>
|
|
For example, one can define a graph consisting of two nodes with one link connecting them:
|
|
<pre class="javascript">
|
|
model.nodeDataArray = [
|
|
{ key: "Alpha" },
|
|
{ key: "Beta" }
|
|
];
|
|
model.linkDataArray = [
|
|
{ from: "Alpha", to: "Beta" }
|
|
];
|
|
</pre>
|
|
<p>
|
|
If you want to have subgraphs in your diagram, where a group node contains some number of nodes and links,
|
|
you need to declare that some node data actually represent groups,
|
|
and you need to provide a reference from a member node data to its containing group node data.
|
|
The #nodeIsGroupProperty property names the property on a node data that is true
|
|
if that node data represents a group.
|
|
The #nodeGroupKeyProperty property names the property on a node data whose value
|
|
is the key of the containing group's node data.
|
|
The default values for these properties are "isGroup" and "group" respectively.
|
|
<p>
|
|
For example, one can define a graph consisting of one group containing a subgraph of
|
|
two nodes connected by a link, with a second link from that group to a third node
|
|
that is not a member of that group:
|
|
<pre>
|
|
model.nodeDataArray = [
|
|
{ key: "Group1", isGroup: true},
|
|
{ key: "Alpha", group: "Group1" },
|
|
{ key: "Beta", group: "Group1" },
|
|
{ key: "Gamma" }
|
|
];
|
|
model.linkDataArray = [
|
|
{ from: "Alpha", to: "Beta" },
|
|
{ from: "Group1", to: "Gamma" }
|
|
];
|
|
</pre>
|
|
<p>
|
|
GraphLinksModels also support distinguishing the "port" element of a node to which
|
|
a link can connect, at either end of the link.
|
|
This identification is a string that names the "port" element in the node.
|
|
However, you need to set the #linkFromPortIdProperty and/or
|
|
#linkToPortIdProperty properties before the model is able to
|
|
get the "port id" information from the link data.
|
|
<p>
|
|
For example, one can define a graph consisting of a "subtraction" node and two inputs and one output.
|
|
The "subtraction" node has two distinct inputs called "subtrahend" and "minuend";
|
|
the output is called "difference".
|
|
<pre>
|
|
model.linkFromPortIdProperty = "fromPort"; // necessary to remember portIds
|
|
model.linkToPortIdProperty = "toPort";
|
|
model.nodeDataArray = [
|
|
{ key: 1, constant: 5 }, // a constant input node
|
|
{ key: 2, constant: 2 }, // another constant node
|
|
{ key: 3, operation: "subtract" },
|
|
{ key: 4, value: 3 } // the output node
|
|
];
|
|
model.linkDataArray = [
|
|
{ from: 1, to: 3, toPort: "subtrahend" },
|
|
{ from: 2, to: 3, toPort: "minuend" },
|
|
{ from: 3, to: 4, fromPort: "difference" }
|
|
];
|
|
</pre>
|
|
In this case links connected to node 3 (which is the subtraction operation)
|
|
are distinguished by port id.
|
|
The connections to the other nodes do not have any port identification,
|
|
presumably because there is only one port on those nodes, representing the node value.
|
|
<p>
|
|
Note that there is no requirement that the link data objects have any kind of unique identifier, unlike for node data.
|
|
There is no expectation that there be references to link data in the model, so there is no need for such an identifier.
|
|
When there are multiple links connecting two ports, the only way to distinguish the links in the model
|
|
is by reference to the particular link data object.
|
|
This is why there are two methods on the Diagram class for Nodes, <a href="symbols/Diagram.html#findNodeForKey" class="linkMethod">Diagram.findNodeForKey</a> and <a href="symbols/Diagram.html#findNodeForData" class="linkMethod">Diagram.findNodeForData</a>,
|
|
but there is only the one method for Links, <a href="symbols/Diagram.html#findLinkForData" class="linkMethod">Diagram.findLinkForData</a>.
|
|
<p>
|
|
However you may wish to have the model maintain string or number identifiers on the link data just as all models do for node data.
|
|
To get that behavior, so that you can call #findLinkDataForKey, you need to set #linkKeyProperty to be a non-empty string.
|
|
Just as with the assignment of node keys, you can customize the assignment of link keys by setting
|
|
#makeUniqueLinkKeyFunction to a function that returns a unique identifier.
|
|
<p>
|
|
This model does not support the modification of whether a node data object is a group.
|
|
<p>
|
|
This model cannot detect the modification of the #linkDataArray array
|
|
or the modification of any link data object.
|
|
If you want to add or remove link data from the #linkDataArray,
|
|
call the #addLinkData or #removeLinkData methods.
|
|
If you want to modify the node a link connects to, call the
|
|
#setFromKeyForLinkData and/or #setToKeyForLinkData methods.
|
|
If you want to change the membership of a node data in a group,
|
|
call the #setGroupKeyForNodeData method.</div></div>
|
|
|
|
<div><h2><a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a></h2><p>This is the abstract base class for all graphical objects.<span class="nodetails" id="xGraphObject"><a class="morelink" onclick="hst('GraphObject')">More...</a></span> <span class="details" id="GraphObject">
|
|
Classes inheriting from GraphObject include:
|
|
<a href="symbols/Shape.html" class="linkConstructor">Shape</a>, <a href="symbols/TextBlock.html" class="linkConstructor">TextBlock</a>, <a href="symbols/Picture.html" class="linkConstructor">Picture</a>, and <a href="symbols/Panel.html" class="linkConstructor">Panel</a>.
|
|
From the Panel class the <a href="symbols/Part.html" class="linkConstructor">Part</a> class is derived, from which the
|
|
<a href="symbols/Node.html" class="linkConstructor">Node</a> and <a href="symbols/Link.html" class="linkConstructor">Link</a> classes derive.
|
|
</span><div class="details" id="dGraphObject"><p>
|
|
It is very common to make use of the static function <a href="symbols/GraphObject.html#.make" class="linkStatic">GraphObject.make</a> in order to build up
|
|
a visual tree of GraphObjects. You can see many examples of this throughout the
|
|
Introduction, starting at <a href="../../intro/buildingObjects.html">Building Objects</a>,
|
|
and the Samples, starting with <a href="../../samples/minimal.html">Minimal Sample</a>.
|
|
<p>
|
|
Since GraphObject is an abstract class, programmers do not create GraphObjects themselves,
|
|
but this class defines many properties used by all kinds of GraphObjects.
|
|
<p>
|
|
The only visual properties on GraphObject are #background and #areaBackground.
|
|
However one can control whether the GraphObject is drawn at all by setting #visible,
|
|
or by setting #opacity to zero if you still want the GraphObject to occupy space.
|
|
Also, if you want to control whether any mouse or touch events "see" the GraphObject,
|
|
you can set #pickable to false.
|
|
<p>
|
|
For more information about specifying how things get drawn, see the properties on the
|
|
<a href="symbols/Shape.html" class="linkConstructor">Shape</a>, <a href="symbols/TextBlock.html" class="linkConstructor">TextBlock</a>, and <a href="symbols/Picture.html" class="linkConstructor">Picture</a> classes.
|
|
<h3>GraphObject Sizing</h3>
|
|
<p>
|
|
GraphObject defines most of the properties that cause objects to size themselves differently.
|
|
The most prominent ones include:
|
|
<ul>
|
|
<li>The #desiredSize, #minSize, and #maxSize properties are used to
|
|
explicitly set or limit the size of visual elements. #width and #height are
|
|
convenience properties that set the #desiredSize width and height, respectively.</li>
|
|
<li>The #angle and #scale properties are used to transform visual elements.</li>
|
|
<li>The #stretch property determines how a GraphObject will fill its visual space,
|
|
contextually granted to it by its containing <a href="symbols/Panel.html" class="linkConstructor">Panel</a>. Top-level (<a href="symbols/Part.html" class="linkConstructor">Part</a>)
|
|
GraphObjects are not affected by this property because they are always granted infinite space.</li>
|
|
</ul>
|
|
<p>
|
|
All GraphObjects in a Diagram are measured and then arranged by their containing <a href="symbols/Panel.html" class="linkConstructor">Panel</a>s in a tree-like fashion.
|
|
After measuring and arranging, a GraphObject will have valid values for the read-only
|
|
properties #naturalBounds, #measuredBounds, and #actualBounds.
|
|
<p>
|
|
<ul>
|
|
<li>The #naturalBounds of a GraphObject describe its local size,
|
|
without any transformations (#scale, #angle) affecting it.</li>
|
|
<li>The #measuredBounds of a GraphObject describe its size relative to its containing Panel.</li>
|
|
<li>The #actualBounds of a GraphObject describe its position and given size inside of its panel.
|
|
This size may be smaller than #measuredBounds, for instance if a GraphObject with a large #desiredSize
|
|
is placed in a <a href="symbols/Panel.html" class="linkConstructor">Panel</a> of a smaller #desiredSize. Smaller #actualBounds than #measuredBounds
|
|
typically means an object will be cropped.</li>
|
|
</ul>
|
|
<p class="boxread">
|
|
See <a href="../../intro/sizing.html">the Introduction page on sizing</a>
|
|
for usage information and examples.
|
|
<h3>GraphObject Size and Position within Panel</h3>
|
|
Several GraphObject properties guide the containing <a href="symbols/Panel.html" class="linkConstructor">Panel</a> for how to size and position the object within the panel.
|
|
<ul>
|
|
<li>The #alignment specifies where the object should be relative to some area of the panel.
|
|
For example, an alignment value of <a href="symbols/Spot.html#BottomRight" class="linkConstant">Spot.BottomRight</a> means that the GraphObject should be at the bottom-right corner of the panel.</li>
|
|
<li>The #alignmentFocus specifies precisely which point of the GraphObject should be aligned at the #alignment spot.</li>
|
|
<li>The #column and #row properties are only used by <a href="symbols/Panel.html#Table" class="linkConstant">Panel.Table</a> panels, to indicate where the GraphObject should be.</li>
|
|
<li>The #columnSpan and #rowSpan properties tell the <a href="symbols/Panel.html#Table" class="linkConstant">Panel.Table</a> panel how large the GraphObject should be.</li>
|
|
<li>The #isPanelMain property indicates to some kinds of <a href="symbols/Panel.html" class="linkConstructor">Panel</a>s that the GraphObject is the "primary" object that other panel children should be measured with or positioned in.</li>
|
|
<li>The #margin property tells the containing <a href="symbols/Panel.html" class="linkConstructor">Panel</a> how much extra space to put around this GraphObject.</li>
|
|
<li>The #position property is used to determine the relative position of GraphObjects when they are elements of a <a href="symbols/Panel.html#Position" class="linkConstant">Panel.Position</a> panel.</li>
|
|
</ul>
|
|
<p class="boxread">
|
|
See <a href="../../intro/panels.html">the Introduction page on Panels</a>
|
|
and <a href="../../intro/tablePanels.html">Table Panels</a> for an overview of the capabilities.
|
|
<h3>Top-level GraphObjects are Parts</h3>
|
|
<p>
|
|
A <a href="symbols/Part.html" class="linkConstructor">Part</a> is a derived class of GraphObject representing a top-level object.
|
|
All top-level GraphObjects must be Parts, and Node, Link, Group, and Adornment derive from Part.
|
|
The position of a Part determines the point of the Part's top-left corner in document coordinates.
|
|
See also <a href="symbols/Part.html#location" class="linkProperty">Part.location</a>, which supports an way to specify the position based on a different
|
|
spot of a different element within the Part.
|
|
<p>
|
|
There are several read-only properties that help navigate up the visual tree.
|
|
<ul>
|
|
<li>#panel returns the <a href="symbols/Panel.html" class="linkConstructor">Panel</a> that directly contains this GraphObject</li>
|
|
<li>#part returns the <a href="symbols/Part.html" class="linkConstructor">Part</a> that this GraphObject is in, perhaps via intervening Panels; this is frequently used in order to get to the model data, <a href="symbols/Panel.html#data" class="linkProperty">Panel.data</a></li>
|
|
<li>#layer returns the <a href="symbols/Layer.html" class="linkConstructor">Layer</a> that this GraphObject's Part is in</li>
|
|
<li>#diagram returns the <a href="symbols/Diagram.html" class="linkConstructor">Diagram</a> that this GraphObject's Part's Layer is in</li>
|
|
</ul>
|
|
<p class="boxrun">
|
|
See <a href="../../samples/visualTree.html">the Visual Tree sample</a>
|
|
for a diagram displaying the visual tree of a simple diagram.
|
|
<h3>User Interaction</h3>
|
|
<p>
|
|
GraphObjects have several properties enabling dynamic customizable interaction.
|
|
There are several definable functions that execute on input events: #mouseDragEnter,
|
|
#mouseDragLeave, #mouseDrop, #mouseEnter, #mouseHold,
|
|
#mouseHover, #mouseLeave, and #mouseOver.
|
|
For example, you could define mouse enter-and-leave event handlers to modify the appearance of a link
|
|
as the mouse passes over it:
|
|
<pre>
|
|
myDiagram.linkTemplate =
|
|
$(go.Link,
|
|
$(go.Shape,
|
|
{ strokeWidth: 2, stroke: "gray" }, // default color is "gray"
|
|
{ // here E is the InputEvent and OBJ is this Shape
|
|
mouseEnter: function(e, obj) { obj.strokeWidth = 4; obj.stroke = "dodgerblue"; },
|
|
mouseLeave: function(e, obj) { obj.strokeWidth = 2; obj.stroke = "gray"; }
|
|
}));
|
|
</pre>
|
|
<p>
|
|
There are #click, #doubleClick, and #contextClick functions
|
|
that execute when a user appropriately clicks the GraphObject.
|
|
These click functions are called with the <a href="symbols/InputEvent.html" class="linkConstructor">InputEvent</a> as the first argument
|
|
and this GraphObject as the second argument.
|
|
For example, you could define a click event handler on a Node that goes to another page:
|
|
<pre>
|
|
myDiagram.nodeTemplate =
|
|
$(go.Node, "Auto",
|
|
$(go.Shape, "RoundedRectangle",
|
|
new go.Binding("fill", "color")),
|
|
$(go.TextBlock,
|
|
{ name: "TB", margin: 3 },
|
|
new go.Binding("text", "key")),
|
|
{ // second arg will be this GraphObject, which in this case is the Node itself:
|
|
click: function(e, node) {
|
|
window.open("https://en.wikipedia.org/Wiki/" + node.data.key);
|
|
}
|
|
});
|
|
</pre>
|
|
<p>
|
|
Note: you may prefer defining <a href="symbols/DiagramEvent.html" class="linkConstructor">DiagramEvent</a> listeners on the <a href="symbols/Diagram.html" class="linkConstructor">Diagram</a>
|
|
rather than on individual GraphObjects. DiagramEvents also include more general events that
|
|
do not necessarily correspond to input events.
|
|
<p>
|
|
The properties #actionCancel, #actionDown, #actionMove,
|
|
and #actionUp define functions to execute when the GraphObject's #isActionable property
|
|
is set to true (default false). See the <a href="symbols/ActionTool.html" class="linkConstructor">ActionTool</a> for more detail.
|
|
<p class="boxread">
|
|
See <a href="../../intro/events.html">the Introduction page on Events</a> for a more general discussion.
|
|
<h3>GraphObjects as Ports</h3>
|
|
<p>
|
|
In GoJS, <a href="symbols/Link.html" class="linkConstructor">Link</a>s can only connect to elements within a <a href="symbols/Node.html" class="linkConstructor">Node</a>
|
|
that are specified as "ports", and by default the only port is the Node itself.
|
|
Setting the #portId of a GraphObject inside a Node allows that object to act as a port.
|
|
Note: the only kind of model that can save which port a link is connected with, i.e. portIds that are not an empty string,
|
|
is a <a href="symbols/GraphLinksModel.html" class="linkConstructor">GraphLinksModel</a> whose <a href="symbols/GraphLinksModel.html#linkFromPortIdProperty" class="linkProperty">GraphLinksModel.linkFromPortIdProperty</a> and
|
|
<a href="symbols/GraphLinksModel.html#linkToPortIdProperty" class="linkProperty">GraphLinksModel.linkToPortIdProperty</a> have been set to name properties on the link data objects.
|
|
<p>
|
|
GraphObjects have several properties that are only relevant when they are acting as ports.
|
|
These port-related properties are:
|
|
<ul>
|
|
<li>#portId, which must be set to a string that is unique within the <a href="symbols/Node.html" class="linkConstructor">Node</a>,
|
|
in order for this GraphObject to be treated as a "port", rather than the whole node</li>
|
|
<li>#fromSpot and #toSpot, where a link should connect with this port</li>
|
|
<li>#fromEndSegmentLength and #toEndSegmentLength, the length of the link segment adjacent to this port</li>
|
|
<li>#fromShortLength and #toShortLength, the distance the link should terminate before touching this port</li>
|
|
<li>#fromLinkable and #toLinkable, whether the user may draw links connecting with this port</li>
|
|
<li>#fromLinkableDuplicates and #toLinkableDuplicates, whether the user may draw multiple links between the same pair of ports</li>
|
|
<li>#fromLinkableSelfNode and #toLinkableSelfNode, whether the user may draw a link between ports on the same node</li>
|
|
<li>#fromMaxLinks and #toMaxLinks, to limit the number of links connecting with this port in a particular direction</li>
|
|
</ul>
|
|
<p class="boxread">
|
|
See <a href="../../intro/ports.html">the Introduction page on ports</a>
|
|
and <a href="../../intro/connectionPoints.html">link connection points</a>
|
|
for port usage information and examples.
|
|
<h3>GraphObjects as labels on a Link</h3>
|
|
<p>
|
|
GraphObjects can also be used as "labels" on a <a href="symbols/Link.html" class="linkConstructor">Link</a>.
|
|
In addition to the #alignmentFocus property, these properties direct a Link Panel
|
|
to position a "label" at a particular point along the route of the link, in a particular manner:
|
|
<ul>
|
|
<li>#segmentIndex, which segment the label should be on</li>
|
|
<li>#segmentFraction, how far along the segment the label should be</li>
|
|
<li>#segmentOffset, where the label should be positioned relative to the segment</li>
|
|
<li>#segmentOrientation, how the label should be rotated relative to the angle of the segment</li>
|
|
</ul>
|
|
<p class="boxread">
|
|
See <a href="../../intro/linkLabels.html">the Introduction page on link labels</a>
|
|
for examples of how to make use of labels on Links.
|
|
<h3>Interactive Behavior</h3>
|
|
<p>
|
|
There are several properties that specify fairly high-level interactive behavior:
|
|
<ul>
|
|
<li>#cursor, a CSS string specifying a cursor</li>
|
|
<li>#contextMenu, an <a href="symbols/Adornment.html" class="linkConstructor">Adornment</a></li>
|
|
<li>#toolTip, an <a href="symbols/Adornment.html" class="linkConstructor">Adornment</a></li>
|
|
</ul>
|
|
<p class="boxread">
|
|
For more information, please read <a href="../../intro/contextMenus.html">the Introduction page about Context Menus</a>
|
|
and <a href="../../intro/toolTips.html">the page about ToolTips</a>.
|
|
<p class="boxrun">
|
|
Also see <a href="../../samples/basic.html">the Basic sample</a>
|
|
for examples of how to show context menus and tooltips.</div></div>
|
|
|
|
<div><h2><a href="symbols/GridLayout.html" class="linkConstructor">GridLayout</a></h2><p>This simple layout places all of the Parts in a grid-like arrangement, ordered, spaced apart,
|
|
and wrapping as needed.<span class="nodetails" id="xGridLayout"><a class="morelink" onclick="hst('GridLayout')">More...</a></span> <span class="details" id="GridLayout"> It ignores any Links connecting the Nodes being laid out.
|
|
There are many samples that use GridLayout.
|
|
Every <a href="symbols/Palette.html" class="linkConstructor">Palette</a> uses a GridLayout by default.
|
|
<p class="box">
|
|
If you want to experiment interactively with most of the properties, try the <a href="../../samples/gLayout.html">Grid Layout</a> sample.
|
|
See samples that make use of GridLayout in the <a href="../../samples/index.html#gridlayout">samples index</a>.
|
|
</span><div class="details" id="dGridLayout"><p>
|
|
By default this layout will sort all of the Parts alphabetically
|
|
(comparing <a href="symbols/Part.html#text" class="linkProperty">Part.text</a> values, respecting case)
|
|
and position them left-to-right, separated by #spacing<code>.width</code>,
|
|
until they do not fit in the current row.
|
|
At that time it starts a new row, separated from the previous row by #spacing<code>.height</code>.
|
|
There is a uniform cell size equal to the maximum Part width (plus spacing width)
|
|
and the maximum part height (plus spacing height).
|
|
At least one part is placed in each row, even if the part by itself is wider than the wrapping width.
|
|
<p>
|
|
You can specify values for the #cellSize <code>width</code> and <code>height</code>.
|
|
If a part is wider than the cell size, it spans more than one cell in the row.
|
|
You can also specify a value for the #wrappingWidth,
|
|
which will be used instead of the diagram's viewport width, to control when each row is considered "full".
|
|
The value of <a href="symbols/Layout.html#isViewportSized" class="linkProperty">Layout.isViewportSized</a> will be true when
|
|
the value of #wrappingWidth is <code>NaN</code>.
|
|
This causes the layout to be performed again automatically as the viewport changes size.
|
|
<p>
|
|
You can also set #wrappingColumn to limit the number of items in each row.
|
|
Both the #wrappingWidth and the #wrappingColumn are respected when deciding when to wrap to the next row.
|
|
<p>
|
|
This layout is sufficiently simple that it does not use a <a href="symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a>.</div></div>
|
|
|
|
<div><h2><a href="symbols/Group.html" class="linkConstructor">Group</a></h2><p>A Group is a <a href="symbols/Node.html" class="linkConstructor">Node</a> that can contain a subgraph of <a href="symbols/Node.html" class="linkConstructor">Node</a>s and <a href="symbols/Link.html" class="linkConstructor">Link</a>s,
|
|
which are members of the group.<span class="nodetails" id="xGroup"><a class="morelink" onclick="hst('Group')">More...</a></span> <span class="details" id="Group">
|
|
<p class="box">
|
|
For more discussion, see <a href="../../intro/groups.html">Introduction to Groups</a>.
|
|
See samples that make use of Groups in the <a href="../../samples/index.html#groups">samples index</a>.
|
|
</span><div class="details" id="dGroup"><p>
|
|
Although you can create a Group and <a href="symbols/Diagram.html#add" class="linkMethod">Diagram.add</a> it to a Diagram, this does not update the Model.
|
|
It is more common to create a group by adding a node data object to the model
|
|
by calling <a href="symbols/Model.html#addNodeData" class="linkMethod">Model.addNodeData</a>. For example:
|
|
<pre>
|
|
myDiagram.startTransaction("make new group");
|
|
myDiagram.model.addNodeData({ key: "Omega", isGroup: true });
|
|
myDiagram.commitTransaction("make new group");
|
|
</pre>
|
|
<p>
|
|
This will cause a Group to be created (copying the template found in <a href="symbols/Diagram.html#groupTemplateMap" class="linkProperty">Diagram.groupTemplateMap</a>),
|
|
added to the Diagram in some <a href="symbols/Layer.html" class="linkConstructor">Layer</a> (based on <a href="symbols/Part.html#layerName" class="linkProperty">Part.layerName</a>), and bound to the group data
|
|
(resulting in <a href="symbols/Panel.html#data" class="linkProperty">Panel.data</a> referring to that group data object).
|
|
Note that the JavaScript object includes setting <code>isGroup</code> to true,
|
|
to indicate that the object represents a Group rather than a regular Node or simple Part.
|
|
<p>
|
|
The member Parts of a Group, which you can access as the #memberParts collection,
|
|
belong to the group but are not in the visual tree of the group.
|
|
All <a href="symbols/Part.html" class="linkConstructor">Part</a>s are directly in <a href="symbols/Layer.html" class="linkConstructor">Layer</a>s -- they cannot be inside a <a href="symbols/Panel.html" class="linkConstructor">Panel</a>.
|
|
This allows group member parts to be in layers different from the group's layer.
|
|
<p>
|
|
You can change the membership of a <a href="symbols/Node.html" class="linkConstructor">Node</a> or a simple <a href="symbols/Part.html" class="linkConstructor">Part</a> in a Group by setting
|
|
its <a href="symbols/Part.html#containingGroup" class="linkProperty">Part.containingGroup</a> property.
|
|
This is done automatically for you by the diagram if you initialize the <code>group</code> property on the node data
|
|
in the model to be the key of the containing group node data.
|
|
Thus you should do something like:
|
|
<pre class="javascript">
|
|
myDiagram.startTransaction("add new member");
|
|
myDiagram.model.addNodeData({ group: someexistinggroup.data.key, ... });
|
|
myDiagram.commitTransaction("add new member");
|
|
</pre>
|
|
<p>
|
|
where you would make sure the node data object included all of the properties you need.
|
|
You can also change the relationship dynamically by calling <a href="symbols/GraphLinksModel.html#setGroupKeyForNodeData" class="linkMethod">GraphLinksModel.setGroupKeyForNodeData</a>.
|
|
<p>
|
|
The membership of <a href="symbols/Link.html" class="linkConstructor">Link</a>s is computed automatically for you by the diagram based on the membership of
|
|
the connected <a href="symbols/Node.html" class="linkConstructor">Node</a>s.
|
|
For example, if the <a href="symbols/Link.html#fromNode" class="linkProperty">Link.fromNode</a> is a top-level node but the <a href="symbols/Link.html#toNode" class="linkProperty">Link.toNode</a> is a member of a group,
|
|
the link is a top-level link.
|
|
If the two connected nodes both belong to the same group, the link is a member of that group.
|
|
If the two connected nodes belong to different groups, the link belongs to the common container group, if there is any.
|
|
Note that if a link connects a member of a group with the group itself, the link is a member of that group.
|
|
<p>
|
|
All of the group-member relationships effectively form a tree structure.
|
|
These properties and methods are useful in navigating these relationships:
|
|
<ul>
|
|
<li><a href="symbols/Part.html#containingGroup" class="linkProperty">Part.containingGroup</a></li>
|
|
<li><a href="symbols/Part.html#isTopLevel" class="linkProperty">Part.isTopLevel</a></li>
|
|
<li><a href="symbols/Part.html#findTopLevelPart" class="linkMethod">Part.findTopLevelPart</a></li>
|
|
<li><a href="symbols/Part.html#findSubGraphLevel" class="linkMethod">Part.findSubGraphLevel</a></li>
|
|
<li><a href="symbols/Part.html#findCommonContainingGroup" class="linkMethod">Part.findCommonContainingGroup</a></li>
|
|
<li>#memberParts</li>
|
|
<li>#findSubGraphParts</li>
|
|
<li>#findExternalLinksConnected</li>
|
|
<li>#findExternalNodesConnected</li>
|
|
</ul>
|
|
<p>
|
|
As the membership of a group changes, you may want to update the appearance of the group.
|
|
You can set the #memberAdded and #memberRemoved properties to be functions that are called.
|
|
These functions must not modify any membership relationships -- these function properties just exist to update the appearance of the Group.
|
|
<p>
|
|
You can control whether certain Nodes are added to a Group by <a href="symbols/CommandHandler.html#groupSelection" class="linkMethod">CommandHandler.groupSelection</a> or
|
|
#addMembers or <a href="symbols/CommandHandler.html#addTopLevelParts" class="linkMethod">CommandHandler.addTopLevelParts</a> by affecting the result of <a href="symbols/CommandHandler.html#isValidMember" class="linkMethod">CommandHandler.isValidMember</a>,
|
|
which is responsible for deciding whether it is OK to add a Node to a Group or to remove a Node from a Group to be a top-level node.
|
|
You can override that predicate on CommandHandler, but it is easier to set the #memberValidation or
|
|
<a href="symbols/CommandHandler.html#memberValidation" class="linkProperty">CommandHandler.memberValidation</a> functional property.
|
|
<p class="box">
|
|
For a more general discussion of validation, see <a href="../../intro/validation.html">Introduction to Validation</a>.
|
|
<p>
|
|
The area occupied by the subgraph is represented in the group's visual tree by a <a href="symbols/Placeholder.html" class="linkConstructor">Placeholder</a>.
|
|
As the group #placeholder grows and shrinks based on the sizes and positions of the member nodes and links,
|
|
the group will grow and shrink accordingly.
|
|
The placeholder is always the <a href="symbols/Part.html#locationObject" class="linkProperty">Part.locationObject</a>,
|
|
although you may specify any <a href="symbols/Spot.html" class="linkConstructor">Spot</a> as the <a href="symbols/Part.html#locationSpot" class="linkProperty">Part.locationSpot</a>.
|
|
A Group need not have a placeholder, but it may have at most one.
|
|
<p>
|
|
A group has its own #layout property that is used to position the member nodes and route the member links.
|
|
<p>
|
|
The Group class also supports the notion of expanding and collapsing the subgraph,
|
|
causing the member nodes and links to be shown or hidden.
|
|
Principally this is a matter of setting #isSubGraphExpanded.
|
|
Changes to this property will result in calls to #collapseSubGraph or #expandSubGraph, as appropriate.
|
|
<p>
|
|
If you want to change the appearance of the group you can do so in a function that you assign to
|
|
the #subGraphExpandedChanged property.
|
|
This function must not modify any member relationships or expand or collapse any groups -- the functional property just exists
|
|
to update the appearance of the Group.
|
|
<p class="box">
|
|
For more discussion and examples, see <a href="../../intro/subgraphs.html">SubGraphs</a>.
|
|
<p>
|
|
If you want the user to be able to create a Group out of the currently
|
|
selected Parts using the <a href="symbols/CommandHandler.html#groupSelection" class="linkMethod">CommandHandler.groupSelection</a> command,
|
|
you need to first set the <a href="symbols/CommandHandler.html#archetypeGroupData" class="linkProperty">CommandHandler.archetypeGroupData</a> property
|
|
to a data object with <code>isGroup</code> set to true.
|
|
If you want the user to be able to ungroup a Group,
|
|
using the <a href="symbols/CommandHandler.html#ungroupSelection" class="linkMethod">CommandHandler.ungroupSelection</a> command,
|
|
you need to set #ungroupable to true.
|
|
<p class="box">
|
|
For more discussion and examples, see <a href="../../intro/groups.html">Groups</a>,
|
|
<a href="../../intro/subgraphs.html">SubGraphs</a>, and
|
|
<a href="../../intro/sizedGroups.html">Sized Groups</a>.
|
|
<p>
|
|
Only Groups that are in Diagrams can have member Parts or connections via Links.
|
|
Templates should not be connected with Links, be labels of Links, be members of Groups, have any member Parts, or have any Adornments.</div></div>
|
|
|
|
<div><h2><a href="symbols/HTMLInfo.html" class="linkConstructor">HTMLInfo</a></h2><p>HTMLInfo is used to show and hide custom HTML page elements, such as a context menu, tooltip, or text editor made of HTML.<span class="nodetails" id="xHTMLInfo"><a class="morelink" onclick="hst('HTMLInfo')">More...</a></span> <span class="details" id="HTMLInfo">
|
|
</span><div class="details" id="dHTMLInfo"><p>
|
|
Properties that can be set to an HTMLInfo include:
|
|
<ul>
|
|
<li> <a href="symbols/TextEditingTool.html#defaultTextEditor" class="linkProperty">TextEditingTool.defaultTextEditor</a>
|
|
<li> <a href="symbols/TextBlock.html#textEditor" class="linkProperty">TextBlock.textEditor</a>
|
|
<li> <a href="symbols/GraphObject.html#contextMenu" class="linkProperty">GraphObject.contextMenu</a>
|
|
<li> <a href="symbols/Diagram.html#contextMenu" class="linkProperty">Diagram.contextMenu</a>
|
|
<li> <a href="symbols/GraphObject.html#toolTip" class="linkProperty">GraphObject.toolTip</a>
|
|
<li> <a href="symbols/Diagram.html#toolTip" class="linkProperty">Diagram.toolTip</a>
|
|
</ul>
|
|
<p>
|
|
When a context menu is set to an instance of HTMLInfo,
|
|
<a href="symbols/ContextMenuTool.html#showContextMenu" class="linkMethod">ContextMenuTool.showContextMenu</a> and <a href="symbols/ContextMenuTool.html#hideContextMenu" class="linkMethod">ContextMenuTool.hideContextMenu</a>
|
|
call #show and #hide respectively. You may define #mainElement
|
|
instead of #hide in order to automatically use a default hide method.
|
|
<p>
|
|
When a tooltip is set to an instance of HTMLInfo,
|
|
<a href="symbols/ToolManager.html#showToolTip" class="linkMethod">ToolManager.showToolTip</a> and <a href="symbols/ToolManager.html#hideToolTip" class="linkMethod">ToolManager.hideToolTip</a>
|
|
call #show and #hide respectively.
|
|
<p>
|
|
When a text editor is set to an instance of HTMLInfo,
|
|
<a href="symbols/TextEditingTool.html#doActivate" class="linkMethod">TextEditingTool.doActivate</a> calls #show and <a href="symbols/TextEditingTool.html#doDeactivate" class="linkMethod">TextEditingTool.doDeactivate</a> calls #hide.
|
|
<p>
|
|
For HTMLInfo to work, you must define #show
|
|
and either #hide or #mainElement.
|
|
Typical usage will also stop the <a href="symbols/ContextMenuTool.html" class="linkConstructor">ContextMenuTool</a> once the desired context action occurs,
|
|
typically by calling <code>diagram.currentTool.stopTool();</code>.
|
|
<p>
|
|
Example usage of HTMLInfo can be found in the
|
|
<a href="../../samples/customContextMenu.html">Custom Context Menu</a> and
|
|
<a href="../../samples/htmlLightBoxContextMenu.html">HTML LightBox Context Menu</a> samples, the
|
|
<a href="../../samples/customTextEditingTool.html">Custom TextEditingTool sample</a>, and the
|
|
<a href="../../extensions/textEditor.html">Text Editor implementation extension</a>.
|
|
<p>
|
|
Here is the outline for typical usage of HTMLInfo as a context menu:
|
|
<pre class="javascript">
|
|
// Assign an HTMLInfo to the Diagram:
|
|
myDiagram.contextMenu = $(go.HTMLInfo, {
|
|
show: showContextMenu,
|
|
hide: hideContextMenu
|
|
});
|
|
|
|
function showContextMenu(obj, diagram, tool) {
|
|
// Show the context menu HTML element:
|
|
SomeDOMElement.style.display = "block";
|
|
|
|
// Also show relevant buttons given the current state
|
|
// and the GraphObject obj; if null, the context menu is for the whole Diagram
|
|
}
|
|
|
|
function hideContextMenu() {
|
|
SomeDOMElement.style.display = "none";
|
|
}
|
|
|
|
function buttonClick() {
|
|
// do some action when a context menu button is clicked
|
|
|
|
// then:
|
|
myDiagram.currentTool.stopTool();
|
|
}
|
|
</pre>
|
|
<p>
|
|
By default, <a href="symbols/TextEditingTool.html#defaultTextEditor" class="linkProperty">TextEditingTool.defaultTextEditor</a> is an instance of HTMLInfo.
|
|
You can see its default implementation details <a href="../../extensions/textEditor.html">here</a>.</div></div>
|
|
|
|
<div><h2><a href="symbols/InputEvent.html" class="linkConstructor">InputEvent</a></h2><p>An InputEvent represents a mouse or keyboard or touch event.<span class="nodetails" id="xInputEvent"><a class="morelink" onclick="hst('InputEvent')">More...</a></span> <span class="details" id="InputEvent">
|
|
The principal properties hold information about a particular input event.
|
|
These properties include the #documentPoint at which a mouse event
|
|
occurred in document coordinates,
|
|
the corresponding point in view/element coordinates, #viewPoint,
|
|
the #key for keyboard events,
|
|
and the #modifiers and #button at the time.
|
|
Additional descriptive properties include #clickCount, #delta,
|
|
#timestamp, and the source event #event (if available).
|
|
</span><div class="details" id="dInputEvent"><p>
|
|
Many of its properties are provided for convenient access to the state of the input event,
|
|
such as asking whether the #control key was held down at the time,
|
|
or the #targetObject (a <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a>) that the mouse was over .
|
|
<p>
|
|
When real events fire on the Diagram, InputEvents are created automatically set update the value of <a href="symbols/Diagram.html#lastInput" class="linkProperty">Diagram.lastInput</a>.
|
|
These events set the value of #event with the backing browser-defined Event,
|
|
which may be a MouseEvent, KeyboardEvent, PointerEvent, TouchEvent, and so on.
|
|
<p>
|
|
InputEvents backed by MouseEvents set both #button, the button that caused the action,
|
|
and #buttons, the set of buttons currently pressed after the action has happened.
|
|
By default a user-created InputEvent sets #button and #buttons as if the event was a left-click.
|
|
<p>
|
|
You can create InputEvents and set the value of <a href="symbols/Diagram.html#lastInput" class="linkProperty">Diagram.lastInput</a> in order to simulate user actions in tools.
|
|
This can be useful for testing. See the <a href="../../extensions/Robot.html">Robot extension sample</a> for
|
|
an example of creating InputEvents to simulate user input.</div></div>
|
|
|
|
<div><h2><a href="symbols/Iterable.html" class="linkConstructor">Iterable</a></h2><p>This interface is implemented by the <a href="symbols/List.html" class="linkConstructor">List</a>, <a href="symbols/Set.html" class="linkConstructor">Set</a>, and <a href="symbols/Map.html" class="linkConstructor">Map</a>
|
|
classes; it provides the #iterator read-only property that returns an <a href="symbols/Iterator.html" class="linkConstructor">Iterator</a>.<span class="nodetails" id="xIterable"><a class="morelink" onclick="hst('Iterable')">More...</a></span> <span class="details" id="Iterable">
|
|
</span><div class="details" id="dIterable"><p>
|
|
Typical usage is:
|
|
<pre>
|
|
var it = anIterableCollection.iterator;
|
|
while (it.next()) {
|
|
var item = it.value;
|
|
}
|
|
</pre></div></div>
|
|
|
|
<div><h2><a href="symbols/Iterator.html" class="linkConstructor">Iterator</a></h2><p>This interface defines properties and methods for iterating over a collection;
|
|
it provides the #next predicate and the #value read-only property.<span class="nodetails" id="xIterator"><a class="morelink" onclick="hst('Iterator')">More...</a></span> <span class="details" id="Iterator">
|
|
Some Iterators also provide <code>key</code> property values along with each <code>value</code>.
|
|
</span><div class="details" id="dIterator"><p>
|
|
Typical usage is:
|
|
<pre>
|
|
var it = anIterableCollection.iterator;
|
|
while (it.next()) {
|
|
var item = it.value;
|
|
}
|
|
</pre>
|
|
<p>
|
|
Many iterators will signal an error if #next is called
|
|
after the underlying collection has been modified.
|
|
<p>
|
|
To avoid confusion when dealing with <a href="symbols/Iterable.html" class="linkConstructor">Iterable</a>s,
|
|
iterators implement the <a href="symbols/Iterable.html#iterator" class="linkProperty">Iterable.iterator</a> property
|
|
by just returning themselves.</div></div>
|
|
|
|
<div><h2><a href="symbols/Layer.html" class="linkConstructor">Layer</a></h2><p>Layers are how named collections of <a href="symbols/Part.html" class="linkConstructor">Part</a>s are drawn in front or behind other collections of Parts in a <a href="symbols/Diagram.html" class="linkConstructor">Diagram</a>.<span class="nodetails" id="xLayer"><a class="morelink" onclick="hst('Layer')">More...</a></span> <span class="details" id="Layer">
|
|
Layers can only contain <a href="symbols/Part.html" class="linkConstructor">Part</a>s, such as <a href="symbols/Node.html" class="linkConstructor">Node</a>s and <a href="symbols/Link.html" class="linkConstructor">Link</a>s. They cannot hold <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a>s directly.
|
|
</span><div class="details" id="dLayer"><p>
|
|
You put a Part into a Layer by assigning <a href="symbols/Part.html#layerName" class="linkProperty">Part.layerName</a> with the name of the Layer.
|
|
You can use data binding to initialize and remember a Part's layer's name.
|
|
You can change a Part's layer by modifying its <a href="symbols/Part.html#layerName" class="linkProperty">Part.layerName</a>, which changes its <a href="symbols/Part.html#layer" class="linkProperty">Part.layer</a>.
|
|
<p>
|
|
Each Diagram starts off with the following list of Layers:
|
|
"Grid", "Background", "" (the default layer), "Foreground", "Adornment", "Tool".
|
|
Parts are normally put in the default layer.
|
|
The "Grid", "Adornment", and "Tool" layers are considered #isTemporary.
|
|
Changes to objects in temporary layers are not recorded by the <a href="symbols/UndoManager.html" class="linkConstructor">UndoManager</a>.
|
|
Parts in temporary layers are not selected and are not considered to be part of the document.
|
|
The "Grid" layer is the furthest back; it also contains "temporary" parts that cannot be selected.
|
|
Furthermore the "Grid" layer has #pickable set to false so that mouse or touch events
|
|
and calls to the "find..." methods do not even consider any parts in that layer.
|
|
<p>
|
|
Layers have many properties that control what actions users are permitted to perform involving the parts in the layer.
|
|
These properties are very much like the similarly named properties on <a href="symbols/Diagram.html" class="linkConstructor">Diagram</a>.
|
|
<h3>Z-ordering</h3>
|
|
<p>
|
|
Layers are drawn and presented in order.
|
|
You can add your own layers by calling <a href="symbols/Diagram.html#addLayerBefore" class="linkMethod">Diagram.addLayerBefore</a> or <a href="symbols/Diagram.html#addLayerAfter" class="linkMethod">Diagram.addLayerAfter</a>
|
|
to insert a new layer at a particular place in the Z-order, or to re-order existing layers.
|
|
Use <a href="symbols/Diagram.html#findLayer" class="linkMethod">Diagram.findLayer</a> to get the Layer with a particular name.
|
|
<a href="symbols/Part.html" class="linkConstructor">Part</a>s can be individually z-ordered within a layer by setting <a href="symbols/Part.html#zOrder" class="linkProperty">Part.zOrder</a>.</div></div>
|
|
|
|
<div><h2><a href="symbols/LayeredDigraphEdge.html" class="linkConstructor">LayeredDigraphEdge</a></h2><p>This holds <a href="symbols/LayeredDigraphLayout.html" class="linkConstructor">LayeredDigraphLayout</a>-specific information about <a href="symbols/Link.html" class="linkConstructor">Link</a>s.<span class="nodetails" id="xLayeredDigraphEdge"><a class="morelink" onclick="hst('LayeredDigraphEdge')">More...</a></span> <span class="details" id="LayeredDigraphEdge">
|
|
</span><div class="details" id="dLayeredDigraphEdge"><p>
|
|
This class inherits from <a href="symbols/LayoutEdge.html" class="linkConstructor">LayoutEdge</a>.</div></div>
|
|
|
|
<div><h2><a href="symbols/LayeredDigraphLayout.html" class="linkConstructor">LayeredDigraphLayout</a></h2><p>This arranges nodes of directed graphs into layers (rows or columns).<span class="nodetails" id="xLayeredDigraphLayout"><a class="morelink" onclick="hst('LayeredDigraphLayout')">More...</a></span> <span class="details" id="LayeredDigraphLayout">
|
|
There are many samples that use LayeredDigraphLayout.
|
|
<p class="boxrun">
|
|
If you want to experiment interactively with most of the properties, try the <a href="../../samples/ldLayout.html">Layered Digraph Layout</a> sample.
|
|
See samples that make use of LayeredDigraphLayout in the <a href="../../samples/index.html#layereddigraphlayout">samples index</a>.
|
|
</span><div class="details" id="dLayeredDigraphLayout"><p>
|
|
The #layerSpacing property controls the distance between layers.
|
|
The #columnSpacing property controls the breadth of each "column" --
|
|
this affects the distance between nodes within a layer, although the exact distance also depends on the breadth of each node.
|
|
The #layeringOption property determines whether nodes without links coming in or without links going out are
|
|
lined up at the edge of the graph, or whether they are positioned close to their connected nodes.
|
|
<p>
|
|
By default the layout will route the links in a manner that is consistent with the #direction.
|
|
So, for example, if the #direction is 90 degrees (i.e. downward), the links are expected to go from the top towards the bottom.
|
|
That means the links should come out from the bottom of the ports and should go into the top of the ports.
|
|
Basically the layout will set <a href="symbols/Link.html#fromSpot" class="linkProperty">Link.fromSpot</a> to <code>Spot.Bottom</code> and <a href="symbols/Link.html#toSpot" class="linkProperty">Link.toSpot</a> to <code>Spot.Top</code>.
|
|
<p>
|
|
If you want to the links to use the spots that are given by the ports or by the links themselves, you will need to set
|
|
#setsPortSpots to false to prevent this layout from setting the spots on the links.
|
|
For example, if each node only has one port that is the whole node, and if you want the links to be spread out along the sides
|
|
of the nodes, then you should set #setsPortSpots to false and set the node's <a href="symbols/GraphObject.html#fromSpot" class="linkProperty">GraphObject.fromSpot</a> to
|
|
<code>Spot.BottomSide</code> and <a href="symbols/GraphObject.html#toSpot" class="linkProperty">GraphObject.toSpot</a> to <code>Spot.TopSide</code>.
|
|
<p>
|
|
This layout handles links that form cycles better than <a href="symbols/TreeLayout.html" class="linkConstructor">TreeLayout</a> does.
|
|
The normal routing behavior for "backwards" links is to route them "around" the source node and "around" the destination node,
|
|
so that all links come in one side and go out the other side.
|
|
However if you want "backwards" links to go more directly between nodes, set #setsPortSpots to false and
|
|
the node's <a href="symbols/GraphObject.html#fromSpot" class="linkProperty">GraphObject.fromSpot</a> and <a href="symbols/GraphObject.html#toSpot" class="linkProperty">GraphObject.toSpot</a> both to <code>Spot.TopBottomSides</code>.
|
|
(Of course if the #direction is zero or 180, you'll want to use <code>Spot.LeftRightSides</code>.
|
|
<p>
|
|
If the diagram is structured in a tree-like fashion,
|
|
it may be better to use <a href="symbols/TreeLayout.html" class="linkConstructor">TreeLayout</a>,
|
|
which has more options specific to trees.
|
|
<a href="symbols/TreeLayout.html" class="linkConstructor">TreeLayout</a> is much faster than LayeredDigraphLayout,
|
|
and can handle a limited number of links that would prevent the
|
|
graph structure from being a true tree (i.e. some nodes having multiple parents).
|
|
<p>
|
|
This layout makes use of a <a href="symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a> of
|
|
<a href="symbols/LayeredDigraphVertex.html" class="linkConstructor">LayeredDigraphVertex</a>es and <a href="symbols/LayeredDigraphEdge.html" class="linkConstructor">LayeredDigraphEdge</a>s that normally
|
|
correspond to the <a href="symbols/Node.html" class="linkConstructor">Node</a>s and <a href="symbols/Link.html" class="linkConstructor">Link</a>s of the <a href="symbols/Diagram.html" class="linkConstructor">Diagram</a>.
|
|
<p>
|
|
The layout algorithm consists of four-major steps: Cycle Removal,
|
|
Layer Assignment, Crossing Reduction, and Straightening and Packing.
|
|
The layout cannot guarantee that it provides optimal positioning of nodes or routing of links.</div></div>
|
|
|
|
<div><h2><a href="symbols/LayeredDigraphVertex.html" class="linkConstructor">LayeredDigraphVertex</a></h2><p>This holds <a href="symbols/LayeredDigraphLayout.html" class="linkConstructor">LayeredDigraphLayout</a>-specific information about <a href="symbols/Node.html" class="linkConstructor">Node</a>s.<span class="nodetails" id="xLayeredDigraphVertex"><a class="morelink" onclick="hst('LayeredDigraphVertex')">More...</a></span> <span class="details" id="LayeredDigraphVertex">
|
|
</span><div class="details" id="dLayeredDigraphVertex"><p>
|
|
This class inherits from <a href="symbols/LayoutVertex.html" class="linkConstructor">LayoutVertex</a>.</div></div>
|
|
|
|
<div><h2><a href="symbols/Layout.html" class="linkConstructor">Layout</a></h2><p>This is the base class for all of the predefined diagram layout implementations.<span class="nodetails" id="xLayout"><a class="morelink" onclick="hst('Layout')">More...</a></span> <span class="details" id="Layout">
|
|
They only arrange <a href="symbols/Part.html" class="linkConstructor">Part</a>s (primarily <a href="symbols/Node.html" class="linkConstructor">Node</a>s and <a href="symbols/Link.html" class="linkConstructor">Link</a>s) in a <a href="symbols/Diagram.html" class="linkConstructor">Diagram</a>,
|
|
not to <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a>s in <a href="symbols/Panel.html" class="linkConstructor">Panel</a>s (i.e. panel layout).
|
|
</span><div class="details" id="dLayout"><p>
|
|
The layout classes include <a href="symbols/TreeLayout.html" class="linkConstructor">TreeLayout</a>, <a href="symbols/ForceDirectedLayout.html" class="linkConstructor">ForceDirectedLayout</a>,
|
|
<a href="symbols/LayeredDigraphLayout.html" class="linkConstructor">LayeredDigraphLayout</a>, <a href="symbols/CircularLayout.html" class="linkConstructor">CircularLayout</a>, and <a href="symbols/GridLayout.html" class="linkConstructor">GridLayout</a>.
|
|
This base class is not abstract -- in fact an instance of this base class is the default
|
|
value for <a href="symbols/Diagram.html#layout" class="linkProperty">Diagram.layout</a> and for <a href="symbols/Group.html#layout" class="linkProperty">Group.layout</a>.
|
|
<p>
|
|
An instance of a Layout class will be the value of <a href="symbols/Diagram.html#layout" class="linkProperty">Diagram.layout</a>.
|
|
That layout positions the graph of top-level nodes and links.
|
|
Nodes and links that belong to a <a href="symbols/Group.html" class="linkConstructor">Group</a> are laid out by that group's <a href="symbols/Group.html#layout" class="linkProperty">Group.layout</a>.
|
|
The Diagram will automatically perform all nested group layouts before laying out the whole diagram.
|
|
<p>
|
|
If you have position information for all of the nodes when you load a model,
|
|
you will typically have data bound the <a href="symbols/Part.html#location" class="linkProperty">Part.location</a> to some property on your node data.
|
|
In order to avoid an initial layout causing those saved node positions to be discarded,
|
|
you can either not set the <a href="symbols/Diagram.html#layout" class="linkProperty">Diagram.layout</a> to a predefined layout or you can
|
|
set #isInitial to false.
|
|
<p>
|
|
Because performing layouts can be expensive in space and time, automatic layouts
|
|
are performed only on "invalid" layouts, and only well after a layout has been invalidated.
|
|
This state is held by the #isValidLayout property.
|
|
Many standard operations, such as adding or removing nodes or links, will cause
|
|
the layout that is responsible for positioning those nodes or routing those links
|
|
to be invalidated.
|
|
Such invalidation is performed by calling #invalidateLayout,
|
|
which not only clears the #isValidLayout state but also requests that the diagram
|
|
do an automatic layout soon.
|
|
You can avoid such invalidations by setting #isOngoing to false.
|
|
<p>
|
|
Layouts will ignore parts that have <a href="symbols/Part.html#isLayoutPositioned" class="linkProperty">Part.isLayoutPositioned</a> set to false
|
|
or parts that are not <a href="symbols/GraphObject.html#visible" class="linkProperty">GraphObject.visible</a>.
|
|
Layouts will also ignore parts that are in layers that are <a href="symbols/Layer.html#isTemporary" class="linkProperty">Layer.isTemporary</a>.
|
|
<p>
|
|
Various operations on <a href="symbols/Part.html" class="linkConstructor">Part</a>s will cause the responsible Layout to be invalidated.
|
|
This includes adding or removing parts, changing their visibility, and changing their size.
|
|
You can disable such automatic layout invalidations by setting <a href="symbols/Part.html#layoutConditions" class="linkProperty">Part.layoutConditions</a>
|
|
to the combination of Part flags named "Layout..." that you want.
|
|
<p>
|
|
But operations on parts are not the only way in which layouts become invalidated.
|
|
Setting most properties on the layouts, thereby changing their behavior, will invalidate that layout.
|
|
Replacing the <a href="symbols/Diagram.html#layout" class="linkProperty">Diagram.layout</a> or <a href="symbols/Group.html#layout" class="linkProperty">Group.layout</a> will automatically invalidate the new layout.
|
|
If #isViewportSized is true, when a diagram's <a href="symbols/Diagram.html#viewportBounds" class="linkProperty">Diagram.viewportBounds</a> changes size,
|
|
the <a href="symbols/Diagram.html#layout" class="linkProperty">Diagram.layout</a> is invalidated.
|
|
(This is normally only true for <a href="symbols/GridLayout.html" class="linkConstructor">GridLayout</a>s when its <a href="symbols/GridLayout.html#wrappingWidth" class="linkProperty">GridLayout.wrappingWidth</a> is <code>NaN</code>.
|
|
Most layouts do not care about the size of the viewport.)
|
|
<p>
|
|
You can also explicitly call <a href="symbols/Diagram.html#layoutDiagram" class="linkMethod">Diagram.layoutDiagram</a>, which can invalidate all layouts and
|
|
then perform them all.
|
|
But we recommend that you avoid doing so, to allow the normal updating process perform layouts as needed.
|
|
<p>
|
|
If an automatic layout is the first time that a layout has been performed for the model,
|
|
the diagram first raises the <a href="symbols/DiagramEvent.html" class="linkConstructor">DiagramEvent</a> named "InitialLayoutCompleted".
|
|
Whenever a Diagram finishes an automatic layout, it raises the DiagramEvent named "LayoutCompleted".
|
|
<p>
|
|
It is also possible to call #doLayout explicitly, but this is uncommon and only used with
|
|
instances of Layout that are not the <a href="symbols/Diagram.html#layout" class="linkProperty">Diagram.layout</a> or <a href="symbols/Group.html#layout" class="linkProperty">Group.layout</a>.
|
|
It should only be needed when you want to layout a collection of nodes and links that is not
|
|
the normal graph of top-level parts of a Diagram or a subgraph of a Group.
|
|
<p>
|
|
More complicated layouts make use of a separate <a href="symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a>, consisting of <a href="symbols/LayoutVertex.html" class="linkConstructor">LayoutVertex</a>es and <a href="symbols/LayoutEdge.html" class="linkConstructor">LayoutEdge</a>s,
|
|
that normally holds a graph that is isomorphic to the graph consisting of <a href="symbols/Node.html" class="linkConstructor">Node</a>s and <a href="symbols/Link.html" class="linkConstructor">Link</a>s in the <a href="symbols/Diagram.html" class="linkConstructor">Diagram</a> or <a href="symbols/Group.html" class="linkConstructor">Group</a>.
|
|
The implementation of #doLayout will call #makeNetwork and remember the result as the #network.
|
|
#makeNetwork will call #createNetwork and initialize it by adding new instances of LayoutVertexes and LayoutEdges
|
|
corresponding to the given collection of Nodes and Links.
|
|
<p>
|
|
When #doLayout is finished with its work it will call #updateParts, which will call #commitLayout
|
|
to set new node locations and route links. It then normally discards the #network.
|
|
<p>
|
|
The LayoutVertex and LayoutEdge instances allow the layout to work with more information about each Node and Link without
|
|
actually modifying those Nodes and Links until #commitLayout is called to actually set the Node locations and route the Links.
|
|
The use of a LayoutNetwork also allows the Layout to work with a graph that is not isomorphic to the given collection of Nodes and Links.
|
|
This is useful when needing to use dummy vertexes and/or edges to achieve certain layout behaviors,
|
|
or when one wants to ignore certain vertexes or edges, without actually modifying or adding or removing the diagram's nodes or links.
|
|
<p>
|
|
An instance of this base class provides a rudimentary default layout that will position
|
|
all of the parts that have no position (i.e. the <a href="symbols/Part.html#location" class="linkProperty">Part.location</a> is (NaN,NaN).
|
|
Parts that already have a position are ignored.
|
|
This primitive layout class does not make use of a <a href="symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a> because
|
|
it ignores all links.
|
|
<p>
|
|
To implement your own custom layouts, you can inherit from either this class or
|
|
from one of the other predefined layout classes.
|
|
If you inherit from this base class, you will want to override the #doLayout method.
|
|
You can call the <a href="symbols/Part.html#move" class="linkMethod">Part.move</a> method to re-position a part, including whole groups.
|
|
Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call a base method.</div></div>
|
|
|
|
<div><h2><a href="symbols/LayoutEdge.html" class="linkConstructor">LayoutEdge</a></h2><p>An edge represents a Link in a <a href="symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a>,
|
|
along with its #fromVertex and #toVertex.<span class="nodetails" id="xLayoutEdge"><a class="morelink" onclick="hst('LayoutEdge')">More...</a></span> <span class="details" id="LayoutEdge">
|
|
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.
|
|
</span><div class="details" id="dLayoutEdge"><p>
|
|
It holds layout-specific data for the link.
|
|
For each kind of layout that uses a LayoutNetwork there is a subclass of <a href="symbols/LayoutVertex.html" class="linkConstructor">LayoutVertex</a> and a subclass of <a href="symbols/LayoutEdge.html" class="linkConstructor">LayoutEdge</a>:
|
|
<ul>
|
|
<li><a href="symbols/CircularLayout.html" class="linkConstructor">CircularLayout</a>: <a href="symbols/CircularVertex.html" class="linkConstructor">CircularVertex</a> and <a href="symbols/CircularEdge.html" class="linkConstructor">CircularEdge</a></li>
|
|
<li><a href="symbols/ForceDirectedLayout.html" class="linkConstructor">ForceDirectedLayout</a>: <a href="symbols/ForceDirectedVertex.html" class="linkConstructor">ForceDirectedVertex</a> and <a href="symbols/ForceDirectedEdge.html" class="linkConstructor">ForceDirectedEdge</a></li>
|
|
<li><a href="symbols/LayeredDigraphLayout.html" class="linkConstructor">LayeredDigraphLayout</a>: <a href="symbols/LayeredDigraphVertex.html" class="linkConstructor">LayeredDigraphVertex</a> and <a href="symbols/LayeredDigraphEdge.html" class="linkConstructor">LayeredDigraphEdge</a></li>
|
|
<li><a href="symbols/TreeLayout.html" class="linkConstructor">TreeLayout</a>: <a href="symbols/TreeVertex.html" class="linkConstructor">TreeVertex</a> and <a href="symbols/TreeEdge.html" class="linkConstructor">TreeEdge</a></li>
|
|
</ul>
|
|
<p>
|
|
Modifying a <a href="symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a> or a <a href="symbols/LayoutVertex.html" class="linkConstructor">LayoutVertex</a> or a <a href="symbols/LayoutEdge.html" class="linkConstructor">LayoutEdge</a> does not
|
|
invalidate the <a href="symbols/Layout.html" class="linkConstructor">Layout</a> or raise any changed events.</div></div>
|
|
|
|
<div><h2><a href="symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a></h2><p>This provides an abstract view of a diagram as a
|
|
network (graph) of vertexes and directed edges.<span class="nodetails" id="xLayoutNetwork"><a class="morelink" onclick="hst('LayoutNetwork')">More...</a></span> <span class="details" id="LayoutNetwork">
|
|
The network contains vertexes and edges corresponding to <a href="symbols/Node.html" class="linkConstructor">Node</a>s and <a href="symbols/Link.html" class="linkConstructor">Link</a>s.
|
|
</span><div class="details" id="dLayoutNetwork"><p>
|
|
This class provides a framework for manipulating the
|
|
state of nodes and links without modifying the structure of the diagram.
|
|
Having a separate representation also permits adding or removing vertexes or edges
|
|
from the network so that the graph that is laid out is not isomorphic to the diagram's graph.
|
|
<p>
|
|
For each kind of layout that uses a LayoutNetwork there is a subclass of <a href="symbols/LayoutVertex.html" class="linkConstructor">LayoutVertex</a> and a subclass of <a href="symbols/LayoutEdge.html" class="linkConstructor">LayoutEdge</a>:
|
|
<ul>
|
|
<li><a href="symbols/CircularLayout.html" class="linkConstructor">CircularLayout</a>: <a href="symbols/CircularVertex.html" class="linkConstructor">CircularVertex</a> and <a href="symbols/CircularEdge.html" class="linkConstructor">CircularEdge</a></li>
|
|
<li><a href="symbols/ForceDirectedLayout.html" class="linkConstructor">ForceDirectedLayout</a>: <a href="symbols/ForceDirectedVertex.html" class="linkConstructor">ForceDirectedVertex</a> and <a href="symbols/ForceDirectedEdge.html" class="linkConstructor">ForceDirectedEdge</a></li>
|
|
<li><a href="symbols/LayeredDigraphLayout.html" class="linkConstructor">LayeredDigraphLayout</a>: <a href="symbols/LayeredDigraphVertex.html" class="linkConstructor">LayeredDigraphVertex</a> and <a href="symbols/LayeredDigraphEdge.html" class="linkConstructor">LayeredDigraphEdge</a></li>
|
|
<li><a href="symbols/TreeLayout.html" class="linkConstructor">TreeLayout</a>: <a href="symbols/TreeVertex.html" class="linkConstructor">TreeVertex</a> and <a href="symbols/TreeEdge.html" class="linkConstructor">TreeEdge</a></li>
|
|
</ul>
|
|
<p>
|
|
Modifying a <a href="symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a> or a <a href="symbols/LayoutVertex.html" class="linkConstructor">LayoutVertex</a> or a <a href="symbols/LayoutEdge.html" class="linkConstructor">LayoutEdge</a> does not
|
|
invalidate the <a href="symbols/Layout.html" class="linkConstructor">Layout</a> or raise any changed events.</div></div>
|
|
|
|
<div><h2><a href="symbols/LayoutVertex.html" class="linkConstructor">LayoutVertex</a></h2><p>A vertex represents a <a href="symbols/Node.html" class="linkConstructor">Node</a> in a <a href="symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a>,
|
|
along with its #bounds and #focus and collections of <a href="symbols/LayoutEdge.html" class="linkConstructor">LayoutEdge</a>s that come into and go out of the vertex.<span class="nodetails" id="xLayoutVertex"><a class="morelink" onclick="hst('LayoutVertex')">More...</a></span> <span class="details" id="LayoutVertex">
|
|
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.
|
|
</span><div class="details" id="dLayoutVertex"><p>
|
|
This holds layout-specific data for the node.
|
|
For each kind of layout that uses a LayoutNetwork there is a subclass of <a href="symbols/LayoutVertex.html" class="linkConstructor">LayoutVertex</a> and a subclass of <a href="symbols/LayoutEdge.html" class="linkConstructor">LayoutEdge</a>:
|
|
<ul>
|
|
<li><a href="symbols/CircularLayout.html" class="linkConstructor">CircularLayout</a>: <a href="symbols/CircularVertex.html" class="linkConstructor">CircularVertex</a> and <a href="symbols/CircularEdge.html" class="linkConstructor">CircularEdge</a></li>
|
|
<li><a href="symbols/ForceDirectedLayout.html" class="linkConstructor">ForceDirectedLayout</a>: <a href="symbols/ForceDirectedVertex.html" class="linkConstructor">ForceDirectedVertex</a> and <a href="symbols/ForceDirectedEdge.html" class="linkConstructor">ForceDirectedEdge</a></li>
|
|
<li><a href="symbols/LayeredDigraphLayout.html" class="linkConstructor">LayeredDigraphLayout</a>: <a href="symbols/LayeredDigraphVertex.html" class="linkConstructor">LayeredDigraphVertex</a> and <a href="symbols/LayeredDigraphEdge.html" class="linkConstructor">LayeredDigraphEdge</a></li>
|
|
<li><a href="symbols/TreeLayout.html" class="linkConstructor">TreeLayout</a>: <a href="symbols/TreeVertex.html" class="linkConstructor">TreeVertex</a> and <a href="symbols/TreeEdge.html" class="linkConstructor">TreeEdge</a></li>
|
|
</ul>
|
|
<p>
|
|
Modifying a <a href="symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a> or a <a href="symbols/LayoutVertex.html" class="linkConstructor">LayoutVertex</a> or a <a href="symbols/LayoutEdge.html" class="linkConstructor">LayoutEdge</a> does not
|
|
invalidate the <a href="symbols/Layout.html" class="linkConstructor">Layout</a> or raise any changed events.</div></div>
|
|
|
|
<div><h2><a href="symbols/Link.html" class="linkConstructor">Link</a></h2><p>A Link is a <a href="symbols/Part.html" class="linkConstructor">Part</a> that connects <a href="symbols/Node.html" class="linkConstructor">Node</a>s.<span class="nodetails" id="xLink"><a class="morelink" onclick="hst('Link')">More...</a></span> <span class="details" id="Link">
|
|
The link relationship is directional, going from <a href="symbols/Link.html#fromNode" class="linkProperty">Link.fromNode</a> to <a href="symbols/Link.html#toNode" class="linkProperty">Link.toNode</a>.
|
|
A link can connect to a specific port element in a node, as named by the <a href="symbols/Link.html#fromPortId" class="linkProperty">Link.fromPortId</a>
|
|
and <a href="symbols/Link.html#toPortId" class="linkProperty">Link.toPortId</a> properties.
|
|
<p class="boxread">
|
|
For more discussion, see <a href="../../intro/links.html">Introduction to Links</a>.
|
|
</span><div class="details" id="dLink"><p>
|
|
To add a Link to a Diagram when using a <a href="symbols/GraphLinksModel.html" class="linkConstructor">GraphLinksModel</a> you should do something like:
|
|
<pre>
|
|
myDiagram.startTransaction("make new link");
|
|
myDiagram.model.addLinkData({ from: "Alpha", to: "Beta" });
|
|
myDiagram.commitTransaction("make new link");
|
|
</pre>
|
|
<p>
|
|
where you would substitute the keys of the actual nodes that you want to connect with a link.
|
|
This will cause a Link to be created (copying the template found in <a href="symbols/Diagram.html#linkTemplateMap" class="linkProperty">Diagram.linkTemplateMap</a>),
|
|
added to the Diagram in some <a href="symbols/Layer.html" class="linkConstructor">Layer</a> (based on <a href="symbols/Part.html#layerName" class="linkProperty">Part.layerName</a>), and bound to the link data
|
|
(resulting in <a href="symbols/Panel.html#data" class="linkProperty">Panel.data</a> referring to that link data object).
|
|
Note that link data objects, unlike <a href="symbols/Node.html" class="linkConstructor">Node</a> data, do not have their own unique keys or identifiers,
|
|
because other Parts do not refer to them.
|
|
<p>
|
|
If you are using a <a href="symbols/TreeModel.html" class="linkConstructor">TreeModel</a>, there are no link data objects, so you just need to call
|
|
<a href="symbols/TreeModel.html#setParentKeyForNodeData" class="linkMethod">TreeModel.setParentKeyForNodeData</a> to specify the "parent" node's key for a "child" node data.
|
|
<p>
|
|
To find a <a href="symbols/Link.html" class="linkConstructor">Link</a> given a link data object in the <a href="symbols/GraphLinksModel.html" class="linkConstructor">GraphLinksModel</a>,
|
|
call <a href="symbols/Diagram.html#findLinkForData" class="linkMethod">Diagram.findLinkForData</a>. When using a <a href="symbols/TreeModel.html" class="linkConstructor">TreeModel</a>, call either <a href="symbols/Diagram.html#findNodeForData" class="linkMethod">Diagram.findNodeForData</a>
|
|
or <a href="symbols/Diagram.html#findNodeForKey" class="linkMethod">Diagram.findNodeForKey</a> to get a Node, and then call <a href="symbols/Node.html#findTreeParentLink" class="linkMethod">Node.findTreeParentLink</a> to get the Link, if any exists.
|
|
<p>
|
|
To find a link that connects two nodes, call <a href="symbols/Node.html#findLinksTo" class="linkMethod">Node.findLinksTo</a> or <a href="symbols/Node.html#findLinksBetween" class="linkMethod">Node.findLinksBetween</a>.
|
|
With the former method, the direction matters; with the latter method it returns links in either direction.
|
|
<p>
|
|
A link's position and size are determined by the two nodes that it connects.
|
|
Normally there should be a <a href="symbols/Shape.html" class="linkConstructor">Shape</a> as the main element in this Link.
|
|
This shape is what users will see as the "line" or "wire" --
|
|
you can set its <a href="symbols/Shape.html#stroke" class="linkProperty">Shape.stroke</a> and other "stroke..." properties to control its appearance.
|
|
<p>
|
|
The link will compute a route (a sequence of points) going from the #fromNode's port element
|
|
to the #toNode's port element.
|
|
That route is used to generate the path of the main shape.
|
|
Properties that affect the nature of the route and the geometry of the path include:
|
|
<ul>
|
|
<li>#curve</li>
|
|
<li>#curviness</li>
|
|
<li>#corner</li>
|
|
<li>#routing</li>
|
|
<li>#smoothness</li>
|
|
<li>#adjusting</li>
|
|
</ul>
|
|
<p class="boxread">
|
|
For more discussion and examples, see <a href="../../intro/links.html">Links</a>.
|
|
<p>
|
|
There are additional properties that affect how the end of the link connects to a port element of a node.
|
|
There are duplicate properties, ones for the "to" end and ones for the "from" end:
|
|
<ul>
|
|
<li>#fromSpot, #toSpot</li>
|
|
<li>#fromEndSegmentLength, #toEndSegmentLength</li>
|
|
<li>#fromShortLength, #toShortLength</li>
|
|
</ul>
|
|
<p>
|
|
These properties normally have "default" values, causing the link's routing and path-geometry generating
|
|
to get the corresponding values from the connected port element.
|
|
This scheme permits an individual link to have its own specific connection to a port,
|
|
taking precedence over how the port normally expects links to connect to it.
|
|
For example, several of the <a href="symbols/Layout.html" class="linkConstructor">Layout</a> classes sets these properties on each Link
|
|
as part of their route computation for links.
|
|
<p class="boxread">
|
|
For more discussion and examples, see <a href="../../intro/connectionPoints.html">Link Points</a>.
|
|
<p>
|
|
Elements other than the main <a href="symbols/Shape.html" class="linkConstructor">Shape</a> in the Link may act as decorations on the link, including arrowheads and labels.
|
|
You can control where they are located along the link route and how they are oriented.
|
|
Because these decorations may be any <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a>, they are all properties of that class.
|
|
The properties include:
|
|
<ul>
|
|
<li><a href="symbols/GraphObject.html#segmentIndex" class="linkProperty">GraphObject.segmentIndex</a></li>
|
|
<li><a href="symbols/GraphObject.html#segmentFraction" class="linkProperty">GraphObject.segmentFraction</a></li>
|
|
<li><a href="symbols/GraphObject.html#segmentOffset" class="linkProperty">GraphObject.segmentOffset</a></li>
|
|
<li><a href="symbols/GraphObject.html#segmentOrientation" class="linkProperty">GraphObject.segmentOrientation</a></li>
|
|
</ul>
|
|
If you do not set the <a href="symbols/GraphObject.html#segmentIndex" class="linkProperty">GraphObject.segmentIndex</a> property, the object is positioned
|
|
to be at the middle of the link.
|
|
<p class="boxread">
|
|
For more discussion and examples, see <a href="../../intro/linkLabels.html">Link Labels</a>.
|
|
<p>
|
|
<b>GoJS</b> makes it easy to add arrowheads to your link template.
|
|
Just add a <a href="symbols/Shape.html" class="linkConstructor">Shape</a> with the appearance properties that you want,
|
|
and also set the <a href="symbols/Shape.html#toArrow" class="linkProperty">Shape.toArrow</a> or <a href="symbols/Shape.html#fromArrow" class="linkProperty">Shape.fromArrow</a> property
|
|
to the name of the kind of arrowhead that you want.
|
|
Doing so automatically sets the "segment..." properties that are appropriate for the chosen arrowhead.
|
|
<p>
|
|
More than one shape may automatically get the route geometry.
|
|
This is useful when you want to have multiple link shapes with different thicknesses
|
|
to create a gradient effect across the path of the link or to produce parallel lines along the path.
|
|
Just set <a href="symbols/GraphObject.html#isPanelMain" class="linkProperty">GraphObject.isPanelMain</a> to true on each such <a href="symbols/Shape.html" class="linkConstructor">Shape</a>.
|
|
<p>
|
|
If you want the user to be able to reconnect a link, using the <a href="symbols/RelinkingTool.html" class="linkConstructor">RelinkingTool</a>,
|
|
you need to set one or both of #relinkableFrom and #relinkableTo to true.
|
|
The <a href="symbols/RelinkingTool.html" class="linkConstructor">RelinkingTool</a> shows a <a href="symbols/RelinkingTool.html#fromHandleArchetype" class="linkProperty">RelinkingTool.fromHandleArchetype</a> and/or a
|
|
<a href="symbols/RelinkingTool.html#toHandleArchetype" class="linkProperty">RelinkingTool.toHandleArchetype</a> when the link is selected.
|
|
Such a relink handle can be dragged by the user to start a relinking operation.
|
|
<p>
|
|
If you want the user to be able to change the path of the link, using the <a href="symbols/LinkReshapingTool.html" class="linkConstructor">LinkReshapingTool</a>,
|
|
set <a href="symbols/Part.html#reshapable" class="linkProperty">Part.reshapable</a> to true.
|
|
The <a href="symbols/LinkReshapingTool.html" class="linkConstructor">LinkReshapingTool</a> shows reshape handles that the user can drag to shift the position
|
|
of a point in the link's route.
|
|
The <a href="symbols/LinkReshapingTool.html#handleArchetype" class="linkProperty">LinkReshapingTool.handleArchetype</a> is copied for each reshape handle.
|
|
<p>
|
|
Often if a Link is reshapable, you will want to save the route in the model so that it can be restored
|
|
upon load. To save the route automatically, add a TwoWay Binding on the #points property:
|
|
<code>new go.Binding("points").makeTwoWay()</code>. <a href="symbols/Model.html#toJson" class="linkMethod">Model.toJson</a> will automatically
|
|
convert the <a href="symbols/List.html" class="linkConstructor">List</a> of <a href="symbols/Point.html" class="linkConstructor">Point</a>s into an Array of numbers in the JSON representation,
|
|
if the property is named "points".
|
|
<p>
|
|
If a Link is <a href="symbols/Part.html#reshapable" class="linkProperty">Part.reshapable</a>, it is also possible to allow the user to add and remove segments
|
|
from the link's route by setting #resegmentable to true.
|
|
This causes the <a href="symbols/LinkReshapingTool.html" class="linkConstructor">LinkReshapingTool</a> to add resegmenting handles at the midpoints of each segment.
|
|
The <a href="symbols/LinkReshapingTool.html#midHandleArchetype" class="linkProperty">LinkReshapingTool.midHandleArchetype</a> is copied for each resegment handle.
|
|
When the user drags such a resegmenting handle, a new segment is inserted into the route.
|
|
Also, when the user drags a reshape handle such that two adjacent segments end up in a straight line,
|
|
a segment is removed from the route.
|
|
<p class="boxread">
|
|
For more discussion and examples, see <a href="../../intro/links.html">Links</a>,
|
|
<a href="../../intro/linkLabels.html">Link Labels</a>, and
|
|
<a href="../../intro/connectionPoints.html">Link Points</a>.
|
|
<p class="boxread">
|
|
To control what links a user may draw or reconnect, please read about
|
|
<a href="../../intro/validation.html">Validation</a>.
|
|
<p class="boxread">
|
|
To customize linking and relinking behavior, please read
|
|
<a href="../../intro/tools.html#LinkingToolAndRelinkingTool">Introduction to the Linking Tools</a>
|
|
and <a href="../../intro/tools.html#RelinkingTool">Introduction to the RelinkingTool</a>.
|
|
For customizing the reshaping of Links,
|
|
see <a href="../../intro/tools.html#LinkReshapingTool">Introduction to the LinkReshapingTool</a>.
|
|
<p>
|
|
Only Links that are in Diagrams can have connections with Nodes.
|
|
Templates should not be connected with Nodes, be members of Groups, or have any Adornments.</div></div>
|
|
|
|
<div><h2><a href="symbols/LinkingBaseTool.html" class="linkConstructor">LinkingBaseTool</a></h2><p>This abstract class is the base class for the <a href="symbols/LinkingTool.html" class="linkConstructor">LinkingTool</a> and <a href="symbols/RelinkingTool.html" class="linkConstructor">RelinkingTool</a> classes.<span class="nodetails" id="xLinkingBaseTool"><a class="morelink" onclick="hst('LinkingBaseTool')">More...</a></span> <span class="details" id="LinkingBaseTool">
|
|
</span><div class="details" id="dLinkingBaseTool"><p>
|
|
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.
|
|
<p class="boxread">
|
|
For a general discussion of link routing, see:
|
|
<a href="../../intro/links.html">Introduction to Links</a>,
|
|
<a href="../../intro/linkLabels.html">Introduction to Link Labels</a>, and
|
|
<a href="../../intro/connectionPoints.html">Introduction to Link Connection Points</a>.
|
|
For customizing the linking tools, see <a href="../../intro/tools.html#LinkingAndRelinkingTools">Introduction to the Linking Tools</a>.
|
|
For customizing the reshaping of Links, see <a href="../../intro/tools.html#LinkReshapingTool">Introduction to the LinkReshapingTool</a>.
|
|
For a general discussion of validation, see <a href="../../intro/validation.html">Introduction to Validation</a>.</div></div>
|
|
|
|
<div><h2><a href="symbols/LinkingTool.html" class="linkConstructor">LinkingTool</a></h2><p>The LinkingTool lets a user draw a new <a href="symbols/Link.html" class="linkConstructor">Link</a> between two ports,
|
|
using a mouse-drag operation.<span class="nodetails" id="xLinkingTool"><a class="morelink" onclick="hst('LinkingTool')">More...</a></span> <span class="details" id="LinkingTool">
|
|
</span><div class="details" id="dLinkingTool"><p>
|
|
By default an instance of this tool is installed as a mouse-move tool in the
|
|
<a href="symbols/Diagram.html#toolManager" class="linkProperty">Diagram.toolManager</a> as the <a href="symbols/ToolManager.html#linkingTool" class="linkProperty">ToolManager.linkingTool</a>.
|
|
However this tool may be used modally, as described below.
|
|
<p>
|
|
#canStart calls #findLinkablePort to find a valid "port" element
|
|
from which (or to which) the user may interactively draw a new link.
|
|
#doActivate sets up a temporary link and two temporary nodes,
|
|
one at the start port and one following the mouse.
|
|
<p class="boxread">
|
|
For a general discussion of validation, see <a href="../../intro/validation.html">Introduction to Validation</a>.
|
|
<p>
|
|
This tool does not utilize any <a href="symbols/Adornment.html" class="linkConstructor">Adornment</a>s or tool handles.
|
|
<p>
|
|
This tool conducts a transaction while the tool is active.
|
|
A successful linking will result in a "LinkDrawn" <a href="symbols/DiagramEvent.html" class="linkConstructor">DiagramEvent</a> and a "Linking" transaction.
|
|
<p>
|
|
If you want to programmatically start a new user mouse-gesture to draw a new link
|
|
from a given <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a> that may be a "port" or may be within
|
|
the visual tree of a "port", set the #startObject property
|
|
to let #findLinkablePort find the real "port" element.
|
|
Then start and activate this tool:
|
|
<pre>
|
|
var tool = myDiagram.toolManager.linkingTool;
|
|
tool.startObject = ...;
|
|
myDiagram.currentTool = tool;
|
|
tool.doActivate();
|
|
</pre></div></div>
|
|
|
|
<div><h2><a href="symbols/LinkReshapingTool.html" class="linkConstructor">LinkReshapingTool</a></h2><p>The LinkReshapingTool is used to interactively change the route of a <a href="symbols/Link.html" class="linkConstructor">Link</a>
|
|
by setting its <a href="symbols/Link.html#points" class="linkProperty">Link.points</a> list.<span class="nodetails" id="xLinkReshapingTool"><a class="morelink" onclick="hst('LinkReshapingTool')">More...</a></span> <span class="details" id="LinkReshapingTool">
|
|
You may want to save the route to the model by using a TwoWay <a href="symbols/Binding.html" class="linkConstructor">Binding</a> on the "points" property of the Link.
|
|
</span><div class="details" id="dLinkReshapingTool"><p>
|
|
This tool makes use of an <a href="symbols/Adornment.html" class="linkConstructor">Adornment</a>, shown when the adorned <a href="symbols/Link.html" class="linkConstructor">Link</a> is selected,
|
|
that includes some number of reshape handles.
|
|
This tool conducts a transaction while the tool is active.
|
|
A successful reshaping will result in a "LinkReshaped" <a href="symbols/DiagramEvent.html" class="linkConstructor">DiagramEvent</a> and a "LinkReshaping" transaction.
|
|
<p class="boxread">
|
|
For a general discussion of link routing, see:
|
|
<a href="../../intro/links.html">Introduction to Links</a>,
|
|
<a href="../../intro/linkLabels.html">Introduction to Link Labels</a>, and
|
|
<a href="../../intro/connectionPoints.html">Introduction to Link Connection Points</a>.
|
|
For customizing the linking tools, see <a href="../../intro/tools.html#LinkingAndRelinkingTools">Introduction to the Linking Tools</a>.
|
|
For a general discussion of validation, see <a href="../../intro/validation.html">Introduction to Validation</a>.</div></div>
|
|
|
|
<div><h2><a href="symbols/List.html" class="linkConstructor">List</a></h2><p>An ordered iterable collection.<span class="nodetails" id="xList"><a class="morelink" onclick="hst('List')">More...</a></span> <span class="details" id="List">
|
|
It optionally enforces the type of elements that may be added to the List.
|
|
</span><div class="details" id="dList"><p>
|
|
An example usage:
|
|
<pre>
|
|
var list = new go.List(go.Point); // make a list of Points
|
|
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
|
|
</pre>
|
|
<p>
|
|
You can iterate over the items in a List:
|
|
<pre>
|
|
var it = aList.iterator;
|
|
while (it.next()) {
|
|
window.console.log("#" + it.key + " is " + it.value);
|
|
}
|
|
</pre>
|
|
Or:
|
|
<pre>
|
|
aList.each(function(val) {
|
|
window.console.log(val);
|
|
});
|
|
</pre>
|
|
The key will range from zero to #count-1.
|
|
<p>
|
|
For convenience this <b>GoJS</b> List class has synonyms for the following methods and property:
|
|
<ul>
|
|
<li><b>get(idx)</b>: #elt</li>
|
|
<li><b>set(idx,val)</b>: #setElt</li>
|
|
<li><b>has(val)</b>: #contains</li>
|
|
<li><b>delete(val)</b>: #remove</li>
|
|
<li><b>clear()</b>: <a href="symbols/UndoManager.html#clear" class="linkMethod">clear</a></li>
|
|
<li><b>size</b>: #count</li>
|
|
</ul></div></div>
|
|
|
|
<div><h2><a href="symbols/Map.html" class="linkConstructor">Map</a></h2><p>An unordered iterable collection of key/value pairs that cannot contain two instances of the same key.<span class="nodetails" id="xMap"><a class="morelink" onclick="hst('Map')">More...</a></span> <span class="details" id="Map">
|
|
It optionally enforces the type of the key and the type of the associated value.
|
|
</span><div class="details" id="dMap"><p>
|
|
To create a Map:
|
|
<pre>
|
|
var map = new go.Map("string", "number");
|
|
map.add("one", 1);
|
|
map.add("two", 2);
|
|
map.add("three", 3);
|
|
// now map.count === 3
|
|
// and map.getValue("two") === 2
|
|
// and map.contains("zero") === false
|
|
</pre>
|
|
<p>
|
|
You can iterate over the key/value pairs in a Map:
|
|
<pre>
|
|
var it = aMap.iterator;
|
|
while (it.next()) {
|
|
window.console.log(it.key + ": " + it.value);
|
|
}
|
|
</pre>
|
|
Or:
|
|
<pre>
|
|
aMap.each(function(kvp) {
|
|
window.console.log(kvp.key + ": " + kvp.value);
|
|
});
|
|
</pre>
|
|
But note that there is no guaranteed ordering amongst the key/value pairs.
|
|
<p>
|
|
Call #toKeySet to get a read-only <a href="symbols/Set.html" class="linkConstructor">Set</a> that holds all of the keys of a Map.
|
|
Iterating over that Set will produce values that are the keys in the Map.
|
|
<p>
|
|
Although not precisely implementing the features and semantics of the EcmaScript 6 <b>Map</b> class,
|
|
this <b>GoJS</b> Map class has synonyms for the following methods and property:
|
|
<ul>
|
|
<li><b>get(key)</b>: #getValue</li>
|
|
<li><b>set(key,val)</b>: #add</li>
|
|
<li><b>has(key)</b>: #contains</li>
|
|
<li><b>delete(key)</b>: #remove</li>
|
|
<li><b>clear()</b>: <a href="symbols/UndoManager.html#clear" class="linkMethod">clear</a></li>
|
|
<li><b>size</b>: #count</li>
|
|
</ul></div></div>
|
|
|
|
<div><h2><a href="symbols/Margin.html" class="linkConstructor">Margin</a></h2><p>A Margin represents a band of space outside or inside a rectangular area,
|
|
with possibly different values on each of the four sides.<span class="nodetails" id="xMargin"><a class="morelink" onclick="hst('Margin')">More...</a></span> <span class="details" id="Margin">
|
|
</span><div class="details" id="dMargin"><p>
|
|
Example uses include <a href="symbols/GraphObject.html#margin" class="linkProperty">GraphObject.margin</a>, <a href="symbols/Panel.html#padding" class="linkProperty">Panel.padding</a>, and <a href="symbols/Diagram.html#padding" class="linkProperty">Diagram.padding</a>.
|
|
<p>
|
|
Use the static functions <a href="symbols/Margin.html#.parse" class="linkStatic">Margin.parse</a> and <a href="symbols/Margin.html#.stringify" class="linkStatic">Margin.stringify</a> to convert to and from
|
|
a standard string representation that is independent of the current locale.
|
|
<p>
|
|
When an instance of this class is the value of a property of a <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a> class or <a href="symbols/Diagram.html" class="linkConstructor">Diagram</a>
|
|
or <a href="symbols/CommandHandler.html" class="linkConstructor">CommandHandler</a> or a <a href="symbols/Tool.html" class="linkConstructor">Tool</a> class, you should treat the object
|
|
as if it were frozen or read-only -- you cannot modify its properties.
|
|
This allows the property to return a value without allocating a new instance.
|
|
If you need to do your own calculations with the value, call #copy to make
|
|
a new instance with the same values that you can modify.
|
|
<p>
|
|
Many methods modify the object's properties and then return a reference to "this" object.
|
|
The only instance method to allocate a new object is the #copy method.
|
|
The static <a href="symbols/Margin.html#.parse" class="linkStatic">Margin.parse</a> method also allocates a new object.
|
|
<p>
|
|
The "Debug" implementation of this class is significantly slower than the "Release" implementation,
|
|
mostly due to additional error checking.
|
|
<p>
|
|
You cannot inherit from this class.</div></div>
|
|
|
|
<div><h2><a href="symbols/Model.html" class="linkConstructor">Model</a></h2><p>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.<span class="nodetails" id="xModel"><a class="morelink" onclick="hst('Model')">More...</a></span> <span class="details" id="Model">
|
|
Models tend to hold only relatively simple data, making them easy to persist by serialization as JSON or XML formatted text.
|
|
</span><div class="details" id="dModel"><p>
|
|
Models hold simple data objects, not <a href="symbols/Part.html" class="linkConstructor">Part</a>s such as <a href="symbols/Node.html" class="linkConstructor">Node</a>s or <a href="symbols/Link.html" class="linkConstructor">Link</a>s.
|
|
Node data is normally represented in a <a href="symbols/Diagram.html" class="linkConstructor">Diagram</a> by instances of <a href="symbols/Node.html" class="linkConstructor">Node</a>,
|
|
but they could be represented by simple <a href="symbols/Part.html" class="linkConstructor">Part</a>s or by <a href="symbols/Group.html" class="linkConstructor">Group</a>s.
|
|
A Diagram constructs Parts for its <a href="symbols/Diagram.html#model" class="linkProperty">Diagram.model</a>'s data by copying templates.
|
|
Templates are <a href="symbols/Panel.html" class="linkConstructor">Panel</a>s of <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a>s that get some property values from the model data,
|
|
accessible via the <a href="symbols/Panel.html#data" class="linkProperty">Panel.data</a> property, using data <a href="symbols/Binding.html" class="linkConstructor">Binding</a>.
|
|
See <a href="../../intro/usingModels.html">Using Models</a> and <a href="../../intro/dataBinding.html">Data Binding</a> for an introduction.
|
|
<p>
|
|
This Model class only supports holding an array of node data
|
|
and interpreting properties on that data to be able to refer to them
|
|
using unique key values.
|
|
To support simple tree-structured graphs, use a <a href="symbols/TreeModel.html" class="linkConstructor">TreeModel</a>, which inherits from this class.
|
|
To support links and grouping, use a <a href="symbols/GraphLinksModel.html" class="linkConstructor">GraphLinksModel</a>.
|
|
<p>
|
|
Each node data object is assumed to have a unique key value.
|
|
The #nodeKeyProperty property names the property on the node data whose value
|
|
is the unique key for that node data object.
|
|
The default value for this property is "key".
|
|
You should not have a TwoWay data binding on the node key property,
|
|
because that might cause the property value to be set to a duplicate key value.
|
|
<p>
|
|
The key values must be either strings or numbers or undefined.
|
|
If the key is undefined, or if there are duplicate key values,
|
|
the model will automatically try to assign a new unique key value.
|
|
Caution: if your keys are numbers, do not try to use string representations of those numbers as keys.
|
|
Conversely, if your keys are strings that happen to have number syntax, do not try to use those number values.
|
|
Sometimes JavaScript will automatically convert from string to number or vice-versa, but sometimes it won't.
|
|
<p>
|
|
For example, one can define a graph consisting of just two nodes:
|
|
<pre class="javascript">
|
|
model.nodeDataArray = [
|
|
{ key: "Alpha" },
|
|
{ key: "Beta" }
|
|
];
|
|
</pre>
|
|
<p>
|
|
This model cannot detect the modification of the #nodeDataArray array
|
|
or the modification of any node data object.
|
|
If you want to add or remove node data from the #nodeDataArray,
|
|
call the #addNodeData or #removeNodeData methods.
|
|
<p>
|
|
If you want to modify a node data object, it depends on whether the property you want to change
|
|
is a structural property that the model needs to know about, or whether it is a property
|
|
that is only used for data binding or other application-specific purposes.
|
|
<p>
|
|
For the former case, call the appropriate method, such as
|
|
#setKeyForNodeData, #setCategoryForNodeData,
|
|
<a href="symbols/GraphLinksModel.html#setToKeyForLinkData" class="linkMethod">GraphLinksModel.setToKeyForLinkData</a>, or <a href="symbols/GraphLinksModel.html#setGroupKeyForNodeData" class="linkMethod">GraphLinksModel.setGroupKeyForNodeData</a>.
|
|
These methods have names that start with "set", "add", "insert", or "remove".
|
|
<p>
|
|
For the latter case, when setting an application-specific property, typically for data binding,
|
|
and to support undo/redo, call #setDataProperty.
|
|
<p>
|
|
The #copyNodeData method can be called to make a shallow copy of a node data object.
|
|
However, if some of those property values are Arrays that want not to be shared but to be copied,
|
|
you can set #copiesArrays to true. This is typically very useful when dealing
|
|
with data bound item arrays.
|
|
Furthermore if the items in those copied Arrays are in fact Objects that need to be copied,
|
|
you can also set #copiesArrayObjects to true, causing a copied Array to refer to
|
|
newly shallow-copied objects of the original array.
|
|
<p>
|
|
Each model raises <a href="symbols/ChangedEvent.html" class="linkConstructor">ChangedEvent</a>s that you can follow by registering a listener via #addChangedListener.
|
|
Read more at the Introduction page: <a href="../../intro/changedEvents.html">Changed Events</a>.
|
|
<p>
|
|
Each model comes with its own <a href="symbols/UndoManager.html" class="linkConstructor">UndoManager</a> that is initially not enabled.
|
|
You will need to set <a href="symbols/UndoManager.html#isEnabled" class="linkProperty">UndoManager.isEnabled</a> to true in order for the
|
|
UndoManager to record model changes and for your users to perform undo and redo.
|
|
<p>
|
|
You can temporarily turn off the recording of changes by setting
|
|
#skipsUndoManager to true.
|
|
A number of places within the system do that routinely in order to avoid recording temporary changes,
|
|
so be sure to remember the original value beforehand and restore it afterwards.
|
|
<p>
|
|
One normally saves a diagram by just saving its model.
|
|
If you can use JSON-formatted text, this is easy to do -- just call #toJson
|
|
to get the string representation of the model, and save that string.
|
|
Load the diagram by replacing the <a href="symbols/Diagram.html#model" class="linkProperty">Diagram.model</a> with one created by calling
|
|
the static function <a href="symbols/Model.html#.fromJson" class="linkStatic">Model.fromJson</a>:
|
|
<pre class="javascript">
|
|
myDiagram.model = go.Model.fromJson(loadedString);
|
|
</pre>
|
|
Note that JSON and other textual data formats cannot faithfully store all JavaScript functions.
|
|
#toJson and <a href="symbols/Model.html#.fromJson" class="linkStatic">Model.fromJson</a> do not try to save and load functional property values.
|
|
You should arrange that all such functions, including event handlers, are established by your app.
|
|
#toJson and <a href="symbols/Model.html#.fromJson" class="linkStatic">Model.fromJson</a> also cannot handle circular references; any sharing of
|
|
references will be lost too.
|
|
They also skip properties that are not enumerable, those whose names start with an underscore, and those whose values are undefined.
|
|
<p>
|
|
Note that models also do not store the templates used by diagrams,
|
|
nor any transient or temporary parts such as <a href="symbols/Adornment.html" class="linkConstructor">Adornment</a>s, nor any tools,
|
|
nor any <a href="symbols/UndoManager.html" class="linkConstructor">UndoManager</a> state, nor any event listeners.
|
|
These objects and all other properties of diagrams must be established by your app.
|
|
<p>
|
|
You can add any number of properties to the #modelData object, which is serialized and deserialized
|
|
into JSON just like any other model data for nodes or links.
|
|
However #modelData is associated with the model as a whole and does not depend on the existence
|
|
of any node data or link data.
|
|
<p>
|
|
It is also easy to save the changes that were recorded in the most recent transaction.
|
|
Call #toIncrementalJson to generate a JSON-format string that holds the current state of modified data
|
|
plus the keys of inserted or removed data.
|
|
That method requires as an argument a <a href="symbols/ChangedEvent.html" class="linkConstructor">ChangedEvent</a> that represents a transaction that completed or
|
|
an undo or a redo that just finished.
|
|
<p>
|
|
It is also possible to use such "incremental" JSON to modify an existing model.
|
|
Call #applyIncrementalJson, giving it a string generated by #toIncrementalJson,
|
|
to modify this model by making all of the changes recorded in the JSON text.
|
|
Note how this method is a regular instance method, whereas <a href="symbols/Model.html#.fromJson" class="linkStatic">Model.fromJson</a> is a static function.</div></div>
|
|
|
|
<div><h2><a href="symbols/Node.html" class="linkConstructor">Node</a></h2><p>A Node is a <a href="symbols/Part.html" class="linkConstructor">Part</a> that may connect to other nodes with <a href="symbols/Link.html" class="linkConstructor">Link</a>s,
|
|
or that may be a member of a <a href="symbols/Group.html" class="linkConstructor">Group</a>.<span class="nodetails" id="xNode"><a class="morelink" onclick="hst('Node')">More...</a></span> <span class="details" id="Node">
|
|
</span><div class="details" id="dNode"><p>
|
|
<a href="symbols/Group.html" class="linkConstructor">Group</a> inherits from Node,
|
|
enabling nodes to logically contain other nodes and links.
|
|
<p class="boxread">
|
|
For a more general discussion of how to define nodes, see <a href="../../intro/nodes.html">Introduction to Nodes</a>.
|
|
<p>
|
|
Although you can create a Node and <a href="symbols/Diagram.html#add" class="linkMethod">Diagram.add</a> it to a Diagram, this does not update the Model.
|
|
It is more common to create a node by adding a node data object to the model
|
|
by calling <a href="symbols/Model.html#addNodeData" class="linkMethod">Model.addNodeData</a>. For example:
|
|
<pre>
|
|
myDiagram.startTransaction("make new node");
|
|
myDiagram.model.addNodeData({ key: "Omega" });
|
|
myDiagram.commitTransaction("make new node");
|
|
</pre>
|
|
<p>
|
|
This will cause a Node or simple <a href="symbols/Part.html" class="linkConstructor">Part</a> to be created (copying the template found in <a href="symbols/Diagram.html#nodeTemplateMap" class="linkProperty">Diagram.nodeTemplateMap</a>),
|
|
added to the Diagram in some <a href="symbols/Layer.html" class="linkConstructor">Layer</a> (based on <a href="symbols/Part.html#layerName" class="linkProperty">Part.layerName</a>), and bound to the node data
|
|
(resulting in <a href="symbols/Panel.html#data" class="linkProperty">Panel.data</a> referring to that node data object).
|
|
If you do not keep a reference to that JavaScript object, as the above code does not,
|
|
you can retrieve it later by calling <a href="symbols/Model.html#findNodeDataForKey" class="linkMethod">Model.findNodeDataForKey</a>.
|
|
<p>
|
|
It is very common to initialize a Diagram by setting <a href="symbols/Model.html#nodeDataArray" class="linkProperty">Model.nodeDataArray</a> to a JavaScript Array
|
|
of JavaScript objects holding the properties that you need in your model.
|
|
Nearly all of the samples do this kind of initialization.
|
|
<p>
|
|
You can delete a Node by either calling <a href="symbols/Diagram.html#remove" class="linkMethod">Diagram.remove</a> or by calling <a href="symbols/Model.html#removeNodeData" class="linkMethod">Model.removeNodeData</a>.
|
|
The latter obviously will modify the Model; the former does so if the Node was created from model data.
|
|
Commands such as <a href="symbols/CommandHandler.html#deleteSelection" class="linkMethod">CommandHandler.deleteSelection</a> call these methods within a transaction.
|
|
<p>
|
|
You can find all of the <a href="symbols/Link.html" class="linkConstructor">Link</a>s that are connected with a Node by calling #findLinksConnected.
|
|
Because links normally have a direction, you can find all of the links that have their <a href="symbols/Link.html#toNode" class="linkProperty">Link.toNode</a>
|
|
be a given Node by calling #findLinksInto.
|
|
Similarly, you can call #findLinksOutOf to find all of the links coming out from a node;
|
|
such links have their <a href="symbols/Link.html#fromNode" class="linkProperty">Link.fromNode</a> be that node.
|
|
For tree-structured graphs, use #findTreeChildrenLinks or #findTreeParentLink.
|
|
<p>
|
|
If you are not so interested in the links but are interested in the nodes at the other end of the links
|
|
connecting with a node, there are other methods that you can call.
|
|
#findNodesConnected returns all of the nodes that are at the other end of the links that
|
|
connect with a given node.
|
|
#findNodesInto and #findNodesOutOf return the subsets of those nodes considering
|
|
only those links that go into or come out of the given node.
|
|
For tree-structured graphs, use #findTreeChildrenNodes or #findTreeParentNode.
|
|
<p>
|
|
For example, to operate on the data of all of the destination nodes:
|
|
<pre>
|
|
var it = somenode.findNodesOutOf();
|
|
while (it.next()) {
|
|
var child = it.value;
|
|
if (child.data.text.indexOf("special") >= 0) { ... }
|
|
}
|
|
</pre>
|
|
<p>
|
|
You can link two nodes by creating a new <a href="symbols/Link.html" class="linkConstructor">Link</a>, setting its <a href="symbols/Link.html#toNode" class="linkProperty">Link.toNode</a> and <a href="symbols/Link.html#fromNode" class="linkProperty">Link.fromNode</a>
|
|
(in either order), and <a href="symbols/Diagram.html#add" class="linkMethod">Diagram.add</a>ing it to the diagram.
|
|
But it is more common to add a link data object to the <a href="symbols/Diagram.html#model" class="linkProperty">Diagram.model</a> by calling <a href="symbols/GraphLinksModel.html#addLinkData" class="linkMethod">GraphLinksModel.addLinkData</a>.
|
|
Just creating and adding a <a href="symbols/Link.html" class="linkConstructor">Link</a> will not update the model.
|
|
<p>
|
|
Thus to add a link when using a <a href="symbols/GraphLinksModel.html" class="linkConstructor">GraphLinksModel</a> you should do something like:
|
|
<pre>
|
|
myDiagram.startTransaction("make new link");
|
|
myDiagram.model.addLinkData({ from: "Alpha", to: "Beta" });
|
|
myDiagram.commitTransaction("make new link");
|
|
</pre>
|
|
<p>
|
|
Where you would substitute the keys of the actual nodes that you want to connect with a link.
|
|
If you are using a <a href="symbols/TreeModel.html" class="linkConstructor">TreeModel</a>, there are no link data objects, so you just need to call
|
|
<a href="symbols/TreeModel.html#setParentKeyForNodeData" class="linkMethod">TreeModel.setParentKeyForNodeData</a> to specify the "parent" node's key for a "child" node data.
|
|
<p>
|
|
To find a <a href="symbols/Link.html" class="linkConstructor">Link</a> given a link data object in the <a href="symbols/GraphLinksModel.html" class="linkConstructor">GraphLinksModel</a>,
|
|
call <a href="symbols/Diagram.html#findLinkForData" class="linkMethod">Diagram.findLinkForData</a>. When using a <a href="symbols/TreeModel.html" class="linkConstructor">TreeModel</a>, call either <a href="symbols/Diagram.html#findNodeForData" class="linkMethod">Diagram.findNodeForData</a>
|
|
or <a href="symbols/Diagram.html#findNodeForKey" class="linkMethod">Diagram.findNodeForKey</a> to get a Node, and then call #findTreeParentLink to get the Link, if any exists.
|
|
<p>
|
|
To find a link that connects two nodes, call #findLinksTo or #findLinksBetween.
|
|
With the former method, the direction matters; with the latter method it returns links in either direction.
|
|
<p>
|
|
As links connect with a node or are disconnected, you may want to update the appearance of the node.
|
|
You can set the #linkConnected and #linkDisconnected properties to be functions that are called.
|
|
These functions must not modify any link relationships -- the properties just exist to update the appearance of the node.
|
|
A typical usage would be to change the color or figure of a shape.
|
|
<p>
|
|
You can control whether the user may draw a new link or reconnect a link between a pair of Nodes
|
|
by affecting the result of <a href="symbols/LinkingBaseTool.html#isValidLink" class="linkMethod">LinkingBaseTool.isValidLink</a>.
|
|
You can override that predicate on <a href="symbols/LinkingTool.html" class="linkConstructor">LinkingTool</a> and <a href="symbols/RelinkingTool.html" class="linkConstructor">RelinkingTool</a>,
|
|
but it is easier to set the #linkValidation or
|
|
<a href="symbols/LinkingBaseTool.html#linkValidation" class="linkProperty">LinkingBaseTool.linkValidation</a> functional property.
|
|
<p class="boxread">
|
|
For a more general discussion of validation, see <a href="../../intro/validation.html">Introduction to Validation</a>.
|
|
<p>
|
|
Nodes also support the ability to provide logical and physical distinctions in the connection points
|
|
that links use at a node. These connection objects are called "ports".
|
|
By default the port object will be the whole <a href="symbols/Node.html" class="linkConstructor">Node</a>.
|
|
However, you can set the <a href="symbols/GraphObject.html#portId" class="linkProperty">GraphObject.portId</a> property on any <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a> in the visual tree of a node
|
|
to cause that element to be treated as a "port".
|
|
The "port id" is just a string that ought to be unique amongst all of the port elements in the node.
|
|
<p>
|
|
In the case of a node only having a single port, you should set the <a href="symbols/GraphObject.html#portId" class="linkProperty">GraphObject.portId</a> as an empty string.
|
|
When there is no such element declared as the default port, it uses the whole node.
|
|
You can use the #port property to get the only port element.
|
|
<p>
|
|
When a node should have multiple ports,
|
|
i.e. multiple <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a>s acting as separate connection points for links,
|
|
you should set each port's <a href="symbols/GraphObject.html#portId" class="linkProperty">GraphObject.portId</a> to a string value that is unique for the node.
|
|
When there may be multiple ports on a node, you can get a collection of elements representing ports
|
|
by using the #ports property.
|
|
Use the #findPort method to find a particular port element by name.
|
|
<p>
|
|
Note: the only kind of model that can save port information, i.e. portIds that are not an empty string,
|
|
for links is a <a href="symbols/GraphLinksModel.html" class="linkConstructor">GraphLinksModel</a> whose <a href="symbols/GraphLinksModel.html#linkFromPortIdProperty" class="linkProperty">GraphLinksModel.linkFromPortIdProperty</a> and
|
|
<a href="symbols/GraphLinksModel.html#linkToPortIdProperty" class="linkProperty">GraphLinksModel.linkToPortIdProperty</a> have been set to name properties on the link data objects.
|
|
<p class="boxread">
|
|
For a more general discussion of ports, see <a href="../../intro/ports.html">Introduction to Ports</a>.
|
|
<p>
|
|
All of the "findLinks..." and "findNodes..." methods mentioned above take an optional port id argument.
|
|
When no argument is passed, these methods consider all links connecting with the node.
|
|
When a port id argument is provided, these methods only consider links that connect with that port
|
|
in the given node.
|
|
Thus when navigating through the diagram, you can easily look at all of the nodes that links coming out of
|
|
a given node go to. Or you can just look at those nodes at the ends of links coming out of a particular port.
|
|
<p>
|
|
You can also control the default connecting behavior of <a href="symbols/Link.html" class="linkConstructor">Link</a>s at each port.
|
|
Because a port can be any <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a>, they are all properties on GraphObject.
|
|
The properties are duplicated so that you can guide the "from" ends of links differently from the "to" ends of links.
|
|
The properties include:
|
|
<ul>
|
|
<li><a href="symbols/GraphObject.html#fromSpot" class="linkProperty">GraphObject.fromSpot</a>, <a href="symbols/GraphObject.html#toSpot" class="linkProperty">GraphObject.toSpot</a></li>
|
|
<li><a href="symbols/GraphObject.html#fromEndSegmentLength" class="linkProperty">GraphObject.fromEndSegmentLength</a>, <a href="symbols/GraphObject.html#toEndSegmentLength" class="linkProperty">GraphObject.toEndSegmentLength</a></li>
|
|
<li><a href="symbols/GraphObject.html#fromShortLength" class="linkProperty">GraphObject.fromShortLength</a>, <a href="symbols/GraphObject.html#toShortLength" class="linkProperty">GraphObject.toShortLength</a></li>
|
|
<li><a href="symbols/GraphObject.html#fromLinkable" class="linkProperty">GraphObject.fromLinkable</a>, <a href="symbols/GraphObject.html#toLinkable" class="linkProperty">GraphObject.toLinkable</a></li>
|
|
<li><a href="symbols/GraphObject.html#fromLinkableDuplicates" class="linkProperty">GraphObject.fromLinkableDuplicates</a>, <a href="symbols/GraphObject.html#toLinkableDuplicates" class="linkProperty">GraphObject.toLinkableDuplicates</a></li>
|
|
<li><a href="symbols/GraphObject.html#fromLinkableSelfNode" class="linkProperty">GraphObject.fromLinkableSelfNode</a>, <a href="symbols/GraphObject.html#toLinkableSelfNode" class="linkProperty">GraphObject.toLinkableSelfNode</a></li>
|
|
<li><a href="symbols/GraphObject.html#fromMaxLinks" class="linkProperty">GraphObject.fromMaxLinks</a>, <a href="symbols/GraphObject.html#toMaxLinks" class="linkProperty">GraphObject.toMaxLinks</a></li>
|
|
</ul>
|
|
<p>
|
|
The "...Spot" and "...Length" and "...Direction" properties control the position and routing of links at a port.
|
|
The "...Linkable..." and "...MaxLinks" properties control whether or not users can draw a new link
|
|
or reconnect an existing link from or to a port.
|
|
(The "...Spot" and "...Length" and "...Direction" properties also exist on <a href="symbols/Link.html" class="linkConstructor">Link</a>, to override for a particular
|
|
link the default values that come from a port element.)
|
|
<p class="boxread">
|
|
For a more general discussion of link points, see <a href="../../intro/connectionPoints.html">Introduction to Link Connection Points</a>.
|
|
<p>
|
|
When the graph is tree-structured, you can use several functions for traversing the tree:
|
|
<ul>
|
|
<li>#findTreeParentNode</li>
|
|
<li>#findTreeChildrenNodes</li>
|
|
<li>#findTreeParentLink</li>
|
|
<li>#findTreeChildrenLinks</li>
|
|
<li>#findTreeRoot</li>
|
|
<li>#findTreeParentChain</li>
|
|
<li>#findTreeParts</li>
|
|
<li>#findCommonTreeParent</li>
|
|
<li>#isInTreeOf</li>
|
|
<li>#findTreeLevel</li>
|
|
</ul>
|
|
<p>
|
|
Determining whether a tree grows from the root via links that go out to the children or vice-versa
|
|
is controlled for the whole diagram by the <a href="symbols/Diagram.html#isTreePathToChildren" class="linkProperty">Diagram.isTreePathToChildren</a> property.
|
|
However an individual link will be ignored by the above functions if <a href="symbols/Link.html#isTreeLink" class="linkProperty">Link.isTreeLink</a> is false.
|
|
<p>
|
|
The Node class also supports the notion of expanding and collapsing a subtree of nodes and links,
|
|
causing those nodes and links to be shown or hidden.
|
|
Principally this is a matter of setting <a href="symbols/Node.html#isTreeExpanded" class="linkProperty">Node.isTreeExpanded</a>.
|
|
Of course if the diagram's graph is not tree-structured, these concepts and properties might not apply.
|
|
<p>
|
|
If you want to change the appearance of the node you can do so in a function that you assign to
|
|
the #treeExpandedChanged property.
|
|
This function must not modify any link relationships or expand or collapse any subtrees -- the property just exists
|
|
to update the appearance of the node.
|
|
<p>
|
|
There is an option for link routing to try to avoid crossing over nodes:
|
|
<a href="symbols/Link.html#routing" class="linkProperty">Link.routing</a> = <a href="symbols/Link.html#AvoidsNodes" class="linkConstant">Link.AvoidsNodes</a>.
|
|
You can control whether such links should avoid or ignore a node by setting #avoidable.
|
|
Set #avoidableMargin to control the area beyond the <a href="symbols/GraphObject.html#actualBounds" class="linkProperty">GraphObject.actualBounds</a>
|
|
where AvoidsNodes links should not go.
|
|
<p class="boxread">
|
|
For more discussion and examples, see <a href="../../intro/nodes.html">Nodes</a>,
|
|
<a href="../../intro/ports.html">Ports</a>, and
|
|
<a href="../../intro/connectionPoints.html">Link Points</a>.
|
|
<p class="boxread">
|
|
For more about trees, see <a href="../../intro/trees.html">Trees</a>, and
|
|
<a href="../../intro/subtrees.html">SubTrees</a>.
|
|
<p class="boxread">
|
|
To customize user-resizing behavior, please read
|
|
<a href="../../intro/tools.html#ResizingTool">Introduction to the ResizingTool</a>.
|
|
To customize user-rotating behavior, please read
|
|
<a href="../../intro/tools.html#RotatingTool">Introduction to the RotatingTool</a>.
|
|
<p>
|
|
Only Nodes that are in Diagrams can have connections via Links.
|
|
Templates should not be connected with Links, be labels of Links, be members of Groups, or have any Adornments.</div></div>
|
|
|
|
<div><h2><a href="symbols/Overview.html" class="linkConstructor">Overview</a></h2><p>An Overview is a <a href="symbols/Diagram.html" class="linkConstructor">Diagram</a> that displays all of a different diagram,
|
|
with a rectangular box showing the viewport displayed by that other diagram.<span class="nodetails" id="xOverview"><a class="morelink" onclick="hst('Overview')">More...</a></span> <span class="details" id="Overview">
|
|
<p class="box">
|
|
For more discussion, see <a href="../../intro/overview.html">Introduction to Overviews</a>.
|
|
See samples that make use of Overviews in the <a href="../../samples/index.html#overview">samples index</a>.
|
|
</span><div class="details" id="dOverview"><p>
|
|
All you need to do is set <a href="symbols/Overview.html#observed" class="linkProperty">Overview.observed</a>.
|
|
For example:
|
|
<p>
|
|
<pre>
|
|
var myDiagram = new go.Diagram("myDiagramDIV");
|
|
. . . other initialization . . .
|
|
|
|
// create and initialize the Overview:
|
|
new go.Overview("myOverviewDIV").observed = myDiagram;
|
|
</pre>
|
|
<p>
|
|
The Overview draws what the observed Diagram is displaying,
|
|
so setting or modifying any diagram templates or template Maps has no effect.
|
|
At the current time methods such as <a href="symbols/Diagram.html#makeImage" class="linkMethod">Diagram.makeImage</a>,
|
|
<a href="symbols/Diagram.html#makeImageData" class="linkMethod">Diagram.makeImageData</a> and <a href="symbols/Diagram.html#makeSvg" class="linkMethod">Diagram.makeSvg</a> do not work on Overviews.</div></div>
|
|
|
|
<div><h2><a href="symbols/Palette.html" class="linkConstructor">Palette</a></h2><p>Palette extends the Diagram class to allow objects to be dragged and placed onto other Diagrams.<span class="nodetails" id="xPalette"><a class="morelink" onclick="hst('Palette')">More...</a></span> <span class="details" id="Palette">
|
|
Its <a href="symbols/Diagram.html#layout" class="linkProperty">Diagram.layout</a> is a <a href="symbols/GridLayout.html" class="linkConstructor">GridLayout</a>.
|
|
The Palette is <a href="symbols/Diagram.html#isReadOnly" class="linkProperty">Diagram.isReadOnly</a> but to support drag-and-drop its <a href="symbols/Diagram.html#allowDragOut" class="linkProperty">Diagram.allowDragOut</a> is true.
|
|
<p class="box">
|
|
For more discussion, see <a href="../../intro/palette.html">Introduction to Palettes</a>.
|
|
See samples that make use of Palettes in the <a href="../../samples/index.html#palette">samples index</a>.
|
|
</span><div class="details" id="dPalette"><p>
|
|
You can control the order of Parts in the palette in several manners:
|
|
<ul>
|
|
<li>If you want to keep the order given by <code>myPalette.model.nodeDataArray</code>,
|
|
just set <code>myPalette.layout.sorting = go.GridLayout.Forward</code> (<a href="symbols/GridLayout.html#sorting" class="linkProperty">GridLayout.sorting</a>).</li>
|
|
<li>If you want to sort based on some text string associated with each Part, just bind <a href="symbols/Part.html#text" class="linkProperty">Part.text</a>.</li>
|
|
<li>If you want to sort more generally, set <code>myPalette.layout.comparer</code> (<a href="symbols/GridLayout.html#comparer" class="linkProperty">GridLayout.comparer</a>).</li>
|
|
</ul></div></div>
|
|
|
|
<div><h2><a href="symbols/Panel.html" class="linkConstructor">Panel</a></h2><p>A Panel is a <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a> that holds other GraphObjects as its elements.<span class="nodetails" id="xPanel"><a class="morelink" onclick="hst('Panel')">More...</a></span> <span class="details" id="Panel">
|
|
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.
|
|
</span><div class="details" id="dPanel"><p>
|
|
The <a href="symbols/Part.html" class="linkConstructor">Part</a> class inherits from Panel; Part in turn is the base class of <a href="symbols/Node.html" class="linkConstructor">Node</a> and <a href="symbols/Link.html" class="linkConstructor">Link</a>.
|
|
<p>
|
|
Every Panel has a #type and establishes its own coordinate system. The type of a Panel
|
|
determines how it will size and arrange its elements:
|
|
<ul>
|
|
<li><a href="symbols/Panel.html#Position" class="linkConstant">Panel.Position</a> is used to arrange elements based on their absolute positions within the Panel's local coordinate system.</li>
|
|
<li><a href="symbols/Panel.html#Vertical" class="linkConstant">Panel.Vertical</a> and <a href="symbols/Panel.html#Horizontal" class="linkConstant">Panel.Horizontal</a> are used to create linear "stacks" of elements.</li>
|
|
<li><a href="symbols/Panel.html#Auto" class="linkConstant">Panel.Auto</a> is used to size the main element to fit around other elements in the Panel.</li>
|
|
<li><a href="symbols/Panel.html#Spot" class="linkConstant">Panel.Spot</a> is used to arrange elements based on the <a href="symbols/Spot.html" class="linkConstructor">Spot</a> properties <a href="symbols/GraphObject.html#alignment" class="linkProperty">GraphObject.alignment</a>
|
|
and <a href="symbols/GraphObject.html#alignmentFocus" class="linkProperty">GraphObject.alignmentFocus</a>, relative to a main element of the panel.
|
|
Spot panels can align relative to other elements by using <a href="symbols/Panel.html#alignmentFocusName" class="linkProperty">Panel.alignmentFocusName</a>.</li>
|
|
<li><a href="symbols/Panel.html#Table" class="linkConstant">Panel.Table</a> is used to arrange elements into rows and columns, typically employing the different
|
|
elements' <a href="symbols/GraphObject.html#row" class="linkProperty">GraphObject.row</a>, <a href="symbols/GraphObject.html#rowSpan" class="linkProperty">GraphObject.rowSpan</a>, <a href="symbols/GraphObject.html#column" class="linkProperty">GraphObject.column</a>,
|
|
and <a href="symbols/GraphObject.html#columnSpan" class="linkProperty">GraphObject.columnSpan</a> properties. This Panel type also makes use of <a href="symbols/RowColumnDefinition.html" class="linkConstructor">RowColumnDefinition</a>.</li>
|
|
<li><a href="symbols/Panel.html#TableRow" class="linkConstant">Panel.TableRow</a> and <a href="symbols/Panel.html#TableColumn" class="linkConstant">Panel.TableColumn</a> can only be used immediately within a <a href="symbols/Panel.html#Table" class="linkConstant">Panel.Table</a> Panel
|
|
to organize a collection of elements as a row or as a column in a table.</li>
|
|
<li><a href="symbols/Panel.html#Viewbox" class="linkConstant">Panel.Viewbox</a> is used to automatically resize a single element to fit inside the panel's available area.</li>
|
|
<li><a href="symbols/Panel.html#Grid" class="linkConstant">Panel.Grid</a> is not used to house typical elements, but is used only to draw regular patterns of lines.
|
|
The elements must be <a href="symbols/Shape.html" class="linkConstructor">Shape</a>s used to describe the repeating lines.</li>
|
|
<li><a href="symbols/Panel.html#Link" class="linkConstant">Panel.Link</a> is only used by <a href="symbols/Link.html" class="linkConstructor">Link</a> parts and Link Adornments.</li>
|
|
<li><a href="symbols/Panel.html#Graduated" class="linkConstant">Panel.Graduated</a> is used to draw regular tick marks and text along the main <a href="symbols/Shape.html" class="linkConstructor">Shape</a> element.</li>
|
|
</ul>
|
|
Using <a href="../../intro/buildingObjects.html">GraphObject.make</a>, the second argument can be used to declare the Panel type:
|
|
<pre>// Either:
|
|
$(go.Panel, go.Panel.Horizontal, ...
|
|
// Or:
|
|
$(go.Panel, "Horizontal", ...
|
|
|
|
// Full example:
|
|
$(go.Panel, "Horizontal",
|
|
{ width: 60, height: 60 }, // panel properties
|
|
// elements in the panel:
|
|
$(go.Shape, "Rectangle", { stroke: "lime" }),
|
|
$(go.TextBlock, "Some Text")
|
|
) // end of panel definition </pre>
|
|
|
|
|
|
<p class="boxread">
|
|
For an overview of most Panel types, please read the <a href="../../intro/panels.html">Introduction page on Panels</a>.
|
|
<p>
|
|
<a href="symbols/Panel.html#Vertical" class="linkConstant">Panel.Vertical</a> and <a href="symbols/Panel.html#Horizontal" class="linkConstant">Panel.Horizontal</a> panels are frequently used to position two or more GraphObjects
|
|
vertically above each other or horizontally next to each other. Use the <a href="symbols/GraphObject.html#alignment" class="linkProperty">GraphObject.alignment</a> or
|
|
<a href="symbols/GraphObject.html#stretch" class="linkProperty">GraphObject.stretch</a> properties on the individual elements to control their position and size.
|
|
Set #isOpposite to true if you want the elements arranged from right-to-left in Horizontal Panels
|
|
or from bottom-to-top in Vertical Panels.
|
|
<p>
|
|
<a href="symbols/Panel.html#Spot" class="linkConstant">Panel.Spot</a> and <a href="symbols/Panel.html#Auto" class="linkConstant">Panel.Auto</a> panels have a "main" element, signified by the Panel's first element
|
|
with <a href="symbols/GraphObject.html#isPanelMain" class="linkProperty">GraphObject.isPanelMain</a> set to true. If there is no such element, it uses the first element as the "main" one.
|
|
Use the <a href="symbols/GraphObject.html#alignment" class="linkProperty">GraphObject.alignment</a> property to position elements with respect to the main element.
|
|
Use the <a href="symbols/GraphObject.html#alignmentFocus" class="linkProperty">GraphObject.alignmentFocus</a> property to further specify the position within Spot Panels.
|
|
"Spot" and "Auto" Panels should have two or more elements in them.
|
|
<p>
|
|
In <a href="symbols/Panel.html#Table" class="linkConstant">Panel.Table</a> panels you will want to set the <a href="symbols/GraphObject.html#row" class="linkProperty">GraphObject.row</a> and <a href="symbols/GraphObject.html#column" class="linkProperty">GraphObject.column</a>
|
|
properties on each element. The <a href="symbols/GraphObject.html#alignment" class="linkProperty">GraphObject.alignment</a> and <a href="symbols/GraphObject.html#stretch" class="linkProperty">GraphObject.stretch</a> properties are also
|
|
useful when an element's table cell is larger than that element.
|
|
<p class="boxrun">Please read the <a href="../../intro/tablePanels.html">Introduction page on Table Panels</a>
|
|
for more examples and explanation.
|
|
<p>
|
|
<a href="symbols/Panel.html#TableRow" class="linkConstant">Panel.TableRow</a> and <a href="symbols/Panel.html#TableColumn" class="linkConstant">Panel.TableColumn</a> panels can only be used as elements within a <a href="symbols/Panel.html#Table" class="linkConstant">Panel.Table</a> Panel.
|
|
They are typically only used in item templates, e.g. for automatically creating rows in a Table Panel based on model data
|
|
provided in an #itemArray. You will still need to specify properties on the individual elements within a TableRow
|
|
or TableColumn as if they were immediate elements of the containing Table panel.
|
|
<p class="boxrun">For an example that uses TableRow Panels, see <a href="../../samples/records.html">Records sample</a>.
|
|
<p>
|
|
<a href="symbols/Panel.html#Grid" class="linkConstant">Panel.Grid</a> panels are often used for the Diagram's <a href="symbols/Diagram.html#grid" class="linkProperty">Diagram.grid</a>.
|
|
<pre>$(go.Diagram, "myDiagramDiv",
|
|
{ . . .
|
|
grid: $(go.Panel, "Grid",
|
|
{ gridCellSize: new go.Size(40, 40) },
|
|
$(go.Shape, "LineH", { stroke: "lightgray" }),
|
|
$(go.Shape, "LineV", { stroke: "lightgray" })
|
|
),
|
|
. . .
|
|
});</pre>
|
|
Or to get a green bar effect:
|
|
<pre>$(go.Diagram, "myDiagramDiv",
|
|
{ . . .
|
|
grid: $(go.Panel, "Grid",
|
|
{ gridCellSize: new go.Size(100, 100) },
|
|
$(go.Shape, "BarH", { fill: "lightgreen", height: 50 })
|
|
),
|
|
. . .
|
|
});</pre>
|
|
But Grid Panels can also be stand alone objects:
|
|
<pre>$(go.Node, go.Panel.Grid,
|
|
{ gridCellSize: new go.Size(6, 6), width: 60, height: 60 },
|
|
$(go.Shape, "LineH", { stroke: "gray" }),
|
|
$(go.Shape, "LineV", { stroke: "gray" }))</pre>
|
|
<p>
|
|
A Grid Panel's elements do not participate in object picking.
|
|
<p class="boxrun">Please read the <a href="../../intro/grids.html">Introduction page on Grid Patterns</a>
|
|
for more examples and explanation.
|
|
<p>
|
|
<a href="symbols/Panel.html#Graduated" class="linkConstant">Panel.Graduated</a> panels, like Spot and Auto Panels have a "main" element. The other elements within a Graduated Panel
|
|
are used to define ticks and labels to draw along the main shape's path.
|
|
<pre>$(go.Part, "Graduated",
|
|
$(go.Shape, { geometryString: "M0 0 H400" }),
|
|
$(go.Shape, { geometryString: "M0 0 V10" }),
|
|
// offset to display below ticks
|
|
$(go.TextBlock, { segmentOffset: new go.Point(0, 12) })
|
|
);</pre>
|
|
<p>
|
|
Only the main shape of a Graduated Panel participates in object picking, but a <code>background</code>
|
|
can be set if the entire panel needs to be pickable.
|
|
You cannot set or bind the <a>Panel.itemArray</a> of a Graduated Panel.
|
|
Events on the tick Shapes and TextBlock labels of a Graduated Panel will be ignored.
|
|
Graduated Panel TextBlock labels cannot be edited.
|
|
<p>
|
|
Rotating the main shape will not rotate the ticks, just as rotating a Spot Panel's main element
|
|
won't rotate its children. Rotation should generally be done at the Panel level. Another similarity
|
|
to Spot Panels is that resizing of a Graduated Panel should generally be done on the main shape.
|
|
<p class="boxrun">Please read the <a href="../../intro/graduatedPanels.html">Introduction page on Graduated Panels</a>
|
|
for more examples and explanation.
|
|
<h3>Changing and accessing elements of a Panel</h3>
|
|
<p>
|
|
You can change the collection of #elements by calling #add, #insertAt, #remove, or #removeAt.
|
|
You can get direct access to a particular element by calling #elt.
|
|
<p>
|
|
You can search the visual tree of a Panel for GraphObjects that given a <a href="symbols/GraphObject.html#name" class="linkProperty">GraphObject.name</a> using #findObject.
|
|
<h3>Panel Size and Appearance</h3>
|
|
<p>
|
|
Panels typically compute their own size based on their elements and Panel #type,
|
|
but can also be sized by setting <a href="symbols/GraphObject.html#desiredSize" class="linkProperty">GraphObject.desiredSize</a>, <a href="symbols/GraphObject.html#minSize" class="linkProperty">GraphObject.minSize</a>, and <a href="symbols/GraphObject.html#maxSize" class="linkProperty">GraphObject.maxSize</a>.
|
|
Setting an explicit size on a Panel may cause nested elements of that panel to size themselves differently,
|
|
especially in the cases of nested elements having a <a href="symbols/GraphObject.html#stretch" class="linkProperty">GraphObject.stretch</a> value or <a href="symbols/TextBlock.html" class="linkConstructor">TextBlock</a>'s having word wrap.
|
|
<p>
|
|
Panels have no visual components of their own unless a <a href="symbols/GraphObject.html#background" class="linkProperty">GraphObject.background</a> or <a href="symbols/GraphObject.html#areaBackground" class="linkProperty">GraphObject.areaBackground</a> is specified
|
|
or separators are specified either as defaults for the whole Table Panel or on individual <a href="symbols/RowColumnDefinition.html" class="linkConstructor">RowColumnDefinition</a>s.
|
|
<p>
|
|
In addition to the <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a> properties on elements that are only used by certain types of panels,
|
|
several Panel properties only apply to specific Panel types.
|
|
<ul>
|
|
<li>Panels of #type <a href="symbols/Panel.html#Table" class="linkConstant">Panel.Table</a> use the #rowCount, #rowSizing, #columnCount,
|
|
#columnSizing, #leftIndex, #topIndex, and all of the "default" separator properties.</li>
|
|
<li>Panels of #type <a href="symbols/Panel.html#TableRow" class="linkConstant">Panel.TableRow</a> and <a href="symbols/Panel.html#TableColumn" class="linkConstant">Panel.TableColumn</a> do not act like regular GraphObjects,
|
|
instead they are only to be used immediately within a <a href="symbols/Panel.html#Table" class="linkConstant">Panel.Table</a>. They are pass-through containers
|
|
that hold elements for their parent table, and ignore their own scale and angle.</li>
|
|
<li>Panels of #type <a href="symbols/Panel.html#Grid" class="linkConstant">Panel.Grid</a> use the #gridCellSize and #gridOrigin properties.</li>
|
|
<li>Panels of #type <a href="symbols/Panel.html#Viewbox" class="linkConstant">Panel.Viewbox</a> use the #viewboxStretch property.</li>
|
|
<li>Panels of #type <a href="symbols/Panel.html#Graduated" class="linkConstant">Panel.Graduated</a> use the #graduatedMin, #graduatedMax,
|
|
#graduatedTickUnit, and #graduatedTickBase properties.
|
|
</ul>
|
|
<p class="boxread">
|
|
For live examples of all Panel types, see the <a href="../../intro/panels.html">Introduction page on Panels.</a>
|
|
<h3>Data Binding</h3>
|
|
<p>
|
|
Panels also provide fundamental support for data binding.
|
|
When a diagram gets a new model or when a diagram's model is augmented with additional data,
|
|
the diagram automatically creates a new Node or Link whose #data property refers to the corresponding
|
|
node data or link data object.
|
|
<p class="boxread">
|
|
For more discussion of data binding, please read the <a href="../../intro/usingModels.html">Introduction page on Models</a>
|
|
and <a href="../../intro/dataBinding.html">Data Binding</a>.
|
|
<p>
|
|
Panels provide support for automatically creating elements within the Panel based on items in a JavaScript Array.
|
|
This is achieved by setting or binding the #itemArray property, which acts in a manner similar
|
|
to the <a href="symbols/Model.html#nodeDataArray" class="linkProperty">Model.nodeDataArray</a> property.
|
|
You can supply an #itemTemplate, which must itself be a simple Panel, which is copied to create the element
|
|
in this container Panel corresponding to an item in the itemArray.
|
|
This property is analogous to the <a href="symbols/Diagram.html#nodeTemplate" class="linkProperty">Diagram.nodeTemplate</a> property, although for the diagram the
|
|
template must be a <a href="symbols/Node.html" class="linkConstructor">Node</a>, <a href="symbols/Group.html" class="linkConstructor">Group</a>, or simple <a href="symbols/Part.html" class="linkConstructor">Part</a>.
|
|
<p>
|
|
Much like the <a href="symbols/Diagram.html#nodeTemplateMap" class="linkProperty">Diagram.nodeTemplateMap</a>, Panel's #itemTemplateMap supports having multiple templates,
|
|
so that the actual structure of the element created for a data item can be chosen dynamically.
|
|
Just as the <a href="symbols/Model.html#nodeCategoryProperty" class="linkProperty">Model.nodeCategoryProperty</a> determines which template in the <a href="symbols/Diagram.html#nodeTemplateMap" class="linkProperty">Diagram.nodeTemplateMap</a>
|
|
is copied to create a <a href="symbols/Node.html" class="linkConstructor">Node</a>, the #itemCategoryProperty names the data property whose value
|
|
chooses the Panel in the itemTemplateMap to copy for the item.
|
|
<p>
|
|
When binding the #itemArray property, it is commonplace to set <a href="symbols/Model.html#copiesArrays" class="linkProperty">Model.copiesArrays</a> and
|
|
<a href="symbols/Model.html#copiesArrayObjects" class="linkProperty">Model.copiesArrayObjects</a> properties to true, so that when a node is copied, the item Array and its
|
|
contents are copied, not shared. Or more generally, to customize the model's copying processes, you
|
|
can supply a custom <a href="symbols/Model.html#copyNodeDataFunction" class="linkProperty">Model.copyNodeDataFunction</a>.
|
|
<p class="boxread">
|
|
For more discussion and examples of item arrays, please read the <a href="../../intro/itemArrays.html">Introduction page on Item Arrays</a>.</div></div>
|
|
|
|
<div><h2><a href="symbols/PanningTool.html" class="linkConstructor">PanningTool</a></h2><p>The PanningTool supports manual panning, where the user can shift the
|
|
<a href="symbols/Diagram.html#position" class="linkProperty">Diagram.position</a> by dragging the mouse.<span class="nodetails" id="xPanningTool"><a class="morelink" onclick="hst('PanningTool')">More...</a></span> <span class="details" id="PanningTool">
|
|
</span><div class="details" id="dPanningTool"><p>
|
|
This tool is a standard mouse-move tool, the <a href="symbols/ToolManager.html#panningTool" class="linkProperty">ToolManager.panningTool</a>.
|
|
Although the <a href="symbols/ToolManager.html#dragSelectingTool" class="linkProperty">ToolManager.dragSelectingTool</a> takes precedence over this tool,
|
|
the <a href="symbols/DragSelectingTool.html" class="linkConstructor">DragSelectingTool</a> only starts if there is a delay after a mouse-down event.
|
|
If it does not start, then this PanningTool gets a chance to start.
|
|
<p>
|
|
This tool does not utilize any <a href="symbols/Adornment.html" class="linkConstructor">Adornment</a>s or tool handles.
|
|
This tool does not modify the model or conduct any transaction.</div></div>
|
|
|
|
<div><h2><a href="symbols/Part.html" class="linkConstructor">Part</a></h2><p>This is the base class for all user-manipulated top-level objects.<span class="nodetails" id="xPart"><a class="morelink" onclick="hst('Part')">More...</a></span> <span class="details" id="Part">
|
|
Because it inherits from <a href="symbols/Panel.html" class="linkConstructor">Panel</a>, it is automatically a visual container
|
|
of other <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a>s.
|
|
Because it thus also inherits from <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a>, it also has properties such as
|
|
<a href="symbols/GraphObject.html#actualBounds" class="linkProperty">GraphObject.actualBounds</a>, <a href="symbols/GraphObject.html#contextMenu" class="linkProperty">GraphObject.contextMenu</a>, and <a href="symbols/GraphObject.html#visible" class="linkProperty">GraphObject.visible</a>.
|
|
</span><div class="details" id="dPart"><p>
|
|
If you just want an object that users can select and manipulate,
|
|
you can create an instance of this class.
|
|
<p>
|
|
If you want an object that also supports being connected by links to other objects,
|
|
use the <a href="symbols/Node.html" class="linkConstructor">Node</a> class, which inherits from Part.
|
|
Create those connections by using instances of the <a href="symbols/Link.html" class="linkConstructor">Link</a> class.
|
|
<p>
|
|
If you want a node that logically contains a subgraph of nodes and links,
|
|
use the <a href="symbols/Group.html" class="linkConstructor">Group</a> class, which inherits from <a href="symbols/Node.html" class="linkConstructor">Node</a>.
|
|
<p>
|
|
If you want an object that decorates another Part, without having to modify that Part,
|
|
use the <a href="symbols/Adornment.html" class="linkConstructor">Adornment</a> class.
|
|
Adornments do not support linking or grouping or being selected.
|
|
<p>
|
|
You can construct a Part, add <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a>s to it programmatically,
|
|
and then add the part to a diagram by calling <a href="symbols/Diagram.html#add" class="linkMethod">Diagram.add</a>.
|
|
However it is commonplace to add data to a model by setting its <a href="symbols/Model.html#nodeDataArray" class="linkProperty">Model.nodeDataArray</a> or calling <a href="symbols/Model.html#addNodeData" class="linkMethod">Model.addNodeData</a>,
|
|
or for <a href="symbols/Link.html" class="linkConstructor">Link</a>s, setting the <a href="symbols/GraphLinksModel.html#linkDataArray" class="linkProperty">GraphLinksModel.linkDataArray</a> or calling <a href="symbols/GraphLinksModel.html#addLinkData" class="linkMethod">GraphLinksModel.addLinkData</a>.
|
|
Such actions will cause a diagram that is displaying the model to copy a template,
|
|
which is a Part that may have data <a href="symbols/Binding.html" class="linkConstructor">Binding</a>s, and add the new part to the diagram.
|
|
The <a href="symbols/Panel.html#data" class="linkProperty">Panel.data</a> property will refer to that data object in the model.
|
|
<p>
|
|
Some examples of adding Parts to a Diagram:
|
|
<pre>// A simple Part template
|
|
myDiagram.nodeTemplate =
|
|
$(go.Part, "Horizontal",
|
|
$(go.Shape, "Circle", { width: 20, height: 20 }),
|
|
$(go.TextBlock, "Hello World")
|
|
);
|
|
// Node templates can be either Nodes, or simple Parts
|
|
// (But not Groups, Adornments, or Links)
|
|
|
|
// Adds copies of the nodeTemplate bound to the specified node data:
|
|
myDiagram.model.nodeDataArray =
|
|
[
|
|
{ key: "Alpha" },
|
|
{ key: "Beta" }
|
|
];
|
|
|
|
// Adds one copy of the nodeTemplate bound to the given node data:
|
|
myDiagram.model.addNodeData( { key: "Gamma" } );</pre>
|
|
<p class="boxread">
|
|
See the <a href="../../intro/usingModels.html">Introduction on using Models</a>
|
|
for examples and more information.
|
|
<h3>Layers and Z-ordering</h3>
|
|
<p>
|
|
Parts added to a Diagram exist in one of the Diagram's <a href="symbols/Layer.html" class="linkConstructor">Layer</a>s.
|
|
You can specify which layer the part should be in by setting #layerName.
|
|
Parts cannot be nested in the visual tree -- they cannot be added to other Parts of Panels.
|
|
<p>
|
|
Parts can be individually z-ordered within a layer by setting #zOrder.
|
|
Parts within the same layer that have a higher zOrder number will be drawn above parts with a lower number.
|
|
<h3>Size and Position</h3>
|
|
<p>
|
|
The size and position of a part are given by its <a href="symbols/GraphObject.html#actualBounds" class="linkProperty">GraphObject.actualBounds</a>.
|
|
The size is determined by the <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a>s that are elements inside this part.
|
|
You can change the position by setting <a href="symbols/GraphObject.html#position" class="linkProperty">GraphObject.position</a> or <a href="symbols/Part.html#location" class="linkProperty">Part.location</a>.
|
|
<p>
|
|
The "location" of a part is commonly the same as its "position".
|
|
The "position" is always the point that is at the top-left corner of the area occupied by the part.
|
|
But the "location" may be different from the "position" if you want to think of the part as being "at" a different spot in the part.
|
|
For example, you might want the "location" to be at the center of a <a href="symbols/Picture.html" class="linkConstructor">Picture</a> that has a <a href="symbols/TextBlock.html" class="linkConstructor">TextBlock</a> title of arbitrary size.
|
|
In this case you would set the #locationSpot to be <a href="symbols/Spot.html#Center" class="linkConstant">Spot.Center</a> and the #locationObjectName
|
|
to be the name of the Picture element in your Part.
|
|
<p>
|
|
A part may be selected or de-selected by setting its #isSelected property.
|
|
This may also happen due to a call to <a href="symbols/Diagram.html#select" class="linkMethod">Diagram.select</a> or other operations that change the selection.
|
|
The user may change this property as part of the operation of the <a href="symbols/ClickSelectingTool.html" class="linkConstructor">ClickSelectingTool</a>,
|
|
due to the user's mouse click, if the part is #selectable.
|
|
<h3>Ability Properties (Permissions)</h3>
|
|
<p>
|
|
There are many properties named "...able", that control what operations the user may perform on this part.
|
|
These properties correspond to the similarly named properties on <a href="symbols/Diagram.html" class="linkConstructor">Diagram</a> and <a href="symbols/Layer.html" class="linkConstructor">Layer</a> that govern the
|
|
behavior for all parts in all layers or for all parts in the given layer.
|
|
For example, the <a href="symbols/Part.html#copyable" class="linkProperty">Part.copyable</a> property corresponds to the properties <a href="symbols/Diagram.html#allowCopy" class="linkProperty">Diagram.allowCopy</a> and <a href="symbols/Layer.html#allowCopy" class="linkProperty">Layer.allowCopy</a>.
|
|
<p>
|
|
For each of these "ability" properties there is a corresponding "can..." predicate.
|
|
For example, the <a href="symbols/Part.html#canCopy" class="linkMethod">Part.canCopy</a> predicate is false if any of the three previously named properties is false.
|
|
Commands and tools will normally call these predicates rather than just looking at Part properties.
|
|
<p class="boxread">
|
|
For more discussion about permissions, please read: <a href="../../intro/permissions.html">Permissions</a>.
|
|
<p>
|
|
As previously mentioned, each <a href="symbols/Diagram.html" class="linkConstructor">Diagram</a> supports the notion of selected parts.
|
|
One way of displaying that a part is selected is by modifying the part.
|
|
You can set the #selectionChanged property to be a function that is called when the value of #isSelected has changed;
|
|
it is passed the Part as the first argument.
|
|
The function can modify the color of one or more <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a>s in the visual tree of that Part.
|
|
Or perhaps it could toggle the <a href="symbols/GraphObject.html#visible" class="linkProperty">GraphObject.visible</a> property of an object that is normally hidden when the part is not selected.
|
|
<p>
|
|
The Part class also supports showing separate visual objects for a part when it gets selected.
|
|
These visuals are typically used to show that the part is selected ("selection handles")
|
|
or are used to allow the user to manipulate or modify the part with a tool ("tool handles").
|
|
These handles are instances of <a href="symbols/Adornment.html" class="linkConstructor">Adornment</a>s.
|
|
The #updateAdornments method is responsible for showing or hiding adornments,
|
|
normally depending on whether the part is selected.
|
|
<p>
|
|
When the #selectionAdorned property is true, a selected part automatically gets an <a href="symbols/Adornment.html" class="linkConstructor">Adornment</a> created for it.
|
|
By default the selection adornment is just a simple blue box around the Part, and a blue shape following the route of a selected Link.
|
|
However you can set the #selectionAdornmentTemplate to an arbitrarily complex Adornment.
|
|
This way it can show more information or buttons for executing various commands when the user selects a Part.
|
|
<p>
|
|
Tool handles are shown for those mode-less mouse-down tools that need it.
|
|
The process of updating adornments for a part will call <a href="symbols/Tool.html#updateAdornments" class="linkMethod">Tool.updateAdornments</a> on each tool in <a href="symbols/ToolManager.html#mouseDownTools" class="linkProperty">ToolManager.mouseDownTools</a>.
|
|
Most tools might not need special tool handles.
|
|
But, for example, <a href="symbols/ResizingTool.html" class="linkConstructor">ResizingTool</a> naturally will want to create an adornment with eight resize handles
|
|
positioned at the corners and at the middles of the sides of the selected node's visual element,
|
|
if the node has its #canResize function returning true.
|
|
<p>
|
|
One may not always want the whole Part to get the selection handle or all tool handles.
|
|
Sometimes one wants to emphasize selection by highlighting a particular element within the part's visual tree.
|
|
This can be achieved by setting the #selectionObjectName property,
|
|
and making sure the desired element has the same <a href="symbols/GraphObject.html#name" class="linkProperty">GraphObject.name</a> property value.
|
|
<p class="boxread">
|
|
For more discussion about selection, see <a href="../../intro/selection.html">Selection</a>.
|
|
<p>
|
|
Similarly the #resizeObjectName and #rotateObjectName properties direct the
|
|
corresponding <a href="symbols/ResizingTool.html" class="linkConstructor">ResizingTool</a> and <a href="symbols/RotatingTool.html" class="linkConstructor">RotatingTool</a> to operate on the particular <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a>
|
|
in the Part's visual tree with the given name.
|
|
That includes both providing tool handles and actually modifying properties on that object.
|
|
<p>
|
|
Parts are not resizable or rotatable by default: you need to set #resizable and/or #rotatable to true.
|
|
<p class="boxread">
|
|
For more discussion about tools, see <a href="../../intro/tools.html">Tools</a>.
|
|
<p>
|
|
A Part may be positioned (or a <a href="symbols/Link.html" class="linkConstructor">Link</a> may be routed) by a <a href="symbols/Layout.html" class="linkConstructor">Layout</a>.
|
|
This will happen automatically if <a href="symbols/Diagram.html#layout" class="linkProperty">Diagram.layout</a> or <a href="symbols/Group.html#layout" class="linkProperty">Group.layout</a> are set.
|
|
The default <a href="symbols/Diagram.html#layout" class="linkProperty">Diagram.layout</a> will position any nodes that were not given explicit positions or location.
|
|
<p>
|
|
If you set #isLayoutPositioned to false, this part will not participate in any of the standard layouts,
|
|
so it will not be moved by a layout or affect other parts in a layout.
|
|
In order for the part to get a #location or position you will need to supply it explicitly.
|
|
<p>
|
|
As parts are added to or removed from a diagram, the <a href="symbols/Layout.html" class="linkConstructor">Layout</a> responsible for positioning the part is invalidated.
|
|
This will cause the layout to be performed again in the near future, at the end of the transaction.
|
|
This automatic layout invalidation also occurs as parts change their visibility (<a href="symbols/GraphObject.html#visible" class="linkProperty">GraphObject.visible</a>)
|
|
or their size (<a href="symbols/GraphObject.html#actualBounds" class="linkProperty">GraphObject.actualBounds</a>).
|
|
If you do want there to be a <a href="symbols/Diagram.html#layout" class="linkProperty">Diagram.layout</a> but you do not want an automatic layout to happen
|
|
after removing parts (for example), you can set #layoutConditions not to include the <a href="symbols/Part.html#LayoutRemoved" class="linkConstant">Part.LayoutRemoved</a> flag.
|
|
In this particular case, you could set #layoutConditions to:
|
|
<code>go.Part.LayoutStandard & ~go.Part.LayoutRemoved</code>.
|
|
It may also reasonable for your application to set it to <a href="symbols/Part.html#LayoutNone" class="linkConstant">Part.LayoutNone</a>.
|
|
Do not forget to consider applying the same conditions to links as well as to nodes and groups.
|
|
<p>
|
|
If you want to save the locations/positions of the parts in a diagram, it is commonplace to
|
|
data bind the #location to a property on your node data with a TwoWay <a href="symbols/Binding.html" class="linkConstructor">Binding</a>
|
|
(call <a href="symbols/Binding.html#makeTwoWay" class="linkMethod">Binding.makeTwoWay</a>). For example:
|
|
<pre>$(go.Part, "Horizontal",
|
|
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
|
|
...</pre>
|
|
<p>
|
|
Then as the nodes are moved, whether manually by the user or automatically by a <a href="symbols/Layout.html" class="linkConstructor">Layout</a>,
|
|
the model data is automatically updated with the location.
|
|
<p class="boxread">
|
|
For more discussion about related topics, see <a href="../../intro/selection.html">Selection</a>,
|
|
<a href="../../intro/tools.html">Tools</a>, and
|
|
<a href="../../intro/permissions.html">Permissions</a>.
|
|
<p>
|
|
Parts that are templates should have no relationships with other Parts.
|
|
Only real Parts that are in a Diagram can belong to Groups or have any Adornments.
|
|
Only real Nodes in a Diagram can be connected with Links.</div></div>
|
|
|
|
<div><h2><a href="symbols/PathFigure.html" class="linkConstructor">PathFigure</a></h2><p>A PathFigure represents a section of a <a href="symbols/Geometry.html" class="linkConstructor">Geometry</a>.<span class="nodetails" id="xPathFigure"><a class="morelink" onclick="hst('PathFigure')">More...</a></span> <span class="details" id="PathFigure">
|
|
It is a single connected series of
|
|
two-dimensional geometric <a href="symbols/PathSegment.html" class="linkConstructor">PathSegment</a>s.
|
|
</span><div class="details" id="dPathFigure"><p>
|
|
The <a href="symbols/Geometry.html#figures" class="linkProperty">Geometry.figures</a> property is a list of PathFigures.
|
|
<p>
|
|
A PathFigure must not be modified once its containing <a href="symbols/Geometry.html" class="linkConstructor">Geometry</a>
|
|
has been assigned to a <a href="symbols/Shape.html" class="linkConstructor">Shape</a>.</div></div>
|
|
|
|
<div><h2><a href="symbols/PathSegment.html" class="linkConstructor">PathSegment</a></h2><p>A PathSegment represents a straight line or curved segment of a path between
|
|
two or more points that are part of a <a href="symbols/PathFigure.html" class="linkConstructor">PathFigure</a>.<span class="nodetails" id="xPathSegment"><a class="morelink" onclick="hst('PathSegment')">More...</a></span> <span class="details" id="PathSegment">
|
|
</span><div class="details" id="dPathSegment"><p>
|
|
A PathSegment must not be modified once its containing <a href="symbols/PathFigure.html" class="linkConstructor">PathFigure</a>'s
|
|
<a href="symbols/Geometry.html" class="linkConstructor">Geometry</a> has been assigned to a <a href="symbols/Shape.html" class="linkConstructor">Shape</a>.</div></div>
|
|
|
|
<div><h2><a href="symbols/Picture.html" class="linkConstructor">Picture</a></h2><p>A Picture is a <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a> that shows an image, video-frame, or Canvas element.<span class="nodetails" id="xPicture"><a class="morelink" onclick="hst('Picture')">More...</a></span> <span class="details" id="Picture">
|
|
</span><div class="details" id="dPicture"><p>
|
|
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.
|
|
<p>
|
|
If a #source URL is set, the Picture will automatically create a corresponding
|
|
HTMLImageElement and retain a reference to it in memory. If multiple Pictures specify
|
|
the same #source URL then they will all refer to the same HTMLImageElement.
|
|
<p>
|
|
Some created Pictures:
|
|
<pre>var $ = go.GraphObject.make; // for conciseness in defining GraphObjects
|
|
|
|
// A shape with the figure set to "example.png". It will show a gray area until the image is loaded:
|
|
$(go.Picture, { source: "example.png", background: "gray", width: 50, height: 50 })
|
|
// Alternatively:
|
|
$(go.Picture, "example.png", { background: "gray", width: 50, height: 50 })</pre>
|
|
<p>
|
|
If an element is not completely loaded during Diagram initialization, a redraw may occur,
|
|
and if an image's size is not known before loading, the containing Part of this Picture
|
|
may be resized, causing side effects such as layouts.
|
|
This can be avoided by knowing the size of the image beforehand,
|
|
and setting the Picture's <a href="symbols/GraphObject.html#desiredSize" class="linkProperty">GraphObject.desiredSize</a>.
|
|
<p>
|
|
With some images (notably sprite sheets) only a portion of the image is expected to be drawn.
|
|
The #sourceRect property allows the programmer to specify a rectangular area of
|
|
the source image that the Picture should display.
|
|
<p>
|
|
The #imageStretch property allows an image to be resized inside of its bounding box.
|
|
This property does not change the size of the Picture element, it only resizes or re-scales
|
|
the image to fit (or not) in its bounds.
|
|
<p class="boxread">
|
|
For examples of sizing and #imageStretch,
|
|
see the <a href="../../intro/pictures.html">Introduction page on Pictures</a>.
|
|
<p>
|
|
The #errorFunction property allows one to set a function to call when a source fails to load.
|
|
This is useful in instances where images cannot be guaranteed to work, such as with
|
|
user specified input. The error function can set the #source to a known good value,
|
|
but care should be taken to avoid error infinite loops when doing so.</div></div>
|
|
|
|
<div><h2><a href="symbols/Placeholder.html" class="linkConstructor">Placeholder</a></h2><p>If a Placeholder is in the visual tree of a <a href="symbols/Group.html" class="linkConstructor">Group</a>, it represents the area of all of the member <a href="symbols/Part.html" class="linkConstructor">Part</a>s of that Group.<span class="nodetails" id="xPlaceholder"><a class="morelink" onclick="hst('Placeholder')">More...</a></span> <span class="details" id="Placeholder">
|
|
If a Placeholder is in the visual tree of an <a href="symbols/Adornment.html" class="linkConstructor">Adornment</a>, it represents the area of the <a href="symbols/Adornment.html#adornedObject" class="linkProperty">Adornment.adornedObject</a>.
|
|
It can only be used in the visual tree of a Group node or an Adornment.
|
|
There can be at most one Placeholder in a Group or an Adornment.
|
|
</span><div class="details" id="dPlaceholder"><p>
|
|
See the documentation for <a href="symbols/Group.html" class="linkConstructor">Group</a> and <a href="symbols/Adornment.html" class="linkConstructor">Adornment</a> for descriptions of the Placeholder roles in each.</div></div>
|
|
|
|
<div><h2><a href="symbols/Point.html" class="linkConstructor">Point</a></h2><p>A Point represents an x- and y-coordinate pair in two-dimensional space.<span class="nodetails" id="xPoint"><a class="morelink" onclick="hst('Point')">More...</a></span> <span class="details" id="Point">
|
|
</span><div class="details" id="dPoint"><p>
|
|
Use the static functions <a href="symbols/Point.html#.parse" class="linkStatic">Point.parse</a> and <a href="symbols/Point.html#.stringify" class="linkStatic">Point.stringify</a> to convert to and from
|
|
a standard string representation that is independent of the current locale.
|
|
<p>
|
|
When an instance of this class is the value of a property of a <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a> class or <a href="symbols/Diagram.html" class="linkConstructor">Diagram</a>
|
|
or <a href="symbols/CommandHandler.html" class="linkConstructor">CommandHandler</a> or a <a href="symbols/Tool.html" class="linkConstructor">Tool</a> class, you should treat the object
|
|
as if it were frozen or read-only -- you cannot modify its properties.
|
|
This allows the property to return a value without allocating a new instance.
|
|
If you need to do your own calculations with the value, call #copy to make
|
|
a new instance with the same values that you can modify.
|
|
<p>
|
|
Many methods modify the object's properties and then return a reference to "this" object.
|
|
The only instance method to allocate a new object is the #copy method.
|
|
The static <a href="symbols/Point.html#.parse" class="linkStatic">Point.parse</a> method also allocates a new object.
|
|
<p>
|
|
The "Debug" implementation of this class is significantly slower than the "Release" implementation,
|
|
mostly due to additional error checking.
|
|
<p>
|
|
You cannot inherit from this class.</div></div>
|
|
|
|
<div><h2><a href="symbols/Rect.html" class="linkConstructor">Rect</a></h2><p>A Rect describes a rectangular two-dimensional area as a top-left point (x and y values)
|
|
and a size (width and height values).<span class="nodetails" id="xRect"><a class="morelink" onclick="hst('Rect')">More...</a></span> <span class="details" id="Rect">
|
|
</span><div class="details" id="dRect"><p>
|
|
Use the static functions <a href="symbols/Rect.html#.parse" class="linkStatic">Rect.parse</a> and <a href="symbols/Rect.html#.stringify" class="linkStatic">Rect.stringify</a> to convert to and from
|
|
a standard string representation that is independent of the current locale.
|
|
<p>
|
|
When an instance of this class is the value of a property of a <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a> class or <a href="symbols/Diagram.html" class="linkConstructor">Diagram</a>
|
|
or <a href="symbols/CommandHandler.html" class="linkConstructor">CommandHandler</a> or a <a href="symbols/Tool.html" class="linkConstructor">Tool</a> class, you should treat the object
|
|
as if it were frozen or read-only -- you cannot modify its properties.
|
|
This allows the property to return a value without allocating a new instance.
|
|
If you need to do your own calculations with the value, call #copy to make
|
|
a new instance with the same values that you can modify.
|
|
<p>
|
|
Many methods modify the object's properties and then return a reference to "this" object.
|
|
The only instance method to allocate a new object is the #copy method.
|
|
The static <a href="symbols/Rect.html#.parse" class="linkStatic">Rect.parse</a> method also allocates a new object.
|
|
The #center, #position, and #size properties all allocate and return a new object.
|
|
<p>
|
|
The "Debug" implementation of this class is significantly slower than the "Release" implementation,
|
|
mostly due to additional error checking.
|
|
<p>
|
|
You cannot inherit from this class.</div></div>
|
|
|
|
<div><h2><a href="symbols/RelinkingTool.html" class="linkConstructor">RelinkingTool</a></h2><p>The RelinkingTool allows the user to reconnect an existing <a href="symbols/Link.html" class="linkConstructor">Link</a>
|
|
if the <a href="symbols/Link.html#relinkableTo" class="linkProperty">Link.relinkableTo</a> and/or <a href="symbols/Link.html#relinkableFrom" class="linkProperty">Link.relinkableFrom</a> properties are true.<span class="nodetails" id="xRelinkingTool"><a class="morelink" onclick="hst('RelinkingTool')">More...</a></span> <span class="details" id="RelinkingTool">
|
|
<p class="boxread">
|
|
For a general discussion of validation, see <a href="../../intro/validation.html">Introduction to Validation</a>.
|
|
</span><div class="details" id="dRelinkingTool"><p>
|
|
By default an instance of this tool is installed as a mouse-down tool in the
|
|
<a href="symbols/Diagram.html#toolManager" class="linkProperty">Diagram.toolManager</a> as the <a href="symbols/ToolManager.html#relinkingTool" class="linkProperty">ToolManager.relinkingTool</a>.
|
|
<p>
|
|
This tool makes use of two <a href="symbols/Adornment.html" class="linkConstructor">Adornment</a>s,
|
|
each including a relink handle (potentially one for each end of the link),
|
|
shown when a link is selected.
|
|
<p>
|
|
This tool conducts a transaction while the tool is active.
|
|
A successful relinking will result in a "LinkRelinked" <a href="symbols/DiagramEvent.html" class="linkConstructor">DiagramEvent</a> and a "Relinking" transaction.</div></div>
|
|
|
|
<div><h2><a href="symbols/ResizingTool.html" class="linkConstructor">ResizingTool</a></h2><p>The ResizingTool is used to interactively change the size of a <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a>
|
|
in the selected <a href="symbols/Part.html" class="linkConstructor">Part</a> or <a href="symbols/Node.html" class="linkConstructor">Node</a> by setting its <a href="symbols/GraphObject.html#desiredSize" class="linkProperty">GraphObject.desiredSize</a> property.<span class="nodetails" id="xResizingTool"><a class="morelink" onclick="hst('ResizingTool')">More...</a></span> <span class="details" id="ResizingTool">
|
|
You may want to save the size to the model by using a TwoWay <a href="symbols/Binding.html" class="linkConstructor">Binding</a> on the "desiredSize" property
|
|
of the GraphObject that is named by <a href="symbols/Part.html#resizeObjectName" class="linkProperty">Part.resizeObjectName</a>.
|
|
This tool does not operate on <a href="symbols/Link.html" class="linkConstructor">Link</a>s.
|
|
</span><div class="details" id="dResizingTool"><p>
|
|
You can limit the permitted minimum and maximum dimensions by setting
|
|
#minSize and #maxSize.
|
|
The resizing will also respect the <a href="symbols/GraphObject.html#minSize" class="linkProperty">GraphObject.minSize</a> and
|
|
<a href="symbols/GraphObject.html#maxSize" class="linkProperty">GraphObject.maxSize</a> properties.
|
|
Width or height values that are NaN do not constrain the resizing.
|
|
Override #computeMinSize and/or #computeMaxSize to change this behavior.
|
|
<p>
|
|
You can also limit the width and/or height to be multiples of a particular size by
|
|
setting <a href="symbols/Part.html#resizeCellSize" class="linkProperty">Part.resizeCellSize</a>.
|
|
If either or both of these values are NaN, as they are by default,
|
|
it will get the values from this tool's #cellSize.
|
|
Then if either or both of the width and height are still NaN,
|
|
and if <a href="symbols/DraggingTool.html#isGridSnapEnabled" class="linkProperty">DraggingTool.isGridSnapEnabled</a> is true,
|
|
it will use the <a href="symbols/DraggingTool.html#gridSnapCellSize" class="linkProperty">DraggingTool.gridSnapCellSize</a>.
|
|
Finally it will consider the <a href="symbols/Diagram.html#grid" class="linkProperty">Diagram.grid</a>'s <a href="symbols/Panel.html#gridCellSize" class="linkProperty">Panel.gridCellSize</a>
|
|
if #isGridSnapEnabled is true.
|
|
Override #computeCellSize to change this behavior.
|
|
<p>
|
|
Pressing the Shift key or resizing a <a href="symbols/Shape.html" class="linkConstructor">Shape</a> with a <a href="symbols/Shape.html#geometryStretch" class="linkProperty">Shape.geometryStretch</a> of
|
|
<a href="symbols/GraphObject.html#Uniform" class="linkConstant">GraphObject.Uniform</a> or <a href="symbols/GraphObject.html#UniformToFill" class="linkConstant">GraphObject.UniformToFill</a> will maintain the aspect ratio during the resize.
|
|
Override #computeReshape to change this behavior.
|
|
<p>
|
|
This tool makes use of an <a href="symbols/Adornment.html" class="linkConstructor">Adornment</a>, shown when the <a href="symbols/Part.html" class="linkConstructor">Part</a> or <a href="symbols/Node.html" class="linkConstructor">Node</a> is selected,
|
|
that includes some number of resize handles.
|
|
The resize handles are normally copies of <a href="symbols/ResizingTool.html#handleArchetype" class="linkProperty">ResizingTool.handleArchetype</a>,
|
|
unless you specify a custom resize Adornment by setting <a href="symbols/Part.html#resizeAdornmentTemplate" class="linkProperty">Part.resizeAdornmentTemplate</a>.
|
|
The resize Adornment is normally a "Spot" Panel with eight resize handles,
|
|
each with <a href="symbols/GraphObject.html#alignment" class="linkProperty">GraphObject.alignment</a> set to one of the eight standard <a href="symbols/Spot.html" class="linkConstructor">Spot</a> values --
|
|
the four corners and the four side middles.
|
|
The <a href="symbols/GraphObject.html#alignment" class="linkProperty">GraphObject.alignment</a> is what identifies and distinguishes each of the handles and
|
|
the behavior when the user drags the handle.
|
|
<p>
|
|
This tool conducts a transaction while the tool is active.
|
|
A successful resizing will result in a "PartResized" <a href="symbols/DiagramEvent.html" class="linkConstructor">DiagramEvent</a> and a "Resizing" transaction.
|
|
<p class="boxread">
|
|
For a general discussion of the sizing of objects, see: <a href="../../intro/sizing.html">Introduction to the sizing of GraphObjects</a>.
|
|
For customizing the ResizingTool, see <a href="../../intro/tools.html#ResizingTool">Introduction to the ResizingTool</a>.</div></div>
|
|
|
|
<div><h2><a href="symbols/RotatingTool.html" class="linkConstructor">RotatingTool</a></h2><p>The RotatingTool is used to interactively change the <a href="symbols/GraphObject.html#angle" class="linkProperty">GraphObject.angle</a> of a <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a>
|
|
by setting its <a href="symbols/GraphObject.html#angle" class="linkProperty">GraphObject.angle</a> property.<span class="nodetails" id="xRotatingTool"><a class="morelink" onclick="hst('RotatingTool')">More...</a></span> <span class="details" id="RotatingTool">
|
|
You may want to save the angle to the model by using a TwoWay <a href="symbols/Binding.html" class="linkConstructor">Binding</a> on the "angle" property
|
|
of the GraphObject that is named by <a href="symbols/Part.html#rotateObjectName" class="linkProperty">Part.rotateObjectName</a>.
|
|
</span><div class="details" id="dRotatingTool"><p>
|
|
This tool allows the user to rotate the <a href="symbols/Part.html#rotateObject" class="linkProperty">Part.rotateObject</a> of the selected <a href="symbols/Part.html" class="linkConstructor">Part</a>.
|
|
The <a href="symbols/Part.html" class="linkConstructor">Part</a> must be <a href="symbols/Part.html#rotatable" class="linkProperty">Part.rotatable</a>, which is false by default.
|
|
Normally this works with <a href="symbols/Part.html" class="linkConstructor">Part</a>s or <a href="symbols/Node.html" class="linkConstructor">Node</a>s; it does not make sense for whole <a href="symbols/Link.html" class="linkConstructor">Link</a>s
|
|
or <a href="symbols/Link.html#path" class="linkProperty">Link.path</a>s, so if you want to rotate a label on a Link, make sure to name that label
|
|
and refer to it as the <a href="symbols/Part.html#rotateObjectName" class="linkProperty">Part.rotateObjectName</a>.
|
|
<p>
|
|
You can limit the permitted angles by setting #snapAngleMultiple and #snapAngleEpsilon.
|
|
For example, if you want to permit only angles that are multiples of 90 degrees,
|
|
set #snapAngleMultiple to 90 and #snapAngleEpsilon to 45. Pressing the Shift key ignores these properties.
|
|
<p>
|
|
This tool makes use of an <a href="symbols/Adornment.html" class="linkConstructor">Adornment</a> that includes a rotation handle.
|
|
It is shown when the selected <a href="symbols/Part.html" class="linkConstructor">Part</a> is <a href="symbols/Part.html#rotatable" class="linkProperty">Part.rotatable</a>.
|
|
The rotate handle is normally a copy of <a href="symbols/RotatingTool.html#handleArchetype" class="linkProperty">RotatingTool.handleArchetype</a>.
|
|
unless you specify a custom rotate Adornment by setting <a href="symbols/Part.html#rotateAdornmentTemplate" class="linkProperty">Part.rotateAdornmentTemplate</a>.
|
|
<p>
|
|
This tool conducts a transaction while the tool is active.
|
|
A successful rotation will result in a "PartRotated" <a href="symbols/DiagramEvent.html" class="linkConstructor">DiagramEvent</a> and a "Rotating" transaction.
|
|
<p class="boxread">
|
|
For customizing the RotatingTool, see <a href="../../intro/tools.html#RotatingTool">Introduction to the RotatingTool</a>.</div></div>
|
|
|
|
<div><h2><a href="symbols/RowColumnDefinition.html" class="linkConstructor">RowColumnDefinition</a></h2><p>The RowColumnDefinition class describes constraints on a row or a column
|
|
in a <a href="symbols/Panel.html" class="linkConstructor">Panel</a> of type <a href="symbols/Panel.html#Table" class="linkConstant">Panel.Table</a>.<span class="nodetails" id="xRowColumnDefinition"><a class="morelink" onclick="hst('RowColumnDefinition')">More...</a></span> <span class="details" id="RowColumnDefinition">
|
|
It also provides information about the actual layout after the
|
|
Table Panel has been arranged.</span></div>
|
|
|
|
<div><h2><a href="symbols/Set.html" class="linkConstructor">Set</a></h2><p>An unordered iterable collection that cannot contain two instances of the same kind of value.<span class="nodetails" id="xSet"><a class="morelink" onclick="hst('Set')">More...</a></span> <span class="details" id="Set">
|
|
It optionally enforces the type of elements that may be added to the Set.
|
|
</span><div class="details" id="dSet"><p>
|
|
An example usage:
|
|
<pre>
|
|
var set = new go.Set("string"); // make a set of strings
|
|
set.add("orange");
|
|
set.add("apple");
|
|
set.add("orange");
|
|
// now set.count === 2
|
|
// and set.contains("orange") === true
|
|
// and set.contains("banana") === false
|
|
</pre>
|
|
<p>
|
|
You can iterate over the items in a Set:
|
|
<pre>
|
|
var it = aSet.iterator;
|
|
while (it.next()) {
|
|
. . . it.value . . .
|
|
}
|
|
</pre>
|
|
Or:
|
|
<pre>
|
|
aSet.each(function(val) {
|
|
. . . val . . .
|
|
});
|
|
</pre>
|
|
<p>
|
|
Although not precisely implementing the features of the EcmaScript 6 <b>Set</b> class,
|
|
this <b>GoJS</b> Set class has synonyms for the following methods and property:
|
|
<ul>
|
|
<li><b>add(val)</b>: #add</li>
|
|
<li><b>delete(val)</b>: #remove</li>
|
|
<li><b>has(val)</b>: #contains</li>
|
|
<li><b>clear()</b>: <a href="symbols/UndoManager.html#clear" class="linkMethod">clear</a></li>
|
|
<li><b>size</b>: #count</li>
|
|
</ul>
|
|
The constructor does not take an optional Iterable argument, but you can get the same effect by:
|
|
<code>new go.Set().addAll(iterable)</code></div></div>
|
|
|
|
<div><h2><a href="symbols/Shape.html" class="linkConstructor">Shape</a></h2><p>A Shape is a <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a> that shows a geometric figure.<span class="nodetails" id="xShape"><a class="morelink" onclick="hst('Shape')">More...</a></span> <span class="details" id="Shape">
|
|
The <a href="symbols/Geometry.html" class="linkConstructor">Geometry</a> determines what is drawn;
|
|
the properties #fill and #stroke
|
|
(and other stroke properties) determine how it is drawn.
|
|
</span><div class="details" id="dShape"><p>
|
|
There are generally two types of shapes: Those that use a custom <a href="symbols/Geometry.html" class="linkConstructor">Geometry</a> by setting
|
|
<a href="symbols/Shape.html#geometry" class="linkProperty">Shape.geometry</a>, and those that receive an automatically generated Geometry using the value of
|
|
#figure, #toArrow, or #fromArrow. An explicitly set Geometry always supersedes
|
|
the figure and arrowhead properties.
|
|
<p>
|
|
Some created Shapes:
|
|
<pre>var $ = go.GraphObject.make; // for conciseness in defining GraphObjects
|
|
|
|
// A shape with the figure set to RoundedRectangle:
|
|
$(go.Shape, { figure: "RoundedRectangle", fill: "lightgreen" })
|
|
// Alternatively:
|
|
$(go.Shape, "RoundedRectangle", { fill: "lightgreen" })
|
|
|
|
// A shape with a custom geometry, using geometryString:
|
|
$(go.Shape,
|
|
{ geometry: go.Geometry.parse("M120 0 L80 80 0 50z") })
|
|
|
|
// A shape with a custom geometry, using geometryString:
|
|
$(go.Shape,
|
|
{ geometryString: "F M120 0 L80 80 0 50z",
|
|
fill: "lightgreen" })
|
|
|
|
// A common link template, using two shapes,
|
|
// the first for the link path and the second for the arrowhead
|
|
myDiagram.linkTemplate =
|
|
$(go.Link,
|
|
// The first shape in a link is special, its geometry is set by the Link's routing,
|
|
// so it does not need a geometry or figure set manually
|
|
$(go.Shape,
|
|
{ strokeWidth: 2, stroke: 'gray' }),
|
|
$(go.Shape,
|
|
{ toArrow: "Standard", fill: 'gray', stroke: null })
|
|
);</pre>
|
|
<p class="box">
|
|
You can see more custom geometry examples and read about geometryString
|
|
on the <a href="../../intro/geometry.html">Geometry Path Strings Introduction page.</a>
|
|
<p>
|
|
When automatically generating a Shape <a href="symbols/Geometry.html" class="linkConstructor">Geometry</a>, the value of #toArrow takes precedence,
|
|
then #fromArrow, then #figure. If the value of #toArrow or #fromArrow is "None"
|
|
then it is ignored, and the "None" value of #figure is identical to "Rectangle".
|
|
<p>
|
|
All of the predefined figures are shown in the <a href="../../samples/shapes.html">Shapes sample</a>.
|
|
You can define your own named figures by calling the static function <a href="symbols/Shape.html#.defineFigureGenerator" class="linkStatic">Shape.defineFigureGenerator</a>.
|
|
Get a <a href="symbols/Map.html" class="linkConstructor">Map</a> of named figures by calling the static function <a href="symbols/Shape.html#.getFigureGenerators" class="linkStatic">Shape.getFigureGenerators</a>.
|
|
<p>
|
|
All of the predefined arrowheads are shown in the <a href="../../samples/arrowheads.html">Arrowheads sample</a>.
|
|
You can define your own named arrowheads by calling the static function <a href="symbols/Shape.html#.defineArrowheadGeometry" class="linkStatic">Shape.defineArrowheadGeometry</a>.
|
|
Get a <a href="symbols/Map.html" class="linkConstructor">Map</a> of named arrowheads by calling the static function <a href="symbols/Shape.html#.getArrowheadGeometries" class="linkStatic">Shape.getArrowheadGeometries</a>.
|
|
<p>
|
|
You can see a copy of all of the built-in arrowhead definitions in this file: <a href="../../extensions/Arrowheads.js">Arrowheads.js</a>.
|
|
<p>
|
|
The Shape properties #parameter1, and #parameter2 determine details of the
|
|
construction of some #figure geometries.
|
|
Specifically, they often set the #spot1, #spot2 for the Shape.
|
|
These spots determine the "inner area" of an Auto panel when a Shape is the main object.
|
|
See the <a href="../../intro/panels.html">Auto Panels section of the Panels Introduction page</a> for more details.
|
|
<p>
|
|
Shapes use their geometric bounds when determining hit testing,
|
|
but use rectangular bounds when participating in (panel) layouts.</div></div>
|
|
|
|
<div><h2><a href="symbols/Size.html" class="linkConstructor">Size</a></h2><p>A Size describes a width and a height in two-dimensional coordinates.<span class="nodetails" id="xSize"><a class="morelink" onclick="hst('Size')">More...</a></span> <span class="details" id="Size">
|
|
The width and height must both be non-negative.
|
|
</span><div class="details" id="dSize"><p>
|
|
Use the static functions <a href="symbols/Size.html#.parse" class="linkStatic">Size.parse</a> and <a href="symbols/Size.html#.stringify" class="linkStatic">Size.stringify</a> to convert to and from
|
|
a standard string representation that is independent of the current locale.
|
|
<p>
|
|
When an instance of this class is the value of a property of a <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a> class or <a href="symbols/Diagram.html" class="linkConstructor">Diagram</a>
|
|
or <a href="symbols/CommandHandler.html" class="linkConstructor">CommandHandler</a> or a <a href="symbols/Tool.html" class="linkConstructor">Tool</a> class, you should treat the object
|
|
as if it were frozen or read-only -- you cannot modify its properties.
|
|
This allows the property to return a value without allocating a new instance.
|
|
If you need to do your own calculations with the value, call #copy to make
|
|
a new instance with the same values that you can modify.
|
|
<p>
|
|
Many methods modify the object's properties and then return a reference to "this" object.
|
|
The only instance method to allocate a new object is the #copy method.
|
|
The static <a href="symbols/Size.html#.parse" class="linkStatic">Size.parse</a> method also allocates a new object.
|
|
<p>
|
|
The "Debug" implementation of this class is significantly slower than the "Release" implementation,
|
|
mostly due to additional error checking.
|
|
<p>
|
|
You cannot inherit from this class.</div></div>
|
|
|
|
<div><h2><a href="symbols/Spot.html" class="linkConstructor">Spot</a></h2><p>A Spot represents a relative point from (0,0) to (1,1) within the bounds of
|
|
a rectangular area plus an absolute offset.<span class="nodetails" id="xSpot"><a class="morelink" onclick="hst('Spot')">More...</a></span> <span class="details" id="Spot">
|
|
</span><div class="details" id="dSpot"><p>
|
|
Use the static functions <a href="symbols/Spot.html#.parse" class="linkStatic">Spot.parse</a> and <a href="symbols/Spot.html#.stringify" class="linkStatic">Spot.stringify</a> to convert to and from
|
|
a standard string representation that is independent of the current locale.
|
|
<p>
|
|
When an instance of this class is the value of a property of a <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a> class or <a href="symbols/Diagram.html" class="linkConstructor">Diagram</a>
|
|
or <a href="symbols/CommandHandler.html" class="linkConstructor">CommandHandler</a> or a <a href="symbols/Tool.html" class="linkConstructor">Tool</a> class, you should treat the object
|
|
as if it were frozen or read-only -- you cannot modify its properties.
|
|
This allows the property to return a value without allocating a new instance.
|
|
If you need to do your own calculations with the value, call #copy to make
|
|
a new instance with the same values that you can modify.
|
|
<p>
|
|
Many methods modify the object's properties and then return a reference to "this" object.
|
|
The only instance method to allocate a new object is the #copy method.
|
|
The static <a href="symbols/Spot.html#.parse" class="linkStatic">Spot.parse</a> method also allocates a new object.
|
|
<p>
|
|
The "Debug" implementation of this class is significantly slower than the "Release" implementation,
|
|
mostly due to additional error checking.
|
|
<p>
|
|
You cannot inherit from this class.</div></div>
|
|
|
|
<div><h2><a href="symbols/TextBlock.html" class="linkConstructor">TextBlock</a></h2><p>A TextBlock is a <a href="symbols/GraphObject.html" class="linkConstructor">GraphObject</a> that displays a #text string in a given #font.<span class="nodetails" id="xTextBlock"><a class="morelink" onclick="hst('TextBlock')">More...</a></span> <span class="details" id="TextBlock">
|
|
</span><div class="details" id="dTextBlock"><p>
|
|
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,
|
|
and should be given in this order:
|
|
<p>
|
|
<em>"font-style font-variant font-weight font-size font-family"</em>
|
|
<p>
|
|
For example, "Italic small-caps bold 32px Georgia, Serif" is a valid font string
|
|
using every CSS font property. Note that not all browsers may support every property.
|
|
<p>
|
|
Text is drawn using the #stroke brush, which may be any CSS color string or a <a href="symbols/Brush.html" class="linkConstructor">Brush</a>.
|
|
|
|
Some created TextBlocks:
|
|
<pre>var $ = go.GraphObject.make; // for conciseness in defining GraphObjects
|
|
|
|
// A TextBlock with text and stroke properties set:
|
|
$(go.TextBlock, { text: "Hello World", stroke: "gray" })
|
|
// Alternatively:
|
|
$(go.TextBlock, "Hello World", { stroke: "gray" })</pre>
|
|
|
|
<p>
|
|
TextBlocks typically receive a natural size based on their text and font strings,
|
|
but often a width is given in order to cause the text to wrap at a certain place.
|
|
In order for wrapping to occur, the #wrap property must not be <a href="symbols/TextBlock.html#None" class="linkConstant">TextBlock.None</a>.
|
|
<p>
|
|
TextBlocks can be edited by users using the <a href="symbols/TextEditingTool.html" class="linkConstructor">TextEditingTool</a>.
|
|
The HTML Element that a given TextBlock uses as its text editor can be customized
|
|
by setting the #textEditor property. For an example of custom text editing tool use,
|
|
see the <a href="../../samples/customTextEditingTool.html">Custom TextEditingTool Sample</a>.
|
|
<p class="boxread">
|
|
For examples of TextBlock possibilities and functionality,
|
|
see the <a href="../../intro/textBlocks.html">Introduction page on TextBlocks</a>.</div></div>
|
|
|
|
<div><h2><a href="symbols/TextEditingTool.html" class="linkConstructor">TextEditingTool</a></h2><p>The TextEditingTool is used to let the user interactively edit text in place.<span class="nodetails" id="xTextEditingTool"><a class="morelink" onclick="hst('TextEditingTool')">More...</a></span> <span class="details" id="TextEditingTool">
|
|
This sets the <a href="symbols/TextBlock.html#text" class="linkProperty">TextBlock.text</a> property; you may want to save the changed text to the model
|
|
by using a TwoWay <a href="symbols/Binding.html" class="linkConstructor">Binding</a> on the "text" property of editable TextBlocks.
|
|
</span><div class="details" id="dTextEditingTool"><p>
|
|
Typically this is used by setting the <a href="symbols/TextBlock.html#editable" class="linkProperty">TextBlock.editable</a> property to true
|
|
on a particular <a href="symbols/TextBlock.html" class="linkConstructor">TextBlock</a> in a part.
|
|
When the part is selected and the user clicks on the <a href="symbols/TextBlock.html" class="linkConstructor">TextBlock</a>
|
|
or invokes the <a href="symbols/CommandHandler.html#editTextBlock" class="linkMethod">CommandHandler.editTextBlock</a> command,
|
|
this tool is started and it uses an HTMLTextArea to perform in-place text editing.
|
|
(For more details see the description for <a href="symbols/TextEditingTool.html#doActivate" class="linkMethod">TextEditingTool.doActivate</a>.)
|
|
<p>
|
|
The <a href="symbols/TextBlock.html" class="linkConstructor">TextBlock</a> is accessible as the <a href="symbols/TextEditingTool.html#textBlock" class="linkProperty">TextEditingTool.textBlock</a> property.
|
|
The text editor is accessible as the <a href="symbols/TextEditingTool.html#currentTextEditor" class="linkProperty">TextEditingTool.currentTextEditor</a> property.
|
|
From the text editor control one can access the <a href="symbols/TextBlock.html" class="linkConstructor">TextBlock</a> being edited via the
|
|
'textEditingTool' property to get to this tool, from which one can use
|
|
the <a href="symbols/TextEditingTool.html#textBlock" class="linkProperty">TextEditingTool.textBlock</a> property.
|
|
<p>
|
|
You can disable mouse clicking from starting this text editing tool
|
|
by setting <a href="symbols/Tool.html#isEnabled" class="linkProperty">Tool.isEnabled</a> to false.
|
|
You can disable the F2 key from starting this text editing tool
|
|
by making sure <a href="symbols/Part.html#canEdit" class="linkMethod">Part.canEdit</a> returns false,
|
|
by either setting <a href="symbols/Diagram.html#allowTextEdit" class="linkProperty">Diagram.allowTextEdit</a> to false
|
|
or by setting <a href="symbols/Part.html#textEditable" class="linkProperty">Part.textEditable</a> to false.
|
|
<p>
|
|
If you want to programmatically start the user editing a particular TextBlock,
|
|
call <a href="symbols/CommandHandler.html#editTextBlock" class="linkMethod">CommandHandler.editTextBlock</a>.
|
|
That command method is also invoked by the F2 key on the keyboard.
|
|
<p class="boxread">
|
|
For a general discussion of text editing validation, see: <a href="../../intro/validation.html#TextEditingValidation">Introduction to Text Validation</a>.
|
|
For customizing the TextEditingTool, read about <a href="symbols/HTMLInfo.html" class="linkConstructor">HTMLInfo</a> and see <a href="../../intro/HTMLInteraction.html#TextEditors">Introduction to Text Editors</a>.</div></div>
|
|
|
|
<div><h2><a href="symbols/Tool.html" class="linkConstructor">Tool</a></h2><p>Tools handle mouse, keyboard, and touch events.<span class="nodetails" id="xTool"><a class="morelink" onclick="hst('Tool')">More...</a></span> <span class="details" id="Tool">
|
|
The currently running tool, <a href="symbols/Diagram.html#currentTool" class="linkProperty">Diagram.currentTool</a>, receives all input events from the <a href="symbols/Diagram.html" class="linkConstructor">Diagram</a>
|
|
via canonicalized <a href="symbols/InputEvent.html" class="linkConstructor">InputEvent</a>s.
|
|
<p class="boxrun">
|
|
For more discussion, see <a href="../../intro/tools.html">Introduction to Tools</a>.
|
|
See samples that make use of tools in the <a href="../../samples/index.html#tools">samples index</a>.
|
|
</span><div class="details" id="dTool"><p>
|
|
Most tools are "mode-less" tools that are managed by the <a href="symbols/ToolManager.html" class="linkConstructor">ToolManager</a>,
|
|
which chooses the current tool based on the kind and position of the mouse event and the parts in the diagram.
|
|
The <a href="symbols/ToolManager.html" class="linkConstructor">ToolManager</a> has properties holding instances of most of the pre-defined <a href="symbols/Tool.html" class="linkConstructor">Tool</a> classes.
|
|
These classes include:
|
|
<ul>
|
|
<li>In the <a href="symbols/ToolManager.html#mouseDownTools" class="linkProperty">ToolManager.mouseDownTools</a> <a href="symbols/List.html" class="linkConstructor">List</a>:
|
|
<ul>
|
|
<li><a href="symbols/ActionTool.html" class="linkConstructor">ActionTool</a></li>
|
|
<li><a href="symbols/RelinkingTool.html" class="linkConstructor">RelinkingTool</a></li>
|
|
<li><a href="symbols/LinkReshapingTool.html" class="linkConstructor">LinkReshapingTool</a></li>
|
|
<li><a href="symbols/ResizingTool.html" class="linkConstructor">ResizingTool</a></li>
|
|
<li><a href="symbols/RotatingTool.html" class="linkConstructor">RotatingTool</a></li>
|
|
</ul>
|
|
</li>
|
|
<li>In the <a href="symbols/ToolManager.html#mouseMoveTools" class="linkProperty">ToolManager.mouseMoveTools</a> <a href="symbols/List.html" class="linkConstructor">List</a>:
|
|
<ul>
|
|
<li><a href="symbols/LinkingTool.html" class="linkConstructor">LinkingTool</a></li>
|
|
<li><a href="symbols/DraggingTool.html" class="linkConstructor">DraggingTool</a></li>
|
|
<li><a href="symbols/DragSelectingTool.html" class="linkConstructor">DragSelectingTool</a></li>
|
|
<li><a href="symbols/PanningTool.html" class="linkConstructor">PanningTool</a></li>
|
|
</ul>
|
|
</li>
|
|
<li>In the <a href="symbols/ToolManager.html#mouseUpTools" class="linkProperty">ToolManager.mouseUpTools</a> <a href="symbols/List.html" class="linkConstructor">List</a>:
|
|
<ul>
|
|
<li><a href="symbols/ContextMenuTool.html" class="linkConstructor">ContextMenuTool</a></li>
|
|
<li><a href="symbols/TextEditingTool.html" class="linkConstructor">TextEditingTool</a></li>
|
|
<li><a href="symbols/ClickCreatingTool.html" class="linkConstructor">ClickCreatingTool</a></li>
|
|
<li><a href="symbols/ClickSelectingTool.html" class="linkConstructor">ClickSelectingTool</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
The ToolManager chooses a tool to run as the diagram's current tool by finding in its lists of tools the first tool
|
|
whose #canStart method returns true. The ToolManager then sets <a href="symbols/Diagram.html#currentTool" class="linkProperty">Diagram.currentTool</a> to be that tool.
|
|
<p>
|
|
A tool is in the "running" state when it is the value of <a href="symbols/Diagram.html#currentTool" class="linkProperty">Diagram.currentTool</a>.
|
|
The <a href="symbols/Diagram.html#currentTool" class="linkProperty">Diagram.currentTool</a> property setter will call #doStop on the old tool
|
|
and then call #doStart on the new tool.
|
|
<p>
|
|
A tool can then go into the "active" state once it decides it can actually do something.
|
|
This happens with a call to #doActivate, normally called by the ToolManager.
|
|
Later it is deactivated (#doDeactivate) and then stopped.
|
|
#isActive should be true when the tool is "active".
|
|
Often tools should ignore certain common events, such as calls to #doMouseMove,
|
|
unless the tool #isActive.
|
|
<p>
|
|
You can prevent a "mode-less" tool (i.e. one managed by the <a href="symbols/ToolManager.html" class="linkConstructor">ToolManager</a>)
|
|
from being started by the ToolManager by setting <a href="symbols/UndoManager.html#isEnabled" class="linkProperty">isEnabled</a> to false.
|
|
<p>
|
|
You can also go into a particular "mode" by setting <a href="symbols/Diagram.html#currentTool" class="linkProperty">Diagram.currentTool</a> explicitly,
|
|
thereby circumventing the normal operation of the <a href="symbols/ToolManager.html" class="linkConstructor">ToolManager</a>.
|
|
This ignores the <a href="symbols/UndoManager.html#isEnabled" class="linkProperty">isEnabled</a> property and does not call the #canStart predicate.
|
|
The behavior will depend on the tool -- not all of the predefined tools support operating as a "modal" tool.
|
|
<p>
|
|
Tools cannot be shared amongst multiple Diagrams.
|
|
<p>
|
|
If you define a Tool subclass, you may override any of the methods whose names start with "do"
|
|
and any other methods that are documented to be overridable, such as #canStart.
|
|
However you must seriously consider calling the base method in order to gets its default behavior.
|
|
There may be situations where not calling the base method may cause subtle bugs.
|
|
But that depends on the method and the tool.
|
|
Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call the base method.</div></div>
|
|
|
|
<div><h2><a href="symbols/ToolManager.html" class="linkConstructor">ToolManager</a></h2><p>This special <a href="symbols/Tool.html" class="linkConstructor">Tool</a> is responsible for managing all of the Diagram's
|
|
mode-less tools, which you can access as the <a href="symbols/Diagram.html#toolManager" class="linkProperty">Diagram.toolManager</a>.<span class="nodetails" id="xToolManager"><a class="morelink" onclick="hst('ToolManager')">More...</a></span> <span class="details" id="ToolManager">
|
|
</span><div class="details" id="dToolManager"><p>
|
|
Mode-less tools are tools that are present in one of the following lists:
|
|
#mouseDownTools, #mouseMoveTools, or #mouseUpTools.
|
|
This ToolManager tool is normally the <a href="symbols/Diagram.html#defaultTool" class="linkProperty">Diagram.defaultTool</a>,
|
|
so it is also usually the <a href="symbols/Diagram.html#currentTool" class="linkProperty">Diagram.currentTool</a> when the user is doing "nothing".
|
|
<p>
|
|
When this tool is running as the current tool, it handles mouse-down,
|
|
mouse-move, and mouse-up events and the corresponding touch events.
|
|
For each event it iterates over each of the tools in the corresponding list,
|
|
calling the tool's <a href="symbols/Tool.html#canStart" class="linkMethod">Tool.canStart</a> predicate.
|
|
If that predicate returns true, it starts that tool by making it the
|
|
diagram's current tool.
|
|
It then activates the tool and passes on the event to the tool by calling
|
|
the corresponding method (either <a href="symbols/Tool.html#doMouseDown" class="linkMethod">Tool.doMouseDown</a>,
|
|
<a href="symbols/Tool.html#doMouseMove" class="linkMethod">Tool.doMouseMove</a>, or <a href="symbols/Tool.html#doMouseUp" class="linkMethod">Tool.doMouseUp</a>).
|
|
<p>
|
|
Because this tool is typically the one running as the diagram's current tool
|
|
when the user isn't "doing" anything, this tool can also handle other events,
|
|
such as mouse wheel events and keyboard commands.
|
|
<p>
|
|
Keyboard events are just passed on to the <a href="symbols/Diagram.html#commandHandler" class="linkProperty">Diagram.commandHandler</a>'s
|
|
<a href="symbols/CommandHandler.html#doKeyDown" class="linkMethod">CommandHandler.doKeyDown</a> or <a href="symbols/CommandHandler.html#doKeyUp" class="linkMethod">CommandHandler.doKeyUp</a> method.
|
|
<p>
|
|
This tool also is responsible for showing tooltips.
|
|
Tooltip <a href="symbols/Adornment.html" class="linkConstructor">Adornment</a>s may be declared as any <a href="symbols/GraphObject.html#toolTip" class="linkProperty">GraphObject.toolTip</a>,
|
|
or as the <a href="symbols/Diagram.html#toolTip" class="linkProperty">Diagram.toolTip</a> if the mouse or finger remains motionless in the background of the diagram.
|
|
You can set #toolTipDuration to control how long the tooltip remains visible after being motionless.
|
|
<p>
|
|
This tool does not utilize any tool handles.
|
|
This tool does not conduct any transactions.
|
|
But of course some of the tools that the ToolManager starts can show tool handles and/or
|
|
conduct their own transactions.</div></div>
|
|
|
|
<div><h2><a href="symbols/Transaction.html" class="linkConstructor">Transaction</a></h2><p>A Transaction holds a list of <a href="symbols/ChangedEvent.html" class="linkConstructor">ChangedEvent</a>s collected during a transaction,
|
|
as the value of the read-only #changes property.<span class="nodetails" id="xTransaction"><a class="morelink" onclick="hst('Transaction')">More...</a></span> <span class="details" id="Transaction">
|
|
</span><div class="details" id="dTransaction"><p>
|
|
Start a transaction by calling <a href="symbols/UndoManager.html#startTransaction" class="linkMethod">UndoManager.startTransaction</a>
|
|
(or <a href="symbols/Model.html#startTransaction" class="linkMethod">Model.startTransaction</a> or <a href="symbols/Diagram.html#startTransaction" class="linkMethod">Diagram.startTransaction</a>, which call that method).
|
|
Be sure to finish a transaction with a matching call to <a href="symbols/UndoManager.html#commitTransaction" class="linkMethod">UndoManager.commitTransaction</a>
|
|
(or <a href="symbols/Model.html#commitTransaction" class="linkMethod">Model.commitTransaction</a> or <a href="symbols/Diagram.html#commitTransaction" class="linkMethod">Diagram.commitTransaction</a>),
|
|
or a call to <a href="symbols/UndoManager.html#rollbackTransaction" class="linkMethod">UndoManager.rollbackTransaction</a>
|
|
(or the same named methods on <a href="symbols/Model.html" class="linkConstructor">Model</a> or <a href="symbols/Diagram.html" class="linkConstructor">Diagram</a>).
|
|
<p>
|
|
If you are performing multiple or repeated changes to a model or diagram,
|
|
surround all of the code with calls to start and commit the transaction --
|
|
do not perform repeated calls to start-commit-start-commit.
|
|
Typically each change caused by the user, such as a button click or a change of focus or a mouse drag,
|
|
should perform one transaction in which all changes are made.
|
|
All of the predefined commands and tools perform transactions.
|
|
<p>
|
|
Undoing or redoing a transaction is done by calling <a href="symbols/UndoManager.html#undo" class="linkMethod">UndoManager.undo</a> or <a href="symbols/UndoManager.html#redo" class="linkMethod">UndoManager.redo</a>.
|
|
Those methods call the <a href="symbols/UndoManager.html#undo" class="linkMethod">undo</a> or <a href="symbols/UndoManager.html#redo" class="linkMethod">redo</a> methods here.
|
|
<p>
|
|
The <a href="symbols/UndoManager.html" class="linkConstructor">UndoManager</a> holds a list of Transactions in its <a href="symbols/UndoManager.html#history" class="linkProperty">UndoManager.history</a>.</div></div>
|
|
|
|
<div><h2><a href="symbols/TreeEdge.html" class="linkConstructor">TreeEdge</a></h2><p>This holds <a href="symbols/TreeLayout.html" class="linkConstructor">TreeLayout</a>-specific information about <a href="symbols/Link.html" class="linkConstructor">Link</a>s.<span class="nodetails" id="xTreeEdge"><a class="morelink" onclick="hst('TreeEdge')">More...</a></span> <span class="details" id="TreeEdge">
|
|
</span><div class="details" id="dTreeEdge"><p>
|
|
This class inherits from <a href="symbols/LayoutEdge.html" class="linkConstructor">LayoutEdge</a>.</div></div>
|
|
|
|
<div><h2><a href="symbols/TreeLayout.html" class="linkConstructor">TreeLayout</a></h2><p>This layout positions nodes of a tree-structured graph in layers (rows or columns).<span class="nodetails" id="xTreeLayout"><a class="morelink" onclick="hst('TreeLayout')">More...</a></span> <span class="details" id="TreeLayout">
|
|
<p class="boxrun">
|
|
For a discussion and examples of the most commonly used properties, see <a href="../../intro/trees.html">Trees</a> page in the Introduction.
|
|
If you want to experiment interactively with most of the properties, try the <a href="../../samples/tLayout.html">Tree Layout</a> sample.
|
|
See samples that make use of TreeLayout in the <a href="../../samples/index.html#treelayout">samples index</a>.
|
|
</span><div class="details" id="dTreeLayout"><p>
|
|
This layout makes use of a <a href="symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a> of
|
|
<a href="symbols/TreeVertex.html" class="linkConstructor">TreeVertex</a>es and <a href="symbols/TreeEdge.html" class="linkConstructor">TreeEdge</a>s that normally
|
|
correspond to the <a href="symbols/Node.html" class="linkConstructor">Node</a>s and <a href="symbols/Link.html" class="linkConstructor">Link</a>s of the <a href="symbols/Diagram.html" class="linkConstructor">Diagram</a>.
|
|
<p>
|
|
The most commonly set properties for controlling the results of a TreeLayout are:
|
|
<ul>
|
|
<li>#angle: the direction in which the tree grows, from parent to child;
|
|
the default value of zero means that the tree grows towards the right, with the children of a node arranged in a layer that is a column.
|
|
An angle of 0 or 180 means that children form vertical layers -- breadth is height and depth is width;
|
|
an angle of 90 or 270 means that children form horizontal layers -- breadth is width and depth is height.</li>
|
|
<li>#layerSpacing: the distance between layers -- between a parent node and its child nodes.</li>
|
|
<li>#nodeSpacing: the distance between nodes within a layer -- between siblings.</li>
|
|
<li>#alignment: the relative position of a parent node with its children.</li>
|
|
<li>#sorting and #comparer: specify the order of the immediate children of a parent node.</li>
|
|
<li>#compaction: whether subtrees should be packed closer together if there is room.</li>
|
|
<li>#layerStyle: whether the children of one node are aligned with the children of a sibling node.</li>
|
|
<li>#setsPortSpot, #portSpot, #setsChildPortSpot, and #childPortSpot: this controls whether to set the <a href="symbols/Link.html#fromSpot" class="linkProperty">Link.fromSpot</a> and <a href="symbols/Link.html#toSpot" class="linkProperty">Link.toSpot</a> to be sensible for the #angle.</li>
|
|
<li>#nodeIndent and #nodeIndentPastParent: if the #alignment is <a href="symbols/TreeLayout.html#AlignmentStart" class="linkConstant">TreeLayout.AlignmentStart</a> or <a href="symbols/TreeLayout.html#AlignmentEnd" class="linkConstant">TreeLayout.AlignmentEnd</a>, control how much extra space the first child is given when positioned.</li>
|
|
<li>#breadthLimit, #rowSpacing: try to limit the total breadth of a subtree to a certain distance;
|
|
when there are too many children or when they are too broad, this puts children into additional rows (or columns, depending on the angle)
|
|
thereby limiting the breadth while increasing the depth of the tree.</li>
|
|
</ul>
|
|
<p>
|
|
When you set one of the TreeLayout properties listed above, that property normally applies to all of the nodes in the tree.
|
|
What if you want #alignment to be <a href="symbols/TreeLayout.html#AlignmentCenterChildren" class="linkConstant">TreeLayout.AlignmentCenterChildren</a> for the root node but <a href="symbols/TreeLayout.html#AlignmentBus" class="linkConstant">TreeLayout.AlignmentBus</a> for the other nodes in the tree?
|
|
Or what if you want want #layerSpacing to be 50 for all layers except for the layer separating "leaf" nodes from their parent?
|
|
<p>
|
|
One common solution is to set #treeStyle.
|
|
For the former scenario, you could set #treeStyle to <a href="symbols/TreeLayout.html#StyleRootOnly" class="linkConstant">TreeLayout.StyleRootOnly</a>; the value of #alignment would only apply to the root node.
|
|
For the latter scenario, you could set it to <a href="symbols/TreeLayout.html#StyleLastParents" class="linkConstant">TreeLayout.StyleLastParents</a>;
|
|
the value of #layerSpacing would apply to all nodes except those that have children but that do not have grandchildren.
|
|
How do you then set the alignment or layerSpacing for the other nodes?
|
|
By setting the TreeLayout properties whose names start with "alternate...".
|
|
In these cases that would mean setting #alternateAlignment or #alternateLayerSpacing.
|
|
<p>
|
|
These TreeLayout properties actually apply to the <a href="symbols/TreeVertex.html" class="linkConstructor">TreeVertex</a> that the TreeLayout uses to represent a <a href="symbols/Node.html" class="linkConstructor">Node</a> within the <a href="symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a>.
|
|
All of those TreeLayout properties are actually stored in #rootDefaults; all of the "alternate..." properties are stored in #alternateDefaults.
|
|
Depending on the value of #treeStyle, the actual TreeVertex properties for each Node are copied appropriately from either rootDefaults or alternateDefaults.
|
|
In the default case where treeStyle is <a href="symbols/TreeLayout.html#StyleLayered" class="linkConstant">TreeLayout.StyleLayered</a>, the alternateDefaults are ignored.
|
|
(Note that treeStyle, and a few other properties such as #path and #arrangement, apply to the whole layout, not to an individual node/vertex.)
|
|
<p>
|
|
The use of #treeStyle and "alternate..." TreeLayout properties will cover a lot of common needs for tree layout customization.
|
|
However, there may be times when that is not enough.
|
|
Imagine a situation where you want a special <a href="symbols/TreeVertex.html" class="linkConstructor">TreeVertex</a> property value for a particular <a href="symbols/Node.html" class="linkConstructor">Node</a>.
|
|
The solution is to override #assignTreeVertexValues, where you can examine the given <a href="symbols/TreeVertex.html" class="linkConstructor">TreeVertex</a>,
|
|
including its corresponding <a href="symbols/LayoutVertex.html#node" class="linkProperty">LayoutVertex.node</a>, to decide what TreeVertex property values should apply.</div></div>
|
|
|
|
<div><h2><a href="symbols/TreeModel.html" class="linkConstructor">TreeModel</a></h2><p>TreeModels support tree-structured graphs of nodes and links.<span class="nodetails" id="xTreeModel"><a class="morelink" onclick="hst('TreeModel')">More...</a></span> <span class="details" id="TreeModel">
|
|
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.
|
|
</span><div class="details" id="dTreeModel"><p>
|
|
TreeModels, unlike <a href="symbols/GraphLinksModel.html" class="linkConstructor">GraphLinksModel</a>s, do not support arbitrary link relationships between nodes,
|
|
nor is there a separate link data object for each parent-child relationship.
|
|
Furthermore there is no support for grouping or label nodes.
|
|
<p>
|
|
The #nodeParentKeyProperty property names the property on the node data whose value
|
|
is the key of the "tree parent" node.
|
|
The default value for this property is "parent".
|
|
<p>
|
|
For example, one can define a graph consisting of one parent node with two child nodes:
|
|
<pre class="javascript">
|
|
model.nodeDataArray = [
|
|
{ key: "Alpha" },
|
|
{ key: "Beta", parent: "Alpha" },
|
|
{ key: "Gamma", parent: "Alpha" }
|
|
];
|
|
</pre>
|
|
<p>
|
|
If you need to show a more complicated graph structure than a tree, use a <a href="symbols/GraphLinksModel.html" class="linkConstructor">GraphLinksModel</a>.
|
|
If you want to have multiple links between the same pair of nodes,
|
|
or if you want to associate more information with each link and cannot put the information on the child node,
|
|
you will need to have a separate link data object for each link,
|
|
and that would require the use of <a href="symbols/GraphLinksModel.html" class="linkConstructor">GraphLinksModel</a>.</div></div>
|
|
|
|
<div><h2><a href="symbols/TreeVertex.html" class="linkConstructor">TreeVertex</a></h2><p>This holds <a href="symbols/TreeLayout.html" class="linkConstructor">TreeLayout</a>-specific information about <a href="symbols/Node.html" class="linkConstructor">Node</a>s.<span class="nodetails" id="xTreeVertex"><a class="morelink" onclick="hst('TreeVertex')">More...</a></span> <span class="details" id="TreeVertex">
|
|
</span><div class="details" id="dTreeVertex"><p>
|
|
This class inherits from <a href="symbols/LayoutVertex.html" class="linkConstructor">LayoutVertex</a>.</div></div>
|
|
|
|
<div><h2><a href="symbols/UndoManager.html" class="linkConstructor">UndoManager</a></h2><p>UndoManager observes and records model and diagram changes in transactions and
|
|
supports undo/redo operations.<span class="nodetails" id="xUndoManager"><a class="morelink" onclick="hst('UndoManager')">More...</a></span> <span class="details" id="UndoManager">
|
|
You will need to set the <a href="symbols/UndoManager.html#isEnabled" class="linkProperty">isEnabled</a> property to true
|
|
in order for users to perform an undo or a redo.
|
|
</span><div class="details" id="dUndoManager"><p>
|
|
Typically an operation will call <a href="symbols/UndoManager.html#startTransaction" class="linkMethod">startTransaction</a>,
|
|
make some changes to the <a href="symbols/Model.html" class="linkConstructor">Model</a> or <a href="symbols/Diagram.html" class="linkConstructor">Diagram</a>,
|
|
and then call <a href="symbols/UndoManager.html#commitTransaction" class="linkMethod">commitTransaction</a>.
|
|
Any <a href="symbols/ChangedEvent.html" class="linkConstructor">ChangedEvent</a>s that occur will be recorded in a
|
|
<a href="symbols/Transaction.html" class="linkConstructor">Transaction</a> object.
|
|
If for some reason you do not wish to complete the transaction
|
|
successfully, you can call <a href="symbols/UndoManager.html#rollbackTransaction" class="linkMethod">rollbackTransaction</a> instead
|
|
of <a href="symbols/UndoManager.html#commitTransaction" class="linkMethod">commitTransaction</a>.
|
|
<p>
|
|
The <a href="symbols/UndoManager.html#history" class="linkProperty">history</a> property is a list of <a href="symbols/Transaction.html" class="linkConstructor">Transaction</a>s.
|
|
<a href="symbols/UndoManager.html#commitTransaction" class="linkMethod">commitTransaction</a> will add the <a href="symbols/UndoManager.html#currentTransaction" class="linkProperty">currentTransaction</a>
|
|
to the <a href="symbols/UndoManager.html#history" class="linkProperty">history</a> list.
|
|
<a href="symbols/UndoManager.html#rollbackTransaction" class="linkMethod">rollbackTransaction</a> will undo the changes remembered in the
|
|
<a href="symbols/UndoManager.html#currentTransaction" class="linkProperty">currentTransaction</a> and then discard it, without changing the <a href="symbols/UndoManager.html#history" class="linkProperty">history</a>.
|
|
You can limit how many transactions are remembered in the history
|
|
by setting <a href="symbols/UndoManager.html#maxHistoryLength" class="linkProperty">maxHistoryLength</a>.
|
|
<p>
|
|
Transactions may be nested.
|
|
Be sure to call either <a href="symbols/UndoManager.html#commitTransaction" class="linkMethod">commitTransaction</a> or <a href="symbols/UndoManager.html#rollbackTransaction" class="linkMethod">rollbackTransaction</a>
|
|
for each call to <a href="symbols/UndoManager.html#startTransaction" class="linkMethod">startTransaction</a>.
|
|
Avoid repeated start-commit-start-commit calls as a result of a user's actions.
|
|
Instead, start, make all changes, and then commit.
|
|
<p>
|
|
If you want to restore the diagram to the state before the latest complete
|
|
transaction, call <a href="symbols/UndoManager.html#undo" class="linkMethod">undo</a>.
|
|
Call <a href="symbols/UndoManager.html#redo" class="linkMethod">redo</a> to change the diagram to a later state.
|
|
If after some number of undo's you start a transaction,
|
|
all of the history after the current state is discarded,
|
|
and a new transaction may be recorded.
|
|
You cannot undo or redo during a transaction.
|
|
<p>
|
|
Initially each <a href="symbols/Model.html" class="linkConstructor">Model</a> has its own UndoManager.
|
|
UndoManagers may be shared by multiple Models by replacing
|
|
the standard <a href="symbols/Model.html#undoManager" class="linkProperty">Model.undoManager</a> created by the model constructor.
|
|
<p>
|
|
There are several informational properties:
|
|
<ul>
|
|
<li><a href="symbols/UndoManager.html#isInTransaction" class="linkProperty">isInTransaction</a> is true when a top-level transaction has been started that has not yet been committed or rolled-back.</li>
|
|
<li><a href="symbols/UndoManager.html#currentTransaction" class="linkProperty">currentTransaction</a> holds the flattened list of all <a href="symbols/ChangedEvent.html" class="linkConstructor">ChangedEvent</a>s
|
|
that have happened within the current transaction.</li>
|
|
<li><a href="symbols/UndoManager.html#transactionLevel" class="linkProperty">transactionLevel</a> indicates the current depth of nesting.</li>
|
|
<li><a href="symbols/UndoManager.html#nestedTransactionNames" class="linkProperty">nestedTransactionNames</a> holds the stack of transaction names supplied to
|
|
<a href="symbols/UndoManager.html#startTransaction" class="linkMethod">startTransaction</a> calls.</li>
|
|
<li><a href="symbols/UndoManager.html#history" class="linkProperty">history</a> holds only complete top-level transactions.</li>
|
|
<li><a href="symbols/UndoManager.html#isUndoingRedoing" class="linkProperty">isUndoingRedoing</a> is true during a call to <a href="symbols/UndoManager.html#undo" class="linkMethod">undo</a> or <a href="symbols/UndoManager.html#redo" class="linkMethod">redo</a>.</li>
|
|
<li><a href="symbols/UndoManager.html#historyIndex" class="linkProperty">historyIndex</a> indicates which <a href="symbols/Transaction.html" class="linkConstructor">Transaction</a> in the <a href="symbols/UndoManager.html#history" class="linkProperty">history</a> is the next to be "undone";
|
|
this is decremented by each undo and incremented by a redo.</li>
|
|
<li><a href="symbols/UndoManager.html#transactionToUndo" class="linkProperty">transactionToUndo</a> and <a href="symbols/UndoManager.html#transactionToRedo" class="linkProperty">transactionToRedo</a> indicate which <a href="symbols/Transaction.html" class="linkConstructor">Transaction</a> may be undone or redone next, if any.</li>
|
|
<li><a href="symbols/UndoManager.html#models" class="linkProperty">models</a> returns an iterator over all of the <a href="symbols/Model.html" class="linkConstructor">Model</a>s that this UndoManager is handling.</li>
|
|
</ul></div></div>
|
|
|
|
</div>
|
|
</div>
|
|
<div id="footer" class="fineprint" style="clear:both">
|
|
Copyright © 1998-2017 by Northwoods Software Corporation.
|
|
</div>
|
|
</body>
|
|
</html> |