2058 lines
73 KiB
HTML
2058 lines
73 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>GoJS® LayeredDigraphLayout 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 LayeredDigraphLayout
|
|
|
|
</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">
|
|
|
|
<span class="extends"> Extends
|
|
<a href="../symbols/Layout.html" class="linkConstructor">Layout</a>.</span>
|
|
|
|
|
|
This arranges nodes of directed graphs into layers (rows or columns).
|
|
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>.
|
|
<p>
|
|
The <a href="../symbols/LayeredDigraphLayout.html#layerSpacing" class="linkProperty">layerSpacing</a> property controls the distance between layers.
|
|
The <a href="../symbols/LayeredDigraphLayout.html#columnSpacing" class="linkProperty">columnSpacing</a> 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 <a href="../symbols/LayeredDigraphLayout.html#layeringOption" class="linkProperty">layeringOption</a> 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 <a href="../symbols/LayeredDigraphLayout.html#direction" class="linkProperty">direction</a>.
|
|
So, for example, if the <a href="../symbols/LayeredDigraphLayout.html#direction" class="linkProperty">direction</a> 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
|
|
<a href="../symbols/LayeredDigraphLayout.html#setsPortSpots" class="linkProperty">setsPortSpots</a> 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 <a href="../symbols/LayeredDigraphLayout.html#setsPortSpots" class="linkProperty">setsPortSpots</a> 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 <a href="../symbols/LayeredDigraphLayout.html#setsPortSpots" class="linkProperty">setsPortSpots</a> 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 <a href="../symbols/LayeredDigraphLayout.html#direction" class="linkProperty">direction</a> 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.
|
|
</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 LayeredDigraphLayout.">
|
|
<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">
|
|
LayeredDigraphLayout()
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Constructs a <a href="../symbols/LayeredDigraphLayout.html" class="linkConstructor">LayeredDigraphLayout</a> with no <a href="../symbols/Layout.html#network" class="linkProperty">Layout.network</a>
|
|
and with no owning <a href="../symbols/Layout.html#diagram" class="linkProperty">Layout.diagram</a>.
|
|
|
|
|
|
|
|
|
|
</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 LayeredDigraphLayout.">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col" class="name">Name, Value Type</th>
|
|
<th scope="col" class="description">Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
|
|
<tr id="aggressiveOption" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
aggressiveOption
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{EnumValue}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets which aggressive option is being used to look for link crossings.<span class="nodetails" id="xpropaggressiveOption"><a class="morelink" onclick="hst('propaggressiveOption')">More...</a></span> <span class="details" id="propaggressiveOption">
|
|
The default value is <a href="../symbols/LayeredDigraphLayout.html#AggressiveLess" class="linkConstant">LayeredDigraphLayout.AggressiveLess</a>.</span>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="columnSpacing" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
columnSpacing
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{number}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the size of each column.<span class="nodetails" id="xpropcolumnSpacing"><a class="morelink" onclick="hst('propcolumnSpacing')">More...</a></span> <span class="details" id="propcolumnSpacing">
|
|
This value must be positive and it defaults to 25.</span>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="cycleRemoveOption" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
cycleRemoveOption
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{EnumValue}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or set which cycle removal option is used.<span class="nodetails" id="xpropcycleRemoveOption"><a class="morelink" onclick="hst('propcycleRemoveOption')">More...</a></span> <span class="details" id="propcycleRemoveOption">
|
|
The default value is <a href="../symbols/LayeredDigraphLayout.html#CycleDepthFirst" class="linkConstant">LayeredDigraphLayout.CycleDepthFirst</a>.</span>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="direction" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
direction
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{number}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the direction the graph grows towards.<span class="nodetails" id="xpropdirection"><a class="morelink" onclick="hst('propdirection')">More...</a></span> <span class="details" id="propdirection">
|
|
0 is towards the right, 90 is downwards, 180 is towards the left, and 270 is upwards.
|
|
The default value is 0.</span>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="initializeOption" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
initializeOption
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{EnumValue}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets which indices initialization option is being used.<span class="nodetails" id="xpropinitializeOption"><a class="morelink" onclick="hst('propinitializeOption')">More...</a></span> <span class="details" id="propinitializeOption">
|
|
The default value is <a href="../symbols/LayeredDigraphLayout.html#InitDepthFirstOut" class="linkConstant">LayeredDigraphLayout.InitDepthFirstOut</a>.</span>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="iterations" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
iterations
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{number}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the number of iterations to be done.<span class="nodetails" id="xpropiterations"><a class="morelink" onclick="hst('propiterations')">More...</a></span> <span class="details" id="propiterations">
|
|
The value must be non-negative. The default value is 4.</span>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="layeringOption" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
layeringOption
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{EnumValue}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets which layering option is being used.<span class="nodetails" id="xproplayeringOption"><a class="morelink" onclick="hst('proplayeringOption')">More...</a></span> <span class="details" id="proplayeringOption">
|
|
The default value is <a href="../symbols/LayeredDigraphLayout.html#LayerOptimalLinkLength" class="linkConstant">LayeredDigraphLayout.LayerOptimalLinkLength</a>.</span>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="layerSpacing" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
layerSpacing
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{number}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the size of each layer.<span class="nodetails" id="xproplayerSpacing"><a class="morelink" onclick="hst('proplayerSpacing')">More...</a></span> <span class="details" id="proplayerSpacing">
|
|
This value must be positive and it defaults to 25.</span>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="maxColumn" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
maxColumn
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{number}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>This read-only property returns the largest column value.
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="maxIndex" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
maxIndex
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{number}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>This read-only property returns the largest index value.
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="maxIndexLayer" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
maxIndexLayer
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{number}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>This read-only property returns the larges index layer.
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="maxLayer" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
maxLayer
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{number}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>This read-only property returns the largest layer value.
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="minIndexLayer" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
minIndexLayer
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{number}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>This read-only property returns the smallest index layer.
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="packOption" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
packOption
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{number}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the options used by the straighten and pack function,
|
|
The default value is <a href="../symbols/LayeredDigraphLayout.html#PackAll" class="linkConstant">LayeredDigraphLayout.PackAll</a>.
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="setsPortSpots" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
setsPortSpots
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{boolean}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets whether the FromSpot and ToSpot of each link should be set
|
|
to values appropriate for the given value of <a href="../symbols/LayeredDigraphLayout.html#direction" class="linkProperty">LayeredDigraphLayout.direction</a>.<span class="nodetails" id="xpropsetsPortSpots"><a class="morelink" onclick="hst('propsetsPortSpots')">More...</a></span> <span class="details" id="propsetsPortSpots">
|
|
The default value is true.
|
|
</span><div class="details" id="dpropsetsPortSpots"><p>
|
|
If you set this to false, the spot values of the links and port objects will be used.
|
|
If you do not set the spot values to sensible values matching the <a href="../symbols/LayeredDigraphLayout.html#direction" class="linkProperty">direction</a>,
|
|
the routing results may be poor and they may cross over nodes.</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
</div><!-- class="table-responsive">-->
|
|
|
|
|
|
|
|
<dl class="inheritsList">
|
|
<dt>Properties borrowed from class <a href="../symbols/Layout.html" class="linkConstructor">Layout</a>: </dt><dd><a href="../symbols/Layout.html#arrangementOrigin" class="linkProperty">arrangementOrigin</a>, <a href="../symbols/Layout.html#diagram" class="linkProperty">diagram</a>, <a href="../symbols/Layout.html#group" class="linkProperty">group</a>, <a href="../symbols/Layout.html#isInitial" class="linkProperty">isInitial</a>, <a href="../symbols/Layout.html#isOngoing" class="linkProperty">isOngoing</a>, <a href="../symbols/Layout.html#isRealtime" class="linkProperty">isRealtime</a>, <a href="../symbols/Layout.html#isRouting" class="linkProperty">isRouting</a>, <a href="../symbols/Layout.html#isValidLayout" class="linkProperty">isValidLayout</a>, <a href="../symbols/Layout.html#isViewportSized" class="linkProperty">isViewportSized</a>, <a href="../symbols/Layout.html#network" class="linkProperty">network</a></dd>
|
|
</dl>
|
|
|
|
|
|
|
|
<!-- ============================== 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 LayeredDigraphLayout.">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col" class="name">Name, Return Type</th>
|
|
<th scope="col" class="description">Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
|
|
<tr id="assignLayers">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
assignLayers()
|
|
</div>
|
|
<div class="attributes">
|
|
|
|
|
|
<span class="since" title="since">1.1</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Assigns every vertex in the input network to a layer.<span class="nodetails" id="xmethassignLayers"><a class="morelink" onclick="hst('methassignLayers')">More...</a></span> <span class="details" id="methassignLayers">
|
|
The layer is a non-negative integer describing which row of vertexes each vertex belongs in.
|
|
(Do not confuse this concept of "layer" with <a href="../symbols/Layer.html" class="linkConstructor">Layer</a>s that control the Z-ordering of Parts.)
|
|
</span><div class="details" id="dmethassignLayers"><p>
|
|
The layering satisfies the following relationship:
|
|
if L is a link from node U to node V, then U.layer > V.layer.
|
|
<p>
|
|
This method can be overridden to customize how nodes are assigned layers.
|
|
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.
|
|
By default, this does the appropriate assignments given the value of <a href="../symbols/LayeredDigraphLayout.html#layeringOption" class="linkProperty">layeringOption</a>.</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="commitLayers">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
commitLayers(layerRects, offset)
|
|
</div>
|
|
<div class="attributes">
|
|
|
|
|
|
<span class="since" title="since">1.4</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>This overridable method is called by <a href="../symbols/LayeredDigraphLayout.html#commitLayout" class="linkMethod">commitLayout</a>
|
|
to support custom arrangement of bands or labels across each layout layer.<span class="nodetails" id="xmethcommitLayers"><a class="morelink" onclick="hst('methcommitLayers')">More...</a></span> <span class="details" id="methcommitLayers">
|
|
By default this method does nothing.
|
|
</span><div class="details" id="dmethcommitLayers"><p>
|
|
The coordinates used in the resulting Rects may need to be offset by the <a href="../symbols/Layout.html#arrangementOrigin" class="linkProperty">Layout.arrangementOrigin</a>.</div>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Parameters:</dt>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{Array.<Rect>}</span> <b>layerRects</b>
|
|
|
|
</dt>
|
|
<dd>an Array of <a href="../symbols/Rect.html" class="linkConstructor">Rect</a>s with the bounds of each of the "layers"</dd>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{<a href="../symbols/Point.html" class="linkConstructor">Point</a>}</span> <b>offset</b>
|
|
|
|
</dt>
|
|
<dd>the position of the top-left corner of the banded area relative to the coordinates given by the layerRects</dd>
|
|
|
|
</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>Set the fromSpot and toSpot on each Link, position each Node according
|
|
to the vertex position, and then position/route the Links.<span class="nodetails" id="xmethcommitLayout"><a class="morelink" onclick="hst('methcommitLayout')">More...</a></span> <span class="details" id="methcommitLayout">
|
|
</span><div class="details" id="dmethcommitLayout"><p>
|
|
This calls the <a href="../symbols/LayeredDigraphLayout.html#commitNodes" class="linkMethod">commitNodes</a> and <a href="../symbols/LayeredDigraphLayout.html#commitLinks" class="linkMethod">commitLinks</a> methods, the latter only if <a href="../symbols/Layout.html#isRouting" class="linkProperty">isRouting</a> is true.
|
|
You should not call this method -- it is a "protected virtual" method.
|
|
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="commitLinks">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
commitLinks()
|
|
</div>
|
|
<div class="attributes">
|
|
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Routes the links.<span class="nodetails" id="xmethcommitLinks"><a class="morelink" onclick="hst('methcommitLinks')">More...</a></span> <span class="details" id="methcommitLinks">
|
|
</span><div class="details" id="dmethcommitLinks"><p>
|
|
This is called by <a href="../symbols/LayeredDigraphLayout.html#commitLayout" class="linkMethod">commitLayout</a>.
|
|
This is only called if <a href="../symbols/Layout.html#isRouting" class="linkProperty">Layout.isRouting</a> is true.
|
|
See also <a href="../symbols/LayeredDigraphLayout.html#commitNodes" class="linkMethod">commitNodes</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.</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="commitNodes">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
commitNodes()
|
|
</div>
|
|
<div class="attributes">
|
|
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Commit the position of all nodes.<span class="nodetails" id="xmethcommitNodes"><a class="morelink" onclick="hst('methcommitNodes')">More...</a></span> <span class="details" id="methcommitNodes">
|
|
</span><div class="details" id="dmethcommitNodes"><p>
|
|
This is called by <a href="../symbols/LayeredDigraphLayout.html#commitLayout" class="linkMethod">commitLayout</a>.
|
|
See also <a href="../symbols/LayeredDigraphLayout.html#commitLinks" class="linkMethod">commitLinks</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.</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="createNetwork">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
createNetwork()
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{LayeredDigraphNetwork}</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/LayeredDigraphVertex.html" class="linkConstructor">LayeredDigraphVertex</a>es and <a href="../symbols/LayeredDigraphEdge.html" class="linkConstructor">LayeredDigraphEdge</a>s.
|
|
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Returns:</dt>
|
|
|
|
<dt><span class="light fixedFont">{LayeredDigraphNetwork}</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>Perform the layered digraph layout.<span class="nodetails" id="xmethdoLayout"><a class="morelink" onclick="hst('methdoLayout')">More...</a></span> <span class="details" id="methdoLayout">
|
|
</span><div class="details" id="dmethdoLayout"><p>
|
|
If there is no <a href="../symbols/Layout.html#network" class="linkProperty">Layout.network</a>, this calls <a href="../symbols/Layout.html#makeNetwork" class="linkMethod">makeNetwork</a> to create a <a href="../symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a> from the given collection of Parts.
|
|
This removes any reflexive edges in the network, since they should be ignored.
|
|
<p>
|
|
In order to influence a vertex's layer, you can override <a href="../symbols/LayeredDigraphLayout.html#assignLayers" class="linkMethod">assignLayers</a>.
|
|
<p>
|
|
Finally this calls <a href="../symbols/Layout.html#updateParts" class="linkMethod">Layout.updateParts</a> to commit the Node positions from the vertex positions.
|
|
<a href="../symbols/Layout.html#updateParts" class="linkMethod">Layout.updateParts</a> calls <a href="../symbols/LayeredDigraphLayout.html#commitLayout" class="linkMethod">commitLayout</a> within a transaction.</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>
|
|
|
|
</tbody>
|
|
</table>
|
|
</div><!-- class="table-responsive">-->
|
|
|
|
|
|
|
|
<dl class="inheritsList">
|
|
<dt>Methods borrowed from class <a href="../symbols/Layout.html" class="linkConstructor">Layout</a>: </dt><dd><a href="../symbols/Layout.html#cloneProtected" class="linkMethod">cloneProtected</a>, <a href="../symbols/Layout.html#collectParts" class="linkMethod">collectParts</a>, <a href="../symbols/Layout.html#copy" class="linkMethod">copy</a>, <a href="../symbols/Layout.html#invalidateLayout" class="linkMethod">invalidateLayout</a>, <a href="../symbols/Layout.html#makeNetwork" class="linkMethod">makeNetwork</a>, <a href="../symbols/Layout.html#updateParts" class="linkMethod">updateParts</a></dd>
|
|
</dl>
|
|
|
|
|
|
<!-- ============================== events summary ======================== -->
|
|
|
|
|
|
<!-- ============================== fields summary ===================== -->
|
|
|
|
|
|
|
|
<h2 class="summaryCaption">Constants<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 LayeredDigraphLayout.">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col" class="name">Name</th>
|
|
<th scope="col" class="description">Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
|
|
<tr id="AggressiveLess">
|
|
<td class="name">
|
|
<div class="name">
|
|
AggressiveLess
|
|
|
|
|
|
<span class="light">{EnumValue}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>The faster, less aggressive, crossing reduction algorithm;
|
|
a valid value for <a href="../symbols/LayeredDigraphLayout.html#aggressiveOption" class="linkProperty">LayeredDigraphLayout.aggressiveOption</a>.
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="AggressiveMore">
|
|
<td class="name">
|
|
<div class="name">
|
|
AggressiveMore
|
|
|
|
|
|
<span class="light">{EnumValue}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>The slower, more aggressive, crossing reduction algorithm,
|
|
a valid value for <a href="../symbols/LayeredDigraphLayout.html#aggressiveOption" class="linkProperty">LayeredDigraphLayout.aggressiveOption</a>.
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="AggressiveNone">
|
|
<td class="name">
|
|
<div class="name">
|
|
AggressiveNone
|
|
|
|
|
|
<span class="light">{EnumValue}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>The fastest, but poorest, crossing reduction algorithm;
|
|
a valid value for <a href="../symbols/LayeredDigraphLayout.html#aggressiveOption" class="linkProperty">LayeredDigraphLayout.aggressiveOption</a>.
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="CycleDepthFirst">
|
|
<td class="name">
|
|
<div class="name">
|
|
CycleDepthFirst
|
|
|
|
|
|
<span class="light">{EnumValue}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Remove cycles using depth first cycle removal;
|
|
a valid value of <a href="../symbols/LayeredDigraphLayout.html#cycleRemoveOption" class="linkProperty">LayeredDigraphLayout.cycleRemoveOption</a>.
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="CycleGreedy">
|
|
<td class="name">
|
|
<div class="name">
|
|
CycleGreedy
|
|
|
|
|
|
<span class="light">{EnumValue}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Remove cycles using greedy cycle removal;
|
|
a valid value of <a href="../symbols/LayeredDigraphLayout.html#cycleRemoveOption" class="linkProperty">LayeredDigraphLayout.cycleRemoveOption</a>.
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="InitDepthFirstIn">
|
|
<td class="name">
|
|
<div class="name">
|
|
InitDepthFirstIn
|
|
|
|
|
|
<span class="light">{EnumValue}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Initialize using depth first in initialization;
|
|
a valid value for <a href="../symbols/LayeredDigraphLayout.html#initializeOption" class="linkProperty">LayeredDigraphLayout.initializeOption</a>.
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="InitDepthFirstOut">
|
|
<td class="name">
|
|
<div class="name">
|
|
InitDepthFirstOut
|
|
|
|
|
|
<span class="light">{EnumValue}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Initialize using depth first out initialization;
|
|
a valid value for <a href="../symbols/LayeredDigraphLayout.html#initializeOption" class="linkProperty">LayeredDigraphLayout.initializeOption</a>.
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="InitNaive">
|
|
<td class="name">
|
|
<div class="name">
|
|
InitNaive
|
|
|
|
|
|
<span class="light">{EnumValue}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Initialize using naive initialization;
|
|
a valid value for <a href="../symbols/LayeredDigraphLayout.html#initializeOption" class="linkProperty">LayeredDigraphLayout.initializeOption</a>.
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="LayerLongestPathSink">
|
|
<td class="name">
|
|
<div class="name">
|
|
LayerLongestPathSink
|
|
|
|
|
|
<span class="light">{EnumValue}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Assign layers using longest path sink layering;
|
|
a valid value for <a href="../symbols/LayeredDigraphLayout.html#layeringOption" class="linkProperty">LayeredDigraphLayout.layeringOption</a>.
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="LayerLongestPathSource">
|
|
<td class="name">
|
|
<div class="name">
|
|
LayerLongestPathSource
|
|
|
|
|
|
<span class="light">{EnumValue}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Assign layers using longest path source layering;
|
|
a valid value for <a href="../symbols/LayeredDigraphLayout.html#layeringOption" class="linkProperty">LayeredDigraphLayout.layeringOption</a>.
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="LayerOptimalLinkLength">
|
|
<td class="name">
|
|
<div class="name">
|
|
LayerOptimalLinkLength
|
|
|
|
|
|
<span class="light">{EnumValue}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Assign layers using optimal link length layering;
|
|
A valid value for <a href="../symbols/LayeredDigraphLayout.html#layeringOption" class="linkProperty">LayeredDigraphLayout.layeringOption</a>.
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="PackAll">
|
|
<td class="name">
|
|
<div class="name">
|
|
PackAll
|
|
|
|
|
|
<span class="light">{number}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Enable all options for the <a href="../symbols/LayeredDigraphLayout.html#packOption" class="linkProperty">LayeredDigraphLayout.packOption</a> property;
|
|
See also <a href="../symbols/LayeredDigraphLayout.html#PackExpand" class="linkConstant">LayeredDigraphLayout.PackExpand</a>, <a href="../symbols/LayeredDigraphLayout.html#PackStraighten" class="linkConstant">LayeredDigraphLayout.PackStraighten</a>,
|
|
and <a href="../symbols/LayeredDigraphLayout.html#PackMedian" class="linkConstant">LayeredDigraphLayout.PackMedian</a>.
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="PackExpand">
|
|
<td class="name">
|
|
<div class="name">
|
|
PackExpand
|
|
|
|
|
|
<span class="light">{number}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>This option gives more chances for the packing algorithm to improve the network,
|
|
but is very expensive in time for large networks;
|
|
a valid value for <a href="../symbols/LayeredDigraphLayout.html#packOption" class="linkProperty">LayeredDigraphLayout.packOption</a>.
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="PackMedian">
|
|
<td class="name">
|
|
<div class="name">
|
|
PackMedian
|
|
|
|
|
|
<span class="light">{number}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>This option tries to have the packing algorithm center groups of nodes
|
|
based on their relationships with nodes in other layers,
|
|
a valid value for <a href="../symbols/LayeredDigraphLayout.html#packOption" class="linkProperty">LayeredDigraphLayout.packOption</a>.
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="PackNone">
|
|
<td class="name">
|
|
<div class="name">
|
|
PackNone
|
|
|
|
|
|
<span class="light">{number}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Does minimal work in packing the nodes;
|
|
a valid value for <a href="../symbols/LayeredDigraphLayout.html#packOption" class="linkProperty">LayeredDigraphLayout.packOption</a>.
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="PackStraighten">
|
|
<td class="name">
|
|
<div class="name">
|
|
PackStraighten
|
|
|
|
|
|
<span class="light">{number}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>This option tries to have the packing algorithm straighten many of the
|
|
links that cross layers,
|
|
a valid value for <a href="../symbols/LayeredDigraphLayout.html#packOption" class="linkProperty">LayeredDigraphLayout.packOption</a>.
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
</div><!-- class="table-responsive">-->
|
|
|
|
|
|
|
|
|
|
<!-- ============================== 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>
|