3121 lines
166 KiB
HTML
3121 lines
166 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>GoJS® Panel 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 Panel
|
|
|
|
</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/GraphObject.html" class="linkConstructor">GraphObject</a>.</span>
|
|
|
|
|
|
A Panel is a <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a> that holds other GraphObjects as its elements.
|
|
A Panel is responsible for sizing and positioning its elements.
|
|
The elements of a panel are drawn in the order in which they appear in the <a href="../symbols/Panel.html#elements" class="linkProperty">elements</a> collection.
|
|
<p>
|
|
The <a href="../symbols/Part.html" class="linkConstructor">Part</a> class inherits from Panel; Part in turn is the base class of <a href="../symbols/Node.html" class="linkConstructor">Node</a> and <a href="../symbols/Link.html" class="linkConstructor">Link</a>.
|
|
<p>
|
|
Every Panel has a <a href="../symbols/Panel.html#type" class="linkProperty">type</a> and establishes its own coordinate system. The type of a Panel
|
|
determines how it will size and arrange its elements:
|
|
<ul>
|
|
<li><a href="../symbols/Panel.html#Position" class="linkConstant">Panel.Position</a> is used to arrange elements based on their absolute positions within the Panel's local coordinate system.</li>
|
|
<li><a href="../symbols/Panel.html#Vertical" class="linkConstant">Panel.Vertical</a> and <a href="../symbols/Panel.html#Horizontal" class="linkConstant">Panel.Horizontal</a> are used to create linear "stacks" of elements.</li>
|
|
<li><a href="../symbols/Panel.html#Auto" class="linkConstant">Panel.Auto</a> is used to size the main element to fit around other elements in the Panel.</li>
|
|
<li><a href="../symbols/Panel.html#Spot" class="linkConstant">Panel.Spot</a> is used to arrange elements based on the <a href="../symbols/Spot.html" class="linkConstructor">Spot</a> properties <a href="../symbols/GraphObject.html#alignment" class="linkProperty">GraphObject.alignment</a>
|
|
and <a href="../symbols/GraphObject.html#alignmentFocus" class="linkProperty">GraphObject.alignmentFocus</a>, relative to a main element of the panel.
|
|
Spot panels can align relative to other elements by using <a href="../symbols/Panel.html#alignmentFocusName" class="linkProperty">Panel.alignmentFocusName</a>.</li>
|
|
<li><a href="../symbols/Panel.html#Table" class="linkConstant">Panel.Table</a> is used to arrange elements into rows and columns, typically employing the different
|
|
elements' <a href="../symbols/GraphObject.html#row" class="linkProperty">GraphObject.row</a>, <a href="../symbols/GraphObject.html#rowSpan" class="linkProperty">GraphObject.rowSpan</a>, <a href="../symbols/GraphObject.html#column" class="linkProperty">GraphObject.column</a>,
|
|
and <a href="../symbols/GraphObject.html#columnSpan" class="linkProperty">GraphObject.columnSpan</a> properties. This Panel type also makes use of <a href="../symbols/RowColumnDefinition.html" class="linkConstructor">RowColumnDefinition</a>.</li>
|
|
<li><a href="../symbols/Panel.html#TableRow" class="linkConstant">Panel.TableRow</a> and <a href="../symbols/Panel.html#TableColumn" class="linkConstant">Panel.TableColumn</a> can only be used immediately within a <a href="../symbols/Panel.html#Table" class="linkConstant">Panel.Table</a> Panel
|
|
to organize a collection of elements as a row or as a column in a table.</li>
|
|
<li><a href="../symbols/Panel.html#Viewbox" class="linkConstant">Panel.Viewbox</a> is used to automatically resize a single element to fit inside the panel's available area.</li>
|
|
<li><a href="../symbols/Panel.html#Grid" class="linkConstant">Panel.Grid</a> is not used to house typical elements, but is used only to draw regular patterns of lines.
|
|
The elements must be <a href="../symbols/Shape.html" class="linkConstructor">Shape</a>s used to describe the repeating lines.</li>
|
|
<li><a href="../symbols/Panel.html#Link" class="linkConstant">Panel.Link</a> is only used by <a href="../symbols/Link.html" class="linkConstructor">Link</a> parts and Link Adornments.</li>
|
|
<li><a href="../symbols/Panel.html#Graduated" class="linkConstant">Panel.Graduated</a> is used to draw regular tick marks and text along the main <a href="../symbols/Shape.html" class="linkConstructor">Shape</a> element.</li>
|
|
</ul>
|
|
Using <a href="../../intro/buildingObjects.html">GraphObject.make</a>, the second argument can be used to declare the Panel type:
|
|
<pre>// Either:
|
|
$(go.Panel, go.Panel.Horizontal, ...
|
|
// Or:
|
|
$(go.Panel, "Horizontal", ...
|
|
|
|
// Full example:
|
|
$(go.Panel, "Horizontal",
|
|
{ width: 60, height: 60 }, // panel properties
|
|
// elements in the panel:
|
|
$(go.Shape, "Rectangle", { stroke: "lime" }),
|
|
$(go.TextBlock, "Some Text")
|
|
) // end of panel definition </pre>
|
|
|
|
|
|
<p class="boxread">
|
|
For an overview of most Panel types, please read the <a href="../../intro/panels.html">Introduction page on Panels</a>.
|
|
<p>
|
|
<a href="../symbols/Panel.html#Vertical" class="linkConstant">Panel.Vertical</a> and <a href="../symbols/Panel.html#Horizontal" class="linkConstant">Panel.Horizontal</a> panels are frequently used to position two or more GraphObjects
|
|
vertically above each other or horizontally next to each other. Use the <a href="../symbols/GraphObject.html#alignment" class="linkProperty">GraphObject.alignment</a> or
|
|
<a href="../symbols/GraphObject.html#stretch" class="linkProperty">GraphObject.stretch</a> properties on the individual elements to control their position and size.
|
|
Set <a href="../symbols/Panel.html#isOpposite" class="linkProperty">isOpposite</a> to true if you want the elements arranged from right-to-left in Horizontal Panels
|
|
or from bottom-to-top in Vertical Panels.
|
|
<p>
|
|
<a href="../symbols/Panel.html#Spot" class="linkConstant">Panel.Spot</a> and <a href="../symbols/Panel.html#Auto" class="linkConstant">Panel.Auto</a> panels have a "main" element, signified by the Panel's first element
|
|
with <a href="../symbols/GraphObject.html#isPanelMain" class="linkProperty">GraphObject.isPanelMain</a> set to true. If there is no such element, it uses the first element as the "main" one.
|
|
Use the <a href="../symbols/GraphObject.html#alignment" class="linkProperty">GraphObject.alignment</a> property to position elements with respect to the main element.
|
|
Use the <a href="../symbols/GraphObject.html#alignmentFocus" class="linkProperty">GraphObject.alignmentFocus</a> property to further specify the position within Spot Panels.
|
|
"Spot" and "Auto" Panels should have two or more elements in them.
|
|
<p>
|
|
In <a href="../symbols/Panel.html#Table" class="linkConstant">Panel.Table</a> panels you will want to set the <a href="../symbols/GraphObject.html#row" class="linkProperty">GraphObject.row</a> and <a href="../symbols/GraphObject.html#column" class="linkProperty">GraphObject.column</a>
|
|
properties on each element. The <a href="../symbols/GraphObject.html#alignment" class="linkProperty">GraphObject.alignment</a> and <a href="../symbols/GraphObject.html#stretch" class="linkProperty">GraphObject.stretch</a> properties are also
|
|
useful when an element's table cell is larger than that element.
|
|
<p class="boxrun">Please read the <a href="../../intro/tablePanels.html">Introduction page on Table Panels</a>
|
|
for more examples and explanation.
|
|
<p>
|
|
<a href="../symbols/Panel.html#TableRow" class="linkConstant">Panel.TableRow</a> and <a href="../symbols/Panel.html#TableColumn" class="linkConstant">Panel.TableColumn</a> panels can only be used as elements within a <a href="../symbols/Panel.html#Table" class="linkConstant">Panel.Table</a> Panel.
|
|
They are typically only used in item templates, e.g. for automatically creating rows in a Table Panel based on model data
|
|
provided in an <a href="../symbols/Panel.html#itemArray" class="linkProperty">itemArray</a>. You will still need to specify properties on the individual elements within a TableRow
|
|
or TableColumn as if they were immediate elements of the containing Table panel.
|
|
<p class="boxrun">For an example that uses TableRow Panels, see <a href="../../samples/records.html">Records sample</a>.
|
|
<p>
|
|
<a href="../symbols/Panel.html#Grid" class="linkConstant">Panel.Grid</a> panels are often used for the Diagram's <a href="../symbols/Diagram.html#grid" class="linkProperty">Diagram.grid</a>.
|
|
<pre>$(go.Diagram, "myDiagramDiv",
|
|
{ . . .
|
|
grid: $(go.Panel, "Grid",
|
|
{ gridCellSize: new go.Size(40, 40) },
|
|
$(go.Shape, "LineH", { stroke: "lightgray" }),
|
|
$(go.Shape, "LineV", { stroke: "lightgray" })
|
|
),
|
|
. . .
|
|
});</pre>
|
|
Or to get a green bar effect:
|
|
<pre>$(go.Diagram, "myDiagramDiv",
|
|
{ . . .
|
|
grid: $(go.Panel, "Grid",
|
|
{ gridCellSize: new go.Size(100, 100) },
|
|
$(go.Shape, "BarH", { fill: "lightgreen", height: 50 })
|
|
),
|
|
. . .
|
|
});</pre>
|
|
But Grid Panels can also be stand alone objects:
|
|
<pre>$(go.Node, go.Panel.Grid,
|
|
{ gridCellSize: new go.Size(6, 6), width: 60, height: 60 },
|
|
$(go.Shape, "LineH", { stroke: "gray" }),
|
|
$(go.Shape, "LineV", { stroke: "gray" }))</pre>
|
|
<p>
|
|
A Grid Panel's elements do not participate in object picking.
|
|
<p class="boxrun">Please read the <a href="../../intro/grids.html">Introduction page on Grid Patterns</a>
|
|
for more examples and explanation.
|
|
<p>
|
|
<a href="../symbols/Panel.html#Graduated" class="linkConstant">Panel.Graduated</a> panels, like Spot and Auto Panels have a "main" element. The other elements within a Graduated Panel
|
|
are used to define ticks and labels to draw along the main shape's path.
|
|
<pre>$(go.Part, "Graduated",
|
|
$(go.Shape, { geometryString: "M0 0 H400" }),
|
|
$(go.Shape, { geometryString: "M0 0 V10" }),
|
|
// offset to display below ticks
|
|
$(go.TextBlock, { segmentOffset: new go.Point(0, 12) })
|
|
);</pre>
|
|
<p>
|
|
Only the main shape of a Graduated Panel participates in object picking, but a <code>background</code>
|
|
can be set if the entire panel needs to be pickable.
|
|
You cannot set or bind the <a>Panel.itemArray</a> of a Graduated Panel.
|
|
Events on the tick Shapes and TextBlock labels of a Graduated Panel will be ignored.
|
|
Graduated Panel TextBlock labels cannot be edited.
|
|
<p>
|
|
Rotating the main shape will not rotate the ticks, just as rotating a Spot Panel's main element
|
|
won't rotate its children. Rotation should generally be done at the Panel level. Another similarity
|
|
to Spot Panels is that resizing of a Graduated Panel should generally be done on the main shape.
|
|
<p class="boxrun">Please read the <a href="../../intro/graduatedPanels.html">Introduction page on Graduated Panels</a>
|
|
for more examples and explanation.
|
|
<h3>Changing and accessing elements of a Panel</h3>
|
|
<p>
|
|
You can change the collection of <a href="../symbols/Panel.html#elements" class="linkProperty">elements</a> by calling <a href="../symbols/Panel.html#add" class="linkMethod">add</a>, <a href="../symbols/Panel.html#insertAt" class="linkMethod">insertAt</a>, <a href="../symbols/Panel.html#remove" class="linkMethod">remove</a>, or <a href="../symbols/Panel.html#removeAt" class="linkMethod">removeAt</a>.
|
|
You can get direct access to a particular element by calling <a href="../symbols/Panel.html#elt" class="linkMethod">elt</a>.
|
|
<p>
|
|
You can search the visual tree of a Panel for GraphObjects that given a <a href="../symbols/GraphObject.html#name" class="linkProperty">GraphObject.name</a> using <a href="../symbols/Panel.html#findObject" class="linkMethod">findObject</a>.
|
|
<h3>Panel Size and Appearance</h3>
|
|
<p>
|
|
Panels typically compute their own size based on their elements and Panel <a href="../symbols/Panel.html#type" class="linkProperty">type</a>,
|
|
but can also be sized by setting <a href="../symbols/GraphObject.html#desiredSize" class="linkProperty">GraphObject.desiredSize</a>, <a href="../symbols/GraphObject.html#minSize" class="linkProperty">GraphObject.minSize</a>, and <a href="../symbols/GraphObject.html#maxSize" class="linkProperty">GraphObject.maxSize</a>.
|
|
Setting an explicit size on a Panel may cause nested elements of that panel to size themselves differently,
|
|
especially in the cases of nested elements having a <a href="../symbols/GraphObject.html#stretch" class="linkProperty">GraphObject.stretch</a> value or <a href="../symbols/TextBlock.html" class="linkConstructor">TextBlock</a>'s having word wrap.
|
|
<p>
|
|
Panels have no visual components of their own unless a <a href="../symbols/GraphObject.html#background" class="linkProperty">GraphObject.background</a> or <a href="../symbols/GraphObject.html#areaBackground" class="linkProperty">GraphObject.areaBackground</a> is specified
|
|
or separators are specified either as defaults for the whole Table Panel or on individual <a href="../symbols/RowColumnDefinition.html" class="linkConstructor">RowColumnDefinition</a>s.
|
|
<p>
|
|
In addition to the <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a> properties on elements that are only used by certain types of panels,
|
|
several Panel properties only apply to specific Panel types.
|
|
<ul>
|
|
<li>Panels of <a href="../symbols/Panel.html#type" class="linkProperty">type</a> <a href="../symbols/Panel.html#Table" class="linkConstant">Panel.Table</a> use the <a href="../symbols/Panel.html#rowCount" class="linkProperty">rowCount</a>, <a href="../symbols/Panel.html#rowSizing" class="linkProperty">rowSizing</a>, <a href="../symbols/Panel.html#columnCount" class="linkProperty">columnCount</a>,
|
|
<a href="../symbols/Panel.html#columnSizing" class="linkProperty">columnSizing</a>, <a href="../symbols/Panel.html#leftIndex" class="linkProperty">leftIndex</a>, <a href="../symbols/Panel.html#topIndex" class="linkProperty">topIndex</a>, and all of the "default" separator properties.</li>
|
|
<li>Panels of <a href="../symbols/Panel.html#type" class="linkProperty">type</a> <a href="../symbols/Panel.html#TableRow" class="linkConstant">Panel.TableRow</a> and <a href="../symbols/Panel.html#TableColumn" class="linkConstant">Panel.TableColumn</a> do not act like regular GraphObjects,
|
|
instead they are only to be used immediately within a <a href="../symbols/Panel.html#Table" class="linkConstant">Panel.Table</a>. They are pass-through containers
|
|
that hold elements for their parent table, and ignore their own scale and angle.</li>
|
|
<li>Panels of <a href="../symbols/Panel.html#type" class="linkProperty">type</a> <a href="../symbols/Panel.html#Grid" class="linkConstant">Panel.Grid</a> use the <a href="../symbols/Panel.html#gridCellSize" class="linkProperty">gridCellSize</a> and <a href="../symbols/Panel.html#gridOrigin" class="linkProperty">gridOrigin</a> properties.</li>
|
|
<li>Panels of <a href="../symbols/Panel.html#type" class="linkProperty">type</a> <a href="../symbols/Panel.html#Viewbox" class="linkConstant">Panel.Viewbox</a> use the <a href="../symbols/Panel.html#viewboxStretch" class="linkProperty">viewboxStretch</a> property.</li>
|
|
<li>Panels of <a href="../symbols/Panel.html#type" class="linkProperty">type</a> <a href="../symbols/Panel.html#Graduated" class="linkConstant">Panel.Graduated</a> use the <a href="../symbols/Panel.html#graduatedMin" class="linkProperty">graduatedMin</a>, <a href="../symbols/Panel.html#graduatedMax" class="linkProperty">graduatedMax</a>,
|
|
<a href="../symbols/Panel.html#graduatedTickUnit" class="linkProperty">graduatedTickUnit</a>, and <a href="../symbols/Panel.html#graduatedTickBase" class="linkProperty">graduatedTickBase</a> properties.
|
|
</ul>
|
|
<p class="boxread">
|
|
For live examples of all Panel types, see the <a href="../../intro/panels.html">Introduction page on Panels.</a>
|
|
<h3>Data Binding</h3>
|
|
<p>
|
|
Panels also provide fundamental support for data binding.
|
|
When a diagram gets a new model or when a diagram's model is augmented with additional data,
|
|
the diagram automatically creates a new Node or Link whose <a href="../symbols/Panel.html#data" class="linkProperty">data</a> property refers to the corresponding
|
|
node data or link data object.
|
|
<p class="boxread">
|
|
For more discussion of data binding, please read the <a href="../../intro/usingModels.html">Introduction page on Models</a>
|
|
and <a href="../../intro/dataBinding.html">Data Binding</a>.
|
|
<p>
|
|
Panels provide support for automatically creating elements within the Panel based on items in a JavaScript Array.
|
|
This is achieved by setting or binding the <a href="../symbols/Panel.html#itemArray" class="linkProperty">itemArray</a> property, which acts in a manner similar
|
|
to the <a href="../symbols/Model.html#nodeDataArray" class="linkProperty">Model.nodeDataArray</a> property.
|
|
You can supply an <a href="../symbols/Panel.html#itemTemplate" class="linkProperty">itemTemplate</a>, which must itself be a simple Panel, which is copied to create the element
|
|
in this container Panel corresponding to an item in the itemArray.
|
|
This property is analogous to the <a href="../symbols/Diagram.html#nodeTemplate" class="linkProperty">Diagram.nodeTemplate</a> property, although for the diagram the
|
|
template must be a <a href="../symbols/Node.html" class="linkConstructor">Node</a>, <a href="../symbols/Group.html" class="linkConstructor">Group</a>, or simple <a href="../symbols/Part.html" class="linkConstructor">Part</a>.
|
|
<p>
|
|
Much like the <a href="../symbols/Diagram.html#nodeTemplateMap" class="linkProperty">Diagram.nodeTemplateMap</a>, Panel's <a href="../symbols/Panel.html#itemTemplateMap" class="linkProperty">itemTemplateMap</a> supports having multiple templates,
|
|
so that the actual structure of the element created for a data item can be chosen dynamically.
|
|
Just as the <a href="../symbols/Model.html#nodeCategoryProperty" class="linkProperty">Model.nodeCategoryProperty</a> determines which template in the <a href="../symbols/Diagram.html#nodeTemplateMap" class="linkProperty">Diagram.nodeTemplateMap</a>
|
|
is copied to create a <a href="../symbols/Node.html" class="linkConstructor">Node</a>, the <a href="../symbols/Panel.html#itemCategoryProperty" class="linkProperty">itemCategoryProperty</a> names the data property whose value
|
|
chooses the Panel in the itemTemplateMap to copy for the item.
|
|
<p>
|
|
When binding the <a href="../symbols/Panel.html#itemArray" class="linkProperty">itemArray</a> property, it is commonplace to set <a href="../symbols/Model.html#copiesArrays" class="linkProperty">Model.copiesArrays</a> and
|
|
<a href="../symbols/Model.html#copiesArrayObjects" class="linkProperty">Model.copiesArrayObjects</a> properties to true, so that when a node is copied, the item Array and its
|
|
contents are copied, not shared. Or more generally, to customize the model's copying processes, you
|
|
can supply a custom <a href="../symbols/Model.html#copyNodeDataFunction" class="linkProperty">Model.copyNodeDataFunction</a>.
|
|
<p class="boxread">
|
|
For more discussion and examples of item arrays, please read the <a href="../../intro/itemArrays.html">Introduction page on Item Arrays</a>.
|
|
</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 Panel.">
|
|
<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">
|
|
Panel(type)
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Constructs an empty Panel of the given <a href="../symbols/Panel.html#type" class="linkProperty">type</a>.<span class="nodetails" id="xconPanel"><a class="morelink" onclick="hst('conPanel')">More...</a></span> <span class="details" id="conPanel"> Default type is <a href="../symbols/Panel.html#Position" class="linkConstant">Panel.Position</a>.
|
|
The panel type must be one of the enumerated values defined on the <a href="../symbols/Panel.html" class="linkConstructor">Panel</a> class, including:
|
|
<a href="../symbols/Panel.html#Position" class="linkConstant">Panel.Position</a>, <a href="../symbols/Panel.html#Vertical" class="linkConstant">Panel.Vertical</a>, <a href="../symbols/Panel.html#Horizontal" class="linkConstant">Panel.Horizontal</a>, <a href="../symbols/Panel.html#Table" class="linkConstant">Panel.Table</a>,
|
|
<a href="../symbols/Panel.html#Auto" class="linkConstant">Panel.Auto</a>, <a href="../symbols/Panel.html#Spot" class="linkConstant">Panel.Spot</a>, or <a href="../symbols/Panel.html#Viewbox" class="linkConstant">Panel.Viewbox</a>.</span>
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Parameters:</dt>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{EnumValue=}</span> <b>type</b>
|
|
|
|
</dt>
|
|
<dd>If not supplied, the default Panel type is <a href="../symbols/Panel.html#Position" class="linkConstant">Panel.Position</a>.</dd>
|
|
|
|
</dl>
|
|
|
|
|
|
|
|
|
|
</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 Panel.">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col" class="name">Name, Value Type</th>
|
|
<th scope="col" class="description">Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
|
|
<tr id="alignmentFocusName" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
alignmentFocusName
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{string}</span>
|
|
|
|
<span class="since" title="since">1.7</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>For Panels which are elements of Spot Panels, this gets or sets the name
|
|
of this Panel's element that should be used as the alignment object instead of this Panel.<span class="nodetails" id="xpropalignmentFocusName"><a class="morelink" onclick="hst('propalignmentFocusName')">More...</a></span> <span class="details" id="propalignmentFocusName">
|
|
</span><div class="details" id="dpropalignmentFocusName"><p>
|
|
This allows Spot Panels to align objects that are nested in the element tree of its own elements.</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="columnCount" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
columnCount
|
|
</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 number of columns in this Panel if it is of <a href="../symbols/Panel.html#type" class="linkProperty">type</a> <a href="../symbols/Panel.html#Table" class="linkConstant">Panel.Table</a>.<span class="nodetails" id="xpropcolumnCount"><a class="morelink" onclick="hst('propcolumnCount')">More...</a></span> <span class="details" id="propcolumnCount">
|
|
This value is only valid after the Panel has been measured.</span>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="columnSizing" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
columnSizing
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{EnumValue}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets how this Panel's columns deal with extra space
|
|
if the Panel is of <a href="../symbols/Panel.html#type" class="linkProperty">type</a> <a href="../symbols/Panel.html#Table" class="linkConstant">Panel.Table</a>.<span class="nodetails" id="xpropcolumnSizing"><a class="morelink" onclick="hst('propcolumnSizing')">More...</a></span> <span class="details" id="propcolumnSizing">
|
|
Valid values are <a href="../symbols/RowColumnDefinition.html#ProportionalExtra" class="linkConstant">RowColumnDefinition.ProportionalExtra</a> and <a href="../symbols/RowColumnDefinition.html#None" class="linkConstant">RowColumnDefinition.None</a>.
|
|
The default is <a href="../symbols/RowColumnDefinition.html#ProportionalExtra" class="linkConstant">RowColumnDefinition.ProportionalExtra</a>.</span>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/RowColumnDefinition.html#sizing" class="linkProperty">RowColumnDefinition.sizing</a></li>
|
|
|
|
<li><a href="../symbols/Panel.html#rowSizing" class="linkProperty">rowSizing</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="data" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
data
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{Object}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the optional model data to which this panel is data-bound.<span class="nodetails" id="xpropdata"><a class="morelink" onclick="hst('propdata')">More...</a></span> <span class="details" id="propdata">
|
|
The data must be a JavaScript Object if this is a <a href="../symbols/Part.html" class="linkConstructor">Part</a>.
|
|
The data can be any JavaScript value if this is a <a href="../symbols/Panel.html" class="linkConstructor">Panel</a> created for
|
|
an item in an Array that was data-bound by the <a href="../symbols/Panel.html#itemArray" class="linkProperty">itemArray</a> property.
|
|
The default value is null.
|
|
</span><div class="details" id="dpropdata"><p>
|
|
Setting it to a new value automatically calls <a href="../symbols/Panel.html#updateTargetBindings" class="linkMethod">updateTargetBindings</a>
|
|
in order to assign new values to all of the data-bound GraphObject properties.
|
|
<p>
|
|
Once you set this property you cannot add, remove, or modify any data bindings
|
|
on any of the GraphObjects in the visual tree of this Panel, including on
|
|
this panel itself.
|
|
<p>
|
|
You should not modify this property on a <a href="../symbols/Part.html" class="linkConstructor">Part</a> that is created automatically
|
|
to represent model data, nor on a <a href="../symbols/Panel.html" class="linkConstructor">Panel</a> that is created automatically for a data item
|
|
in the containing Panel's <a href="../symbols/Panel.html#itemArray" class="linkProperty">Panel.itemArray</a>.
|
|
Call <a href="../symbols/Model.html#removeNodeData" class="linkMethod">Model.removeNodeData</a> and <a href="../symbols/Model.html#addNodeData" class="linkMethod">Model.addNodeData</a> if you want to replace
|
|
this Part with another one, or call <a href="../symbols/Model.html#removeArrayItem" class="linkMethod">Model.removeArrayItem</a> and <a href="../symbols/Model.html#insertArrayItem" class="linkMethod">Model.insertArrayItem</a>
|
|
if you want to replace this Panel with another one.
|
|
<p>
|
|
Although you might not be able to replace this data value if this Part was created
|
|
automatically by the Diagram, you can still modify that data object's properties.
|
|
Call the appropriate Model method for changing properties that affect the structure of the diagram.
|
|
Call <a href="../symbols/Model.html#setDataProperty" class="linkMethod">Model.setDataProperty</a> for changing other properties that may be the sources
|
|
of <a href="../symbols/Binding.html" class="linkConstructor">Binding</a>s on <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a> properties that are in the visual tree of this panel/part.</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="defaultAlignment" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
defaultAlignment
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{<a href="../symbols/Spot.html" class="linkConstructor">Spot</a>}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the default alignment spot of this Panel, used as
|
|
the alignment for an element when its <a href="../symbols/GraphObject.html#alignment" class="linkProperty">GraphObject.alignment</a> value is <a href="../symbols/Spot.html#Default" class="linkConstant">Spot.Default</a>.<span class="nodetails" id="xpropdefaultAlignment"><a class="morelink" onclick="hst('propdefaultAlignment')">More...</a></span> <span class="details" id="propdefaultAlignment">
|
|
The default value is <a href="../symbols/Spot.html#Default" class="linkConstant">Spot.Default</a>, which is interpreted by the Panel in whatever manner seems reasonable,
|
|
depending on the Panel type.</span>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="defaultColumnSeparatorDashArray" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
defaultColumnSeparatorDashArray
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{Array.<number>}</span>
|
|
|
|
<span class="since" title="since">1.2</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the default dash array for a column's separator in a Table Panel.<span class="nodetails" id="xpropdefaultColumnSeparatorDashArray"><a class="morelink" onclick="hst('propdefaultColumnSeparatorDashArray')">More...</a></span> <span class="details" id="propdefaultColumnSeparatorDashArray">
|
|
<a href="../symbols/RowColumnDefinition.html#separatorStrokeWidth" class="linkProperty">RowColumnDefinition.separatorStrokeWidth</a> can override this default value.
|
|
</span><div class="details" id="dpropdefaultColumnSeparatorDashArray"><p>
|
|
Must be an array of positive numbers and zeroes,
|
|
or else null to indicate a solid line.
|
|
<p>
|
|
For example, the array [5, 10] would create dashes of 5 pixels and spaces of 10 pixels.
|
|
<p>
|
|
Setting an array with all zeroes will set the value to null.
|
|
<p>
|
|
Default is null.</div>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/RowColumnDefinition.html#separatorDashArray" class="linkProperty">RowColumnDefinition.separatorDashArray</a></li>
|
|
|
|
<li><a href="../symbols/Panel.html#defaultRowSeparatorDashArray" class="linkProperty">defaultRowSeparatorDashArray</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="defaultColumnSeparatorStroke" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
defaultColumnSeparatorStroke
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{string|<a href="../symbols/Brush.html" class="linkConstructor">Brush</a>}</span>
|
|
|
|
<span class="since" title="since">1.2</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the default stroke (color) for columns in a Table Panel
|
|
provided a given column has a nonzero <a href="../symbols/RowColumnDefinition.html#separatorStrokeWidth" class="linkProperty">RowColumnDefinition.separatorStrokeWidth</a>.<span class="nodetails" id="xpropdefaultColumnSeparatorStroke"><a class="morelink" onclick="hst('propdefaultColumnSeparatorStroke')">More...</a></span> <span class="details" id="propdefaultColumnSeparatorStroke">
|
|
<a href="../symbols/RowColumnDefinition.html#separatorStroke" class="linkProperty">RowColumnDefinition.separatorStroke</a> can override this default value.
|
|
The default value is null -- no line is drawn.</span>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/Panel.html#defaultColumnSeparatorStrokeWidth" class="linkProperty">defaultColumnSeparatorStrokeWidth</a></li>
|
|
|
|
<li><a href="../symbols/Panel.html#defaultColumnSeparatorDashArray" class="linkProperty">defaultColumnSeparatorDashArray</a></li>
|
|
|
|
<li><a href="../symbols/RowColumnDefinition.html#separatorStroke" class="linkProperty">RowColumnDefinition.separatorStroke</a></li>
|
|
|
|
<li><a href="../symbols/Panel.html#defaultRowSeparatorStroke" class="linkProperty">defaultRowSeparatorStroke</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="defaultColumnSeparatorStrokeWidth" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
defaultColumnSeparatorStrokeWidth
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{number}</span>
|
|
|
|
<span class="since" title="since">1.2</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the default stroke width for a column's separator in a Table Panel.<span class="nodetails" id="xpropdefaultColumnSeparatorStrokeWidth"><a class="morelink" onclick="hst('propdefaultColumnSeparatorStrokeWidth')">More...</a></span> <span class="details" id="propdefaultColumnSeparatorStrokeWidth">
|
|
<a href="../symbols/RowColumnDefinition.html#separatorStrokeWidth" class="linkProperty">RowColumnDefinition.separatorStrokeWidth</a> can override this default value.
|
|
The default value is 1. Any new value must be a real, non-negative number.</span>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/RowColumnDefinition.html#separatorStrokeWidth" class="linkProperty">RowColumnDefinition.separatorStrokeWidth</a></li>
|
|
|
|
<li><a href="../symbols/Panel.html#defaultRowSeparatorStrokeWidth" class="linkProperty">defaultRowSeparatorStrokeWidth</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="defaultRowSeparatorDashArray" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
defaultRowSeparatorDashArray
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{Array.<number>}</span>
|
|
|
|
<span class="since" title="since">1.2</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the default dash array for a row's separator in a Table Panel.<span class="nodetails" id="xpropdefaultRowSeparatorDashArray"><a class="morelink" onclick="hst('propdefaultRowSeparatorDashArray')">More...</a></span> <span class="details" id="propdefaultRowSeparatorDashArray">
|
|
<a href="../symbols/RowColumnDefinition.html#separatorStrokeWidth" class="linkProperty">RowColumnDefinition.separatorStrokeWidth</a> can override this default value.
|
|
</span><div class="details" id="dpropdefaultRowSeparatorDashArray"><p>
|
|
Must be an array of positive numbers and zeroes,
|
|
or else null to indicate a solid line.
|
|
<p>
|
|
For example, the array [5, 10] would create dashes of 5 pixels and spaces of 10 pixels.
|
|
<p>
|
|
Setting an array with all zeroes will set the value to null.
|
|
<p>
|
|
Default is null.</div>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/RowColumnDefinition.html#separatorDashArray" class="linkProperty">RowColumnDefinition.separatorDashArray</a></li>
|
|
|
|
<li><a href="../symbols/Panel.html#defaultColumnSeparatorDashArray" class="linkProperty">defaultColumnSeparatorDashArray</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="defaultRowSeparatorStroke" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
defaultRowSeparatorStroke
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{string|<a href="../symbols/Brush.html" class="linkConstructor">Brush</a>}</span>
|
|
|
|
<span class="since" title="since">1.2</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the default stroke (color) for rows in a Table Panel
|
|
provided a given row has a nonzero <a href="../symbols/RowColumnDefinition.html#separatorStrokeWidth" class="linkProperty">RowColumnDefinition.separatorStrokeWidth</a>.<span class="nodetails" id="xpropdefaultRowSeparatorStroke"><a class="morelink" onclick="hst('propdefaultRowSeparatorStroke')">More...</a></span> <span class="details" id="propdefaultRowSeparatorStroke">
|
|
<a href="../symbols/RowColumnDefinition.html#separatorStroke" class="linkProperty">RowColumnDefinition.separatorStroke</a> can override this default value.
|
|
The default value is null -- no line is drawn.</span>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/Panel.html#defaultRowSeparatorStrokeWidth" class="linkProperty">defaultRowSeparatorStrokeWidth</a></li>
|
|
|
|
<li><a href="../symbols/Panel.html#defaultRowSeparatorDashArray" class="linkProperty">defaultRowSeparatorDashArray</a></li>
|
|
|
|
<li><a href="../symbols/RowColumnDefinition.html#separatorStroke" class="linkProperty">RowColumnDefinition.separatorStroke</a></li>
|
|
|
|
<li><a href="../symbols/Panel.html#defaultColumnSeparatorStroke" class="linkProperty">defaultColumnSeparatorStroke</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="defaultRowSeparatorStrokeWidth" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
defaultRowSeparatorStrokeWidth
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{number}</span>
|
|
|
|
<span class="since" title="since">1.2</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the default stroke width for a row's separator in a Table Panel.<span class="nodetails" id="xpropdefaultRowSeparatorStrokeWidth"><a class="morelink" onclick="hst('propdefaultRowSeparatorStrokeWidth')">More...</a></span> <span class="details" id="propdefaultRowSeparatorStrokeWidth">
|
|
<a href="../symbols/RowColumnDefinition.html#separatorStrokeWidth" class="linkProperty">RowColumnDefinition.separatorStrokeWidth</a> can override this default value.
|
|
The default value is 1. Any new value must be a real, non-negative number.</span>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/RowColumnDefinition.html#separatorStrokeWidth" class="linkProperty">RowColumnDefinition.separatorStrokeWidth</a></li>
|
|
|
|
<li><a href="../symbols/Panel.html#defaultColumnSeparatorStrokeWidth" class="linkProperty">defaultColumnSeparatorStrokeWidth</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="defaultSeparatorPadding" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
defaultSeparatorPadding
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{<a href="../symbols/Margin.html" class="linkConstructor">Margin</a>}</span>
|
|
|
|
<span class="since" title="since">1.2</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the additional padding for rows and columns in a Table Panel.<span class="nodetails" id="xpropdefaultSeparatorPadding"><a class="morelink" onclick="hst('propdefaultSeparatorPadding')">More...</a></span> <span class="details" id="propdefaultSeparatorPadding">
|
|
Padding is applied both before and after a row or column's contents.</span>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/RowColumnDefinition.html#separatorPadding" class="linkProperty">RowColumnDefinition.separatorPadding</a></li>
|
|
|
|
<li><a href="../symbols/Panel.html#defaultColumnSeparatorStrokeWidth" class="linkProperty">defaultColumnSeparatorStrokeWidth</a></li>
|
|
|
|
<li><a href="../symbols/Panel.html#defaultRowSeparatorStrokeWidth" class="linkProperty">defaultRowSeparatorStrokeWidth</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="defaultStretch" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
defaultStretch
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{EnumValue}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the default stretch of this Panel, used as
|
|
the stretch for an element when its <a href="../symbols/GraphObject.html#stretch" class="linkProperty">GraphObject.stretch</a> value is <a href="../symbols/GraphObject.html#Default" class="linkConstant">GraphObject.Default</a>.<span class="nodetails" id="xpropdefaultStretch"><a class="morelink" onclick="hst('propdefaultStretch')">More...</a></span> <span class="details" id="propdefaultStretch">
|
|
The default value is <a href="../symbols/GraphObject.html#Default" class="linkConstant">GraphObject.Default</a>, which typically resolves to <a href="../symbols/GraphObject.html#None" class="linkConstant">GraphObject.None</a>.</span>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="elements" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
elements
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{Iterator.<GraphObject>}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>This read-only property returns an iterator over the collection of the <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>s that this panel manages.<span class="nodetails" id="xpropelements"><a class="morelink" onclick="hst('propelements')">More...</a></span> <span class="details" id="propelements">
|
|
</span><div class="details" id="dpropelements"><p>
|
|
You can change the collection by calling <a href="../symbols/Panel.html#add" class="linkMethod">add</a>, <a href="../symbols/Panel.html#insertAt" class="linkMethod">insertAt</a>, <a href="../symbols/Panel.html#remove" class="linkMethod">remove</a>, or <a href="../symbols/Panel.html#removeAt" class="linkMethod">removeAt</a>.
|
|
<p>
|
|
You can also get direct access to individual elements by calling <a href="../symbols/Panel.html#elt" class="linkMethod">elt</a>.</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="graduatedMax" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
graduatedMax
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{number}</span>
|
|
|
|
<span class="since" title="since">1.7</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the maximum value represented on a <a href="../symbols/Panel.html#Graduated" class="linkConstant">Graduated</a> panel.<span class="nodetails" id="xpropgraduatedMax"><a class="morelink" onclick="hst('propgraduatedMax')">More...</a></span> <span class="details" id="propgraduatedMax">
|
|
Must be greater than <a href="../symbols/Panel.html#graduatedMin" class="linkProperty">graduatedMin</a>. The default is 100.</span>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="graduatedMin" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
graduatedMin
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{number}</span>
|
|
|
|
<span class="since" title="since">1.7</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the minimum value represented on a <a href="../symbols/Panel.html#Graduated" class="linkConstant">Graduated</a> panel.<span class="nodetails" id="xpropgraduatedMin"><a class="morelink" onclick="hst('propgraduatedMin')">More...</a></span> <span class="details" id="propgraduatedMin">
|
|
Must be less than <a href="../symbols/Panel.html#graduatedMax" class="linkProperty">graduatedMax</a>. The default is 0.</span>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="graduatedRange" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
graduatedRange
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{number}</span>
|
|
|
|
<span class="since" title="since">1.7</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>This read-only property returns the range of values represented by a <a href="../symbols/Panel.html#Graduated" class="linkConstant">Graduated</a> panel.<span class="nodetails" id="xpropgraduatedRange"><a class="morelink" onclick="hst('propgraduatedRange')">More...</a></span> <span class="details" id="propgraduatedRange">
|
|
</span><div class="details" id="dpropgraduatedRange"><p>
|
|
For example, a <a href="../symbols/Panel.html#graduatedMin" class="linkProperty">graduatedMin</a> of 25 and <a href="../symbols/Panel.html#graduatedMax" class="linkProperty">graduatedMax</a> of 75 would return 50.</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="graduatedTickBase" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
graduatedTickBase
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{number}</span>
|
|
|
|
<span class="since" title="since">1.7</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the base value which is marked with a tick.<span class="nodetails" id="xpropgraduatedTickBase"><a class="morelink" onclick="hst('propgraduatedTickBase')">More...</a></span> <span class="details" id="propgraduatedTickBase">
|
|
The default is 0.</span>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="graduatedTickUnit" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
graduatedTickUnit
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{number}</span>
|
|
|
|
<span class="since" title="since">1.7</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the difference between two consecutive values marked by ticks.<span class="nodetails" id="xpropgraduatedTickUnit"><a class="morelink" onclick="hst('propgraduatedTickUnit')">More...</a></span> <span class="details" id="propgraduatedTickUnit">
|
|
Must be positive. The default is 10.</span>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="gridCellSize" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
gridCellSize
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{<a href="../symbols/Size.html" class="linkConstructor">Size</a>}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the distance between lines in a <a href="../symbols/Panel.html#Grid" class="linkConstant">Grid</a> panel.<span class="nodetails" id="xpropgridCellSize"><a class="morelink" onclick="hst('propgridCellSize')">More...</a></span> <span class="details" id="propgridCellSize">
|
|
The units are in local coordinates.
|
|
The default is 10x10. Any new width or height must be a positive real number.</span>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="gridOrigin" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
gridOrigin
|
|
</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 an origin point for the grid cells in a <a href="../symbols/Panel.html#Grid" class="linkConstant">Grid</a> panel.<span class="nodetails" id="xpropgridOrigin"><a class="morelink" onclick="hst('propgridOrigin')">More...</a></span> <span class="details" id="propgridOrigin">
|
|
The units are in local coordinates.
|
|
The default is (0,0). Any new value must use real numbers.</span>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="isClipping" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
isClipping
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{boolean}</span>
|
|
|
|
<span class="since" title="since">1.7</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets whether this Panel's main element clips instead of fills.<span class="nodetails" id="xpropisClipping"><a class="morelink" onclick="hst('propisClipping')">More...</a></span> <span class="details" id="propisClipping">
|
|
The main element will not paint its stroke, if it has any.
|
|
Only works with Spot panels, and assumes that the main element is a Shape.</span>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="isEnabled" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
isEnabled
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{boolean}</span>
|
|
|
|
<span class="since" title="since">1.7</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets whether this Panel or any GraphObject inside the panel actually responds to user click events.<span class="nodetails" id="xpropisEnabled"><a class="morelink" onclick="hst('propisEnabled')">More...</a></span> <span class="details" id="propisEnabled">
|
|
It may be used as a Binding target.
|
|
See how this property is used in <a href="../../extensions/Buttons.js">Buttons.js</a>.
|
|
</span><div class="details" id="dpropisEnabled"><p>
|
|
This property does not have any effect on picking ("hit-testing") -- that behavior is implemented
|
|
by the <a href="../symbols/GraphObject.html#pickable" class="linkProperty">GraphObject.pickable</a> property.
|
|
When this property is false, non-click events may still occur on this panel or on objects within this panel.
|
|
This property is normally only used for Panels that are <a href="../symbols/GraphObject.html#isActionable" class="linkProperty">GraphObject.isActionable</a>.
|
|
<p>
|
|
Call <a href="../symbols/GraphObject.html#isEnabledObject" class="linkMethod">GraphObject.isEnabledObject</a> to decide whether a particular object can be clicked.</div>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/GraphObject.html#isEnabledObject" class="linkMethod">GraphObject.isEnabledObject</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#enabledChanged" class="linkProperty">GraphObject.enabledChanged</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#isActionable" class="linkProperty">GraphObject.isActionable</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#pickable" class="linkProperty">GraphObject.pickable</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="isOpposite" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
isOpposite
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{boolean}</span>
|
|
|
|
<span class="since" title="since">1.7</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>For Horizontal and Vertical panels, gets or sets whether this Panel arranges its contents from the
|
|
typical side (left and top, respectively), or the opposite side (right and bottom, respectively).<span class="nodetails" id="xpropisOpposite"><a class="morelink" onclick="hst('propisOpposite')">More...</a></span> <span class="details" id="propisOpposite">
|
|
</span><div class="details" id="dpropisOpposite"><p>
|
|
The default value is false.</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="itemArray" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
itemArray
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{Array.<*>}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets a JavaScript Array of values or objects, each of which will be represented
|
|
by a <a href="../symbols/Panel.html" class="linkConstructor">Panel</a> as elements in this Panel.<span class="nodetails" id="xpropitemArray"><a class="morelink" onclick="hst('propitemArray')">More...</a></span> <span class="details" id="propitemArray">
|
|
Replacing this array results all of this panel's child objects being replaced with
|
|
a copy of the <a href="../symbols/Panel.html" class="linkConstructor">Panel</a> found in <a href="../symbols/Panel.html#itemTemplateMap" class="linkProperty">itemTemplateMap</a> for each particular
|
|
item in the Array.
|
|
</span><div class="details" id="dpropitemArray"><p>
|
|
Because the software does not receive any notifications when an Array is modified,
|
|
any insertions or removals or replacements of data in the Array will not be noticed
|
|
unless you call <a href="../symbols/Model.html#insertArrayItem" class="linkMethod">Model.insertArrayItem</a> or <a href="../symbols/Model.html#removeArrayItem" class="linkMethod">Model.removeArrayItem</a>.
|
|
<p>
|
|
When binding this property, it is commonplace to set <a href="../symbols/Model.html#copiesArrays" class="linkProperty">Model.copiesArrays</a> and
|
|
<a href="../symbols/Model.html#copiesArrayObjects" class="linkProperty">Model.copiesArrayObjects</a> properties to true, so that when a node is copied,
|
|
the item Array and its contents are copied, not shared.
|
|
Or more generally, to customize the model's copying processes, you can supply a custom
|
|
<a href="../symbols/Model.html#copyNodeDataFunction" class="linkProperty">Model.copyNodeDataFunction</a> and perhaps a <a href="../symbols/GraphLinksModel.html#copyLinkDataFunction" class="linkProperty">GraphLinksModel.copyLinkDataFunction</a>.
|
|
<p>
|
|
Any JavaScript Object that is in this Array must only appear once in the array
|
|
and must not appear in any other <a href="../symbols/Panel.html#itemArray" class="linkProperty">Panel.itemArray</a>s.
|
|
Use <a href="../symbols/Panel.html#findItemPanelForData" class="linkMethod">findItemPanelForData</a> to find the data-bound Panel created for an Object in this panel's item Array.
|
|
<p>
|
|
Non-Object values in an item Array may appear multiple times.
|
|
An item Array may be shared by multiple Panels.
|
|
<p>
|
|
item Arrays should not be used with Grid Panels or Graduated Panels as they may not have nested Panels.</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="itemCategoryProperty" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
itemCategoryProperty
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{string|function(*):string}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the name of the item data property that returns a string describing that data's category,
|
|
or a function that takes an item data object and returns that string;
|
|
the default value is the name 'category'.<span class="nodetails" id="xpropitemCategoryProperty"><a class="morelink" onclick="hst('propitemCategoryProperty')">More...</a></span> <span class="details" id="propitemCategoryProperty">
|
|
This is used to distinguish between different
|
|
kinds of items in the <a href="../symbols/Panel.html#itemArray" class="linkProperty">itemArray</a>.
|
|
</span><div class="details" id="dpropitemCategoryProperty"><p>
|
|
The name must not be null.
|
|
If the value is an empty string, the category is assumed to be an empty string,
|
|
the default category name, for all item data objects.
|
|
You must not change this property when the <a href="../symbols/Panel.html#itemArray" class="linkProperty">itemArray</a> already has a value.</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="itemIndex" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
itemIndex
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{number}</span>
|
|
|
|
<span class="since" title="since">1.4</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets the index of this Panel's data if it was created to represent an item in its containing Panel's <a href="../symbols/Panel.html#itemArray" class="linkProperty">Panel.itemArray</a>.<span class="nodetails" id="xpropitemIndex"><a class="morelink" onclick="hst('propitemIndex')">More...</a></span> <span class="details" id="propitemIndex">
|
|
The default value is NaN.
|
|
</span><div class="details" id="dpropitemIndex"><p>
|
|
This is only set internally by code such as <a href="../symbols/Panel.html#rebuildItemElements" class="linkMethod">rebuildItemElements</a> or <a href="../symbols/Model.html#insertArrayItem" class="linkMethod">Model.insertArrayItem</a>
|
|
when building or shifting Panel representing items
|
|
in the Panel whose <a href="../symbols/Panel.html#itemArray" class="linkProperty">Panel.itemArray</a> was set or bound to an Array of value.
|
|
<p>
|
|
This property can be used in data bindings within the item template to produce values
|
|
that depend on its position in the item Array.
|
|
For example:
|
|
<pre>
|
|
$(go.Panel, // the item Panel
|
|
. . .,
|
|
new go.Binding("itemArray", "someProperty"),
|
|
{
|
|
itemTemplate:
|
|
$(go.Panel,
|
|
// set Panel.background to a color based on the Panel.itemIndex
|
|
new go.Binding("background", "itemIndex",
|
|
// using this conversion function
|
|
function(i) { return (i%2 === 0) ? "lightgreen" : "lightyellow"; })
|
|
// bound to this Panel itself, not to the Panel.data item
|
|
.ofObject(),
|
|
$(go.TextBlock, // a trivial item template, just showing some text
|
|
new go.Binding("text")) // sets TextBlock.text = data.text
|
|
)
|
|
}
|
|
)
|
|
</pre>
|
|
<p>
|
|
The main element of a Spot or Auto or Link Panel, or the first TableRow or TableColumn element of a Table Panel
|
|
whose <a href="../symbols/GraphObject.html#isPanelMain" class="linkProperty">isPanelMain</a> property is true, will not have this property set to a number,
|
|
because it will not have been created by <a href="../symbols/Panel.html#rebuildItemElements" class="linkMethod">rebuildItemElements</a>.</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="itemTemplate" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
itemTemplate
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{<a href="../symbols/Panel.html" class="linkConstructor">Panel</a>}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the default <a href="../symbols/Panel.html" class="linkConstructor">Panel</a> template used as the archetype
|
|
for item data that are in <a href="../symbols/Panel.html#itemArray" class="linkProperty">itemArray</a>.<span class="nodetails" id="xpropitemTemplate"><a class="morelink" onclick="hst('propitemTemplate')">More...</a></span> <span class="details" id="propitemTemplate">
|
|
</span><div class="details" id="dpropitemTemplate"><p>
|
|
Setting this property just modifies the <a href="../symbols/Panel.html#itemTemplateMap" class="linkProperty">itemTemplateMap</a>
|
|
by replacing the entry named with the empty string.
|
|
Any new value must be a <a href="../symbols/Panel.html" class="linkConstructor">Panel</a> but not a <a href="../symbols/Part.html" class="linkConstructor">Part</a>.
|
|
By default this property is null.
|
|
<p>
|
|
<a href="../symbols/GraphObject.html#copy" class="linkMethod">GraphObject.copy</a> when copying a panel will share the <a href="../symbols/Panel.html#itemTemplateMap" class="linkProperty">itemTemplateMap</a>
|
|
between the original panel and the copied panel.</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="itemTemplateMap" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
itemTemplateMap
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{Map.<string,Panel>}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets a <a href="../symbols/Map.html" class="linkConstructor">Map</a> mapping template names to <a href="../symbols/Panel.html" class="linkConstructor">Panel</a>s.<span class="nodetails" id="xpropitemTemplateMap"><a class="morelink" onclick="hst('propitemTemplateMap')">More...</a></span> <span class="details" id="propitemTemplateMap">
|
|
One of these Panels is copied for each item data that is in the <a href="../symbols/Panel.html#itemArray" class="linkProperty">itemArray</a>.
|
|
Replacing this map will automatically rebuild all of the elements in this Panel.
|
|
</span><div class="details" id="dpropitemTemplateMap"><p>
|
|
By default this property is null.
|
|
All values in the <a href="../symbols/Map.html" class="linkConstructor">Map</a> must be <a href="../symbols/Panel.html" class="linkConstructor">Panel</a>s but not <a href="../symbols/Part.html" class="linkConstructor">Part</a>s.
|
|
<p>
|
|
If you modify this <a href="../symbols/Map.html" class="linkConstructor">Map</a>, by replacing a <a href="../symbols/Panel.html" class="linkConstructor">Panel</a> or by adding or
|
|
removing a map entry, you need to explicitly call <a href="../symbols/Panel.html#rebuildItemElements" class="linkMethod">rebuildItemElements</a> afterwards.
|
|
<p>
|
|
<a href="../symbols/GraphObject.html#copy" class="linkMethod">GraphObject.copy</a> when copying a panel will share the <a href="../symbols/Panel.html#itemTemplateMap" class="linkProperty">itemTemplateMap</a>
|
|
between the original panel and the copied panel.</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="leftIndex" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
leftIndex
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{number}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the first column that this Panel of <a href="../symbols/Panel.html#type" class="linkProperty">type</a> <a href="../symbols/Panel.html#Table" class="linkConstant">Panel.Table</a> displays.<span class="nodetails" id="xpropleftIndex"><a class="morelink" onclick="hst('propleftIndex')">More...</a></span> <span class="details" id="propleftIndex">
|
|
The default value is 0.</span>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/Panel.html#topIndex" class="linkProperty">topIndex</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="padding" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
padding
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{<a href="../symbols/Margin.html" class="linkConstructor">Margin</a>|number}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the space between this Panel's border and its content, depending on the type of panel.<span class="nodetails" id="xproppadding"><a class="morelink" onclick="hst('proppadding')">More...</a></span> <span class="details" id="proppadding">
|
|
Unlike <a href="../symbols/GraphObject.html#margin" class="linkProperty">GraphObject.margin</a>, padding expands the area inside of the Panel's border.
|
|
</span><div class="details" id="dproppadding"><p>
|
|
Padding cannot contain negative numbers.
|
|
The default value is a <a href="../symbols/Margin.html" class="linkConstructor">Margin</a> of zero.</div>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/GraphObject.html#margin" class="linkProperty">GraphObject.margin</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="rowCount" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
rowCount
|
|
</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 number of rows in this Panel if it is of <a href="../symbols/Panel.html#type" class="linkProperty">type</a> <a href="../symbols/Panel.html#Table" class="linkConstant">Panel.Table</a>.<span class="nodetails" id="xproprowCount"><a class="morelink" onclick="hst('proprowCount')">More...</a></span> <span class="details" id="proprowCount">
|
|
This value is only valid after the Panel has been measured.</span>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="rowSizing" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
rowSizing
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{EnumValue}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets how this Panel's rows deal with extra space
|
|
if the Panel is of <a href="../symbols/Panel.html#type" class="linkProperty">type</a> <a href="../symbols/Panel.html#Table" class="linkConstant">Panel.Table</a>.<span class="nodetails" id="xproprowSizing"><a class="morelink" onclick="hst('proprowSizing')">More...</a></span> <span class="details" id="proprowSizing">
|
|
Valid values are <a href="../symbols/RowColumnDefinition.html#ProportionalExtra" class="linkConstant">RowColumnDefinition.ProportionalExtra</a> and <a href="../symbols/RowColumnDefinition.html#None" class="linkConstant">RowColumnDefinition.None</a>.
|
|
The default is <a href="../symbols/RowColumnDefinition.html#ProportionalExtra" class="linkConstant">RowColumnDefinition.ProportionalExtra</a>.</span>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/RowColumnDefinition.html#sizing" class="linkProperty">RowColumnDefinition.sizing</a></li>
|
|
|
|
<li><a href="../symbols/Panel.html#columnSizing" class="linkProperty">columnSizing</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="topIndex" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
topIndex
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{number}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the first row that this Panel of <a href="../symbols/Panel.html#type" class="linkProperty">type</a> <a href="../symbols/Panel.html#Table" class="linkConstant">Panel.Table</a> displays.<span class="nodetails" id="xproptopIndex"><a class="morelink" onclick="hst('proptopIndex')">More...</a></span> <span class="details" id="proptopIndex">
|
|
The default value is 0.</span>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/Panel.html#leftIndex" class="linkProperty">leftIndex</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="type" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
type
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{EnumValue}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the type of the Panel, which controls how the Panel's elements are measured and arranged.<span class="nodetails" id="xproptype"><a class="morelink" onclick="hst('proptype')">More...</a></span> <span class="details" id="proptype">
|
|
The only accepted values are listed as constant properties of Panel, including:
|
|
<ul>
|
|
<li><a href="../symbols/Panel.html#Position" class="linkConstant">Panel.Position</a></li>
|
|
<li><a href="../symbols/Panel.html#Vertical" class="linkConstant">Panel.Vertical</a></li>
|
|
<li><a href="../symbols/Panel.html#Horizontal" class="linkConstant">Panel.Horizontal</a></li>
|
|
<li><a href="../symbols/Panel.html#Auto" class="linkConstant">Panel.Auto</a></li>
|
|
<li><a href="../symbols/Panel.html#Spot" class="linkConstant">Panel.Spot</a></li>
|
|
<li><a href="../symbols/Panel.html#Table" class="linkConstant">Panel.Table</a></li>
|
|
<li><a href="../symbols/Panel.html#Viewbox" class="linkConstant">Panel.Viewbox</a></li>
|
|
<li><a href="../symbols/Panel.html#Link" class="linkConstant">Panel.Link</a> (see also <a href="../symbols/Link.html" class="linkConstructor">Link</a>s, which are all Panels of type Link)</li>
|
|
<li><a href="../symbols/Panel.html#TableRow" class="linkConstant">Panel.TableRow</a></li>
|
|
<li><a href="../symbols/Panel.html#TableColumn" class="linkConstant">Panel.TableColumn</a></li>
|
|
<li><a href="../symbols/Panel.html#Grid" class="linkConstant">Panel.Grid</a></li>
|
|
<li><a href="../symbols/Panel.html#Graduated" class="linkConstant">Panel.Graduated</a></li>
|
|
</ul>
|
|
The default value is <a href="../symbols/Panel.html#Position" class="linkConstant">Panel.Position</a>.
|
|
</span><div class="details" id="dproptype"><p>
|
|
You must not modify this property once the Panel has been measured or the Panel has been added to another Panel.</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="viewboxStretch" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
viewboxStretch
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{EnumValue}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets how a <a href="../symbols/Panel.html#Viewbox" class="linkConstant">Viewbox</a> panel will resize its content.<span class="nodetails" id="xpropviewboxStretch"><a class="morelink" onclick="hst('propviewboxStretch')">More...</a></span> <span class="details" id="propviewboxStretch">
|
|
</span><div class="details" id="dpropviewboxStretch"><p>
|
|
Possible values are <a href="../symbols/GraphObject.html#Uniform" class="linkConstant">GraphObject.Uniform</a> and <a href="../symbols/GraphObject.html#UniformToFill" class="linkConstant">GraphObject.UniformToFill</a>.
|
|
The default is <a href="../symbols/GraphObject.html#Uniform" class="linkConstant">GraphObject.Uniform</a>.</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
</div><!-- class="table-responsive">-->
|
|
|
|
|
|
|
|
<dl class="inheritsList">
|
|
<dt>Properties borrowed from class <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>: </dt><dd><a href="../symbols/GraphObject.html#actionCancel" class="linkProperty">actionCancel</a>, <a href="../symbols/GraphObject.html#actionDown" class="linkProperty">actionDown</a>, <a href="../symbols/GraphObject.html#actionMove" class="linkProperty">actionMove</a>, <a href="../symbols/GraphObject.html#actionUp" class="linkProperty">actionUp</a>, <a href="../symbols/GraphObject.html#actualBounds" class="linkProperty">actualBounds</a>, <a href="../symbols/GraphObject.html#alignment" class="linkProperty">alignment</a>, <a href="../symbols/GraphObject.html#alignmentFocus" class="linkProperty">alignmentFocus</a>, <a href="../symbols/GraphObject.html#angle" class="linkProperty">angle</a>, <a href="../symbols/GraphObject.html#areaBackground" class="linkProperty">areaBackground</a>, <a href="../symbols/GraphObject.html#background" class="linkProperty">background</a>, <a href="../symbols/GraphObject.html#click" class="linkProperty">click</a>, <a href="../symbols/GraphObject.html#column" class="linkProperty">column</a>, <a href="../symbols/GraphObject.html#columnSpan" class="linkProperty">columnSpan</a>, <a href="../symbols/GraphObject.html#contextClick" class="linkProperty">contextClick</a>, <a href="../symbols/GraphObject.html#contextMenu" class="linkProperty">contextMenu</a>, <a href="../symbols/GraphObject.html#cursor" class="linkProperty">cursor</a>, <a href="../symbols/GraphObject.html#Default" class="linkConstant">Default</a>, <a href="../symbols/GraphObject.html#desiredSize" class="linkProperty">desiredSize</a>, <a href="../symbols/GraphObject.html#diagram" class="linkProperty">diagram</a>, <a href="../symbols/GraphObject.html#doubleClick" class="linkProperty">doubleClick</a>, <a href="../symbols/GraphObject.html#enabledChanged" class="linkProperty">enabledChanged</a>, <a href="../symbols/GraphObject.html#Fill" class="linkConstant">Fill</a>, <a href="../symbols/GraphObject.html#fromEndSegmentLength" class="linkProperty">fromEndSegmentLength</a>, <a href="../symbols/GraphObject.html#fromLinkable" class="linkProperty">fromLinkable</a>, <a href="../symbols/GraphObject.html#fromLinkableDuplicates" class="linkProperty">fromLinkableDuplicates</a>, <a href="../symbols/GraphObject.html#fromLinkableSelfNode" class="linkProperty">fromLinkableSelfNode</a>, <a href="../symbols/GraphObject.html#fromMaxLinks" class="linkProperty">fromMaxLinks</a>, <a href="../symbols/GraphObject.html#fromShortLength" class="linkProperty">fromShortLength</a>, <a href="../symbols/GraphObject.html#fromSpot" class="linkProperty">fromSpot</a>, <a href="../symbols/GraphObject.html#height" class="linkProperty">height</a>, <a href="../symbols/GraphObject.html#isActionable" class="linkProperty">isActionable</a>, <a href="../symbols/GraphObject.html#isPanelMain" class="linkProperty">isPanelMain</a>, <a href="../symbols/GraphObject.html#layer" class="linkProperty">layer</a>, <a href="../symbols/GraphObject.html#margin" class="linkProperty">margin</a>, <a href="../symbols/GraphObject.html#maxSize" class="linkProperty">maxSize</a>, <a href="../symbols/GraphObject.html#measuredBounds" class="linkProperty">measuredBounds</a>, <a href="../symbols/GraphObject.html#minSize" class="linkProperty">minSize</a>, <a href="../symbols/GraphObject.html#mouseDragEnter" class="linkProperty">mouseDragEnter</a>, <a href="../symbols/GraphObject.html#mouseDragLeave" class="linkProperty">mouseDragLeave</a>, <a href="../symbols/GraphObject.html#mouseDrop" class="linkProperty">mouseDrop</a>, <a href="../symbols/GraphObject.html#mouseEnter" class="linkProperty">mouseEnter</a>, <a href="../symbols/GraphObject.html#mouseHold" class="linkProperty">mouseHold</a>, <a href="../symbols/GraphObject.html#mouseHover" class="linkProperty">mouseHover</a>, <a href="../symbols/GraphObject.html#mouseLeave" class="linkProperty">mouseLeave</a>, <a href="../symbols/GraphObject.html#mouseOver" class="linkProperty">mouseOver</a>, <a href="../symbols/GraphObject.html#name" class="linkProperty">name</a>, <a href="../symbols/GraphObject.html#naturalBounds" class="linkProperty">naturalBounds</a>, <a href="../symbols/GraphObject.html#None" class="linkConstant">None</a>, <a href="../symbols/GraphObject.html#opacity" class="linkProperty">opacity</a>, <a href="../symbols/GraphObject.html#panel" class="linkProperty">panel</a>, <a href="../symbols/GraphObject.html#part" class="linkProperty">part</a>, <a href="../symbols/GraphObject.html#pickable" class="linkProperty">pickable</a>, <a href="../symbols/GraphObject.html#portId" class="linkProperty">portId</a>, <a href="../symbols/GraphObject.html#position" class="linkProperty">position</a>, <a href="../symbols/GraphObject.html#row" class="linkProperty">row</a>, <a href="../symbols/GraphObject.html#rowSpan" class="linkProperty">rowSpan</a>, <a href="../symbols/GraphObject.html#scale" class="linkProperty">scale</a>, <a href="../symbols/GraphObject.html#segmentFraction" class="linkProperty">segmentFraction</a>, <a href="../symbols/GraphObject.html#segmentIndex" class="linkProperty">segmentIndex</a>, <a href="../symbols/GraphObject.html#segmentOffset" class="linkProperty">segmentOffset</a>, <a href="../symbols/GraphObject.html#segmentOrientation" class="linkProperty">segmentOrientation</a>, <a href="../symbols/GraphObject.html#shadowVisible" class="linkProperty">shadowVisible</a>, <a href="../symbols/GraphObject.html#stretch" class="linkProperty">stretch</a>, <a href="../symbols/GraphObject.html#toEndSegmentLength" class="linkProperty">toEndSegmentLength</a>, <a href="../symbols/GraphObject.html#toLinkable" class="linkProperty">toLinkable</a>, <a href="../symbols/GraphObject.html#toLinkableDuplicates" class="linkProperty">toLinkableDuplicates</a>, <a href="../symbols/GraphObject.html#toLinkableSelfNode" class="linkProperty">toLinkableSelfNode</a>, <a href="../symbols/GraphObject.html#toMaxLinks" class="linkProperty">toMaxLinks</a>, <a href="../symbols/GraphObject.html#toolTip" class="linkProperty">toolTip</a>, <a href="../symbols/GraphObject.html#toShortLength" class="linkProperty">toShortLength</a>, <a href="../symbols/GraphObject.html#toSpot" class="linkProperty">toSpot</a>, <a href="../symbols/GraphObject.html#Uniform" class="linkConstant">Uniform</a>, <a href="../symbols/GraphObject.html#UniformToFill" class="linkConstant">UniformToFill</a>, <a href="../symbols/GraphObject.html#visible" class="linkProperty">visible</a>, <a href="../symbols/GraphObject.html#width" class="linkProperty">width</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 Panel.">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col" class="name">Name, Return Type</th>
|
|
<th scope="col" class="description">Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
|
|
<tr id="add">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
add(element)
|
|
</div>
|
|
<div class="attributes">
|
|
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Adds a GraphObject to the end of this Panel's list of elements, visually in front of all of the other elements.<span class="nodetails" id="xmethadd"><a class="morelink" onclick="hst('methadd')">More...</a></span> <span class="details" id="methadd">
|
|
</span><div class="details" id="dmethadd"><p>
|
|
If the element to be added is already in this Panel's list of elements,
|
|
the object is moved to the end of the list.
|
|
You cannot add a GraphObject to a Panel if that GraphObject is already in a different Panel.</div>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Parameters:</dt>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{<a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>}</span> <b>element</b>
|
|
|
|
</dt>
|
|
<dd>A GraphObject.</dd>
|
|
|
|
</dl>
|
|
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="copy">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
copy()
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{<a href="../symbols/Panel.html" class="linkConstructor">Panel</a>}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Creates a deep copy of this Panel and returns it.
|
|
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Returns:</dt>
|
|
|
|
<dt><span class="light fixedFont">{<a href="../symbols/Panel.html" class="linkConstructor">Panel</a>}</span> </dt>
|
|
|
|
</dl>
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="elt">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
elt(idx)
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{<a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Returns the GraphObject in this Panel's list of elements at the specified index.<span class="nodetails" id="xmethelt"><a class="morelink" onclick="hst('methelt')">More...</a></span> <span class="details" id="methelt"></span>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Parameters:</dt>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{number}</span> <b>idx</b>
|
|
|
|
</dt>
|
|
<dd></dd>
|
|
|
|
</dl>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Returns:</dt>
|
|
|
|
<dt><span class="light fixedFont">{<a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>}</span> </dt>
|
|
|
|
</dl>
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="findColumnForLocalX">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
findColumnForLocalX(x)
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{number}</span>
|
|
|
|
<span class="since" title="since">1.2</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Returns the cell at a given x-coordinate in local coordinates.<span class="nodetails" id="xmethfindColumnForLocalX"><a class="morelink" onclick="hst('methfindColumnForLocalX')">More...</a></span> <span class="details" id="methfindColumnForLocalX">
|
|
Call <a href="../symbols/GraphObject.html#getLocalPoint" class="linkMethod">GraphObject.getLocalPoint</a> to convert a Point in document coordinates into
|
|
a Point in local coordinates.
|
|
</span><div class="details" id="dmethfindColumnForLocalX"><p>
|
|
If this Panel is not a Table Panel, this method returns -1.</div>
|
|
|
|
</p><div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/Panel.html#findRowForLocalY" class="linkMethod">findRowForLocalY</a></li>
|
|
|
|
</ul></div>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Parameters:</dt>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{number}</span> <b>x</b>
|
|
|
|
</dt>
|
|
<dd></dd>
|
|
|
|
</dl>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Returns:</dt>
|
|
|
|
<dt><span class="light fixedFont">{number}</span> a zero-based integer</dt>
|
|
|
|
</dl>
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="findItemPanelForData">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
findItemPanelForData(data)
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{<a href="../symbols/Panel.html" class="linkConstructor">Panel</a>}</span>
|
|
|
|
<span class="since" title="since">1.6</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Return the <a href="../symbols/Panel.html" class="linkConstructor">Panel</a> that was made for a particular data object in this panel's <a href="../symbols/Panel.html#itemArray" class="linkProperty">itemArray</a>.<span class="nodetails" id="xmethfindItemPanelForData"><a class="morelink" onclick="hst('methfindItemPanelForData')">More...</a></span> <span class="details" id="methfindItemPanelForData">
|
|
If this returns a Panel, its <a href="../symbols/Panel.html#data" class="linkProperty">data</a> property will be the argument data object,
|
|
and its containing <a href="../symbols/GraphObject.html#panel" class="linkProperty">GraphObject.panel</a> will be this panel.</span>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Parameters:</dt>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{Object}</span> <b>data</b>
|
|
|
|
</dt>
|
|
<dd>must be an Object, not a string or a number or a boolean or a function</dd>
|
|
|
|
</dl>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Returns:</dt>
|
|
|
|
<dt><span class="light fixedFont">{<a href="../symbols/Panel.html" class="linkConstructor">Panel</a>}</span> or null if not found</dt>
|
|
|
|
</dl>
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="findMainElement">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
findMainElement()
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{<a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>}</span>
|
|
|
|
<span class="since" title="since">1.5</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Return an immediate child element whose <a href="../symbols/GraphObject.html#isPanelMain" class="linkProperty">GraphObject.isPanelMain</a> is true,
|
|
or else just return the first child element.
|
|
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Returns:</dt>
|
|
|
|
<dt><span class="light fixedFont">{<a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>}</span> this may return null if there are no child elements</dt>
|
|
|
|
</dl>
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="findObject">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
findObject(name)
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{<a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Search the visual tree starting at this Panel for a GraphObject
|
|
whose <a href="../symbols/GraphObject.html#name" class="linkProperty">GraphObject.name</a> is the given name.<span class="nodetails" id="xmethfindObject"><a class="morelink" onclick="hst('methfindObject')">More...</a></span> <span class="details" id="methfindObject">
|
|
</span><div class="details" id="dmethfindObject"><p>
|
|
This does not recurse into the elements inside a Panel that holds elements for an <a href="../symbols/Panel.html#itemArray" class="linkProperty">itemArray</a>.</div>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Parameters:</dt>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{string}</span> <b>name</b>
|
|
|
|
</dt>
|
|
<dd>The name to search for, using a case-sensitive string comparison.</dd>
|
|
|
|
</dl>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Returns:</dt>
|
|
|
|
<dt><span class="light fixedFont">{<a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>}</span> If no such named object can be found, this returns null.</dt>
|
|
|
|
</dl>
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="findRowForLocalY">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
findRowForLocalY(y)
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{number}</span>
|
|
|
|
<span class="since" title="since">1.2</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Returns the row at a given y-coordinate in local coordinates.<span class="nodetails" id="xmethfindRowForLocalY"><a class="morelink" onclick="hst('methfindRowForLocalY')">More...</a></span> <span class="details" id="methfindRowForLocalY">
|
|
Call <a href="../symbols/GraphObject.html#getLocalPoint" class="linkMethod">GraphObject.getLocalPoint</a> to convert a Point in document coordinates into
|
|
a Point in local coordinates.
|
|
</span><div class="details" id="dmethfindRowForLocalY"><p>
|
|
If this Panel is not a Table Panel, this method returns -1.</div>
|
|
|
|
</p><div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/Panel.html#findColumnForLocalX" class="linkMethod">findColumnForLocalX</a></li>
|
|
|
|
</ul></div>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Parameters:</dt>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{number}</span> <b>y</b>
|
|
|
|
</dt>
|
|
<dd></dd>
|
|
|
|
</dl>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Returns:</dt>
|
|
|
|
<dt><span class="light fixedFont">{number}</span> a zero-based integer</dt>
|
|
|
|
</dl>
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="getColumnDefinition">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
getColumnDefinition(idx)
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{<a href="../symbols/RowColumnDefinition.html" class="linkConstructor">RowColumnDefinition</a>}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Gets the <a href="../symbols/RowColumnDefinition.html" class="linkConstructor">RowColumnDefinition</a> for a particular column in this Table Panel.<span class="nodetails" id="xmethgetColumnDefinition"><a class="morelink" onclick="hst('methgetColumnDefinition')">More...</a></span> <span class="details" id="methgetColumnDefinition">
|
|
If you ask for the definition of a column at or beyond the <a href="../symbols/Panel.html#columnCount" class="linkProperty">columnCount</a>,
|
|
it will automatically create one and return it.
|
|
</span><div class="details" id="dmethgetColumnDefinition"><p>
|
|
If this Panel is not a Table Panel, this method returns null.</div>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Parameters:</dt>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{number}</span> <b>idx</b>
|
|
|
|
</dt>
|
|
<dd>the non-negative zero-based integer column index.</dd>
|
|
|
|
</dl>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Returns:</dt>
|
|
|
|
<dt><span class="light fixedFont">{<a href="../symbols/RowColumnDefinition.html" class="linkConstructor">RowColumnDefinition</a>}</span> </dt>
|
|
|
|
</dl>
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="getRowDefinition">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
getRowDefinition(idx)
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{<a href="../symbols/RowColumnDefinition.html" class="linkConstructor">RowColumnDefinition</a>}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Gets the <a href="../symbols/RowColumnDefinition.html" class="linkConstructor">RowColumnDefinition</a> for a particular row in this Table Panel.<span class="nodetails" id="xmethgetRowDefinition"><a class="morelink" onclick="hst('methgetRowDefinition')">More...</a></span> <span class="details" id="methgetRowDefinition">
|
|
If you ask for the definition of a row at or beyond the <a href="../symbols/Panel.html#rowCount" class="linkProperty">rowCount</a>,
|
|
it will automatically create one and return it.
|
|
</span><div class="details" id="dmethgetRowDefinition"><p>
|
|
If this Panel is not a Table Panel, this method returns null.</div>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Parameters:</dt>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{number}</span> <b>idx</b>
|
|
|
|
</dt>
|
|
<dd>the non-negative zero-based integer row index.</dd>
|
|
|
|
</dl>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Returns:</dt>
|
|
|
|
<dt><span class="light fixedFont">{<a href="../symbols/RowColumnDefinition.html" class="linkConstructor">RowColumnDefinition</a>}</span> </dt>
|
|
|
|
</dl>
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="graduatedPointForValue">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
graduatedPointForValue(val, result)
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{<a href="../symbols/Point.html" class="linkConstructor">Point</a>}</span>
|
|
|
|
<span class="since" title="since">1.7</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Returns the point that corresponds with a value along this Graduated Panel.<span class="nodetails" id="xmethgraduatedPointForValue"><a class="morelink" onclick="hst('methgraduatedPointForValue')">More...</a></span> <span class="details" id="methgraduatedPointForValue">
|
|
The point will be in the panel's coordinates.
|
|
</span><div class="details" id="dmethgraduatedPointForValue"><p>
|
|
If the value provided is not within the <a href="../symbols/Panel.html#graduatedMin" class="linkProperty">graduatedMin</a> and <a href="../symbols/Panel.html#graduatedMax" class="linkProperty">graduatedMax</a>,
|
|
it will be constrained to within those values.
|
|
<p>
|
|
If this Panel is not a Graduated Panel, this method returns Point(NaN, NaN).</div>
|
|
|
|
</p><div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/Panel.html#graduatedValueForPoint" class="linkMethod">graduatedValueForPoint</a></li>
|
|
|
|
</ul></div>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Parameters:</dt>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{number}</span> <b>val</b>
|
|
|
|
</dt>
|
|
<dd>a value between <a href="../symbols/Panel.html#graduatedMin" class="linkProperty">graduatedMin</a> and <a href="../symbols/Panel.html#graduatedMax" class="linkProperty">graduatedMax</a></dd>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{<a href="../symbols/Point.html" class="linkConstructor">Point</a>=}</span> <b>result</b>
|
|
|
|
</dt>
|
|
<dd>an optional Point that is modified and returned</dd>
|
|
|
|
</dl>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Returns:</dt>
|
|
|
|
<dt><span class="light fixedFont">{<a href="../symbols/Point.html" class="linkConstructor">Point</a>}</span> </dt>
|
|
|
|
</dl>
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="graduatedValueForPoint">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
graduatedValueForPoint(pt)
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{number}</span>
|
|
|
|
<span class="since" title="since">1.7</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Returns the value that corresponds with a Point near this Graduated Panel.<span class="nodetails" id="xmethgraduatedValueForPoint"><a class="morelink" onclick="hst('methgraduatedValueForPoint')">More...</a></span> <span class="details" id="methgraduatedValueForPoint">
|
|
The Point must be in the panel's coordinates.
|
|
The value returned will be in the Graduated Panel's range.
|
|
</span><div class="details" id="dmethgraduatedValueForPoint"><p>
|
|
If this Panel is not a Graduated Panel, this method returns NaN.</div>
|
|
|
|
</p><div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/Panel.html#graduatedPointForValue" class="linkMethod">graduatedPointForValue</a></li>
|
|
|
|
</ul></div>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Parameters:</dt>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{<a href="../symbols/Point.html" class="linkConstructor">Point</a>}</span> <b>pt</b>
|
|
|
|
</dt>
|
|
<dd>a Point in the Graduated Panel's coordinates</dd>
|
|
|
|
</dl>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Returns:</dt>
|
|
|
|
<dt><span class="light fixedFont">{number}</span> </dt>
|
|
|
|
</dl>
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="insertAt">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
insertAt(index, element)
|
|
</div>
|
|
<div class="attributes">
|
|
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Adds a GraphObject to the Panel's list of elements at the specified index.<span class="nodetails" id="xmethinsertAt"><a class="morelink" onclick="hst('methinsertAt')">More...</a></span> <span class="details" id="methinsertAt">
|
|
</span><div class="details" id="dmethinsertAt"><p>
|
|
If the element to be added is already in this Panel's list of elements,
|
|
the object is moved to the specified index.
|
|
You cannot add a GraphObject to a Panel that if that GraphObject is already in a different Panel.</div>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Parameters:</dt>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{number}</span> <b>index</b>
|
|
|
|
</dt>
|
|
<dd></dd>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{<a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>}</span> <b>element</b>
|
|
|
|
</dt>
|
|
<dd>A GraphObject.</dd>
|
|
|
|
</dl>
|
|
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="rebuildItemElements">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
rebuildItemElements()
|
|
</div>
|
|
<div class="attributes">
|
|
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Create and add new GraphObjects corresponding to and bound to the data in the <a href="../symbols/Panel.html#itemArray" class="linkProperty">itemArray</a>,
|
|
after removing all existing elements from this Panel.<span class="nodetails" id="xmethrebuildItemElements"><a class="morelink" onclick="hst('methrebuildItemElements')">More...</a></span> <span class="details" id="methrebuildItemElements">
|
|
This method is automatically called when replacing the <a href="../symbols/Panel.html#itemArray" class="linkProperty">itemArray</a> value,
|
|
or when changing the value of <a href="../symbols/Panel.html#itemTemplate" class="linkProperty">itemTemplate</a> or <a href="../symbols/Panel.html#itemTemplateMap" class="linkProperty">itemTemplateMap</a>.
|
|
</span><div class="details" id="dmethrebuildItemElements"><p>
|
|
This uses <a href="../symbols/Panel.html#itemCategoryProperty" class="linkProperty">itemCategoryProperty</a> to determine the category for an item data.
|
|
That string is used to look up a template in <a href="../symbols/Panel.html#itemTemplateMap" class="linkProperty">itemTemplateMap</a>.
|
|
The resulting template (which is also a Panel) is copied, added to this panel,
|
|
and its <a href="../symbols/Panel.html#itemIndex" class="linkProperty">itemIndex</a> is set to its index in that Array.
|
|
That new child Panel is then data-bound to that Array item by setting its <a href="../symbols/Panel.html#data" class="linkProperty">data</a>.
|
|
<p>
|
|
If <a href="../symbols/Panel.html#itemArray" class="linkProperty">itemArray</a> is null, this method just removes all elements from this panel.
|
|
Actually, if this Panel <a href="../symbols/Panel.html#type" class="linkProperty">type</a> is "Spot", "Auto", or "Link", the very first element
|
|
is always kept by this method.
|
|
Also, if this Panel type is "Table", and if the first element is a "TableRow" or "TableColumn" Panel
|
|
whose <a href="../symbols/GraphObject.html#isPanelMain" class="linkProperty">isPanelMain</a> property is set to true, that first element will be kept too.
|
|
That is useful for defining literal TableRow headers in Table panels, when the header information
|
|
is not kept as the first item in the itemArray.
|
|
<p>
|
|
It is wasteful to call this method after making some model data changes.
|
|
It is better to call <a href="../symbols/Model.html#setDataProperty" class="linkMethod">Model.setDataProperty</a>, <a href="../symbols/Model.html#addArrayItem" class="linkMethod">Model.addArrayItem</a>,
|
|
<a href="../symbols/Model.html#insertArrayItem" class="linkMethod">Model.insertArrayItem</a>, or <a href="../symbols/Model.html#removeArrayItem" class="linkMethod">Model.removeArrayItem</a>, or other model methods.
|
|
Not only do those methods update efficiently, they also preserve unbound state and support undo/redo.</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="remove">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
remove(element)
|
|
</div>
|
|
<div class="attributes">
|
|
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Removes a GraphObject from this Panel's list of elements.<span class="nodetails" id="xmethremove"><a class="morelink" onclick="hst('methremove')">More...</a></span> <span class="details" id="methremove"></span>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Parameters:</dt>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{<a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>}</span> <b>element</b>
|
|
|
|
</dt>
|
|
<dd>A GraphObject.</dd>
|
|
|
|
</dl>
|
|
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="removeAt">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
removeAt(idx)
|
|
</div>
|
|
<div class="attributes">
|
|
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Removes an GraphObject from this Panel's list of elements at the specified index.<span class="nodetails" id="xmethremoveAt"><a class="morelink" onclick="hst('methremoveAt')">More...</a></span> <span class="details" id="methremoveAt"></span>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Parameters:</dt>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{number}</span> <b>idx</b>
|
|
|
|
</dt>
|
|
<dd></dd>
|
|
|
|
</dl>
|
|
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="removeColumnDefinition">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
removeColumnDefinition(idx)
|
|
</div>
|
|
<div class="attributes">
|
|
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Removes the <a href="../symbols/RowColumnDefinition.html" class="linkConstructor">RowColumnDefinition</a> for a particular row in this Table Panel.<span class="nodetails" id="xmethremoveColumnDefinition"><a class="morelink" onclick="hst('methremoveColumnDefinition')">More...</a></span> <span class="details" id="methremoveColumnDefinition">
|
|
</span><div class="details" id="dmethremoveColumnDefinition"><p>
|
|
If this Panel is not a Table Panel, this method does nothing.</div>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Parameters:</dt>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{number}</span> <b>idx</b>
|
|
|
|
</dt>
|
|
<dd>the non-negative zero-based integer row index.</dd>
|
|
|
|
</dl>
|
|
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="removeRowDefinition">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
removeRowDefinition(idx)
|
|
</div>
|
|
<div class="attributes">
|
|
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Removes the <a href="../symbols/RowColumnDefinition.html" class="linkConstructor">RowColumnDefinition</a> for a particular row in this Table Panel.<span class="nodetails" id="xmethremoveRowDefinition"><a class="morelink" onclick="hst('methremoveRowDefinition')">More...</a></span> <span class="details" id="methremoveRowDefinition">
|
|
</span><div class="details" id="dmethremoveRowDefinition"><p>
|
|
If this Panel is not a Table Panel, this method does nothing.</div>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Parameters:</dt>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{number}</span> <b>idx</b>
|
|
|
|
</dt>
|
|
<dd>the non-negative zero-based integer row index.</dd>
|
|
|
|
</dl>
|
|
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="updateTargetBindings">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
updateTargetBindings(srcprop)
|
|
</div>
|
|
<div class="attributes">
|
|
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Re-evaluate all data bindings on this panel,
|
|
in order to assign new property values to the <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>s in this visual tree
|
|
based on this object's <a href="../symbols/Panel.html#data" class="linkProperty">data</a> property values.<span class="nodetails" id="xmethupdateTargetBindings"><a class="morelink" onclick="hst('methupdateTargetBindings')">More...</a></span> <span class="details" id="methupdateTargetBindings">
|
|
</span><div class="details" id="dmethupdateTargetBindings"><p>
|
|
It is better to call <a href="../symbols/Model.html#setDataProperty" class="linkMethod">Model.setDataProperty</a> to modify data properties,
|
|
because that will both record changes for undo/redo and will update all bindings
|
|
that make depend on that property.
|
|
<p>
|
|
This method does nothing if <a href="../symbols/Panel.html#data" class="linkProperty">data</a> is null.
|
|
This method also will not detect changes in JavaScript Arrays -- you may need to replace
|
|
the <a href="../symbols/Panel.html#itemArray" class="linkProperty">itemArray</a> with a new Array, or else call <a href="../symbols/Model.html#insertArrayItem" class="linkMethod">Model.insertArrayItem</a>
|
|
or <a href="../symbols/Model.html#removeArrayItem" class="linkMethod">Model.removeArrayItem</a>.</div>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Parameters:</dt>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{string=}</span> <b>srcprop</b>
|
|
|
|
</dt>
|
|
<dd>An optional source data property name:
|
|
when provided, only evaluates those <a href="../symbols/Binding.html" class="linkConstructor">Binding</a>s that use that particular property;
|
|
when not provided or when it is the empty string, all bindings are evaluated.</dd>
|
|
|
|
</dl>
|
|
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
</div><!-- class="table-responsive">-->
|
|
|
|
|
|
|
|
<dl class="inheritsList">
|
|
<dt>Methods borrowed from class <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>: </dt><dd><a href="../symbols/GraphObject.html#bind" class="linkMethod">bind</a>, <a href="../symbols/GraphObject.html#getDocumentAngle" class="linkMethod">getDocumentAngle</a>, <a href="../symbols/GraphObject.html#getDocumentPoint" class="linkMethod">getDocumentPoint</a>, <a href="../symbols/GraphObject.html#getDocumentScale" class="linkMethod">getDocumentScale</a>, <a href="../symbols/GraphObject.html#getLocalPoint" class="linkMethod">getLocalPoint</a>, <a href="../symbols/GraphObject.html#isContainedBy" class="linkMethod">isContainedBy</a>, <a href="../symbols/GraphObject.html#isEnabledObject" class="linkMethod">isEnabledObject</a>, <a href="../symbols/GraphObject.html#isVisibleObject" class="linkMethod">isVisibleObject</a>, <a href="../symbols/GraphObject.html#setProperties" class="linkMethod">setProperties</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 Panel.">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col" class="name">Name</th>
|
|
<th scope="col" class="description">Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
|
|
<tr id="Auto">
|
|
<td class="name">
|
|
<div class="name">
|
|
Auto
|
|
|
|
|
|
<span class="light">{EnumValue}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>This value for <a href="../symbols/Panel.html#type" class="linkProperty">type</a> resizes the main element to fit around the other elements;
|
|
the main element is the first GraphObject with <a href="../symbols/GraphObject.html#isPanelMain" class="linkProperty">GraphObject.isPanelMain</a> set to true,
|
|
or else the first GraphObject if none have that property set to true.
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="Graduated">
|
|
<td class="name">
|
|
<div class="name">
|
|
Graduated
|
|
|
|
<span class="since" title="since">1.7</span>
|
|
|
|
|
|
<span class="light">{EnumValue}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>This value for <a href="../symbols/Panel.html#type" class="linkProperty">type</a> is used to draw regular tick marks and labels along some shape.<span class="nodetails" id="xfldGraduated"><a class="morelink" onclick="hst('fldGraduated')">More...</a></span> <span class="details" id="fldGraduated">
|
|
The main element is the first GraphObject with <a href="../symbols/GraphObject.html#isPanelMain" class="linkProperty">GraphObject.isPanelMain</a> set to true,
|
|
or else the first GraphObject if none have that property set to true.</span>
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="Grid">
|
|
<td class="name">
|
|
<div class="name">
|
|
Grid
|
|
|
|
|
|
<span class="light">{EnumValue}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>This value for <a href="../symbols/Panel.html#type" class="linkProperty">type</a> is used to draw regular patterns of lines.
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="Horizontal">
|
|
<td class="name">
|
|
<div class="name">
|
|
Horizontal
|
|
|
|
|
|
<span class="light">{EnumValue}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>This value for <a href="../symbols/Panel.html#type" class="linkProperty">type</a> lays out the elements horizontally with
|
|
their <a href="../symbols/GraphObject.html#alignment" class="linkProperty">GraphObject.alignment</a> property dictating their alignment on the Y-axis.
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="Link">
|
|
<td class="name">
|
|
<div class="name">
|
|
Link
|
|
|
|
|
|
<span class="light">{EnumValue}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>This value for <a href="../symbols/Panel.html#type" class="linkProperty">type</a> is used for <a href="../symbols/Link.html" class="linkConstructor">Link</a>s and adornments that act as <a href="../symbols/Link.html" class="linkConstructor">Link</a>s.
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="Position">
|
|
<td class="name">
|
|
<div class="name">
|
|
Position
|
|
|
|
|
|
<span class="light">{EnumValue}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>The default <a href="../symbols/Panel.html#type" class="linkProperty">type</a> arranges each element according to their <a href="../symbols/GraphObject.html#position" class="linkProperty">GraphObject.position</a>.
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="Spot">
|
|
<td class="name">
|
|
<div class="name">
|
|
Spot
|
|
|
|
|
|
<span class="light">{EnumValue}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>This value for <a href="../symbols/Panel.html#type" class="linkProperty">type</a> arranges GraphObjects about a main element using the <a href="../symbols/GraphObject.html#alignment" class="linkProperty">GraphObject.alignment</a> and <a href="../symbols/GraphObject.html#alignmentFocus" class="linkProperty">GraphObject.alignmentFocus</a> properties;
|
|
the main element is the first GraphObject with <a href="../symbols/GraphObject.html#isPanelMain" class="linkProperty">GraphObject.isPanelMain</a> set to true,
|
|
or else the first GraphObject if none have that property set to true.
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="Table">
|
|
<td class="name">
|
|
<div class="name">
|
|
Table
|
|
|
|
|
|
<span class="light">{EnumValue}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>This value for <a href="../symbols/Panel.html#type" class="linkProperty">type</a> arranges GraphObjects into rows and columns;
|
|
set the <a href="../symbols/GraphObject.html#row" class="linkProperty">GraphObject.row</a> and <a href="../symbols/GraphObject.html#column" class="linkProperty">GraphObject.column</a> properties on each element.
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="TableColumn">
|
|
<td class="name">
|
|
<div class="name">
|
|
TableColumn
|
|
|
|
<span class="since" title="since">1.1</span>
|
|
|
|
|
|
<span class="light">{EnumValue}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Organizational Panel type that is only valid inside of a Table panel;
|
|
This Panel ignores its angle and scale, and does not have a meaningful size on its own,
|
|
it is only an organizational container for other elements of a Panel.
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="TableRow">
|
|
<td class="name">
|
|
<div class="name">
|
|
TableRow
|
|
|
|
<span class="since" title="since">1.1</span>
|
|
|
|
|
|
<span class="light">{EnumValue}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Organizational Panel type that is only valid inside of a Table panel;
|
|
This Panel ignores its angle and scale, and does not have a meaningful size on its own,
|
|
it is only an organizational container for other elements of a Panel.
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="Vertical">
|
|
<td class="name">
|
|
<div class="name">
|
|
Vertical
|
|
|
|
|
|
<span class="light">{EnumValue}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>This value for <a href="../symbols/Panel.html#type" class="linkProperty">type</a> lays out the elements vertically with
|
|
their <a href="../symbols/GraphObject.html#alignment" class="linkProperty">GraphObject.alignment</a> property dictating their alignment on the X-axis.
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="Viewbox">
|
|
<td class="name">
|
|
<div class="name">
|
|
Viewbox
|
|
|
|
|
|
<span class="light">{EnumValue}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>This value for <a href="../symbols/Panel.html#type" class="linkProperty">type</a> rescales a single GraphObject to fit inside the panel
|
|
depending on the element's <a href="../symbols/GraphObject.html#stretch" class="linkProperty">GraphObject.stretch</a> property.
|
|
|
|
|
|
</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>
|