1730 lines
71 KiB
HTML
1730 lines
71 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>GoJS® Layout Class</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/api.css" type="text/css" media="all" />-->
|
|
<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">
|
|
|
|
<!-- ============================== classes index ============================ -->
|
|
<div id="navindex" class="col-md-2">
|
|
<!-- begin publish.classesIndex -->
|
|
<!-- <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 -->
|
|
|
|
|
|
|
|
|
|
<!-- end publish.classesIndex -->
|
|
</div>
|
|
|
|
<div id="contentBody" class="col-md-10">
|
|
<!-- ============================== header ================================= -->
|
|
<div id="header" class="fineprint mt30">
|
|
<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>
|
|
|
|
<!-- ============================== class title ============================ -->
|
|
<h2 class="classTitle mt30">
|
|
|
|
Class Layout
|
|
|
|
</h2>
|
|
|
|
<!-- ============================== class summary ========================== -->
|
|
<span class="hideshowall">
|
|
<span class="nodetails"><button id="buttonShow">Show Details</button></span>
|
|
<span class="details"><button id="buttonHide">Show Summaries</button></span>
|
|
</span>
|
|
|
|
<p class="classsummary">
|
|
|
|
|
|
|
|
This is the base class for all of the predefined diagram layout implementations.
|
|
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).
|
|
<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 <a href="../symbols/Layout.html#isInitial" class="linkProperty">isInitial</a> 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 <a href="../symbols/Layout.html#isValidLayout" class="linkProperty">isValidLayout</a> 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 <a href="../symbols/Layout.html#invalidateLayout" class="linkMethod">invalidateLayout</a>,
|
|
which not only clears the <a href="../symbols/Layout.html#isValidLayout" class="linkProperty">isValidLayout</a> state but also requests that the diagram
|
|
do an automatic layout soon.
|
|
You can avoid such invalidations by setting <a href="../symbols/Layout.html#isOngoing" class="linkProperty">isOngoing</a> 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 <a href="../symbols/Layout.html#isViewportSized" class="linkProperty">isViewportSized</a> 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 <a href="../symbols/Layout.html#doLayout" class="linkMethod">doLayout</a> 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 <a href="../symbols/Layout.html#doLayout" class="linkMethod">doLayout</a> will call <a href="../symbols/Layout.html#makeNetwork" class="linkMethod">makeNetwork</a> and remember the result as the <a href="../symbols/Layout.html#network" class="linkProperty">network</a>.
|
|
<a href="../symbols/Layout.html#makeNetwork" class="linkMethod">makeNetwork</a> will call <a href="../symbols/Layout.html#createNetwork" class="linkMethod">createNetwork</a> and initialize it by adding new instances of LayoutVertexes and LayoutEdges
|
|
corresponding to the given collection of Nodes and Links.
|
|
<p>
|
|
When <a href="../symbols/Layout.html#doLayout" class="linkMethod">doLayout</a> is finished with its work it will call <a href="../symbols/Layout.html#updateParts" class="linkMethod">updateParts</a>, which will call <a href="../symbols/Layout.html#commitLayout" class="linkMethod">commitLayout</a>
|
|
to set new node locations and route links. It then normally discards the <a href="../symbols/Layout.html#network" class="linkProperty">network</a>.
|
|
<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 <a href="../symbols/Layout.html#commitLayout" class="linkMethod">commitLayout</a> 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 <a href="../symbols/Layout.html#doLayout" class="linkMethod">doLayout</a> 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.
|
|
</p>
|
|
|
|
<!-- ============================== constructor summary ==================== -->
|
|
|
|
<h2 id="constructor" class="summaryCaption"> Constructor <span class="nodetails"> Summary</span><span class="details"> Details</span></h2>
|
|
<div class="table-responsive">
|
|
<table class="summaryTable table table-bordered table-condensed" summary="A summary of the constructor documented in the class Layout.">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col" class="name">Name</th>
|
|
<th scope="col" class="description">Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="name" >
|
|
<div class="name">
|
|
Layout()
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Create a minimal layout that only positions <a href="../symbols/Node.html" class="linkConstructor">Node</a>s that do not have a location.
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div><!-- class="table-responsive">-->
|
|
|
|
|
|
<!-- ============================== properties summary ===================== -->
|
|
|
|
|
|
|
|
<h2 class="summaryCaption">Properties<span class="nodetails"> Summary</span><span class="details"> Details</span></h2>
|
|
<div class="table-responsive">
|
|
<table class="summaryTable table table-bordered table-condensed" summary="A summary of the properties documented in the class Layout.">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col" class="name">Name, Value Type</th>
|
|
<th scope="col" class="description">Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
|
|
<tr id="arrangementOrigin" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
arrangementOrigin
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{<a href="../symbols/Point.html" class="linkConstructor">Point</a>}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the top-left point for where the graph should be positioned when laid out.<span class="nodetails" id="xproparrangementOrigin"><a class="morelink" onclick="hst('proparrangementOrigin')">More...</a></span> <span class="details" id="proparrangementOrigin">
|
|
The default value for this property is the Point(0, 0).
|
|
Setting this property invalidates this layout.</span>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="diagram" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
diagram
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{<a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a>}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets the <a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a> that owns this layout, if it is the value of <a href="../symbols/Diagram.html#layout" class="linkProperty">Diagram.layout</a>.<span class="nodetails" id="xpropdiagram"><a class="morelink" onclick="hst('propdiagram')">More...</a></span> <span class="details" id="propdiagram">
|
|
</span><div class="details" id="dpropdiagram"><p>
|
|
If this property and <a href="../symbols/Layout.html#group" class="linkProperty">group</a> are non-null, the Group should be in this Diagram.</div>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/Layout.html#group" class="linkProperty">group</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="group" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
group
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{<a href="../symbols/Group.html" class="linkConstructor">Group</a>}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets the <a href="../symbols/Group.html" class="linkConstructor">Group</a> that uses this layout, if it is the value of a group's <a href="../symbols/Group.html#layout" class="linkProperty">Group.layout</a>.<span class="nodetails" id="xpropgroup"><a class="morelink" onclick="hst('propgroup')">More...</a></span> <span class="details" id="propgroup">
|
|
</span><div class="details" id="dpropgroup"><p>
|
|
If this property is set to a Group, the <a href="../symbols/Layout.html#diagram" class="linkProperty">diagram</a> is automatically set to be the Group's Diagram.</div>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/Layout.html#diagram" class="linkProperty">diagram</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="isInitial" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
isInitial
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{boolean}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets whether this layout is performed on an initial layout.<span class="nodetails" id="xpropisInitial"><a class="morelink" onclick="hst('propisInitial')">More...</a></span> <span class="details" id="propisInitial">
|
|
The default value is true.
|
|
Setting this property to false causes <a href="../symbols/Layout.html#isValidLayout" class="linkProperty">isValidLayout</a> to be set to true
|
|
so that the diagram does not perform this layout.
|
|
</span><div class="details" id="dpropisInitial"><p>
|
|
If you set both <a href="../symbols/Layout.html#isInitial" class="linkProperty">isInitial</a> and <a href="../symbols/Layout.html#isOngoing" class="linkProperty">isOngoing</a> to false,
|
|
there will be no automatic layout invalidation, because <a href="../symbols/Layout.html#invalidateLayout" class="linkMethod">invalidateLayout</a>
|
|
will not set <a href="../symbols/Layout.html#isValidLayout" class="linkProperty">isValidLayout</a> to false.
|
|
To get your nodes to appear, you will need to explicitly set or data-bind their <a href="../symbols/Part.html#location" class="linkProperty">Part.location</a>
|
|
or <a href="../symbols/GraphObject.html#position" class="linkProperty">GraphObject.position</a> to real Point values, because automatic layout will not assign any positions.
|
|
<p>
|
|
Another way of controlling when layouts are invalidated is by setting
|
|
<a href="../symbols/Part.html#isLayoutPositioned" class="linkProperty">Part.isLayoutPositioned</a> or <a href="../symbols/Part.html#layoutConditions" class="linkProperty">Part.layoutConditions</a>.</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="isOngoing" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
isOngoing
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{boolean}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets whether this layout can be invalidated by <a href="../symbols/Layout.html#invalidateLayout" class="linkMethod">invalidateLayout</a>.<span class="nodetails" id="xpropisOngoing"><a class="morelink" onclick="hst('propisOngoing')">More...</a></span> <span class="details" id="propisOngoing">
|
|
Set this to false to prevent actions such as adding or removing Parts from invalidating this layout.
|
|
The default value is true.
|
|
Setting this property does not invalidate this layout.
|
|
</span><div class="details" id="dpropisOngoing"><p>
|
|
If you set both <a href="../symbols/Layout.html#isInitial" class="linkProperty">isInitial</a> and <a href="../symbols/Layout.html#isOngoing" class="linkProperty">isOngoing</a> to false,
|
|
there will be no automatic layout invalidation, because <a href="../symbols/Layout.html#invalidateLayout" class="linkMethod">invalidateLayout</a>
|
|
will not set <a href="../symbols/Layout.html#isValidLayout" class="linkProperty">isValidLayout</a> to false.
|
|
To get your nodes to appear, you will need to explicitly set or data-bind their <a href="../symbols/Part.html#location" class="linkProperty">Part.location</a>
|
|
or <a href="../symbols/GraphObject.html#position" class="linkProperty">GraphObject.position</a> to real Point values, because automatic layout will not assign any positions.
|
|
<p>
|
|
Another way of controlling when layouts are invalidated is by setting
|
|
<a href="../symbols/Part.html#isLayoutPositioned" class="linkProperty">Part.isLayoutPositioned</a> or <a href="../symbols/Part.html#layoutConditions" class="linkProperty">Part.layoutConditions</a>.</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="isRealtime" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
isRealtime
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{boolean}</span>
|
|
|
|
<span class="since" title="since">1.2</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets whether this layout be performed in real-time, before the end of a transaction.<span class="nodetails" id="xpropisRealtime"><a class="morelink" onclick="hst('propisRealtime')">More...</a></span> <span class="details" id="propisRealtime">
|
|
All layouts that are invalidated will be performed at the end of a transaction.
|
|
The default value is true.
|
|
Setting this property does not invalidate this layout.</span>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="isRouting" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
isRouting
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{boolean}</span>
|
|
|
|
<span class="since" title="since">1.1</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets whether this layout routes <a href="../symbols/Link.html" class="linkConstructor">Link</a>s.<span class="nodetails" id="xpropisRouting"><a class="morelink" onclick="hst('propisRouting')">More...</a></span> <span class="details" id="propisRouting">
|
|
The default value is true.
|
|
When false, this layout will not explicitly set the <a href="../symbols/Link.html#points" class="linkProperty">Link.points</a>,
|
|
and the default routing of each individual Link will take place after the Nodes are moved by <a href="../symbols/Layout.html#commitLayout" class="linkMethod">commitLayout</a>.
|
|
Setting this property does not invalidate this layout.
|
|
</span><div class="details" id="dpropisRouting"><p>
|
|
Some layouts ignore links, in which case this property is ignored.</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="isValidLayout" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
isValidLayout
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{boolean}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets whether this layout needs to be performed again (if false).<span class="nodetails" id="xpropisValidLayout"><a class="morelink" onclick="hst('propisValidLayout')">More...</a></span> <span class="details" id="propisValidLayout">
|
|
Instead of setting this property directly, it is normal to set it to false by calling <a href="../symbols/Layout.html#invalidateLayout" class="linkMethod">invalidateLayout</a>,
|
|
since that also requests performing a layout in the near future.</span>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="isViewportSized" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
isViewportSized
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{boolean}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets whether this layout depends on the <a href="../symbols/Diagram.html#viewportBounds" class="linkProperty">Diagram.viewportBounds</a>'s size.<span class="nodetails" id="xpropisViewportSized"><a class="morelink" onclick="hst('propisViewportSized')">More...</a></span> <span class="details" id="propisViewportSized">
|
|
If set to true, the layout will invalidate when the Diagram's viewport changes size.
|
|
This only applies to diagram layouts, not to group layouts,
|
|
and only when <a href="../symbols/Diagram.html#autoScale" class="linkProperty">Diagram.autoScale</a> is set to <a href="../symbols/Diagram.html#None" class="linkConstant">Diagram.None</a>.
|
|
The default value is false.
|
|
Setting this property to true will invalidate this layout.</span>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="network" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
network
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{<a href="../symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a>}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the <a href="../symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a> used by this Layout, if any.<span class="nodetails" id="xpropnetwork"><a class="morelink" onclick="hst('propnetwork')">More...</a></span> <span class="details" id="propnetwork">
|
|
The default value is null.
|
|
Setting this property does not invalidate this layout.
|
|
Not all kinds of layout make use of a <a href="../symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a>.
|
|
Call <a href="../symbols/Layout.html#createNetwork" class="linkMethod">createNetwork</a> or <a href="../symbols/Layout.html#makeNetwork" class="linkMethod">makeNetwork</a> to create a network.</span>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
</div><!-- class="table-responsive">-->
|
|
|
|
|
|
|
|
|
|
|
|
<!-- ============================== methods summary ======================== -->
|
|
|
|
|
|
|
|
<h2 class="summaryCaption">Method <span class="nodetails"> Summary</span><span class="details"> Details</span></h2>
|
|
<div class="table-responsive">
|
|
<table class="summaryTable table table-bordered table-condensed" summary="A summary of the methods documented in the class Layout.">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col" class="name">Name, Return Type</th>
|
|
<th scope="col" class="description">Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
|
|
<tr id="cloneProtected">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
cloneProtected(copy)
|
|
</div>
|
|
<div class="attributes">
|
|
|
|
|
|
<span class="since" title="since">1.6</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Copies properties from this object to the given object, which is of the same class.<span class="nodetails" id="xmethcloneProtected"><a class="morelink" onclick="hst('methcloneProtected')">More...</a></span> <span class="details" id="methcloneProtected">
|
|
This is called by <a href="../symbols/Layout.html#copy" class="linkMethod">copy</a> and should be overridden for each class that adds properties.
|
|
There are examples of such overrides in the samples.
|
|
Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.</span>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Parameters:</dt>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{<a href="../symbols/Layout.html" class="linkConstructor">Layout</a>}</span> <b>copy</b>
|
|
|
|
</dt>
|
|
<dd></dd>
|
|
|
|
</dl>
|
|
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="collectParts">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
collectParts(coll)
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{Set.<Part>}</span>
|
|
|
|
<span class="since" title="since">1.7</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>A convenient way of converting the Diagram|Group|Iterable argument to doLayout to an actual collection of eligible Parts.<span class="nodetails" id="xmethcollectParts"><a class="morelink" onclick="hst('methcollectParts')">More...</a></span> <span class="details" id="methcollectParts">
|
|
The resulting Set will not include any Nodes or Links for which <a href="../symbols/Part.html#canLayout" class="linkMethod">Part.canLayout</a> is false.
|
|
If the argument includes a Group for which <a href="../symbols/Group.html#layout" class="linkProperty">Group.layout</a> is null, the resulting Set
|
|
will include the member parts of that group rather than that group itself.
|
|
You will not need to call collectParts if you call <a href="../symbols/Layout.html#makeNetwork" class="linkMethod">makeNetwork</a>,
|
|
because that method does effectively the same thing when building the <a href="../symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a>.
|
|
</span><div class="details" id="dmethcollectParts"><p>
|
|
Typical usage:
|
|
<pre>
|
|
CustomLayout.prototype.doLayout = function(coll) {
|
|
// COLL might be a Diagram or a Group or some Iterable<Part>
|
|
var it = this.collectParts(coll).iterator;
|
|
while (it.next()) {
|
|
var node = it.value;
|
|
if (node instanceof go.Node) {
|
|
. . . position the node . . .
|
|
}
|
|
}
|
|
}
|
|
</pre></div>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Parameters:</dt>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{<a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a>|<a href="../symbols/Group.html" class="linkConstructor">Group</a>|Iterable.<Part>}</span> <b>coll</b>
|
|
|
|
</dt>
|
|
<dd></dd>
|
|
|
|
</dl>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Returns:</dt>
|
|
|
|
<dt><span class="light fixedFont">{Set.<Part>}</span> </dt>
|
|
|
|
</dl>
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="commitLayout">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
commitLayout()
|
|
</div>
|
|
<div class="attributes">
|
|
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>When using a <a href="../symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a>, commit changes to the diagram
|
|
by setting <a href="../symbols/Node.html" class="linkConstructor">Node</a> positions and by routing the <a href="../symbols/Link.html" class="linkConstructor">Link</a>s.<span class="nodetails" id="xmethcommitLayout"><a class="morelink" onclick="hst('methcommitLayout')">More...</a></span> <span class="details" id="methcommitLayout">
|
|
This is called by <a href="../symbols/Layout.html#updateParts" class="linkMethod">updateParts</a> within a transaction.
|
|
</span><div class="details" id="dmethcommitLayout"><p>
|
|
You should not call this method -- it is a "protected virtual" method.
|
|
This may be overridden by subclasses of Layout.
|
|
By default this method is implemented as follows:
|
|
<pre>
|
|
Layout.prototype.commitLayout = function() {
|
|
var vit = this.network.vertexes.iterator;
|
|
while (vit.next()) {
|
|
var vert = vit.value;
|
|
vert.commit();
|
|
}
|
|
if (this.isRouting) {
|
|
var eit = this.network.edges.iterator;
|
|
while (eit.next()) {
|
|
var edge = eit.value;
|
|
edge.commit();
|
|
}
|
|
}
|
|
}
|
|
</pre>
|
|
<p>
|
|
Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="copy">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
copy()
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{<a href="../symbols/Layout.html" class="linkConstructor">Layout</a>}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Creates a copy of this Layout and returns it.<span class="nodetails" id="xmethcopy"><a class="morelink" onclick="hst('methcopy')">More...</a></span> <span class="details" id="methcopy">
|
|
When a <a href="../symbols/Group.html" class="linkConstructor">Group</a> is copied that has a <a href="../symbols/Group.html#layout" class="linkProperty">Group.layout</a>, the <a href="../symbols/Layout.html" class="linkConstructor">Layout</a> must also be copied.
|
|
This calls <a href="../symbols/Layout.html#cloneProtected" class="linkMethod">cloneProtected</a> on a newly constructed Layout.</span>
|
|
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Returns:</dt>
|
|
|
|
<dt><span class="light fixedFont">{<a href="../symbols/Layout.html" class="linkConstructor">Layout</a>}</span> </dt>
|
|
|
|
</dl>
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="createNetwork">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
createNetwork()
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{<a href="../symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a>}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Create a new <a href="../symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a> of <a href="../symbols/LayoutVertex.html" class="linkConstructor">LayoutVertex</a>es and <a href="../symbols/LayoutEdge.html" class="linkConstructor">LayoutEdge</a>s.<span class="nodetails" id="xmethcreateNetwork"><a class="morelink" onclick="hst('methcreateNetwork')">More...</a></span> <span class="details" id="methcreateNetwork">
|
|
This may be overridden in Layout subclasses to create instances of subclasses of
|
|
<a href="../symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a>.
|
|
Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.</span>
|
|
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Returns:</dt>
|
|
|
|
<dt><span class="light fixedFont">{<a href="../symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a>}</span> a new <a href="../symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a>.</dt>
|
|
|
|
</dl>
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="doLayout">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
doLayout(coll)
|
|
</div>
|
|
<div class="attributes">
|
|
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Position all of the nodes that do not have an assigned <a href="../symbols/Part.html#location" class="linkProperty">Part.location</a>
|
|
in the manner of a simple rectangular array.<span class="nodetails" id="xmethdoLayout"><a class="morelink" onclick="hst('methdoLayout')">More...</a></span> <span class="details" id="methdoLayout">
|
|
The default implementation ignores all <a href="../symbols/Group.html" class="linkConstructor">Group</a>s and <a href="../symbols/Link.html" class="linkConstructor">Link</a>s;
|
|
many subclasses of <a href="../symbols/Layout.html" class="linkConstructor">Layout</a> ignore all instances of <a href="../symbols/Part.html" class="linkConstructor">Part</a>s
|
|
that are not <a href="../symbols/Node.html" class="linkConstructor">Node</a>s or <a href="../symbols/Link.html" class="linkConstructor">Link</a>s.
|
|
</span><div class="details" id="dmethdoLayout"><p>
|
|
You can override this method to do whatever node positioning and link routing
|
|
that you wish.
|
|
<p>
|
|
When the layout makes use of a <a href="../symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a>,
|
|
this method should call <a href="../symbols/Layout.html#makeNetwork" class="linkMethod">makeNetwork</a> and <a href="../symbols/Layout.html#updateParts" class="linkMethod">updateParts</a>.
|
|
The <a href="../symbols/Layout.html#updateParts" class="linkMethod">updateParts</a> method will call <a href="../symbols/Layout.html#commitLayout" class="linkMethod">commitLayout</a> within a transaction.
|
|
The outline of such an override should be like:
|
|
<pre>
|
|
CustomNetworkLayout.prototype.doLayout = function(coll) {
|
|
if (this.network === null) this.network = this.makeNetwork(coll);
|
|
// assign LayoutVertex.bounds to all vertexes in the network:
|
|
var vit = this.network.vertexes.iterator;
|
|
while (vit.next()) {
|
|
var v = vit.value;
|
|
v.centerX = ...
|
|
v.centerY = ...
|
|
}
|
|
this.updateParts();
|
|
this.network = null;
|
|
};
|
|
</pre>
|
|
Override <a href="../symbols/Layout.html#commitLayout" class="linkMethod">commitLayout</a> to actually position nodes and route links.
|
|
<p>
|
|
When the layout does <em>not</em> make use of a <a href="../symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a>,
|
|
this method should make direct changes to <a href="../symbols/Node.html" class="linkConstructor">Node</a>s and <a href="../symbols/Link.html" class="linkConstructor">Link</a>s
|
|
within a transaction, and it should call <a href="../symbols/Layout.html#collectParts" class="linkMethod">collectParts</a> on the argument <i>coll</i> in order
|
|
to get the proper set of Nodes and Links to work on.
|
|
Examples are provided in the Extensions directory.
|
|
<p>
|
|
If this Layout belongs to a Diagram, the argument must be either the same Diagram or must denote Parts that belong to the Diagram.
|
|
Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.</div>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Parameters:</dt>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{<a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a>|<a href="../symbols/Group.html" class="linkConstructor">Group</a>|Iterable.<Part>}</span> <b>coll</b>
|
|
|
|
</dt>
|
|
<dd>A <a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a> or a <a href="../symbols/Group.html" class="linkConstructor">Group</a> or a collection of <a href="../symbols/Part.html" class="linkConstructor">Part</a>s.</dd>
|
|
|
|
</dl>
|
|
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="invalidateLayout">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
invalidateLayout()
|
|
</div>
|
|
<div class="attributes">
|
|
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>If <a href="../symbols/Layout.html#isOngoing" class="linkProperty">isOngoing</a> is true and if an initial layout has not yet been performed,
|
|
set the <a href="../symbols/Layout.html#isValidLayout" class="linkProperty">isValidLayout</a> property to false, and ask to perform another layout in the near future.<span class="nodetails" id="xmethinvalidateLayout"><a class="morelink" onclick="hst('methinvalidateLayout')">More...</a></span> <span class="details" id="methinvalidateLayout">
|
|
If <a href="../symbols/Layout.html#isInitial" class="linkProperty">isInitial</a> is true, this layout is invalidated only when the <a href="../symbols/Diagram.html#model" class="linkProperty">Diagram.model</a> is replaced,
|
|
not under the normal circumstances such as when parts are added or removed or
|
|
due to other calls to <a href="../symbols/Layout.html#invalidateLayout" class="linkMethod">Layout.invalidateLayout</a>.
|
|
</span><div class="details" id="dmethinvalidateLayout"><p>
|
|
If you set both <a href="../symbols/Layout.html#isInitial" class="linkProperty">isInitial</a> and <a href="../symbols/Layout.html#isOngoing" class="linkProperty">isOngoing</a> to false,
|
|
there will be no automatic layout invalidation, because this method
|
|
will not set <a href="../symbols/Layout.html#isValidLayout" class="linkProperty">isValidLayout</a> to false.
|
|
However you can still set <a href="../symbols/Layout.html#isValidLayout" class="linkProperty">isValidLayout</a> explicitly.
|
|
<p>
|
|
This is typically called when a layout property value has changed,
|
|
or when a Part is added or removed or changes visibility, if <a href="../symbols/Part.html#layoutConditions" class="linkProperty">Part.layoutConditions</a> includes the pertinent flags.</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="makeNetwork">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
makeNetwork(coll)
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{<a href="../symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a>}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Create and initialize a <a href="../symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a> with the given nodes and links.<span class="nodetails" id="xmethmakeNetwork"><a class="morelink" onclick="hst('methmakeNetwork')">More...</a></span> <span class="details" id="methmakeNetwork">
|
|
This should be called by <a href="../symbols/Layout.html#doLayout" class="linkMethod">doLayout</a> when this layout uses a <a href="../symbols/Layout.html#network" class="linkProperty">network</a>.
|
|
This method calls <a href="../symbols/Layout.html#createNetwork" class="linkMethod">createNetwork</a> to allocate the network.
|
|
This may be overridden in Layout subclasses to customize the initialization.
|
|
Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.</span>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Parameters:</dt>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{<a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a>|<a href="../symbols/Group.html" class="linkConstructor">Group</a>|Iterable.<Part>}</span> <b>coll</b>
|
|
|
|
</dt>
|
|
<dd>A <a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a> or a <a href="../symbols/Group.html" class="linkConstructor">Group</a> or a collection of <a href="../symbols/Part.html" class="linkConstructor">Part</a>s.</dd>
|
|
|
|
</dl>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Returns:</dt>
|
|
|
|
<dt><span class="light fixedFont">{<a href="../symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a>}</span> normally the value of a call to <a href="../symbols/Layout.html#createNetwork" class="linkMethod">createNetwork</a> initialized by vertexes and edges corresponding to the <i>coll</i> argument.</dt>
|
|
|
|
</dl>
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="updateParts">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
updateParts()
|
|
</div>
|
|
<div class="attributes">
|
|
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>When using a <a href="../symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a>, update the "physical" node positionings and link routings.<span class="nodetails" id="xmethupdateParts"><a class="morelink" onclick="hst('methupdateParts')">More...</a></span> <span class="details" id="methupdateParts">
|
|
This should be called by <a href="../symbols/Layout.html#doLayout" class="linkMethod">doLayout</a> when this layout uses a <a href="../symbols/Layout.html#network" class="linkProperty">network</a>.
|
|
This calls <a href="../symbols/Layout.html#commitLayout" class="linkMethod">commitLayout</a> to actually set <a href="../symbols/Node.html" class="linkConstructor">Node</a> positions and route <a href="../symbols/Link.html" class="linkConstructor">Link</a>s.
|
|
This performs the changes within a transaction.
|
|
Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.</span>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
</div><!-- class="table-responsive">-->
|
|
|
|
|
|
|
|
|
|
<!-- ============================== events summary ======================== -->
|
|
|
|
|
|
<!-- ============================== fields summary ===================== -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- ============================== constructor details ==================== -->
|
|
|
|
</div> <!-- end contentBody -->
|
|
</div> <!-- end container-fluid -->
|
|
|
|
<!-- ============================== footer ================================= -->
|
|
<div id="footer" class="fineprint" style="clear:both">
|
|
Copyright © 1998-2017 by <a href="https://www.nwoods.com/">Northwoods Software Corporation.</a>
|
|
</div>
|
|
</body>
|
|
</html>
|