3971 lines
259 KiB
HTML
3971 lines
259 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>GoJS® GraphObject 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 GraphObject
|
|
|
|
</h2>
|
|
|
|
<!-- ============================== class summary ========================== -->
|
|
<span class="hideshowall">
|
|
<span class="nodetails"><button id="buttonShow">Show Details</button></span>
|
|
<span class="details"><button id="buttonHide">Show Summaries</button></span>
|
|
</span>
|
|
|
|
<p class="classsummary">
|
|
|
|
|
|
|
|
This is the abstract base class for all graphical objects.
|
|
Classes inheriting from GraphObject include:
|
|
<a href="../symbols/Shape.html" class="linkConstructor">Shape</a>, <a href="../symbols/TextBlock.html" class="linkConstructor">TextBlock</a>, <a href="../symbols/Picture.html" class="linkConstructor">Picture</a>, and <a href="../symbols/Panel.html" class="linkConstructor">Panel</a>.
|
|
From the Panel class the <a href="../symbols/Part.html" class="linkConstructor">Part</a> class is derived, from which the
|
|
<a href="../symbols/Node.html" class="linkConstructor">Node</a> and <a href="../symbols/Link.html" class="linkConstructor">Link</a> classes derive.
|
|
<p>
|
|
It is very common to make use of the static function <a href="../symbols/GraphObject.html#.make" class="linkStatic">GraphObject.make</a> in order to build up
|
|
a visual tree of GraphObjects. You can see many examples of this throughout the
|
|
Introduction, starting at <a href="../../intro/buildingObjects.html">Building Objects</a>,
|
|
and the Samples, starting with <a href="../../samples/minimal.html">Minimal Sample</a>.
|
|
<p>
|
|
Since GraphObject is an abstract class, programmers do not create GraphObjects themselves,
|
|
but this class defines many properties used by all kinds of GraphObjects.
|
|
<p>
|
|
The only visual properties on GraphObject are <a href="../symbols/GraphObject.html#background" class="linkProperty">background</a> and <a href="../symbols/GraphObject.html#areaBackground" class="linkProperty">areaBackground</a>.
|
|
However one can control whether the GraphObject is drawn at all by setting <a href="../symbols/GraphObject.html#visible" class="linkProperty">visible</a>,
|
|
or by setting <a href="../symbols/GraphObject.html#opacity" class="linkProperty">opacity</a> to zero if you still want the GraphObject to occupy space.
|
|
Also, if you want to control whether any mouse or touch events "see" the GraphObject,
|
|
you can set <a href="../symbols/GraphObject.html#pickable" class="linkProperty">pickable</a> to false.
|
|
<p>
|
|
For more information about specifying how things get drawn, see the properties on the
|
|
<a href="../symbols/Shape.html" class="linkConstructor">Shape</a>, <a href="../symbols/TextBlock.html" class="linkConstructor">TextBlock</a>, and <a href="../symbols/Picture.html" class="linkConstructor">Picture</a> classes.
|
|
<h3>GraphObject Sizing</h3>
|
|
<p>
|
|
GraphObject defines most of the properties that cause objects to size themselves differently.
|
|
The most prominent ones include:
|
|
<ul>
|
|
<li>The <a href="../symbols/GraphObject.html#desiredSize" class="linkProperty">desiredSize</a>, <a href="../symbols/GraphObject.html#minSize" class="linkProperty">minSize</a>, and <a href="../symbols/GraphObject.html#maxSize" class="linkProperty">maxSize</a> properties are used to
|
|
explicitly set or limit the size of visual elements. <a href="../symbols/GraphObject.html#width" class="linkProperty">width</a> and <a href="../symbols/GraphObject.html#height" class="linkProperty">height</a> are
|
|
convenience properties that set the <a href="../symbols/GraphObject.html#desiredSize" class="linkProperty">desiredSize</a> width and height, respectively.</li>
|
|
<li>The <a href="../symbols/GraphObject.html#angle" class="linkProperty">angle</a> and <a href="../symbols/GraphObject.html#scale" class="linkProperty">scale</a> properties are used to transform visual elements.</li>
|
|
<li>The <a href="../symbols/GraphObject.html#stretch" class="linkProperty">stretch</a> property determines how a GraphObject will fill its visual space,
|
|
contextually granted to it by its containing <a href="../symbols/Panel.html" class="linkConstructor">Panel</a>. Top-level (<a href="../symbols/Part.html" class="linkConstructor">Part</a>)
|
|
GraphObjects are not affected by this property because they are always granted infinite space.</li>
|
|
</ul>
|
|
<p>
|
|
All GraphObjects in a Diagram are measured and then arranged by their containing <a href="../symbols/Panel.html" class="linkConstructor">Panel</a>s in a tree-like fashion.
|
|
After measuring and arranging, a GraphObject will have valid values for the read-only
|
|
properties <a href="../symbols/GraphObject.html#naturalBounds" class="linkProperty">naturalBounds</a>, <a href="../symbols/GraphObject.html#measuredBounds" class="linkProperty">measuredBounds</a>, and <a href="../symbols/GraphObject.html#actualBounds" class="linkProperty">actualBounds</a>.
|
|
<p>
|
|
<ul>
|
|
<li>The <a href="../symbols/GraphObject.html#naturalBounds" class="linkProperty">naturalBounds</a> of a GraphObject describe its local size,
|
|
without any transformations (<a href="../symbols/GraphObject.html#scale" class="linkProperty">scale</a>, <a href="../symbols/GraphObject.html#angle" class="linkProperty">angle</a>) affecting it.</li>
|
|
<li>The <a href="../symbols/GraphObject.html#measuredBounds" class="linkProperty">measuredBounds</a> of a GraphObject describe its size relative to its containing Panel.</li>
|
|
<li>The <a href="../symbols/GraphObject.html#actualBounds" class="linkProperty">actualBounds</a> of a GraphObject describe its position and given size inside of its panel.
|
|
This size may be smaller than <a href="../symbols/GraphObject.html#measuredBounds" class="linkProperty">measuredBounds</a>, for instance if a GraphObject with a large <a href="../symbols/GraphObject.html#desiredSize" class="linkProperty">desiredSize</a>
|
|
is placed in a <a href="../symbols/Panel.html" class="linkConstructor">Panel</a> of a smaller <a href="../symbols/GraphObject.html#desiredSize" class="linkProperty">desiredSize</a>. Smaller <a href="../symbols/GraphObject.html#actualBounds" class="linkProperty">actualBounds</a> than <a href="../symbols/GraphObject.html#measuredBounds" class="linkProperty">measuredBounds</a>
|
|
typically means an object will be cropped.</li>
|
|
</ul>
|
|
<p class="boxread">
|
|
See <a href="../../intro/sizing.html">the Introduction page on sizing</a>
|
|
for usage information and examples.
|
|
<h3>GraphObject Size and Position within Panel</h3>
|
|
Several GraphObject properties guide the containing <a href="../symbols/Panel.html" class="linkConstructor">Panel</a> for how to size and position the object within the panel.
|
|
<ul>
|
|
<li>The <a href="../symbols/GraphObject.html#alignment" class="linkProperty">alignment</a> specifies where the object should be relative to some area of the panel.
|
|
For example, an alignment value of <a href="../symbols/Spot.html#BottomRight" class="linkConstant">Spot.BottomRight</a> means that the GraphObject should be at the bottom-right corner of the panel.</li>
|
|
<li>The <a href="../symbols/GraphObject.html#alignmentFocus" class="linkProperty">alignmentFocus</a> specifies precisely which point of the GraphObject should be aligned at the <a href="../symbols/GraphObject.html#alignment" class="linkProperty">alignment</a> spot.</li>
|
|
<li>The <a href="../symbols/GraphObject.html#column" class="linkProperty">column</a> and <a href="../symbols/GraphObject.html#row" class="linkProperty">row</a> properties are only used by <a href="../symbols/Panel.html#Table" class="linkConstant">Panel.Table</a> panels, to indicate where the GraphObject should be.</li>
|
|
<li>The <a href="../symbols/GraphObject.html#columnSpan" class="linkProperty">columnSpan</a> and <a href="../symbols/GraphObject.html#rowSpan" class="linkProperty">rowSpan</a> properties tell the <a href="../symbols/Panel.html#Table" class="linkConstant">Panel.Table</a> panel how large the GraphObject should be.</li>
|
|
<li>The <a href="../symbols/GraphObject.html#isPanelMain" class="linkProperty">isPanelMain</a> property indicates to some kinds of <a href="../symbols/Panel.html" class="linkConstructor">Panel</a>s that the GraphObject is the "primary" object that other panel children should be measured with or positioned in.</li>
|
|
<li>The <a href="../symbols/GraphObject.html#margin" class="linkProperty">margin</a> property tells the containing <a href="../symbols/Panel.html" class="linkConstructor">Panel</a> how much extra space to put around this GraphObject.</li>
|
|
<li>The <a href="../symbols/GraphObject.html#position" class="linkProperty">position</a> property is used to determine the relative position of GraphObjects when they are elements of a <a href="../symbols/Panel.html#Position" class="linkConstant">Panel.Position</a> panel.</li>
|
|
</ul>
|
|
<p class="boxread">
|
|
See <a href="../../intro/panels.html">the Introduction page on Panels</a>
|
|
and <a href="../../intro/tablePanels.html">Table Panels</a> for an overview of the capabilities.
|
|
<h3>Top-level GraphObjects are Parts</h3>
|
|
<p>
|
|
A <a href="../symbols/Part.html" class="linkConstructor">Part</a> is a derived class of GraphObject representing a top-level object.
|
|
All top-level GraphObjects must be Parts, and Node, Link, Group, and Adornment derive from Part.
|
|
The position of a Part determines the point of the Part's top-left corner in document coordinates.
|
|
See also <a href="../symbols/Part.html#location" class="linkProperty">Part.location</a>, which supports an way to specify the position based on a different
|
|
spot of a different element within the Part.
|
|
<p>
|
|
There are several read-only properties that help navigate up the visual tree.
|
|
<ul>
|
|
<li><a href="../symbols/GraphObject.html#panel" class="linkProperty">panel</a> returns the <a href="../symbols/Panel.html" class="linkConstructor">Panel</a> that directly contains this GraphObject</li>
|
|
<li><a href="../symbols/GraphObject.html#part" class="linkProperty">part</a> returns the <a href="../symbols/Part.html" class="linkConstructor">Part</a> that this GraphObject is in, perhaps via intervening Panels; this is frequently used in order to get to the model data, <a href="../symbols/Panel.html#data" class="linkProperty">Panel.data</a></li>
|
|
<li><a href="../symbols/GraphObject.html#layer" class="linkProperty">layer</a> returns the <a href="../symbols/Layer.html" class="linkConstructor">Layer</a> that this GraphObject's Part is in</li>
|
|
<li><a href="../symbols/GraphObject.html#diagram" class="linkProperty">diagram</a> returns the <a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a> that this GraphObject's Part's Layer is in</li>
|
|
</ul>
|
|
<p class="boxrun">
|
|
See <a href="../../samples/visualTree.html">the Visual Tree sample</a>
|
|
for a diagram displaying the visual tree of a simple diagram.
|
|
<h3>User Interaction</h3>
|
|
<p>
|
|
GraphObjects have several properties enabling dynamic customizable interaction.
|
|
There are several definable functions that execute on input events: <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>, and <a href="../symbols/GraphObject.html#mouseOver" class="linkProperty">mouseOver</a>.
|
|
For example, you could define mouse enter-and-leave event handlers to modify the appearance of a link
|
|
as the mouse passes over it:
|
|
<pre>
|
|
myDiagram.linkTemplate =
|
|
$(go.Link,
|
|
$(go.Shape,
|
|
{ strokeWidth: 2, stroke: "gray" }, // default color is "gray"
|
|
{ // here E is the InputEvent and OBJ is this Shape
|
|
mouseEnter: function(e, obj) { obj.strokeWidth = 4; obj.stroke = "dodgerblue"; },
|
|
mouseLeave: function(e, obj) { obj.strokeWidth = 2; obj.stroke = "gray"; }
|
|
}));
|
|
</pre>
|
|
<p>
|
|
There are <a href="../symbols/GraphObject.html#click" class="linkProperty">click</a>, <a href="../symbols/GraphObject.html#doubleClick" class="linkProperty">doubleClick</a>, and <a href="../symbols/GraphObject.html#contextClick" class="linkProperty">contextClick</a> functions
|
|
that execute when a user appropriately clicks the GraphObject.
|
|
These click functions are called with the <a href="../symbols/InputEvent.html" class="linkConstructor">InputEvent</a> as the first argument
|
|
and this GraphObject as the second argument.
|
|
For example, you could define a click event handler on a Node that goes to another page:
|
|
<pre>
|
|
myDiagram.nodeTemplate =
|
|
$(go.Node, "Auto",
|
|
$(go.Shape, "RoundedRectangle",
|
|
new go.Binding("fill", "color")),
|
|
$(go.TextBlock,
|
|
{ name: "TB", margin: 3 },
|
|
new go.Binding("text", "key")),
|
|
{ // second arg will be this GraphObject, which in this case is the Node itself:
|
|
click: function(e, node) {
|
|
window.open("https://en.wikipedia.org/Wiki/" + node.data.key);
|
|
}
|
|
});
|
|
</pre>
|
|
<p>
|
|
Note: you may prefer defining <a href="../symbols/DiagramEvent.html" class="linkConstructor">DiagramEvent</a> listeners on the <a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a>
|
|
rather than on individual GraphObjects. DiagramEvents also include more general events that
|
|
do not necessarily correspond to input events.
|
|
<p>
|
|
The properties <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>,
|
|
and <a href="../symbols/GraphObject.html#actionUp" class="linkProperty">actionUp</a> define functions to execute when the GraphObject's <a href="../symbols/GraphObject.html#isActionable" class="linkProperty">isActionable</a> property
|
|
is set to true (default false). See the <a href="../symbols/ActionTool.html" class="linkConstructor">ActionTool</a> for more detail.
|
|
<p class="boxread">
|
|
See <a href="../../intro/events.html">the Introduction page on Events</a> for a more general discussion.
|
|
<h3>GraphObjects as Ports</h3>
|
|
<p>
|
|
In GoJS, <a href="../symbols/Link.html" class="linkConstructor">Link</a>s can only connect to elements within a <a href="../symbols/Node.html" class="linkConstructor">Node</a>
|
|
that are specified as "ports", and by default the only port is the Node itself.
|
|
Setting the <a href="../symbols/GraphObject.html#portId" class="linkProperty">portId</a> of a GraphObject inside a Node allows that object to act as a port.
|
|
Note: the only kind of model that can save which port a link is connected with, i.e. portIds that are not an empty string,
|
|
is a <a href="../symbols/GraphLinksModel.html" class="linkConstructor">GraphLinksModel</a> whose <a href="../symbols/GraphLinksModel.html#linkFromPortIdProperty" class="linkProperty">GraphLinksModel.linkFromPortIdProperty</a> and
|
|
<a href="../symbols/GraphLinksModel.html#linkToPortIdProperty" class="linkProperty">GraphLinksModel.linkToPortIdProperty</a> have been set to name properties on the link data objects.
|
|
<p>
|
|
GraphObjects have several properties that are only relevant when they are acting as ports.
|
|
These port-related properties are:
|
|
<ul>
|
|
<li><a href="../symbols/GraphObject.html#portId" class="linkProperty">portId</a>, which must be set to a string that is unique within the <a href="../symbols/Node.html" class="linkConstructor">Node</a>,
|
|
in order for this GraphObject to be treated as a "port", rather than the whole node</li>
|
|
<li><a href="../symbols/GraphObject.html#fromSpot" class="linkProperty">fromSpot</a> and <a href="../symbols/GraphObject.html#toSpot" class="linkProperty">toSpot</a>, where a link should connect with this port</li>
|
|
<li><a href="../symbols/GraphObject.html#fromEndSegmentLength" class="linkProperty">fromEndSegmentLength</a> and <a href="../symbols/GraphObject.html#toEndSegmentLength" class="linkProperty">toEndSegmentLength</a>, the length of the link segment adjacent to this port</li>
|
|
<li><a href="../symbols/GraphObject.html#fromShortLength" class="linkProperty">fromShortLength</a> and <a href="../symbols/GraphObject.html#toShortLength" class="linkProperty">toShortLength</a>, the distance the link should terminate before touching this port</li>
|
|
<li><a href="../symbols/GraphObject.html#fromLinkable" class="linkProperty">fromLinkable</a> and <a href="../symbols/GraphObject.html#toLinkable" class="linkProperty">toLinkable</a>, whether the user may draw links connecting with this port</li>
|
|
<li><a href="../symbols/GraphObject.html#fromLinkableDuplicates" class="linkProperty">fromLinkableDuplicates</a> and <a href="../symbols/GraphObject.html#toLinkableDuplicates" class="linkProperty">toLinkableDuplicates</a>, whether the user may draw multiple links between the same pair of ports</li>
|
|
<li><a href="../symbols/GraphObject.html#fromLinkableSelfNode" class="linkProperty">fromLinkableSelfNode</a> and <a href="../symbols/GraphObject.html#toLinkableSelfNode" class="linkProperty">toLinkableSelfNode</a>, whether the user may draw a link between ports on the same node</li>
|
|
<li><a href="../symbols/GraphObject.html#fromMaxLinks" class="linkProperty">fromMaxLinks</a> and <a href="../symbols/GraphObject.html#toMaxLinks" class="linkProperty">toMaxLinks</a>, to limit the number of links connecting with this port in a particular direction</li>
|
|
</ul>
|
|
<p class="boxread">
|
|
See <a href="../../intro/ports.html">the Introduction page on ports</a>
|
|
and <a href="../../intro/connectionPoints.html">link connection points</a>
|
|
for port usage information and examples.
|
|
<h3>GraphObjects as labels on a Link</h3>
|
|
<p>
|
|
GraphObjects can also be used as "labels" on a <a href="../symbols/Link.html" class="linkConstructor">Link</a>.
|
|
In addition to the <a href="../symbols/GraphObject.html#alignmentFocus" class="linkProperty">alignmentFocus</a> property, these properties direct a Link Panel
|
|
to position a "label" at a particular point along the route of the link, in a particular manner:
|
|
<ul>
|
|
<li><a href="../symbols/GraphObject.html#segmentIndex" class="linkProperty">segmentIndex</a>, which segment the label should be on</li>
|
|
<li><a href="../symbols/GraphObject.html#segmentFraction" class="linkProperty">segmentFraction</a>, how far along the segment the label should be</li>
|
|
<li><a href="../symbols/GraphObject.html#segmentOffset" class="linkProperty">segmentOffset</a>, where the label should be positioned relative to the segment</li>
|
|
<li><a href="../symbols/GraphObject.html#segmentOrientation" class="linkProperty">segmentOrientation</a>, how the label should be rotated relative to the angle of the segment</li>
|
|
</ul>
|
|
<p class="boxread">
|
|
See <a href="../../intro/linkLabels.html">the Introduction page on link labels</a>
|
|
for examples of how to make use of labels on Links.
|
|
<h3>Interactive Behavior</h3>
|
|
<p>
|
|
There are several properties that specify fairly high-level interactive behavior:
|
|
<ul>
|
|
<li><a href="../symbols/GraphObject.html#cursor" class="linkProperty">cursor</a>, a CSS string specifying a cursor</li>
|
|
<li><a href="../symbols/GraphObject.html#contextMenu" class="linkProperty">contextMenu</a>, an <a href="../symbols/Adornment.html" class="linkConstructor">Adornment</a></li>
|
|
<li><a href="../symbols/GraphObject.html#toolTip" class="linkProperty">toolTip</a>, an <a href="../symbols/Adornment.html" class="linkConstructor">Adornment</a></li>
|
|
</ul>
|
|
<p class="boxread">
|
|
For more information, please read <a href="../../intro/contextMenus.html">the Introduction page about Context Menus</a>
|
|
and <a href="../../intro/toolTips.html">the page about ToolTips</a>.
|
|
<p class="boxrun">
|
|
Also see <a href="../../samples/basic.html">the Basic sample</a>
|
|
for examples of how to show context menus and tooltips.
|
|
</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 GraphObject.">
|
|
<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">
|
|
GraphObject()
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>This is an abstract class, so you should not use this constructor.
|
|
|
|
|
|
|
|
|
|
</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 GraphObject.">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col" class="name">Name, Value Type</th>
|
|
<th scope="col" class="description">Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
|
|
<tr id="actionCancel" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
actionCancel
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{function(InputEvent, GraphObject) | null}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the function to execute when the <a href="../symbols/ActionTool.html" class="linkConstructor">ActionTool</a> is cancelled and this GraphObject's <a href="../symbols/GraphObject.html#isActionable" class="linkProperty">isActionable</a>
|
|
is set to true.<span class="nodetails" id="xpropactionCancel"><a class="morelink" onclick="hst('propactionCancel')">More...</a></span> <span class="details" id="propactionCancel">
|
|
This property is infrequently set.
|
|
By default this property is null.
|
|
</span><div class="details" id="dpropactionCancel"><p>
|
|
This functional property is only set on objects such as buttons, knobs, or sliders that want to handle all events,
|
|
in conjunction with <a href="../symbols/ActionTool.html" class="linkConstructor">ActionTool</a>, pre-empting the normal tool mechanisms.
|
|
<p>
|
|
The <a href="../symbols/ActionTool.html" class="linkConstructor">ActionTool</a> does not conduct any transaction, so if this property has a value,
|
|
the function will not be called within a transaction.</div>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/GraphObject.html#actionDown" class="linkProperty">actionDown</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#actionMove" class="linkProperty">actionMove</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#actionUp" class="linkProperty">actionUp</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="actionDown" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
actionDown
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{function(InputEvent, GraphObject) | null}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the function to execute on a mouse-down event when this GraphObject's <a href="../symbols/GraphObject.html#isActionable" class="linkProperty">isActionable</a>
|
|
is set to true.<span class="nodetails" id="xpropactionDown"><a class="morelink" onclick="hst('propactionDown')">More...</a></span> <span class="details" id="propactionDown">
|
|
This property is infrequently set.
|
|
By default this property is null.
|
|
</span><div class="details" id="dpropactionDown"><p>
|
|
This functional property is only set on objects such as buttons, knobs, or sliders that want to handle all events,
|
|
in conjunction with <a href="../symbols/ActionTool.html" class="linkConstructor">ActionTool</a>, pre-empting the normal tool mechanisms.
|
|
<p>
|
|
The <a href="../symbols/ActionTool.html" class="linkConstructor">ActionTool</a> does not conduct any transaction, so if this property has a value,
|
|
the function will not be called within a transaction.</div>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/GraphObject.html#actionMove" class="linkProperty">actionMove</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#actionUp" class="linkProperty">actionUp</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#actionCancel" class="linkProperty">actionCancel</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="actionMove" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
actionMove
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{function(InputEvent, GraphObject) | null}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the function to execute on a mouse-move event when this GraphObject's <a href="../symbols/GraphObject.html#isActionable" class="linkProperty">isActionable</a>
|
|
is set to true.<span class="nodetails" id="xpropactionMove"><a class="morelink" onclick="hst('propactionMove')">More...</a></span> <span class="details" id="propactionMove">
|
|
This property is infrequently set.
|
|
By default this property is null.
|
|
</span><div class="details" id="dpropactionMove"><p>
|
|
This functional property is only set on objects such as buttons, knobs, or sliders that want to handle all events,
|
|
in conjunction with <a href="../symbols/ActionTool.html" class="linkConstructor">ActionTool</a>, pre-empting the normal tool mechanisms.
|
|
<p>
|
|
The <a href="../symbols/ActionTool.html" class="linkConstructor">ActionTool</a> does not conduct any transaction, so if this property has a value,
|
|
the function will not be called within a transaction.</div>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/GraphObject.html#actionDown" class="linkProperty">actionDown</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#actionUp" class="linkProperty">actionUp</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#actionCancel" class="linkProperty">actionCancel</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="actionUp" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
actionUp
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{function(InputEvent, GraphObject) | null}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the function to execute on a mouse-up event when this GraphObject's <a href="../symbols/GraphObject.html#isActionable" class="linkProperty">isActionable</a>
|
|
is set to true.<span class="nodetails" id="xpropactionUp"><a class="morelink" onclick="hst('propactionUp')">More...</a></span> <span class="details" id="propactionUp">
|
|
This property is infrequently set.
|
|
By default this property is null.
|
|
</span><div class="details" id="dpropactionUp"><p>
|
|
This functional property is only set on objects such as buttons, knobs, or sliders that want to handle all events,
|
|
in conjunction with <a href="../symbols/ActionTool.html" class="linkConstructor">ActionTool</a>, pre-empting the normal tool mechanisms.
|
|
<p>
|
|
The <a href="../symbols/ActionTool.html" class="linkConstructor">ActionTool</a> does not conduct any transaction, so if this property has a value,
|
|
the function will not be called within a transaction.
|
|
If you do provide a function that makes changes to the diagram or to its model,
|
|
you should do so within a transaction -- call <a href="../symbols/Diagram.html#startTransaction" class="linkMethod">Diagram.startTransaction</a> and
|
|
<a href="../symbols/Diagram.html#commitTransaction" class="linkMethod">Diagram.commitTransaction</a>.</div>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/GraphObject.html#actionDown" class="linkProperty">actionDown</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#actionMove" class="linkProperty">actionMove</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#actionCancel" class="linkProperty">actionCancel</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="actualBounds" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
actualBounds
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{<a href="../symbols/Rect.html" class="linkConstructor">Rect</a>}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>This read-only property returns the bounds of this GraphObject in container coordinates.<span class="nodetails" id="xpropactualBounds"><a class="morelink" onclick="hst('propactualBounds')">More...</a></span> <span class="details" id="propactualBounds"> This means that
|
|
the actualBounds are in the coordinate space of the GraphObject's <a href="../symbols/Panel.html" class="linkConstructor">Panel</a>,
|
|
unless this is a <a href="../symbols/Part.html" class="linkConstructor">Part</a>, in which case they are in
|
|
the <a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a>'s coordinate system.
|
|
</span><div class="details" id="dpropactualBounds"><p>
|
|
If the GraphObject is a Part,
|
|
then the x and y values of the actualBounds are identical to that Part's <a href="../symbols/GraphObject.html#position" class="linkProperty">position</a>,
|
|
and the width and height values of the actualBounds represent the rectangular space occupied
|
|
by the Part in <a href="../symbols/Diagram.html#documentBounds" class="linkProperty">Diagram.documentBounds</a> coordinates.
|
|
<p>
|
|
If the GraphObject is not a top-level object (not a <a href="../symbols/Part.html" class="linkConstructor">Part</a>), then the actualBounds
|
|
x and y values represent that GraphObject's position within its Panel. In a Panel of type <a href="../symbols/Panel.html#Position" class="linkConstant">Panel.Position</a>
|
|
this is identical to the GraphObject's <a href="../symbols/GraphObject.html#position" class="linkProperty">position</a>, but in other cases it is dependent on
|
|
the unique workings of each Panel type. The actualBounds width and height
|
|
of a GraphObject are relative to the compounded transformations of its Panel.
|
|
<p>
|
|
It is possible for a GraphObject (be it an GraphObject or a Panel containing several more GraphObjects)
|
|
to have no containing Part, in which case these GraphObjects cannot possibly be in a Diagram.
|
|
These GraphObjects are unlikely to have real-number values for their actualBounds, as they may
|
|
never have had the chance to be measured and arranged.</div>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/GraphObject.html#measuredBounds" class="linkProperty">measuredBounds</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#desiredSize" class="linkProperty">desiredSize</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="alignment" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
alignment
|
|
</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 alignment <a href="../symbols/Spot.html" class="linkConstructor">Spot</a> of this GraphObject used in <a href="../symbols/Panel.html" class="linkConstructor">Panel</a> layouts,
|
|
to determine where in the area allocated by the panel this object should be placed.<span class="nodetails" id="xpropalignment"><a class="morelink" onclick="hst('propalignment')">More...</a></span> <span class="details" id="propalignment">
|
|
</span><div class="details" id="dpropalignment"><p>
|
|
The default value is <a href="../symbols/Spot.html#Default" class="linkConstant">Spot.Default</a>, which lets the Panel determine the Spot using
|
|
<a href="../symbols/Panel.html#defaultAlignment" class="linkProperty">Panel.defaultAlignment</a>. If that property is also <a href="../symbols/Spot.html#Default" class="linkConstant">Spot.Default</a>,
|
|
then the alignment spot will be different depending on the Panel type.
|
|
<p>
|
|
The <a href="../symbols/GraphObject.html#alignmentFocus" class="linkProperty">alignmentFocus</a> is often used along with this property to specify
|
|
where this object should be positioned in a Panel.</div>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/GraphObject.html#alignmentFocus" class="linkProperty">alignmentFocus</a></li>
|
|
|
|
<li><a href="../symbols/Panel.html#defaultAlignment" class="linkProperty">Panel.defaultAlignment</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="alignmentFocus" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
alignmentFocus
|
|
</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 spot on this GraphObject to be used as the alignment point
|
|
in Spot and Fixed <a href="../symbols/Panel.html" class="linkConstructor">Panel</a>s.<span class="nodetails" id="xpropalignmentFocus"><a class="morelink" onclick="hst('propalignmentFocus')">More...</a></span> <span class="details" id="propalignmentFocus">
|
|
Value must be of the Spot.
|
|
</span><div class="details" id="dpropalignmentFocus"><p>
|
|
The default value is <a href="../symbols/Spot.html#Default" class="linkConstant">Spot.Default</a>, which means that the Panel type can decide the effective alignment spot.
|
|
<p>
|
|
The <a href="../symbols/GraphObject.html#alignment" class="linkProperty">alignment</a> is often used along with this property to specify
|
|
where this object should be positioned in a Panel.
|
|
<p>
|
|
For <a href="../symbols/Panel.html#Graduated" class="linkConstant">Panel.Graduated</a>, the alignmentFocus spot determines the spot on a child element to be aligned with some
|
|
point along the main element.
|
|
<p>
|
|
When you want a link label Node to be positioned by its location spot rather than by this alignmentFocus spot,
|
|
you can set this property to <a href="../symbols/Spot.html#None" class="linkConstant">Spot.None</a>, only on <a href="../symbols/Node.html" class="linkConstructor">Node</a>s.</div>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/Panel.html#alignmentFocusName" class="linkProperty">Panel.alignmentFocusName</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="angle" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
angle
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{number}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the angle transform, in degrees, of this GraphObject.<span class="nodetails" id="xpropangle"><a class="morelink" onclick="hst('propangle')">More...</a></span> <span class="details" id="propangle">
|
|
Value must be a number. If the value is not between (0 <= value < 360),
|
|
it will be normalized to be in that range.
|
|
Zero is along the positive X-axis; 90 is along the positive Y-axis.
|
|
Default is 0.</span>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/GraphObject.html#scale" class="linkProperty">scale</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#stretch" class="linkProperty">stretch</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="areaBackground" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
areaBackground
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{string|<a href="../symbols/Brush.html" class="linkConstructor">Brush</a>}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the areaBackground Brush of this GraphObject.<span class="nodetails" id="xpropareaBackground"><a class="morelink" onclick="hst('propareaBackground')">More...</a></span> <span class="details" id="propareaBackground">
|
|
The areaBackground fills the rectangle described by this GraphObject's containing panel's coordinates.
|
|
If the object is rotated, the area background will expand to fill the entire measured bounds of the object,
|
|
without rotating the brush.
|
|
</span><div class="details" id="dpropareaBackground"><p>
|
|
The value may be either a <a href="../symbols/Brush.html" class="linkConstructor">Brush</a> object or a string that is a CSS color.
|
|
The default value is null -- no area background is drawn.
|
|
More information about the syntax of CSS color strings is available at:
|
|
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color">CSS colors (mozilla.org)</a>.</div>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/GraphObject.html#background" class="linkProperty">background</a></li>
|
|
|
|
<li><a href="../symbols/Shape.html#fill" class="linkProperty">Shape.fill</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="background" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
background
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{string|<a href="../symbols/Brush.html" class="linkConstructor">Brush</a>}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the background Brush of this GraphObject,
|
|
filling the rectangle of this object's local coordinate space.<span class="nodetails" id="xpropbackground"><a class="morelink" onclick="hst('propbackground')">More...</a></span> <span class="details" id="propbackground">
|
|
If the object is rotated, the background will rotate with it.
|
|
</span><div class="details" id="dpropbackground"><p>
|
|
The value may be either a <a href="../symbols/Brush.html" class="linkConstructor">Brush</a> object or a string that is a CSS color.
|
|
The default value is null -- no background is drawn.
|
|
More information about the syntax of CSS color strings is available at:
|
|
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/color">CSS colors (mozilla.org)</a>.</div>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/GraphObject.html#areaBackground" class="linkProperty">areaBackground</a></li>
|
|
|
|
<li><a href="../symbols/Shape.html#fill" class="linkProperty">Shape.fill</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="click" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
click
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{function(InputEvent, GraphObject) | null}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the function to execute when the user single-primary-clicks on this object.<span class="nodetails" id="xpropclick"><a class="morelink" onclick="hst('propclick')">More...</a></span> <span class="details" id="propclick">
|
|
This typically involves a mouse-down followed by a prompt mouse-up
|
|
at approximately the same position using the left (primary) mouse button.
|
|
This property is used by the <a href="../symbols/ClickSelectingTool.html" class="linkConstructor">ClickSelectingTool</a>
|
|
when the user clicks on a <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>.
|
|
The function is called in addition to the <a href="../symbols/DiagramEvent.html" class="linkConstructor">DiagramEvent</a>
|
|
that is raised with the name <code>"ObjectSingleClicked"</code>.
|
|
</span><div class="details" id="dpropclick"><p>
|
|
If this property value is a function, it is called with an <a href="../symbols/InputEvent.html" class="linkConstructor">InputEvent</a>
|
|
and this <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>.
|
|
The <a href="../symbols/InputEvent.html#targetObject" class="linkProperty">InputEvent.targetObject</a> provides the GraphObject that was found
|
|
at the mouse point before looking up the visual tree of <a href="../symbols/GraphObject.html#panel" class="linkProperty">GraphObject.panel</a>s
|
|
to get to this object.
|
|
<p>
|
|
From the second argument, <i>obj</i>, you can get to the Node or Link via the <a href="../symbols/GraphObject.html#part" class="linkProperty">part</a> property.
|
|
From there you can access the bound data via the <a href="../symbols/Panel.html#data" class="linkProperty">Panel.data</a> property.
|
|
So from an event handler you can get the bound data by <code>obj.part.data</code>.
|
|
<p>
|
|
By default this property is null.
|
|
<p>
|
|
If you do provide a function that makes changes to the diagram or to its model,
|
|
you should do so within a transaction -- call <a href="../symbols/Diagram.html#startTransaction" class="linkMethod">Diagram.startTransaction</a> and
|
|
<a href="../symbols/Diagram.html#commitTransaction" class="linkMethod">Diagram.commitTransaction</a>.
|
|
<p class="boxrun">
|
|
An example of a click event handler is shown in the
|
|
<a href="../../samples/arrowheads.html">Arrowheads sample</a>.</p></div>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/GraphObject.html#doubleClick" class="linkProperty">doubleClick</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#contextClick" class="linkProperty">contextClick</a></li>
|
|
|
|
<li><a href="../symbols/Diagram.html#click" class="linkProperty">Diagram.click</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="column" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
column
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{number}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the column of this GraphObject if it is in a Table <a href="../symbols/Panel.html" class="linkConstructor">Panel</a>.<span class="nodetails" id="xpropcolumn"><a class="morelink" onclick="hst('propcolumn')">More...</a></span> <span class="details" id="propcolumn">
|
|
The value cannot be negative. The default is 0.</span>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="columnSpan" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
columnSpan
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{number}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the number of columns spanned by this GraphObject if it is in a Table <a href="../symbols/Panel.html" class="linkConstructor">Panel</a>.<span class="nodetails" id="xpropcolumnSpan"><a class="morelink" onclick="hst('propcolumnSpan')">More...</a></span> <span class="details" id="propcolumnSpan">
|
|
The value cannot be negative or zero. The default is 1.</span>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="contextClick" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
contextClick
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{function(InputEvent, GraphObject) | null}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the function to execute when the user single-secondary-clicks on this object.<span class="nodetails" id="xpropcontextClick"><a class="morelink" onclick="hst('propcontextClick')">More...</a></span> <span class="details" id="propcontextClick">
|
|
This typically involves a mouse-down followed by a prompt mouse-up
|
|
at approximately the same position using the right (secondary) mouse button.
|
|
This property is used by the <a href="../symbols/ClickSelectingTool.html" class="linkConstructor">ClickSelectingTool</a>
|
|
when the user clicks on a <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>.
|
|
The function is called in addition to the <a href="../symbols/DiagramEvent.html" class="linkConstructor">DiagramEvent</a>
|
|
that is raised with the name <code>"ObjectContextClicked"</code>.
|
|
</span><div class="details" id="dpropcontextClick"><p>
|
|
If this property value is a function, it is called with an <a href="../symbols/InputEvent.html" class="linkConstructor">InputEvent</a>
|
|
and this <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>.
|
|
The <a href="../symbols/InputEvent.html#targetObject" class="linkProperty">InputEvent.targetObject</a> provides the GraphObject that was found
|
|
at the mouse point before looking up the visual tree of <a href="../symbols/GraphObject.html#panel" class="linkProperty">GraphObject.panel</a>s
|
|
to get to this object.
|
|
<p>
|
|
From the second argument, <i>obj</i>, you can get to the Node or Link via the <a href="../symbols/GraphObject.html#part" class="linkProperty">part</a> property.
|
|
From there you can access the bound data via the <a href="../symbols/Panel.html#data" class="linkProperty">Panel.data</a> property.
|
|
So from an event handler you can get the bound data by <code>obj.part.data</code>.
|
|
<p>
|
|
By default this property is null.
|
|
<p>
|
|
If you do provide a function that makes changes to the diagram or to its model,
|
|
you should do so within a transaction -- call <a href="../symbols/Diagram.html#startTransaction" class="linkMethod">Diagram.startTransaction</a> and
|
|
<a href="../symbols/Diagram.html#commitTransaction" class="linkMethod">Diagram.commitTransaction</a>.</div>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/GraphObject.html#click" class="linkProperty">click</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#doubleClick" class="linkProperty">doubleClick</a></li>
|
|
|
|
<li><a href="../symbols/Diagram.html#contextClick" class="linkProperty">Diagram.contextClick</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="contextMenu" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
contextMenu
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{<a href="../symbols/Adornment.html" class="linkConstructor">Adornment</a>|<a href="../symbols/HTMLInfo.html" class="linkConstructor">HTMLInfo</a>}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>This <a href="../symbols/Adornment.html" class="linkConstructor">Adornment</a> or <a href="../symbols/HTMLInfo.html" class="linkConstructor">HTMLInfo</a> is shown upon a context click on this object.<span class="nodetails" id="xpropcontextMenu"><a class="morelink" onclick="hst('propcontextMenu')">More...</a></span> <span class="details" id="propcontextMenu">
|
|
The default value is null, which means no context menu is shown.
|
|
</span><div class="details" id="dpropcontextMenu"><p>
|
|
Changing this value will not modify or remove any existing menu that is being shown for this object.
|
|
<p>
|
|
Context menus may also depend on having the same data binding as the adorned Part
|
|
(i.e. the same value for <a href="../symbols/Panel.html#data" class="linkProperty">Panel.data</a>).
|
|
<p>
|
|
Context menus are not copied by <a href="../symbols/GraphObject.html#copy" class="linkMethod">copy</a>, so that context menus may be shared by all instances of a template.
|
|
<p>
|
|
A typical context menu is implemented as an Adornment with several buttons in it.
|
|
For example, this context menu is defined in the
|
|
<a href="../../samples/dynamicPorts.html">Dynamic Port sample</a>:
|
|
<pre>
|
|
var nodeMenu = // context menu for each Node
|
|
$(go.Adornment, "Vertical",
|
|
$("ContextMenuButton",
|
|
$(go.TextBlock, "Add top port"),
|
|
{ click: function(e, obj) { addPort("top"); } }),
|
|
$("ContextMenuButton",
|
|
$(go.TextBlock, "Add left port"),
|
|
{ click: function(e, obj) { addPort("left"); } }),
|
|
$("ContextMenuButton",
|
|
$(go.TextBlock, "Add right port"),
|
|
{ click: function(e, obj) { addPort("right"); } }),
|
|
$("ContextMenuButton",
|
|
$(go.TextBlock, "Add bottom port"),
|
|
{ click: function(e, obj) { addPort("bottom"); } }));
|
|
</pre>
|
|
and is used in the node template:
|
|
<pre>
|
|
myDiagram.nodeTemplate =
|
|
$(go.Node, "Table",
|
|
{ . . .
|
|
contextMenu: nodeMenu
|
|
},
|
|
. . .);
|
|
</pre>
|
|
<p>
|
|
Context menus are normally positioned by <a href="../symbols/ContextMenuTool.html#positionContextMenu" class="linkMethod">ContextMenuTool.positionContextMenu</a>.
|
|
However, if there is a <a href="../symbols/Placeholder.html" class="linkConstructor">Placeholder</a> in the context menu, the context menu (i.e. an Adornment)
|
|
will be positioned so that the Placeholder is at the same position as this adorned GraphObject.
|
|
<p>
|
|
The <a href="../../samples/basic.html">Basic sample</a> also shows how
|
|
to make context menu items invisible when the command is disabled.
|
|
<p>
|
|
Replacing this value will not modify or remove any existing context menu that is being shown for this object.
|
|
<p>
|
|
Read more about context menus at <a href="../../intro/contextMenus.html">Context Menus</a>.</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="cursor" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
cursor
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{string}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the mouse cursor to use when the mouse is over this object with no mouse buttons pressed.<span class="nodetails" id="xpropcursor"><a class="morelink" onclick="hst('propcursor')">More...</a></span> <span class="details" id="propcursor">
|
|
The value is null when no particular cursor is specified for this object;
|
|
the actual cursor is determined by any containing <a href="../symbols/Panel.html" class="linkConstructor">Panel</a>.
|
|
</span><div class="details" id="dpropcursor"><p>
|
|
The default value is the empty string, which means the
|
|
current mouse cursor is determined by the Diagram.
|
|
Other strings should be valid CSS strings that specify a cursor.
|
|
This provides some more information about cursor syntax:
|
|
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/cursor">CSS cursors (mozilla.org)</a>.</div>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/Diagram.html#defaultCursor" class="linkProperty">Diagram.defaultCursor</a></li>
|
|
|
|
<li><a href="../symbols/Diagram.html#currentCursor" class="linkProperty">Diagram.currentCursor</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="desiredSize" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
desiredSize
|
|
</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 desired size of this GraphObject in local coordinates.<span class="nodetails" id="xpropdesiredSize"><a class="morelink" onclick="hst('propdesiredSize')">More...</a></span> <span class="details" id="propdesiredSize">
|
|
Value must be of type <a href="../symbols/Size.html" class="linkConstructor">Size</a>.
|
|
Default is Size(NaN, NaN).
|
|
The size does not include any transformation due to <a href="../symbols/GraphObject.html#scale" class="linkProperty">scale</a> or <a href="../symbols/GraphObject.html#angle" class="linkProperty">angle</a>,
|
|
nor any pen thickness due to <a href="../symbols/Shape.html#strokeWidth" class="linkProperty">Shape.strokeWidth</a> if this is a <a href="../symbols/Shape.html" class="linkConstructor">Shape</a>.
|
|
If there is a containing <a href="../symbols/Panel.html" class="linkConstructor">Panel</a> the Panel will determine the actual size.
|
|
If the desiredSize is greater than the allowed size that the GraphObject's Panel determines,
|
|
then the GraphObject may be visually clipped.
|
|
</span><div class="details" id="dpropdesiredSize"><p>
|
|
Getting or setting <a href="../symbols/GraphObject.html#width" class="linkProperty">width</a> or <a href="../symbols/GraphObject.html#height" class="linkProperty">height</a> is equivalent to getting or setting the
|
|
width or height of this property.</div>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/GraphObject.html#minSize" class="linkProperty">minSize</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#maxSize" class="linkProperty">maxSize</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#naturalBounds" class="linkProperty">naturalBounds</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#measuredBounds" class="linkProperty">measuredBounds</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#actualBounds" class="linkProperty">actualBounds</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="diagram" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
diagram
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{<a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a>}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>This read-only property returns the <a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a> that this GraphObject is in, if it is.<span class="nodetails" id="xpropdiagram"><a class="morelink" onclick="hst('propdiagram')">More...</a></span> <span class="details" id="propdiagram">
|
|
</span><div class="details" id="dpropdiagram"><p>
|
|
This property is not settable.
|
|
Although you cannot add any plain GraphObject to a Diagram, you can call <a href="../symbols/Diagram.html#add" class="linkMethod">Diagram.add</a>
|
|
to add a <a href="../symbols/Part.html" class="linkConstructor">Part</a> to a Diagram.</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="doubleClick" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
doubleClick
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{function(InputEvent, GraphObject) | null}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the function to execute when the user double-primary-clicks on this object.<span class="nodetails" id="xpropdoubleClick"><a class="morelink" onclick="hst('propdoubleClick')">More...</a></span> <span class="details" id="propdoubleClick">
|
|
This typically involves a mouse-down/up/down/up in rapid succession
|
|
at approximately the same position using the left (primary) mouse button.
|
|
This property is used by the <a href="../symbols/ClickSelectingTool.html" class="linkConstructor">ClickSelectingTool</a>
|
|
when the user clicks on a <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>.
|
|
The function is called in addition to the <a href="../symbols/DiagramEvent.html" class="linkConstructor">DiagramEvent</a>
|
|
that is raised with the name <code>"ObjectDoubleClicked"</code>.
|
|
</span><div class="details" id="dpropdoubleClick"><p>
|
|
If this property value is a function, it is called with an <a href="../symbols/InputEvent.html" class="linkConstructor">InputEvent</a>
|
|
and this <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>.
|
|
The <a href="../symbols/InputEvent.html#targetObject" class="linkProperty">InputEvent.targetObject</a> provides the GraphObject that was found
|
|
at the mouse point before looking up the visual tree of <a href="../symbols/GraphObject.html#panel" class="linkProperty">GraphObject.panel</a>s
|
|
to get to this object.
|
|
<p>
|
|
From the second argument, <i>obj</i>, you can get to the Node or Link via the <a href="../symbols/GraphObject.html#part" class="linkProperty">part</a> property.
|
|
From there you can access the bound data via the <a href="../symbols/Panel.html#data" class="linkProperty">Panel.data</a> property.
|
|
So from an event handler you can get the bound data by <code>obj.part.data</code>.
|
|
<p>
|
|
By default this property is null.
|
|
<p>
|
|
If you do provide a function that makes changes to the diagram or to its model,
|
|
you should do so within a transaction -- call <a href="../symbols/Diagram.html#startTransaction" class="linkMethod">Diagram.startTransaction</a> and
|
|
<a href="../symbols/Diagram.html#commitTransaction" class="linkMethod">Diagram.commitTransaction</a>.
|
|
<p>
|
|
The <a href="../../samples/classHierarchy.html">Class Hierarchy sample</a>
|
|
demonstrates the definition of a double-click event handler that opens up
|
|
a web page with the documentation for that class:
|
|
<pre>
|
|
diagram.nodeTemplate =
|
|
$(go.Node, . . .,
|
|
{
|
|
doubleClick: // here the second argument is this object, which is this Node
|
|
function(e, node) { window.open("../api/symbols/" + node.data.key + ".html"); }
|
|
},
|
|
. . .
|
|
);
|
|
</pre></div>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/GraphObject.html#click" class="linkProperty">click</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#contextClick" class="linkProperty">contextClick</a></li>
|
|
|
|
<li><a href="../symbols/Diagram.html#doubleClick" class="linkProperty">Diagram.doubleClick</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="enabledChanged" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
enabledChanged
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{function(GraphObject, boolean) | null}</span>
|
|
|
|
<span class="since" title="since">1.7</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the function to execute when some containing Panel changes the value of <a href="../symbols/Panel.html#isEnabled" class="linkProperty">Panel.isEnabled</a>.<span class="nodetails" id="xpropenabledChanged"><a class="morelink" onclick="hst('propenabledChanged')">More...</a></span> <span class="details" id="propenabledChanged">
|
|
It is typically used to modify the appearance of the object.
|
|
This function must not change the value of any panel <a href="../symbols/Panel.html#isEnabled" class="linkProperty">Panel.isEnabled</a>.
|
|
</span><div class="details" id="dpropenabledChanged"><p>
|
|
If this property value is a function, it is called with two arguments,
|
|
this <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a> and the new value.
|
|
By default this property is null -- no function is called.</div>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/GraphObject.html#isEnabledObject" class="linkMethod">isEnabledObject</a></li>
|
|
|
|
<li><a href="../symbols/Panel.html#isEnabled" class="linkProperty">Panel.isEnabled</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="fromEndSegmentLength" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
fromEndSegmentLength
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{number}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the length of the first segment of a link coming from this port.<span class="nodetails" id="xpropfromEndSegmentLength"><a class="morelink" onclick="hst('propfromEndSegmentLength')">More...</a></span> <span class="details" id="propfromEndSegmentLength">
|
|
This value is used when the computed "from spot" is not <a href="../symbols/Spot.html#None" class="linkConstant">Spot.None</a>.
|
|
The default value is 10.
|
|
This value also limits how short the <a href="../symbols/Link.html#fromShortLength" class="linkProperty">Link.fromShortLength</a> may be drawn.
|
|
</span><div class="details" id="dpropfromEndSegmentLength"><p>
|
|
The value of <a href="../symbols/Link.html#fromEndSegmentLength" class="linkProperty">Link.fromEndSegmentLength</a>, if not NaN, takes precedence over the value at this port
|
|
when determining the route of the link.
|
|
<p>
|
|
For examples of how to use this property, see <a href="../../intro/connectionPoints.html">Link Connection Points</a>.
|
|
<p>
|
|
You must set this property on a GraphObject whose <a href="../symbols/GraphObject.html#portId" class="linkProperty">portId</a> is non-null,
|
|
unless the whole <a href="../symbols/Node.html" class="linkConstructor">Node</a> is acting as a single port,
|
|
in which case this property should be set on the Node.</div>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/Link.html#fromEndSegmentLength" class="linkProperty">Link.fromEndSegmentLength</a></li>
|
|
|
|
<li><a href="../symbols/Link.html#computeEndSegmentLength" class="linkMethod">Link.computeEndSegmentLength</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#toEndSegmentLength" class="linkProperty">toEndSegmentLength</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#portId" class="linkProperty">portId</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="fromLinkable" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
fromLinkable
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{boolean|null}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets whether the user may draw Links from this port.<span class="nodetails" id="xpropfromLinkable"><a class="morelink" onclick="hst('propfromLinkable')">More...</a></span> <span class="details" id="propfromLinkable">
|
|
This property is used by <a href="../symbols/LinkingBaseTool.html#isValidFrom" class="linkMethod">LinkingBaseTool.isValidFrom</a>.
|
|
</span><div class="details" id="dpropfromLinkable"><p>
|
|
The default value is null, which indicates that the real value is inherited from
|
|
the parent <a href="../symbols/Panel.html" class="linkConstructor">Panel</a>, or false if there is no containing panel.
|
|
<p>
|
|
You must set this property on a GraphObject whose <a href="../symbols/GraphObject.html#portId" class="linkProperty">portId</a> is non-null,
|
|
unless the whole <a href="../symbols/Node.html" class="linkConstructor">Node</a> is acting as a single port,
|
|
in which case this property should be set on the Node,
|
|
or unless you are disabling the "linkability" of a particular GraphObject
|
|
inside a Panel whose fromLinkable has been set or bound to true.</div>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/GraphObject.html#toLinkable" class="linkProperty">toLinkable</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#fromMaxLinks" class="linkProperty">fromMaxLinks</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#portId" class="linkProperty">portId</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#cursor" class="linkProperty">cursor</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="fromLinkableDuplicates" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
fromLinkableDuplicates
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{boolean}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets whether the user may draw duplicate Links from this port.<span class="nodetails" id="xpropfromLinkableDuplicates"><a class="morelink" onclick="hst('propfromLinkableDuplicates')">More...</a></span> <span class="details" id="propfromLinkableDuplicates">
|
|
This property is used by <a href="../symbols/LinkingBaseTool.html#isValidLink" class="linkMethod">LinkingBaseTool.isValidLink</a>.
|
|
The default value is false.
|
|
</span><div class="details" id="dpropfromLinkableDuplicates"><p>
|
|
You must set this property on a GraphObject whose <a href="../symbols/GraphObject.html#portId" class="linkProperty">portId</a> is non-null,
|
|
unless the whole <a href="../symbols/Node.html" class="linkConstructor">Node</a> is acting as a single port,
|
|
in which case this property should be set on the Node.</div>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/GraphObject.html#fromLinkable" class="linkProperty">fromLinkable</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#fromLinkableSelfNode" class="linkProperty">fromLinkableSelfNode</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#toLinkableDuplicates" class="linkProperty">toLinkableDuplicates</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="fromLinkableSelfNode" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
fromLinkableSelfNode
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{boolean}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets whether the user may draw Links that connect from this port's Node.<span class="nodetails" id="xpropfromLinkableSelfNode"><a class="morelink" onclick="hst('propfromLinkableSelfNode')">More...</a></span> <span class="details" id="propfromLinkableSelfNode">
|
|
This property is used by <a href="../symbols/LinkingBaseTool.html#isValidLink" class="linkMethod">LinkingBaseTool.isValidLink</a>.
|
|
The default value is false.
|
|
</span><div class="details" id="dpropfromLinkableSelfNode"><p>
|
|
You must set this property on a GraphObject whose <a href="../symbols/GraphObject.html#portId" class="linkProperty">portId</a> is non-null,
|
|
unless the whole <a href="../symbols/Node.html" class="linkConstructor">Node</a> is acting as a single port,
|
|
in which case this property should be set on the Node.</div>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/GraphObject.html#fromLinkable" class="linkProperty">fromLinkable</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#fromLinkableDuplicates" class="linkProperty">fromLinkableDuplicates</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#toLinkableSelfNode" class="linkProperty">toLinkableSelfNode</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="fromMaxLinks" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
fromMaxLinks
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{number}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the maximum number of links that may come out of this port.<span class="nodetails" id="xpropfromMaxLinks"><a class="morelink" onclick="hst('propfromMaxLinks')">More...</a></span> <span class="details" id="propfromMaxLinks">
|
|
This property is used by <a href="../symbols/LinkingBaseTool.html#isValidFrom" class="linkMethod">LinkingBaseTool.isValidFrom</a>.
|
|
</span><div class="details" id="dpropfromMaxLinks"><p>
|
|
The value must be non-negative.
|
|
The default value is Infinity.
|
|
<p>
|
|
You must set this property on a GraphObject whose <a href="../symbols/GraphObject.html#portId" class="linkProperty">portId</a> is non-null,
|
|
unless the whole <a href="../symbols/Node.html" class="linkConstructor">Node</a> is acting as a single port,
|
|
in which case this property should be set on the Node.</div>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/GraphObject.html#fromLinkable" class="linkProperty">fromLinkable</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#toMaxLinks" class="linkProperty">toMaxLinks</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#portId" class="linkProperty">portId</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="fromShortLength" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
fromShortLength
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{number}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets how far the end segment of a link coming from this port stops short of the actual port.<span class="nodetails" id="xpropfromShortLength"><a class="morelink" onclick="hst('propfromShortLength')">More...</a></span> <span class="details" id="propfromShortLength">
|
|
Positive values are limited by the <a href="../symbols/GraphObject.html#fromEndSegmentLength" class="linkProperty">fromEndSegmentLength</a> or <a href="../symbols/Link.html#fromEndSegmentLength" class="linkProperty">Link.fromEndSegmentLength</a>.
|
|
Negative values cause the link to extend into the port.
|
|
The default value is zero.
|
|
</span><div class="details" id="dpropfromShortLength"><p>
|
|
This property is useful when you have a thick link and a pointy arrowhead.
|
|
Normally the link Shape extends all the way to the end of the arrowhead.
|
|
If the link Shape is wide, its edges will be seen behind the arrowhead.
|
|
By setting this property to a small positive value, the link Shape can end within the
|
|
body of the arrowhead, leaving only the point of the arrowhead visible at the end of the link.
|
|
<p>
|
|
A negative value for this property can also be useful when you want the link Shape to continue
|
|
into the port, perhaps because a portion of the port is transparent and you want the link to
|
|
appear to connect visually with a different point on the node.
|
|
<p>
|
|
The value of <a href="../symbols/Link.html#fromShortLength" class="linkProperty">Link.fromShortLength</a>, if not NaN, takes precedence over the value at this port
|
|
when determining the route of the link.
|
|
<p>
|
|
For examples of how to use this property, see <a href="../../intro/connectionPoints.html">Link Connection Points</a>.
|
|
<p>
|
|
You must set this property on a GraphObject whose <a href="../symbols/GraphObject.html#portId" class="linkProperty">portId</a> is non-null,
|
|
unless the whole <a href="../symbols/Node.html" class="linkConstructor">Node</a> is acting as a single port,
|
|
in which case this property should be set on the Node.</div>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/GraphObject.html#toShortLength" class="linkProperty">toShortLength</a></li>
|
|
|
|
<li><a href="../symbols/Link.html#fromShortLength" class="linkProperty">Link.fromShortLength</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#portId" class="linkProperty">portId</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="fromSpot" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
fromSpot
|
|
</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 where a link should connect from this port.<span class="nodetails" id="xpropfromSpot"><a class="morelink" onclick="hst('propfromSpot')">More...</a></span> <span class="details" id="propfromSpot">
|
|
The default value is <a href="../symbols/Spot.html#None" class="linkConstant">Spot.None</a>, meaning that the link routing
|
|
must consider the shape of the port and connect at closest point.
|
|
</span><div class="details" id="dpropfromSpot"><p>
|
|
The value of <a href="../symbols/Link.html#fromSpot" class="linkProperty">Link.fromSpot</a>, if not <a href="../symbols/Spot.html#Default" class="linkConstant">Spot.Default</a>, takes precedence over the value at this port
|
|
when determining the route of the link.
|
|
<p>
|
|
For examples of how to use this property, see <a href="../../intro/connectionPoints.html">Link Connection Points</a>.
|
|
<p>
|
|
You must set this property on a GraphObject whose <a href="../symbols/GraphObject.html#portId" class="linkProperty">portId</a> is non-null,
|
|
unless the whole <a href="../symbols/Node.html" class="linkConstructor">Node</a> is acting as a single port,
|
|
in which case this property should be set on the Node.</div>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/Link.html#fromSpot" class="linkProperty">Link.fromSpot</a></li>
|
|
|
|
<li><a href="../symbols/Link.html#computeSpot" class="linkMethod">Link.computeSpot</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#toSpot" class="linkProperty">toSpot</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#portId" class="linkProperty">portId</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="height" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
height
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{number}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the desired height of this GraphObject in local coordinates.<span class="nodetails" id="xpropheight"><a class="morelink" onclick="hst('propheight')">More...</a></span> <span class="details" id="propheight">
|
|
This just gets or sets the height component of the <a href="../symbols/GraphObject.html#desiredSize" class="linkProperty">desiredSize</a>.
|
|
Default is NaN.
|
|
The height does not include any transformation due to <a href="../symbols/GraphObject.html#scale" class="linkProperty">scale</a> or <a href="../symbols/GraphObject.html#angle" class="linkProperty">angle</a>,
|
|
nor any pen thickness due to <a href="../symbols/Shape.html#strokeWidth" class="linkProperty">Shape.strokeWidth</a> if this is a <a href="../symbols/Shape.html" class="linkConstructor">Shape</a>.
|
|
If there is a containing <a href="../symbols/Panel.html" class="linkConstructor">Panel</a> the Panel will determine the actual size.</span>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="isActionable" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
isActionable
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{boolean}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>This property determines whether or not this GraphObject's events occur
|
|
before all other events, including selection.<span class="nodetails" id="xpropisActionable"><a class="morelink" onclick="hst('propisActionable')">More...</a></span> <span class="details" id="propisActionable"> This enables the <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>, and <a href="../symbols/GraphObject.html#actionCancel" class="linkProperty">actionCancel</a> events,
|
|
which are all handled by the <a href="../symbols/ActionTool.html" class="linkConstructor">ActionTool</a>.
|
|
</span><div class="details" id="dpropisActionable"><p>
|
|
This object does not get any mouse/touch events if it is not <a href="../symbols/GraphObject.html#visible" class="linkProperty">visible</a>
|
|
or if it is not <a href="../symbols/GraphObject.html#pickable" class="linkProperty">pickable</a>.
|
|
<p>
|
|
This property is infrequently used -- typically only when implementing objects
|
|
that act as buttons or knobs or sliders.
|
|
The default value is false.</div>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/GraphObject.html#actionDown" class="linkProperty">actionDown</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#actionMove" class="linkProperty">actionMove</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#actionUp" class="linkProperty">actionUp</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#actionCancel" class="linkProperty">actionCancel</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#pickable" class="linkProperty">pickable</a></li>
|
|
|
|
<li><a href="../symbols/Panel.html#isEnabled" class="linkProperty">Panel.isEnabled</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="isPanelMain" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
isPanelMain
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{boolean}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets whether a GraphObject is the "main" object for some types of <a href="../symbols/Panel.html" class="linkConstructor">Panel</a>.<span class="nodetails" id="xpropisPanelMain"><a class="morelink" onclick="hst('propisPanelMain')">More...</a></span> <span class="details" id="propisPanelMain">
|
|
Panels that use a "main" object include <a href="../symbols/Panel.html#Auto" class="linkConstant">Panel.Auto</a>, <a href="../symbols/Panel.html#Spot" class="linkConstant">Panel.Spot</a>, and <a href="../symbols/Panel.html#Link" class="linkConstant">Panel.Link</a>.
|
|
</span><div class="details" id="dpropisPanelMain"><p>
|
|
Panels that use a "main" object will use the first object that has this property set to true,
|
|
or else just the first object, if none have the property set.</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="layer" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
layer
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{<a href="../symbols/Layer.html" class="linkConstructor">Layer</a>}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>This read-only property returns the GraphObject's containing <a href="../symbols/Layer.html" class="linkConstructor">Layer</a>, if there is any.<span class="nodetails" id="xproplayer"><a class="morelink" onclick="hst('proplayer')">More...</a></span> <span class="details" id="proplayer">
|
|
A plain GraphObject cannot belong directly to a Layer -- only a <a href="../symbols/Part.html" class="linkConstructor">Part</a> can belong directly to a Layer.
|
|
</span><div class="details" id="dproplayer"><p>
|
|
This property is not settable.
|
|
Normally one changes which Layer that a GraphObject is in by setting <a href="../symbols/Part.html#layerName" class="linkProperty">Part.layerName</a>.
|
|
Adding a Part to a Diagram will automatically add that Part to a Layer in that Diagram based on the layerName.</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="margin" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
margin
|
|
</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 size of empty area around this GraphObject, as a <a href="../symbols/Margin.html" class="linkConstructor">Margin</a>,
|
|
in the containing <a href="../symbols/Panel.html" class="linkConstructor">Panel</a> coordinates.<span class="nodetails" id="xpropmargin"><a class="morelink" onclick="hst('propmargin')">More...</a></span> <span class="details" id="propmargin">
|
|
</span><div class="details" id="dpropmargin"><p>
|
|
Negative values are permitted but may cause overlaps with adjacent
|
|
objects in a <a href="../symbols/Panel.html" class="linkConstructor">Panel</a>.
|
|
Default margin is Margin(0,0,0,0).
|
|
<p>
|
|
The property setter accepts a number instead of a Margin object: providing a
|
|
number N will result in using a Margin(N, N, N, N).
|
|
The property getter will always return a Margin.</div>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/GraphObject.html#desiredSize" class="linkProperty">desiredSize</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#measuredBounds" class="linkProperty">measuredBounds</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#actualBounds" class="linkProperty">actualBounds</a></li>
|
|
|
|
<li><a href="../symbols/Panel.html#padding" class="linkProperty">Panel.padding</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="maxSize" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
maxSize
|
|
</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 maximum size of this GraphObject in container coordinates
|
|
(either a <a href="../symbols/Panel.html" class="linkConstructor">Panel</a> or the document).<span class="nodetails" id="xpropmaxSize"><a class="morelink" onclick="hst('propmaxSize')">More...</a></span> <span class="details" id="propmaxSize">
|
|
Any new value must be of type Size; the width and height must not be NaN.
|
|
The default value is Infinity by Infinity.
|
|
A containing Panel will determine the actual size of this object.</span>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/GraphObject.html#minSize" class="linkProperty">minSize</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#desiredSize" class="linkProperty">desiredSize</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="measuredBounds" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
measuredBounds
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{<a href="../symbols/Rect.html" class="linkConstructor">Rect</a>}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>This read-only property returns the measuredBounds of the GraphObject in container coordinates
|
|
(either a <a href="../symbols/Panel.html" class="linkConstructor">Panel</a> or the document).<span class="nodetails" id="xpropmeasuredBounds"><a class="morelink" onclick="hst('propmeasuredBounds')">More...</a></span> <span class="details" id="propmeasuredBounds">
|
|
This describes the transformed bounds with margins excluded.
|
|
Default is null.</span>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/GraphObject.html#naturalBounds" class="linkProperty">naturalBounds</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#desiredSize" class="linkProperty">desiredSize</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#actualBounds" class="linkProperty">actualBounds</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="minSize" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
minSize
|
|
</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 minimum size of this GraphObject in container coordinates
|
|
(either a <a href="../symbols/Panel.html" class="linkConstructor">Panel</a> or the document).<span class="nodetails" id="xpropminSize"><a class="morelink" onclick="hst('propminSize')">More...</a></span> <span class="details" id="propminSize">
|
|
Any new value must be of type Size; the width and height must not be NaN.
|
|
The default value is zero by zero.
|
|
A containing Panel will determine the actual size of this object.</span>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/GraphObject.html#maxSize" class="linkProperty">maxSize</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#desiredSize" class="linkProperty">desiredSize</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="mouseDragEnter" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
mouseDragEnter
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{function(InputEvent, GraphObject, GraphObject) | null}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the function to execute when the user moves the mouse
|
|
into this stationary object during a <a href="../symbols/DraggingTool.html" class="linkConstructor">DraggingTool</a> drag;
|
|
this allows you to provide feedback during a drag based on where it might drop.<span class="nodetails" id="xpropmouseDragEnter"><a class="morelink" onclick="hst('propmouseDragEnter')">More...</a></span> <span class="details" id="propmouseDragEnter">
|
|
</span><div class="details" id="dpropmouseDragEnter"><p>
|
|
If this property value is a function, it is called with an <a href="../symbols/InputEvent.html" class="linkConstructor">InputEvent</a>,
|
|
this <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>, and any previous <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>.
|
|
The <a href="../symbols/InputEvent.html#targetObject" class="linkProperty">InputEvent.targetObject</a> provides the GraphObject that was found
|
|
at the mouse point before looking up the visual tree of <a href="../symbols/GraphObject.html#panel" class="linkProperty">GraphObject.panel</a>s
|
|
to get to this object.
|
|
By default this property is null.
|
|
<p>
|
|
Note that for a drag-and-drop that originates in a different diagram, the target diagram's
|
|
selection collection will not be the parts that are being dragged.
|
|
Instead the temporary parts being dragged can be found as the source diagram's DraggingTool.copiedParts.
|
|
<p>
|
|
This function is called with <a href="../symbols/Diagram.html#skipsUndoManager" class="linkProperty">Diagram.skipsUndoManager</a> temporarily set to true,
|
|
so that any changes to <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>s are not recorded in the <a href="../symbols/UndoManager.html" class="linkConstructor">UndoManager</a>.
|
|
You do not need to start and commit any transaction in this function,
|
|
because the <a href="../symbols/DraggingTool.html" class="linkConstructor">DraggingTool</a> will be conducting one already.
|
|
After calling this function the diagram will be updated immediately.
|
|
<p>
|
|
For an example of a mouseDragEnter event handler, see the node template in the
|
|
<a href="../../samples/orgChartEditor.html">Org Chart Editor sample</a>.</div>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/GraphObject.html#mouseDragLeave" class="linkProperty">mouseDragLeave</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#mouseHold" class="linkProperty">mouseHold</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#mouseDrop" class="linkProperty">mouseDrop</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#mouseEnter" class="linkProperty">mouseEnter</a></li>
|
|
|
|
<li><a href="../symbols/Group.html#handlesDragDropForMembers" class="linkProperty">Group.handlesDragDropForMembers</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="mouseDragLeave" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
mouseDragLeave
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{function(InputEvent, GraphObject, GraphObject) | null}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the function to execute when the user moves the mouse
|
|
out of this stationary object during a <a href="../symbols/DraggingTool.html" class="linkConstructor">DraggingTool</a> drag;
|
|
this allows you to provide feedback during a drag based on where it might drop.<span class="nodetails" id="xpropmouseDragLeave"><a class="morelink" onclick="hst('propmouseDragLeave')">More...</a></span> <span class="details" id="propmouseDragLeave">
|
|
</span><div class="details" id="dpropmouseDragLeave"><p>
|
|
If this property value is a function, it is called with an <a href="../symbols/InputEvent.html" class="linkConstructor">InputEvent</a>,
|
|
this <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>, and any new <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a> that the mouse is in.
|
|
The <a href="../symbols/InputEvent.html#targetObject" class="linkProperty">InputEvent.targetObject</a> provides the GraphObject that was found
|
|
at the mouse point before looking up the visual tree of <a href="../symbols/GraphObject.html#panel" class="linkProperty">GraphObject.panel</a>s
|
|
to get to this object.
|
|
By default this property is null.
|
|
<p>
|
|
Note that for a drag-and-drop that originates in a different diagram, the target diagram's
|
|
selection collection will not be the parts that are being dragged.
|
|
Instead the temporary parts being dragged can be found as the source diagram's <a href="../symbols/DraggingTool.html#copiedParts" class="linkProperty">DraggingTool.copiedParts</a>.
|
|
<p>
|
|
This function is called with <a href="../symbols/Diagram.html#skipsUndoManager" class="linkProperty">Diagram.skipsUndoManager</a> temporarily set to true,
|
|
so that any changes to <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>s are not recorded in the <a href="../symbols/UndoManager.html" class="linkConstructor">UndoManager</a>.
|
|
You do not need to start and commit any transaction in this function,
|
|
because the <a href="../symbols/DraggingTool.html" class="linkConstructor">DraggingTool</a> will be conducting one already.
|
|
After calling this function the diagram will be updated immediately.
|
|
<p>
|
|
For an example of a mouseDragLeave event handler, see the node template in the
|
|
<a href="../../samples/orgChartEditor.html">Org Chart Editor sample</a>.</div>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/GraphObject.html#mouseDragEnter" class="linkProperty">mouseDragEnter</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#mouseHold" class="linkProperty">mouseHold</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#mouseDrop" class="linkProperty">mouseDrop</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#mouseLeave" class="linkProperty">mouseLeave</a></li>
|
|
|
|
<li><a href="../symbols/Group.html#handlesDragDropForMembers" class="linkProperty">Group.handlesDragDropForMembers</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="mouseDrop" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
mouseDrop
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{function(InputEvent, GraphObject) | null}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the function to execute when a user drops the selection on this object
|
|
at the end of a <a href="../symbols/DraggingTool.html" class="linkConstructor">DraggingTool</a> drag;
|
|
this allows you to customize the behavior when a drop occurs on an object.<span class="nodetails" id="xpropmouseDrop"><a class="morelink" onclick="hst('propmouseDrop')">More...</a></span> <span class="details" id="propmouseDrop">
|
|
</span><div class="details" id="dpropmouseDrop"><p>
|
|
If this property value is a function, it is called with an <a href="../symbols/InputEvent.html" class="linkConstructor">InputEvent</a>,
|
|
this <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>.
|
|
The <a href="../symbols/InputEvent.html#targetObject" class="linkProperty">InputEvent.targetObject</a> provides the GraphObject that was found
|
|
at the mouse point before looking up the visual tree of <a href="../symbols/GraphObject.html#panel" class="linkProperty">GraphObject.panel</a>s
|
|
to get to this object.
|
|
The function is called within the transaction performed by the <a href="../symbols/DraggingTool.html" class="linkConstructor">DraggingTool</a>,
|
|
so you do not need to conduct one.
|
|
By default this property is null.
|
|
<p>
|
|
For an example of a mouseDrop event handler, see the node template in the
|
|
<a href="../../samples/orgChartEditor.html">Org Chart Editor sample</a>.</div>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/GraphObject.html#mouseDragEnter" class="linkProperty">mouseDragEnter</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#mouseDragLeave" class="linkProperty">mouseDragLeave</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#mouseHold" class="linkProperty">mouseHold</a></li>
|
|
|
|
<li><a href="../symbols/Group.html#handlesDragDropForMembers" class="linkProperty">Group.handlesDragDropForMembers</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="mouseEnter" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
mouseEnter
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{function(InputEvent, GraphObject, GraphObject) | null}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the function to execute when the user moves the mouse
|
|
into this object without holding down any buttons.<span class="nodetails" id="xpropmouseEnter"><a class="morelink" onclick="hst('propmouseEnter')">More...</a></span> <span class="details" id="propmouseEnter">
|
|
This property is used by the <a href="../symbols/ToolManager.html" class="linkConstructor">ToolManager</a>.
|
|
</span><div class="details" id="dpropmouseEnter"><p>
|
|
If this property value is a function, it is called with an <a href="../symbols/InputEvent.html" class="linkConstructor">InputEvent</a>,
|
|
this <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a> that the mouse is now in,
|
|
and any previous <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a> that the mouse was in.
|
|
The <a href="../symbols/InputEvent.html#targetObject" class="linkProperty">InputEvent.targetObject</a> provides the GraphObject that was found
|
|
at the mouse point before looking up the visual tree of <a href="../symbols/GraphObject.html#panel" class="linkProperty">GraphObject.panel</a>s
|
|
to get to this object.
|
|
By default this property is null.
|
|
<p>
|
|
This function is called with <a href="../symbols/Diagram.html#skipsUndoManager" class="linkProperty">Diagram.skipsUndoManager</a> temporarily set to true,
|
|
so that any changes to <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>s are not recorded in the <a href="../symbols/UndoManager.html" class="linkConstructor">UndoManager</a>.
|
|
You do not need to start and commit any transaction in this function.
|
|
After calling this function the diagram will be updated immediately.
|
|
<p>
|
|
For example, consider the situation where one wants to display buttons that the user can click
|
|
whenever the user passes the mouse over a node, and the buttons automatically disappear when the
|
|
mouse leaves the node. This can be implemented by showing an Adornment holding the buttons.
|
|
<pre>
|
|
var nodeContextMenu =
|
|
$(go.Adornment, "Spot",
|
|
{ background: "transparent" }, // to help detect when the mouse leaves the area
|
|
$(go.Placeholder),
|
|
$(go.Panel, "Vertical",
|
|
{ alignment: go.Spot.Right, alignmentFocus: go.Spot.Left },
|
|
$("Button",
|
|
$(go.TextBlock, "Command 1"),
|
|
{
|
|
click: function(e, obj) {
|
|
var node = obj.part.adornedPart;
|
|
alert("Command 1 on " + node.data.text);
|
|
node.removeAdornment("ContextMenuOver");
|
|
}
|
|
}),
|
|
$("Button",
|
|
$(go.TextBlock, "Command 2"),
|
|
{
|
|
click: function(e, obj) {
|
|
var node = obj.part.adornedPart;
|
|
alert("Command 2 on " + node.data.text);
|
|
node.removeAdornment("ContextMenuOver");
|
|
}
|
|
})
|
|
));
|
|
</pre>
|
|
Then in the definition of the Node we can implement a mouseEnter event handler:
|
|
<pre>
|
|
myDiagram.nodeTemplate =
|
|
$(go.Node,
|
|
. . .
|
|
{
|
|
mouseEnter: function(e, node) {
|
|
nodeContextMenu.adornedObject = node;
|
|
nodeContextMenu.mouseLeave = function(ev, cm) {
|
|
node.removeAdornment("ContextMenuOver");
|
|
};
|
|
node.addAdornment("ContextMenuOver", nodeContextMenu);
|
|
}
|
|
});
|
|
</pre>
|
|
Note how it automatically defines a <a href="../symbols/GraphObject.html#mouseLeave" class="linkProperty">mouseLeave</a> event handler too.
|
|
The context menu Adornment is removed either when the mouse leaves the area of the Adornment
|
|
or when the user executes a button click event handler.</div>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/GraphObject.html#mouseLeave" class="linkProperty">mouseLeave</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#mouseOver" class="linkProperty">mouseOver</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#mouseHover" class="linkProperty">mouseHover</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#mouseDragEnter" class="linkProperty">mouseDragEnter</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="mouseHold" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
mouseHold
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{function(InputEvent, GraphObject) | null}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the function to execute when the user holds the mouse still for a while
|
|
over this object while holding down a button.<span class="nodetails" id="xpropmouseHold"><a class="morelink" onclick="hst('propmouseHold')">More...</a></span> <span class="details" id="propmouseHold">
|
|
This property is used by the <a href="../symbols/ToolManager.html" class="linkConstructor">ToolManager</a>.
|
|
</span><div class="details" id="dpropmouseHold"><p>
|
|
If this property value is a function, it is called with an <a href="../symbols/InputEvent.html" class="linkConstructor">InputEvent</a>.
|
|
By default this property is null.
|
|
<p>
|
|
If you do provide a function that makes changes to the diagram or to its model,
|
|
you should do so within a transaction -- call <a href="../symbols/Diagram.html#startTransaction" class="linkMethod">Diagram.startTransaction</a> and
|
|
<a href="../symbols/Diagram.html#commitTransaction" class="linkMethod">Diagram.commitTransaction</a>.
|
|
<p>
|
|
You can control how long the user must wait during a drag with a motionless mouse before
|
|
a "mouse hold" event occurs, by setting <a href="../symbols/ToolManager.html#holdDelay" class="linkProperty">ToolManager.holdDelay</a>.
|
|
For example:
|
|
<pre>
|
|
myDiagram =
|
|
$(go.Diagram, "myDiagramDiv",
|
|
{ "toolManager.holdDelay": 500 }); // 500 milliseconds
|
|
</pre>
|
|
or:
|
|
<pre>
|
|
myDiagram.toolManager.holdDelay = 500; // 500 milliseconds
|
|
</pre></div>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/GraphObject.html#mouseDragEnter" class="linkProperty">mouseDragEnter</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#mouseDragLeave" class="linkProperty">mouseDragLeave</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#mouseHover" class="linkProperty">mouseHover</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="mouseHover" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
mouseHover
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{function(InputEvent, GraphObject) | null}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the function to execute when the user holds the mouse still for a while
|
|
over this object without holding down any buttons.<span class="nodetails" id="xpropmouseHover"><a class="morelink" onclick="hst('propmouseHover')">More...</a></span> <span class="details" id="propmouseHover">
|
|
This property is used by the <a href="../symbols/ToolManager.html" class="linkConstructor">ToolManager</a>.
|
|
</span><div class="details" id="dpropmouseHover"><p>
|
|
If this property value is a function, it is called with an <a href="../symbols/InputEvent.html" class="linkConstructor">InputEvent</a>.
|
|
By default this property is null.
|
|
<p>
|
|
If you do provide a function that makes changes to the diagram or to its model,
|
|
you should do so within a transaction -- call <a href="../symbols/Diagram.html#startTransaction" class="linkMethod">Diagram.startTransaction</a> and
|
|
<a href="../symbols/Diagram.html#commitTransaction" class="linkMethod">Diagram.commitTransaction</a>.
|
|
<p>
|
|
You can control how long the user must wait with a motionless mouse before
|
|
a "mouse hover" event occurs, by setting <a href="../symbols/ToolManager.html#hoverDelay" class="linkProperty">ToolManager.hoverDelay</a>.
|
|
For example:
|
|
<pre>
|
|
myDiagram =
|
|
$(go.Diagram, "myDiagramDiv",
|
|
{ "toolManager.hoverDelay": 500 }); // 500 milliseconds
|
|
</pre>
|
|
or:
|
|
<pre>
|
|
myDiagram.toolManager.hoverDelay = 500; // 500 milliseconds
|
|
</pre></div>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/GraphObject.html#mouseOver" class="linkProperty">mouseOver</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#mouseEnter" class="linkProperty">mouseEnter</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#mouseLeave" class="linkProperty">mouseLeave</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="mouseLeave" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
mouseLeave
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{function(InputEvent, GraphObject, GraphObject) | null}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the function to execute when the user moves the mouse
|
|
into this object without holding down any buttons.<span class="nodetails" id="xpropmouseLeave"><a class="morelink" onclick="hst('propmouseLeave')">More...</a></span> <span class="details" id="propmouseLeave">
|
|
This property is used by the <a href="../symbols/ToolManager.html" class="linkConstructor">ToolManager</a>.
|
|
</span><div class="details" id="dpropmouseLeave"><p>
|
|
If this property value is a function, it is called with an <a href="../symbols/InputEvent.html" class="linkConstructor">InputEvent</a>,
|
|
this <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a> that the mouse has left,
|
|
and any next <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a> that the mouse is now in.
|
|
The <a href="../symbols/InputEvent.html#targetObject" class="linkProperty">InputEvent.targetObject</a> provides the GraphObject that was found
|
|
at the mouse point before looking up the visual tree of <a href="../symbols/GraphObject.html#panel" class="linkProperty">GraphObject.panel</a>s
|
|
to get to this object.
|
|
By default this property is null.
|
|
<p>
|
|
This function is called with <a href="../symbols/Diagram.html#skipsUndoManager" class="linkProperty">Diagram.skipsUndoManager</a> temporarily set to true,
|
|
so that any changes to <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>s are not recorded in the <a href="../symbols/UndoManager.html" class="linkConstructor">UndoManager</a>.
|
|
You do not need to start and commit any transaction in this function.
|
|
After calling this function the diagram will be updated immediately.
|
|
<p>
|
|
For example, the <a href="../../samples/flowchart.html">Flow Chart sample</a>
|
|
automatically shows and hides the ports as the mouse passes over a node.
|
|
The node template includes the following settings:
|
|
<pre>
|
|
myDiagram.nodeTemplate =
|
|
$(go.Node,
|
|
. . .
|
|
{
|
|
. . .
|
|
// handle mouse enter/leave events to show/hide the ports
|
|
mouseEnter: function(e, obj) { showPorts(obj.part, true); },
|
|
mouseLeave: function(e, obj) { showPorts(obj.part, false); }
|
|
. . .
|
|
});
|
|
</pre>
|
|
where the <code>showPorts</code> function is defined to set the <a href="../symbols/GraphObject.html#visible" class="linkProperty">visible</a>
|
|
property of each of the port elements of the node.</div>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/GraphObject.html#mouseEnter" class="linkProperty">mouseEnter</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#mouseOver" class="linkProperty">mouseOver</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#mouseHover" class="linkProperty">mouseHover</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#mouseDragLeave" class="linkProperty">mouseDragLeave</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="mouseOver" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
mouseOver
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{function(InputEvent, GraphObject) | null}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the function to execute when the user moves the mouse
|
|
over this object without holding down any buttons.<span class="nodetails" id="xpropmouseOver"><a class="morelink" onclick="hst('propmouseOver')">More...</a></span> <span class="details" id="propmouseOver">
|
|
This property is used by the <a href="../symbols/ToolManager.html" class="linkConstructor">ToolManager</a>.
|
|
This property is infrequently used -- it is more common to implement <a href="../symbols/GraphObject.html#mouseEnter" class="linkProperty">mouseEnter</a>
|
|
and <a href="../symbols/GraphObject.html#mouseLeave" class="linkProperty">mouseLeave</a> functions.
|
|
</span><div class="details" id="dpropmouseOver"><p>
|
|
If this property value is a function, it is called with an <a href="../symbols/InputEvent.html" class="linkConstructor">InputEvent</a>
|
|
and this <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>.
|
|
The <a href="../symbols/InputEvent.html#targetObject" class="linkProperty">InputEvent.targetObject</a> provides the GraphObject that was found
|
|
at the mouse point before looking up the visual tree of <a href="../symbols/GraphObject.html#panel" class="linkProperty">GraphObject.panel</a>s
|
|
to get to this object.
|
|
By default this property is null.
|
|
<p>
|
|
This function is called with <a href="../symbols/Diagram.html#skipsUndoManager" class="linkProperty">Diagram.skipsUndoManager</a> temporarily set to true,
|
|
so that any changes to <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>s are not recorded in the <a href="../symbols/UndoManager.html" class="linkConstructor">UndoManager</a>.
|
|
You do not need to start and commit any transaction in this function.
|
|
After calling this function the diagram will be updated immediately.</div>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/GraphObject.html#mouseHover" class="linkProperty">mouseHover</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#mouseEnter" class="linkProperty">mouseEnter</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#mouseLeave" class="linkProperty">mouseLeave</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="name" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
name
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{string}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the name for this object.<span class="nodetails" id="xpropname"><a class="morelink" onclick="hst('propname')">More...</a></span> <span class="details" id="propname">
|
|
The default value is the empty string.
|
|
The name should be unique within a <a href="../symbols/Panel.html" class="linkConstructor">Panel</a>, although if it isn't,
|
|
it reduces the usefulness of methods such as <a href="../symbols/Panel.html#findObject" class="linkMethod">Panel.findObject</a>.
|
|
</span><div class="details" id="dpropname"><p>
|
|
You must not modify the name of a GraphObject once it is in the visual tree of a Part.
|
|
<p>
|
|
This is frequently needed to identify a particular GraphObject in the visual tree of a Part,
|
|
for example as the value of the <a href="../symbols/Part.html#locationObjectName" class="linkProperty">Part.locationObjectName</a> or
|
|
<a href="../symbols/Part.html#selectionObjectName" class="linkProperty">Part.selectionObjectName</a> properties.</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="naturalBounds" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
naturalBounds
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{<a href="../symbols/Rect.html" class="linkConstructor">Rect</a>}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>This read-only property returns the natural bounding rectangle of this GraphObject in local coordinates,
|
|
before any transformation by <a href="../symbols/GraphObject.html#scale" class="linkProperty">scale</a> or <a href="../symbols/GraphObject.html#angle" class="linkProperty">angle</a>,
|
|
and before any resizing due to <a href="../symbols/GraphObject.html#minSize" class="linkProperty">minSize</a> or <a href="../symbols/GraphObject.html#maxSize" class="linkProperty">maxSize</a> or <a href="../symbols/GraphObject.html#stretch" class="linkProperty">stretch</a>.<span class="nodetails" id="xpropnaturalBounds"><a class="morelink" onclick="hst('propnaturalBounds')">More...</a></span> <span class="details" id="propnaturalBounds">
|
|
Defaults to unknown (NaN,NaN).
|
|
Can only be changed by changing properties of the particular GraphObject,
|
|
such as <a href="../symbols/GraphObject.html#desiredSize" class="linkProperty">GraphObject.desiredSize</a>, <a href="../symbols/Shape.html#geometry" class="linkProperty">Shape.geometry</a>, or <a href="../symbols/TextBlock.html#font" class="linkProperty">TextBlock.font</a>.</span>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/GraphObject.html#desiredSize" class="linkProperty">desiredSize</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#measuredBounds" class="linkProperty">measuredBounds</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#actualBounds" class="linkProperty">actualBounds</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="opacity" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
opacity
|
|
</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 or sets the multiplicative opacity for this GraphObject and (if a Panel) all elements.<span class="nodetails" id="xpropopacity"><a class="morelink" onclick="hst('propopacity')">More...</a></span> <span class="details" id="propopacity">
|
|
The value must be between 0.0 (fully transparent) and 1.0 (no additional transparency).
|
|
</span><div class="details" id="dpropopacity"><p>
|
|
Unlike <a href="../symbols/GraphObject.html#visible" class="linkProperty">visible</a>, Opacity only affects drawing, it does not cause objects to be resized or remeasured.
|
|
Opacity settings do not change the shape of the object or exclude it from object-picking
|
|
(does not change whether any objects are found by the "find..." methods).
|
|
<p>
|
|
This value is multiplicative with any existing transparency,
|
|
for instance from <a href="../symbols/Layer.html#opacity" class="linkProperty">Layer.opacity</a> or a GraphObject's opacity higher in the visual tree,
|
|
or from a <a href="../symbols/Brush.html" class="linkConstructor">Brush</a> or image transparency.
|
|
The default value is 1.</div>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/GraphObject.html#visible" class="linkProperty">visible</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="panel" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
panel
|
|
</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>This read-only property returns the GraphObject's containing <a href="../symbols/Panel.html" class="linkConstructor">Panel</a>, or null if this object is not in a Panel.<span class="nodetails" id="xproppanel"><a class="morelink" onclick="hst('proppanel')">More...</a></span> <span class="details" id="proppanel">
|
|
</span><div class="details" id="dproppanel"><p>
|
|
Although <a href="../symbols/Part.html" class="linkConstructor">Part</a> inherits from this class, a Part will never belong to a Panel,
|
|
so this property will always be null for every <a href="../symbols/Node.html" class="linkConstructor">Node</a> or <a href="../symbols/Link.html" class="linkConstructor">Link</a>.
|
|
<p>
|
|
This property is not settable.
|
|
Instead, call <a href="../symbols/Panel.html#add" class="linkMethod">Panel.add</a> in order to put a GraphObject in a Panel.</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="part" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
part
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{<a href="../symbols/Part.html" class="linkConstructor">Part</a>}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>This read-only property returns the <a href="../symbols/Part.html" class="linkConstructor">Part</a> containing this object, if any.<span class="nodetails" id="xproppart"><a class="morelink" onclick="hst('proppart')">More...</a></span> <span class="details" id="proppart">
|
|
The Part will be the root GraphObject in this GraphObject's visual tree.
|
|
</span><div class="details" id="dproppart"><p>
|
|
It is common to refer to the containing Part of a GraphObject
|
|
in order to refer to the <a href="../symbols/Panel.html#data" class="linkProperty">Panel.data</a> to which it is bound.
|
|
<p>
|
|
This property is not settable.
|
|
If you want this GraphObject to belong to a Part, you will need to add it to a Part,
|
|
or else add it to some visual tree structure that is added to a Part using <a href="../symbols/Panel.html#add" class="linkMethod">Panel.add</a>.
|
|
<p>
|
|
Note that for objects such as buttons that are in <a href="../symbols/Adornment.html" class="linkConstructor">Adornment</a>s such as tooltips or context menus,
|
|
this property will return that Adornment, not the Node or Link that is adorned.
|
|
<p>
|
|
If you want to find a <a href="../symbols/Group.html" class="linkConstructor">Group</a> that contains a Part, use the <a href="../symbols/Part.html#containingGroup" class="linkProperty">Part.containingGroup</a> property:
|
|
<code>someObj.part.containingGroup</code></div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="pickable" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
pickable
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{boolean}</span>
|
|
|
|
<span class="since" title="since">1.2</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets whether or not this GraphObject can be chosen by visual "find" or "hit-test" methods such
|
|
as <a href="../symbols/Diagram.html#findObjectAt" class="linkMethod">Diagram.findObjectAt</a>.<span class="nodetails" id="xproppickable"><a class="morelink" onclick="hst('proppickable')">More...</a></span> <span class="details" id="proppickable">
|
|
</span><div class="details" id="dproppickable"><p>
|
|
This object does not get any mouse/touch events if it is not <a href="../symbols/GraphObject.html#visible" class="linkProperty">visible</a>
|
|
or if it is not <a href="../symbols/GraphObject.html#pickable" class="linkProperty">pickable</a>.
|
|
<p>
|
|
The default value is true -- mouse events on this object will be noticed.
|
|
If this value is false and this object is a <a href="../symbols/Panel.html" class="linkConstructor">Panel</a>, not only is this Panel not "hittable",
|
|
but all of the elements inside the Panel will be ignored.</div>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/Layer.html#pickable" class="linkProperty">Layer.pickable</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#pickable" class="linkProperty">pickable</a></li>
|
|
|
|
<li><a href="../symbols/Panel.html#isEnabled" class="linkProperty">Panel.isEnabled</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="portId" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
portId
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{string}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets an identifier for an object acting as a port on a Node.<span class="nodetails" id="xpropportId"><a class="morelink" onclick="hst('propportId')">More...</a></span> <span class="details" id="propportId">
|
|
The default value is null -- this object is not a port.
|
|
</span><div class="details" id="dpropportId"><p>
|
|
A value that is the empty string is used by convention to mean the primary
|
|
(and usually only) port of the node.
|
|
<p>
|
|
If a Node has no named ports, then the Node itself is the sole port.
|
|
<p>
|
|
Note: the only kind of model that can save port information, i.e. portIds that are not an empty string,
|
|
for links is a <a href="../symbols/GraphLinksModel.html" class="linkConstructor">GraphLinksModel</a> whose <a href="../symbols/GraphLinksModel.html#linkFromPortIdProperty" class="linkProperty">GraphLinksModel.linkFromPortIdProperty</a> and
|
|
<a href="../symbols/GraphLinksModel.html#linkToPortIdProperty" class="linkProperty">GraphLinksModel.linkToPortIdProperty</a> have been set to name properties on the link data objects.
|
|
<p>
|
|
The value should be unique within the <a href="../symbols/Node.html" class="linkConstructor">Node</a>.
|
|
You must not modify this property once this GraphObject is in the visual tree of a Node.
|
|
<p class="boxread">
|
|
See <a href="../../intro/ports.html">the Introduction page on ports</a>
|
|
for usage information and examples.</div>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/GraphObject.html#fromLinkable" class="linkProperty">fromLinkable</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#toLinkable" class="linkProperty">toLinkable</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#fromSpot" class="linkProperty">fromSpot</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#toSpot" class="linkProperty">toSpot</a></li>
|
|
|
|
<li><a href="../symbols/Link.html#fromSpot" class="linkProperty">Link.fromSpot</a></li>
|
|
|
|
<li><a href="../symbols/Link.html#toSpot" class="linkProperty">Link.toSpot</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="position" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
position
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{<a href="../symbols/Point.html" class="linkConstructor">Point</a>}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the position of this GraphObject in container coordinates
|
|
(either a <a href="../symbols/Panel.html" class="linkConstructor">Panel</a> or the document).<span class="nodetails" id="xpropposition"><a class="morelink" onclick="hst('propposition')">More...</a></span> <span class="details" id="propposition">
|
|
Value must be of type Point.
|
|
Default is Point(NaN, NaN).
|
|
</span><div class="details" id="dpropposition"><p>
|
|
For <a href="../symbols/Part.html" class="linkConstructor">Part</a>s, see also <a href="../symbols/Part.html#location" class="linkProperty">Part.location</a>.</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="row" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
row
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{number}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the row of this GraphObject if it is in a Table <a href="../symbols/Panel.html" class="linkConstructor">Panel</a>.<span class="nodetails" id="xproprow"><a class="morelink" onclick="hst('proprow')">More...</a></span> <span class="details" id="proprow">
|
|
The value cannot be negative. The default is 0.</span>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="rowSpan" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
rowSpan
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{number}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the number of rows spanned by this GraphObject if it is in a Table <a href="../symbols/Panel.html" class="linkConstructor">Panel</a>.<span class="nodetails" id="xproprowSpan"><a class="morelink" onclick="hst('proprowSpan')">More...</a></span> <span class="details" id="proprowSpan">
|
|
The value cannot be negative or zero. The default is 1.</span>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="scale" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
scale
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{number}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the scale transform of this GraphObject.<span class="nodetails" id="xpropscale"><a class="morelink" onclick="hst('propscale')">More...</a></span> <span class="details" id="propscale">
|
|
Value must be a number; larger values will make this object appear bigger.
|
|
Default is 1.</span>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/GraphObject.html#angle" class="linkProperty">angle</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#stretch" class="linkProperty">stretch</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="segmentFraction" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
segmentFraction
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{number}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the fractional distance along a segment of a GraphObject that is in a <a href="../symbols/Link.html" class="linkConstructor">Link</a>.<span class="nodetails" id="xpropsegmentFraction"><a class="morelink" onclick="hst('propsegmentFraction')">More...</a></span> <span class="details" id="propsegmentFraction">
|
|
The value should be between zero and one, where zero is at the point at the start of the segment,
|
|
and where one is at the point at the end of the segment.
|
|
The default value is zero.
|
|
</span><div class="details" id="dpropsegmentFraction"><p>
|
|
For examples of how to use this property, see <a href="../../intro/linkLabels.html">Link Labels</a>.</div>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/GraphObject.html#segmentIndex" class="linkProperty">segmentIndex</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#segmentOffset" class="linkProperty">segmentOffset</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#segmentOrientation" class="linkProperty">segmentOrientation</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="segmentIndex" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
segmentIndex
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{number}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the segment index of a GraphObject that is in a <a href="../symbols/Link.html" class="linkConstructor">Link</a>.<span class="nodetails" id="xpropsegmentIndex"><a class="morelink" onclick="hst('propsegmentIndex')">More...</a></span> <span class="details" id="propsegmentIndex">
|
|
Non-negative numbers count up from zero, which is the first segment, at the "from" end of the Link.
|
|
Negative numbers count segments from the "to" end of the Link, where -1 means the last segment
|
|
and -2 means the next-to-last segment.
|
|
The value should be an integer.
|
|
</span><div class="details" id="dpropsegmentIndex"><p>
|
|
If you do not set this property, the Link will choose a place that is approximately at the
|
|
mid-point of the link's route.
|
|
<p>
|
|
For examples of how to use this property, see <a href="../../intro/linkLabels.html">Link Labels</a>.</div>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/GraphObject.html#segmentFraction" class="linkProperty">segmentFraction</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#segmentOffset" class="linkProperty">segmentOffset</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#segmentOrientation" class="linkProperty">segmentOrientation</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="segmentOffset" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
segmentOffset
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{<a href="../symbols/Point.html" class="linkConstructor">Point</a>}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the offset of a GraphObject that is in a <a href="../symbols/Link.html" class="linkConstructor">Link</a> from a point on a segment
|
|
or in a <a href="../symbols/Panel.html#Graduated" class="linkConstant">Panel.Graduated</a> from a point along the main element.<span class="nodetails" id="xpropsegmentOffset"><a class="morelink" onclick="hst('propsegmentOffset')">More...</a></span> <span class="details" id="propsegmentOffset">
|
|
The X component of the Point indicates the distance along the route,
|
|
with positive values going further toward the "to" end of the link or panel.
|
|
The Y component of the Point indicates the distance away from the route,
|
|
with positive values towards the right as seen when facing further towards the "to" end of the link or panel.
|
|
The value defaults to the Point (0, 0).
|
|
</span><div class="details" id="dpropsegmentOffset"><p>
|
|
For labels that are near either end of a link, it may be convenient to set the segmentOffset
|
|
to Point(NaN, NaN). This causes the offset to be half the width and half the height of the label object.
|
|
<p>
|
|
For examples of how to use this property, see <a href="../../intro/linkLabels.html">Link Labels</a>.</div>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/GraphObject.html#segmentFraction" class="linkProperty">segmentFraction</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#segmentIndex" class="linkProperty">segmentIndex</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#segmentOrientation" class="linkProperty">segmentOrientation</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="segmentOrientation" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
segmentOrientation
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{EnumValue}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the orientation of a GraphObject that is in a <a href="../symbols/Link.html" class="linkConstructor">Link</a> or <a href="../symbols/Panel.html#Graduated" class="linkConstant">Panel.Graduated</a>.<span class="nodetails" id="xpropsegmentOrientation"><a class="morelink" onclick="hst('propsegmentOrientation')">More...</a></span> <span class="details" id="propsegmentOrientation">
|
|
This controls the automatic rotation of the object by the Link Panel or Graduated Panel.
|
|
The only accepted values are the <a href="../symbols/Link.html" class="linkConstructor">Link</a> "Orient..." values of Link
|
|
and the default value: <a href="../symbols/Link.html#None" class="linkConstant">Link.None</a>.
|
|
</span><div class="details" id="dpropsegmentOrientation"><p>
|
|
When the value is <a href="../symbols/Link.html#None" class="linkConstant">Link.None</a>, the <a href="../symbols/GraphObject.html#angle" class="linkProperty">angle</a> of this object is unchanged as the link is routed.
|
|
Setting this to a value of <a href="../symbols/Link.html#OrientAlong" class="linkConstant">Link.OrientAlong</a> will cause routing to set the <a href="../symbols/GraphObject.html#angle" class="linkProperty">angle</a>
|
|
to be the angle of the segment that this object is on.
|
|
Other values compute the angle somewhat differently.
|
|
If the value is changed back to <a href="../symbols/Link.html#None" class="linkConstant">Link.None</a>, the <a href="../symbols/GraphObject.html#angle" class="linkProperty">angle</a> of this object is set to zero.
|
|
<p>
|
|
Note that when this property is not <a href="../symbols/Link.html#None" class="linkConstant">Link.None</a>, this property takes precedence
|
|
over any setting or binding of the <a href="../symbols/GraphObject.html#angle" class="linkProperty">angle</a> property.
|
|
Changes to the angle caused by orientation might not result in Changed events,
|
|
and any original value for the angle may be lost.
|
|
<p>
|
|
For examples of how to use this property, see <a href="../../intro/linkLabels.html">Link Labels</a>.</div>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/GraphObject.html#segmentFraction" class="linkProperty">segmentFraction</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#segmentIndex" class="linkProperty">segmentIndex</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#segmentOffset" class="linkProperty">segmentOffset</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="shadowVisible" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
shadowVisible
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{boolean|null}</span>
|
|
|
|
<span class="since" title="since">1.6</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets whether or not this GraphObject will be shadowed inside a Part that has <a href="../symbols/Part.html#isShadowed" class="linkProperty">Part.isShadowed</a> set to true.<span class="nodetails" id="xpropshadowVisible"><a class="morelink" onclick="hst('propshadowVisible')">More...</a></span> <span class="details" id="propshadowVisible">
|
|
</span><div class="details" id="dpropshadowVisible"><p>
|
|
The default is null, which means this GraphObject will obey the default shadow rules (see <a href="../symbols/Part.html#isShadowed" class="linkProperty">Part.isShadowed</a>).
|
|
<p>
|
|
A value of true or false will ensure that this part is shadowed or not regardless of the default shadow rules,
|
|
but this GraphObject's shadowed status will not affect other GraphObjects in the Part.
|
|
<p>
|
|
Typically this property does not need to be set, but you may need to set this value to false
|
|
on GraphObjects inside a Part that you do not wish to be shadowed.</div>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/Part.html#isShadowed" class="linkProperty">Part.isShadowed</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="stretch" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
stretch
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{EnumValue}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the stretch of the GraphObject.<span class="nodetails" id="xpropstretch"><a class="morelink" onclick="hst('propstretch')">More...</a></span> <span class="details" id="propstretch">
|
|
This controls whether the width and/or height of this object automatically adjusts to fill
|
|
the area allotted by the containing Panel.
|
|
</span><div class="details" id="dpropstretch"><p>
|
|
The only accepted values are listed as constant properties of GraphObject,
|
|
such as <a href="../symbols/GraphObject.html#None" class="linkConstant">GraphObject.None</a>, <a href="../symbols/GraphObject.html#Fill" class="linkConstant">GraphObject.Fill</a>, <a href="../symbols/GraphObject.html#Horizontal" class="linkConstant">GraphObject.Horizontal</a>, or <a href="../symbols/GraphObject.html#Vertical" class="linkConstant">GraphObject.Vertical</a>.
|
|
The default value is <a href="../symbols/GraphObject.html#Default" class="linkConstant">GraphObject.Default</a>, which allows the Panel to decide how to treat this object, depending on the type of Panel.
|
|
<p>
|
|
Objects with an angle that are stretched may look incorrect unless the angle is a multiple of 90.</div>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/Panel.html#defaultStretch" class="linkProperty">Panel.defaultStretch</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#desiredSize" class="linkProperty">desiredSize</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#minSize" class="linkProperty">minSize</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#maxSize" class="linkProperty">maxSize</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#measuredBounds" class="linkProperty">measuredBounds</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#actualBounds" class="linkProperty">actualBounds</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#scale" class="linkProperty">scale</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#angle" class="linkProperty">angle</a></li>
|
|
|
|
<li><a href="../symbols/Picture.html#imageStretch" class="linkProperty">Picture.imageStretch</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="toEndSegmentLength" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
toEndSegmentLength
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{number}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the length of the last segment of a link going to this port.<span class="nodetails" id="xproptoEndSegmentLength"><a class="morelink" onclick="hst('proptoEndSegmentLength')">More...</a></span> <span class="details" id="proptoEndSegmentLength">
|
|
This value is used when the computed "to spot" is not <a href="../symbols/Spot.html#None" class="linkConstant">Spot.None</a>.
|
|
The default value is 10.
|
|
</span><div class="details" id="dproptoEndSegmentLength"><p>
|
|
The value of <a href="../symbols/Link.html#toEndSegmentLength" class="linkProperty">Link.toEndSegmentLength</a>, if not NaN, takes precedence over the value at this port
|
|
when determining the route of the link.
|
|
This value also limits how short the <a href="../symbols/Link.html#toShortLength" class="linkProperty">Link.toShortLength</a> may be drawn.
|
|
<p>
|
|
For examples of how to use this property, see <a href="../../intro/connectionPoints.html">Link Connection Points</a>.
|
|
<p>
|
|
You must set this property on a GraphObject whose <a href="../symbols/GraphObject.html#portId" class="linkProperty">portId</a> is non-null,
|
|
unless the whole <a href="../symbols/Node.html" class="linkConstructor">Node</a> is acting as a single port,
|
|
in which case this property should be set on the Node.</div>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/Link.html#toEndSegmentLength" class="linkProperty">Link.toEndSegmentLength</a></li>
|
|
|
|
<li><a href="../symbols/Link.html#computeEndSegmentLength" class="linkMethod">Link.computeEndSegmentLength</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#fromEndSegmentLength" class="linkProperty">fromEndSegmentLength</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#portId" class="linkProperty">portId</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="toLinkable" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
toLinkable
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{boolean|null}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets whether the user may draw Links to this port.<span class="nodetails" id="xproptoLinkable"><a class="morelink" onclick="hst('proptoLinkable')">More...</a></span> <span class="details" id="proptoLinkable">
|
|
This property is used by <a href="../symbols/LinkingBaseTool.html#isValidTo" class="linkMethod">LinkingBaseTool.isValidTo</a>.
|
|
</span><div class="details" id="dproptoLinkable"><p>
|
|
The default value is null, which indicates that the real value is inherited from
|
|
the parent <a href="../symbols/Panel.html" class="linkConstructor">Panel</a>, or false if there is no containing panel.
|
|
<p>
|
|
You must set this property on a GraphObject whose <a href="../symbols/GraphObject.html#portId" class="linkProperty">portId</a> is non-null,
|
|
unless the whole <a href="../symbols/Node.html" class="linkConstructor">Node</a> is acting as a single port,
|
|
in which case this property should be set on the Node,
|
|
or unless you are disabling the "linkability" of a particular GraphObject
|
|
inside a Panel whose toLinkable has been set or bound to true.</div>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/GraphObject.html#fromLinkable" class="linkProperty">fromLinkable</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#toMaxLinks" class="linkProperty">toMaxLinks</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#portId" class="linkProperty">portId</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#cursor" class="linkProperty">cursor</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="toLinkableDuplicates" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
toLinkableDuplicates
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{boolean}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets whether the user may draw duplicate Links to this port.<span class="nodetails" id="xproptoLinkableDuplicates"><a class="morelink" onclick="hst('proptoLinkableDuplicates')">More...</a></span> <span class="details" id="proptoLinkableDuplicates">
|
|
This property is used by <a href="../symbols/LinkingBaseTool.html#isValidLink" class="linkMethod">LinkingBaseTool.isValidLink</a>.
|
|
The default value is false.
|
|
</span><div class="details" id="dproptoLinkableDuplicates"><p>
|
|
You must set this property on a GraphObject whose <a href="../symbols/GraphObject.html#portId" class="linkProperty">portId</a> is non-null,
|
|
unless the whole <a href="../symbols/Node.html" class="linkConstructor">Node</a> is acting as a single port,
|
|
in which case this property should be set on the Node.</div>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/GraphObject.html#toLinkable" class="linkProperty">toLinkable</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#toLinkableSelfNode" class="linkProperty">toLinkableSelfNode</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#fromLinkableDuplicates" class="linkProperty">fromLinkableDuplicates</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="toLinkableSelfNode" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
toLinkableSelfNode
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{boolean}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets whether the user may draw Links that connect to this port's Node.<span class="nodetails" id="xproptoLinkableSelfNode"><a class="morelink" onclick="hst('proptoLinkableSelfNode')">More...</a></span> <span class="details" id="proptoLinkableSelfNode">
|
|
This property is used by <a href="../symbols/LinkingBaseTool.html#isValidLink" class="linkMethod">LinkingBaseTool.isValidLink</a>.
|
|
The default value is false.
|
|
</span><div class="details" id="dproptoLinkableSelfNode"><p>
|
|
You must set this property on a GraphObject whose <a href="../symbols/GraphObject.html#portId" class="linkProperty">portId</a> is non-null,
|
|
unless the whole <a href="../symbols/Node.html" class="linkConstructor">Node</a> is acting as a single port,
|
|
in which case this property should be set on the Node.</div>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/GraphObject.html#toLinkable" class="linkProperty">toLinkable</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#toLinkableDuplicates" class="linkProperty">toLinkableDuplicates</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#fromLinkableSelfNode" class="linkProperty">fromLinkableSelfNode</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="toMaxLinks" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
toMaxLinks
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{number}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the maximum number of links that may go into this port.<span class="nodetails" id="xproptoMaxLinks"><a class="morelink" onclick="hst('proptoMaxLinks')">More...</a></span> <span class="details" id="proptoMaxLinks">
|
|
This property is used by <a href="../symbols/LinkingBaseTool.html#isValidTo" class="linkMethod">LinkingBaseTool.isValidTo</a>.
|
|
</span><div class="details" id="dproptoMaxLinks"><p>
|
|
The value must be non-negative.
|
|
The default value is Infinity.
|
|
<p>
|
|
You must set this property on a GraphObject whose <a href="../symbols/GraphObject.html#portId" class="linkProperty">portId</a> is non-null,
|
|
unless the whole <a href="../symbols/Node.html" class="linkConstructor">Node</a> is acting as a single port,
|
|
in which case this property should be set on the Node.</div>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/GraphObject.html#toLinkable" class="linkProperty">toLinkable</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#fromMaxLinks" class="linkProperty">fromMaxLinks</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#portId" class="linkProperty">portId</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="toolTip" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
toolTip
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{<a href="../symbols/Adornment.html" class="linkConstructor">Adornment</a>|<a href="../symbols/HTMLInfo.html" class="linkConstructor">HTMLInfo</a>}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>This <a href="../symbols/Adornment.html" class="linkConstructor">Adornment</a> or <a href="../symbols/HTMLInfo.html" class="linkConstructor">HTMLInfo</a> is shown when the mouse hovers over this object.<span class="nodetails" id="xproptoolTip"><a class="morelink" onclick="hst('proptoolTip')">More...</a></span> <span class="details" id="proptoolTip">
|
|
The default value is null, which means no tooltip is shown.
|
|
</span><div class="details" id="dproptoolTip"><p>
|
|
A typical tooltip is defined in the following manner, as taken from
|
|
the <a href="../../samples/kittenMonitor.html">Kitten Monitor sample</a>:
|
|
<pre>
|
|
myDiagram.nodeTemplate =
|
|
$(go.Node,
|
|
. . .
|
|
{ // this tooltip shows the name and picture of the kitten
|
|
toolTip:
|
|
$(go.Adornment, "Auto",
|
|
$(go.Shape, { fill: "lightyellow" }),
|
|
$(go.Panel, "Vertical",
|
|
$(go.Picture,
|
|
new go.Binding("source", "src", function(s) { return "images/" + s + ".png"; })),
|
|
$(go.TextBlock, { margin: 3 },
|
|
new go.Binding("text", "key"))))
|
|
});
|
|
</pre>
|
|
Note that this Adornment depends on having the same data binding as the adorned Part
|
|
(i.e. the same value for <a href="../symbols/Panel.html#data" class="linkProperty">Panel.data</a>).
|
|
<p>
|
|
Tooltips are not copied by <a href="../symbols/GraphObject.html#copy" class="linkMethod">copy</a>, so that tooltips may be shared by all instances of a template.
|
|
<p>
|
|
Tooltips are shown after a timed delay given by the <a href="../symbols/ToolManager.html#hoverDelay" class="linkProperty">ToolManager.hoverDelay</a>.
|
|
You can change the delay time by:
|
|
<pre>
|
|
myDiagram =
|
|
$(go.Diagram, "myDiagramDiv",
|
|
{ "toolManager.hoverDelay": 500 }); // 500 milliseconds
|
|
</pre>
|
|
or:
|
|
<pre>
|
|
myDiagram.toolManager.hoverDelay = 500; // 500 milliseconds
|
|
</pre>
|
|
<p>
|
|
Tooltips are normally positioned by <a href="../symbols/ToolManager.html#positionToolTip" class="linkMethod">ToolManager.positionToolTip</a>.
|
|
However, if there is a <a href="../symbols/Placeholder.html" class="linkConstructor">Placeholder</a> in the tooltip, the tooltip (i.e. an Adornment)
|
|
will be positioned so that the Placeholder is at the same position as this adorned GraphObject.
|
|
<p>
|
|
Replacing this value will not modify or remove any existing tooltip that is being shown for this object.
|
|
<p>
|
|
Read more about tooltips at <a href="../../intro/toolTips.html">ToolTips</a>.</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="toShortLength" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
toShortLength
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{number}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets how far the end segment of a link going to this port stops short of the actual port.<span class="nodetails" id="xproptoShortLength"><a class="morelink" onclick="hst('proptoShortLength')">More...</a></span> <span class="details" id="proptoShortLength">
|
|
Positive values are limited by the <a href="../symbols/GraphObject.html#toEndSegmentLength" class="linkProperty">toEndSegmentLength</a> or <a href="../symbols/Link.html#toEndSegmentLength" class="linkProperty">Link.toEndSegmentLength</a>.
|
|
Negative values cause the link to extend into the port.
|
|
The default value is zero.
|
|
</span><div class="details" id="dproptoShortLength"><p>
|
|
This property is useful when you have a thick link and a pointy arrowhead.
|
|
Normally the link Shape extends all the way to the end of the arrowhead.
|
|
If the link Shape is wide, its edges will be seen behind the arrowhead.
|
|
By setting this property to a small positive value, the link Shape can end within the
|
|
body of the arrowhead, leaving only the point of the arrowhead visible at the end of the link.
|
|
<p>
|
|
A negative value for this property can also be useful when you want the link Shape to continue
|
|
into the port, perhaps because a portion of the port is transparent and you want the link to
|
|
appear to connect visually with a different point on the node.
|
|
<p>
|
|
The value of <a href="../symbols/Link.html#toShortLength" class="linkProperty">Link.toShortLength</a>, if not NaN, takes precedence over the value at this port
|
|
when determining the route of the link.
|
|
<p>
|
|
For examples of how to use this property, see <a href="../../intro/connectionPoints.html">Link Connection Points</a>.
|
|
<p>
|
|
You must set this property on a GraphObject whose <a href="../symbols/GraphObject.html#portId" class="linkProperty">portId</a> is non-null,
|
|
unless the whole <a href="../symbols/Node.html" class="linkConstructor">Node</a> is acting as a single port,
|
|
in which case this property should be set on the Node.</div>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/GraphObject.html#fromShortLength" class="linkProperty">fromShortLength</a></li>
|
|
|
|
<li><a href="../symbols/Link.html#toShortLength" class="linkProperty">Link.toShortLength</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#portId" class="linkProperty">portId</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="toSpot" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
toSpot
|
|
</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 where a link should connect to this port.<span class="nodetails" id="xproptoSpot"><a class="morelink" onclick="hst('proptoSpot')">More...</a></span> <span class="details" id="proptoSpot">
|
|
The default value is <a href="../symbols/Spot.html#None" class="linkConstant">Spot.None</a>, meaning that the link routing
|
|
must consider the shape of the port and connect to closest point.
|
|
</span><div class="details" id="dproptoSpot"><p>
|
|
The value of <a href="../symbols/Link.html#toSpot" class="linkProperty">Link.toSpot</a>, if not <a href="../symbols/Spot.html#Default" class="linkConstant">Spot.Default</a>, takes precedence over the value at this port
|
|
when determining the route of the link.
|
|
<p>
|
|
For examples of how to use this property, see <a href="../../intro/connectionPoints.html">Link Connection Points</a>.
|
|
<p>
|
|
You must set this property on a GraphObject whose <a href="../symbols/GraphObject.html#portId" class="linkProperty">portId</a> is non-null,
|
|
unless the whole <a href="../symbols/Node.html" class="linkConstructor">Node</a> is acting as a single port,
|
|
in which case this property should be set on the Node.</div>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/Link.html#toSpot" class="linkProperty">Link.toSpot</a></li>
|
|
|
|
<li><a href="../symbols/Link.html#computeSpot" class="linkMethod">Link.computeSpot</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#fromSpot" class="linkProperty">fromSpot</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#portId" class="linkProperty">portId</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="visible" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
visible
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{boolean}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets whether a GraphObject is visible.<span class="nodetails" id="xpropvisible"><a class="morelink" onclick="hst('propvisible')">More...</a></span> <span class="details" id="propvisible">
|
|
The default value is true.
|
|
A not visible object takes no space in the Panel that it is in.
|
|
Toggling visibility may cause elements in the visual tree to re-measure and re-arrange.
|
|
Making a Panel not visible causes all of its elements not to be seen or receive input events.
|
|
Changing a Panel to become visible causes all of its elements to be seen and be active,
|
|
unless those elements are themselves not visible.
|
|
</span><div class="details" id="dpropvisible"><p>
|
|
This object does not get any mouse/touch events if it is not <a href="../symbols/GraphObject.html#visible" class="linkProperty">visible</a>
|
|
or if it is not <a href="../symbols/GraphObject.html#pickable" class="linkProperty">pickable</a>.
|
|
<p>
|
|
One can have a visible <a href="../symbols/Shape.html" class="linkConstructor">Shape</a> that is not drawn by setting its <a href="../symbols/Shape.html#fill" class="linkProperty">Shape.fill</a>
|
|
and <a href="../symbols/Shape.html#stroke" class="linkProperty">Shape.stroke</a> to null or to <code>"transparent"</code>.
|
|
Similarly, one can set <a href="../symbols/TextBlock.html#stroke" class="linkProperty">TextBlock.stroke</a> to null or to <code>"transparent"</code>.
|
|
It is also possible make a GraphObjects transparent by setting <a href="../symbols/GraphObject.html#opacity" class="linkProperty">GraphObject.opacity</a> to 0.
|
|
Finally, one can make a whole <a href="../symbols/Layer.html" class="linkConstructor">Layer</a>-full of Parts invisible by setting <a href="../symbols/Layer.html#visible" class="linkProperty">Layer.visible</a> to false.
|
|
<p>
|
|
Use the <a href="../symbols/GraphObject.html#isVisibleObject" class="linkMethod">isVisibleObject</a> predicate to see if this GraphObject is visible and is inside a <a href="../symbols/Panel.html" class="linkConstructor">Panel</a>
|
|
that is <a href="../symbols/GraphObject.html#isVisibleObject" class="linkMethod">isVisibleObject</a>, and so forth up the chain of panels until reaching the <a href="../symbols/Part.html" class="linkConstructor">Part</a>.
|
|
<p>
|
|
For <a href="../symbols/Part.html" class="linkConstructor">Part</a>s, you can call the <a href="../symbols/Part.html#isVisible" class="linkMethod">Part.isVisible</a> predicate to determine
|
|
if not only the Part is visible but also any containing <a href="../symbols/Group.html" class="linkConstructor">Group</a> or <a href="../symbols/Link.html" class="linkConstructor">Link</a>,
|
|
and whether the <a href="../symbols/Layer.html" class="linkConstructor">Layer</a> it is in is visible.</div>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/GraphObject.html#opacity" class="linkProperty">opacity</a></li>
|
|
|
|
<li><a href="../symbols/GraphObject.html#pickable" class="linkProperty">pickable</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="width" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
width
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{number}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the desired width of this GraphObject in local coordinates.<span class="nodetails" id="xpropwidth"><a class="morelink" onclick="hst('propwidth')">More...</a></span> <span class="details" id="propwidth">
|
|
This just gets or sets the width component of the <a href="../symbols/GraphObject.html#desiredSize" class="linkProperty">desiredSize</a>.
|
|
Default is NaN.
|
|
The width does not include any transformation due to <a href="../symbols/GraphObject.html#scale" class="linkProperty">scale</a> or <a href="../symbols/GraphObject.html#angle" class="linkProperty">angle</a>,
|
|
nor any pen thickness due to <a href="../symbols/Shape.html#strokeWidth" class="linkProperty">Shape.strokeWidth</a> if this is a <a href="../symbols/Shape.html" class="linkConstructor">Shape</a>.
|
|
If there is a containing <a href="../symbols/Panel.html" class="linkConstructor">Panel</a> the Panel will determine the actual size.</span>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
</div><!-- class="table-responsive">-->
|
|
|
|
|
|
|
|
|
|
|
|
<!-- ============================== methods summary ======================== -->
|
|
|
|
|
|
|
|
<h2 class="summaryCaption">Method <span class="nodetails"> Summary</span><span class="details"> Details</span></h2>
|
|
<div class="table-responsive">
|
|
<table class="summaryTable table table-bordered table-condensed" summary="A summary of the methods documented in the class GraphObject.">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col" class="name">Name, Return Type</th>
|
|
<th scope="col" class="description">Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
|
|
<tr id="bind">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
bind(binding)
|
|
</div>
|
|
<div class="attributes">
|
|
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Add a data-binding of a property on this GraphObject to a property on a data object.<span class="nodetails" id="xmethbind"><a class="morelink" onclick="hst('methbind')">More...</a></span> <span class="details" id="methbind">
|
|
</span><div class="details" id="dmethbind"><p>
|
|
Read more about <a href="../symbols/Binding.html" class="linkConstructor">Binding</a>s at <a href="../../intro/dataBinding.html">the Introduction page about Data Bindings</a>.</div>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Parameters:</dt>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{<a href="../symbols/Binding.html" class="linkConstructor">Binding</a>}</span> <b>binding</b>
|
|
|
|
</dt>
|
|
<dd></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/GraphObject.html" class="linkConstructor">GraphObject</a>}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Creates a deep copy of this GraphObject and returns it.<span class="nodetails" id="xmethcopy"><a class="morelink" onclick="hst('methcopy')">More...</a></span> <span class="details" id="methcopy">
|
|
This method is the same as a clone for simple GraphObjects
|
|
such as <a href="../symbols/Shape.html" class="linkConstructor">Shape</a>, <a href="../symbols/TextBlock.html" class="linkConstructor">TextBlock</a>, and <a href="../symbols/Picture.html" class="linkConstructor">Picture</a>.
|
|
For <a href="../symbols/Panel.html" class="linkConstructor">Panel</a> this method copies the visual tree of GraphObjects that it contains.</span>
|
|
|
|
|
|
|
|
<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=".defineBuilder">
|
|
<td class="name">
|
|
<static>
|
|
<div class="name">
|
|
GraphObject.defineBuilder(name, func)
|
|
</div>
|
|
<div class="attributes">
|
|
|
|
|
|
<span class="since" title="since">1.5</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>This static function defines a named function that <a href="../symbols/GraphObject.html#.make" class="linkStatic">GraphObject.make</a> can use to build objects.<span class="nodetails" id="xmethdefineBuilder"><a class="morelink" onclick="hst('methdefineBuilder')">More...</a></span> <span class="details" id="methdefineBuilder">
|
|
Once this is called one can use the name as the first argument for <a href="../symbols/GraphObject.html#.make" class="linkStatic">GraphObject.make</a>.
|
|
Names are case sensitive.
|
|
</span><div class="details" id="dmethdefineBuilder"><p>
|
|
The second argument must be a function that returns a newly created object, typically a <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>.
|
|
It is commonplace for that object to be a <a href="../symbols/Panel.html" class="linkConstructor">Panel</a> holding a newly created visual tree of GraphObjects.
|
|
The function receives as its only argument an Array that is holds all of the arguments that are being
|
|
passed to <a href="../symbols/GraphObject.html#.make" class="linkStatic">GraphObject.make</a>, which it may modify in order to change the arguments that GraphObject.make receives.
|
|
<p>
|
|
Predefined builder names include: <code>"Button"</code>, <code>"TreeExpanderButton"</code>, <code>"SubGraphExpanderButton"</code>,
|
|
<code>"PanelExpanderButton"</code>, and <code>"ContextMenuButton"</code>.
|
|
The implementation of these builders is provided by <a href="../../extensions/Buttons.js">Buttons.js</a>
|
|
in the Extensions directory.</div>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Parameters:</dt>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{string}</span> <b>name</b>
|
|
|
|
</dt>
|
|
<dd>a capitalized name; must not be <code>""</code> or <code>"None"</code></dd>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{function(Array.<*>):Object}</span> <b>func</b>
|
|
|
|
</dt>
|
|
<dd>that takes an Array of <code>GraphObject.make</code> arguments and returns a new object</dd>
|
|
|
|
</dl>
|
|
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="getDocumentAngle">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
getDocumentAngle()
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{number}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Returns the effective angle that the object is drawn at, in document coordinates, normalized to between 0 and 360.<span class="nodetails" id="xmethgetDocumentAngle"><a class="morelink" onclick="hst('methgetDocumentAngle')">More...</a></span> <span class="details" id="methgetDocumentAngle">
|
|
</span><div class="details" id="dmethgetDocumentAngle"><p>
|
|
Basically this adds together all of the rotation declared by this <a href="../symbols/GraphObject.html#angle" class="linkProperty">angle</a> and the angles of all of its containing Panels, including the Part.</div>
|
|
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Returns:</dt>
|
|
|
|
<dt><span class="light fixedFont">{number}</span> </dt>
|
|
|
|
</dl>
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="getDocumentPoint">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
getDocumentPoint(local, result)
|
|
</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>Returns the Point in document coordinates for a given Spot in this object's bounds
|
|
or for a Point in local coordinates.<span class="nodetails" id="xmethgetDocumentPoint"><a class="morelink" onclick="hst('methgetDocumentPoint')">More...</a></span> <span class="details" id="methgetDocumentPoint">
|
|
</span><div class="details" id="dmethgetDocumentPoint"><p>
|
|
For example, for an instance of a Node like this:
|
|
<pre>
|
|
myDiagram.nodeTemplate =
|
|
$(go.Node, "Auto",
|
|
$(go.Shape, "RoundedRectangle",
|
|
new go.Binding("fill", "color")),
|
|
$(go.TextBlock,
|
|
{ name: "TB", margin: 3 },
|
|
new go.Binding("text", "key")));
|
|
</pre>
|
|
where the Node is positioned at <code>100, 200</code>,
|
|
<pre>
|
|
node.findObject("TB").getDocumentPoint(go.Spot.Center)
|
|
</pre>
|
|
could return a Point that is approximately at <code>122, 213</code>.</div>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Parameters:</dt>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{<a href="../symbols/Spot.html" class="linkConstructor">Spot</a>|<a href="../symbols/Point.html" class="linkConstructor">Point</a>}</span> <b>local</b>
|
|
|
|
</dt>
|
|
<dd>a real Spot describing a relative location in or near this GraphObject, or a real Point in local coordinates.</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> in document coordinates.</dt>
|
|
|
|
</dl>
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="getDocumentScale">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
getDocumentScale()
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{number}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Returns the total scale that the object is drawn at, in document coordinates.<span class="nodetails" id="xmethgetDocumentScale"><a class="morelink" onclick="hst('methgetDocumentScale')">More...</a></span> <span class="details" id="methgetDocumentScale">
|
|
</span><div class="details" id="dmethgetDocumentScale"><p>
|
|
Basically this multiplies together this <a href="../symbols/GraphObject.html#scale" class="linkProperty">scale</a> with the scales of all of its containing Panels, including the Part.</div>
|
|
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Returns:</dt>
|
|
|
|
<dt><span class="light fixedFont">{number}</span> </dt>
|
|
|
|
</dl>
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="getLocalPoint">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
getLocalPoint(p, result)
|
|
</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>Given a Point in document coordinates, returns a new Point in local coordinates.<span class="nodetails" id="xmethgetLocalPoint"><a class="morelink" onclick="hst('methgetLocalPoint')">More...</a></span> <span class="details" id="methgetLocalPoint">
|
|
</span><div class="details" id="dmethgetLocalPoint"><p>
|
|
For example, if you have a mouse event whose <a href="../symbols/InputEvent.html#documentPoint" class="linkProperty">InputEvent.documentPoint</a> is at <code>122, 213</code>,
|
|
and if you have a Node whose <a href="../symbols/GraphObject.html#position" class="linkProperty">position</a> is at <code>100, 200</code>,
|
|
<code>node.getLocalPoint(e.documentPoint)</code> could return a Point that is at <code>22, 13</code>.
|
|
For a GraphObject within the Node named "TB",
|
|
<pre>
|
|
node.findObject("TB").getLocalPoint(e.documentPoint)
|
|
</pre>
|
|
could return a Point that is at <code>15.7, 6.7</code>,
|
|
if that "TB" object is positioned somewhat inside the bounds of the Node.</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>p</b>
|
|
|
|
</dt>
|
|
<dd>a real Point in document coordinates.</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> The corresponding Point in local coordinates.</dt>
|
|
|
|
</dl>
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="isContainedBy">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
isContainedBy(panel)
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{boolean}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>This predicate is true if this object is an element, perhaps indirectly,
|
|
of the given panel.<span class="nodetails" id="xmethisContainedBy"><a class="morelink" onclick="hst('methisContainedBy')">More...</a></span> <span class="details" id="methisContainedBy">
|
|
</span><div class="details" id="dmethisContainedBy"><p>
|
|
For example, if this GraphObject is inside a Part but is not itself the Part,
|
|
<code>obj.isContainedBy(obj.part)</code> should be true.</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>panel</b>
|
|
|
|
</dt>
|
|
<dd></dd>
|
|
|
|
</dl>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Returns:</dt>
|
|
|
|
<dt><span class="light fixedFont">{boolean}</span> true if this object is contained by the given panel,
|
|
or if it is contained by another panel that is contained by the given panel,
|
|
to any depth; false if the argument is null or is not a <a href="../symbols/Panel.html" class="linkConstructor">Panel</a>.</dt>
|
|
|
|
</dl>
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="isEnabledObject">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
isEnabledObject()
|
|
</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>This predicate is false if this object is inside any Panel that is not <a href="../symbols/Panel.html#isEnabled" class="linkProperty">Panel.isEnabled</a>,
|
|
or if this is itself a disabled panel.<span class="nodetails" id="xmethisEnabledObject"><a class="morelink" onclick="hst('methisEnabledObject')">More...</a></span> <span class="details" id="methisEnabledObject">
|
|
This ignores the <a href="../symbols/GraphObject.html#visible" class="linkProperty">visible</a> and <a href="../symbols/GraphObject.html#pickable" class="linkProperty">pickable</a> properties.</span>
|
|
|
|
</p><div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/GraphObject.html#enabledChanged" class="linkProperty">enabledChanged</a></li>
|
|
|
|
<li><a href="../symbols/Panel.html#isEnabled" class="linkProperty">Panel.isEnabled</a></li>
|
|
|
|
</ul></div>
|
|
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Returns:</dt>
|
|
|
|
<dt><span class="light fixedFont">{boolean}</span> </dt>
|
|
|
|
</dl>
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="isVisibleObject">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
isVisibleObject()
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{boolean}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>This predicate is true if this object is <a href="../symbols/GraphObject.html#visible" class="linkProperty">visible</a>
|
|
and each of its visual containing panels are also visible.<span class="nodetails" id="xmethisVisibleObject"><a class="morelink" onclick="hst('methisVisibleObject')">More...</a></span> <span class="details" id="methisVisibleObject">
|
|
This ignores the actual location or appearance (except visibility)
|
|
of the panel that this object is part of, as well as ignoring all
|
|
properties of the <a href="../symbols/Layer.html" class="linkConstructor">Layer</a> or <a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a>.
|
|
</span><div class="details" id="dmethisVisibleObject"><p>
|
|
For <a href="../symbols/Part.html" class="linkConstructor">Part</a>s, you can call the <a href="../symbols/Part.html#isVisible" class="linkMethod">Part.isVisible</a> predicate to determine
|
|
if not only the Part is visible but also any containing <a href="../symbols/Group.html" class="linkConstructor">Group</a> or <a href="../symbols/Link.html" class="linkConstructor">Link</a>.</div>
|
|
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Returns:</dt>
|
|
|
|
<dt><span class="light fixedFont">{boolean}</span> </dt>
|
|
|
|
</dl>
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id=".make">
|
|
<td class="name">
|
|
<static>
|
|
<div class="name">
|
|
GraphObject.make(type, initializers)
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{Object}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>This static function builds an object given its class and additional arguments
|
|
providing initial properties or <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>s that become <a href="../symbols/Panel.html" class="linkConstructor">Panel</a> elements.<span class="nodetails" id="xmethmake"><a class="morelink" onclick="hst('methmake')">More...</a></span> <span class="details" id="methmake">
|
|
</span><div class="details" id="dmethmake"><p>
|
|
The first argument must be the class type or the name of a class or the name of a predefined kind of Panel.
|
|
This function will construct a new instance of that type and use the rest of the arguments to initialize the object.
|
|
The first argument cannot be a regular Object (such as a GraphObject) that you are trying to initialize;
|
|
for that you can call <a href="../symbols/GraphObject.html#setProperties" class="linkMethod">setProperties</a> or <a href="../symbols/Diagram.html#setProperties" class="linkMethod">Diagram.setProperties</a>, although that would
|
|
be less efficient than setting properties directly.
|
|
<p>
|
|
If an initializer argument is an enumerated value, this tries to set the property that seems most appropriate.
|
|
<p>
|
|
If an initializer argument is a string, this sets a particular property depending on the type of object being built.
|
|
<ul>
|
|
<li>If the object is a <a href="../symbols/TextBlock.html" class="linkConstructor">TextBlock</a>, it sets <a href="../symbols/TextBlock.html#text" class="linkProperty">TextBlock.text</a>.</li>
|
|
<li>If the object is a <a href="../symbols/Shape.html" class="linkConstructor">Shape</a>, it sets <a href="../symbols/Shape.html#figure" class="linkProperty">Shape.figure</a>.</li>
|
|
<li>If the object is a <a href="../symbols/Picture.html" class="linkConstructor">Picture</a>, it sets <a href="../symbols/Picture.html#source" class="linkProperty">Picture.source</a>.</li>
|
|
<li>If the object is a <a href="../symbols/Panel.html" class="linkConstructor">Panel</a> (including <a href="../symbols/Part.html" class="linkConstructor">Part</a>, <a href="../symbols/Node.html" class="linkConstructor">Node</a>, or <a href="../symbols/Group.html" class="linkConstructor">Group</a>), it sets <a href="../symbols/Panel.html#type" class="linkProperty">Panel.type</a>.</li>
|
|
</ul>
|
|
<p>
|
|
If an initializer argument is a particular kind of object, this can add that object to the object being built.
|
|
<ul>
|
|
<li><a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>s and <a href="../symbols/RowColumnDefinition.html" class="linkConstructor">RowColumnDefinition</a>s can only be added as elements of <a href="../symbols/Panel.html" class="linkConstructor">Panel</a>s.</li>
|
|
<li><a href="../symbols/Binding.html" class="linkConstructor">Binding</a>s can only be applied to <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>s and <a href="../symbols/RowColumnDefinition.html" class="linkConstructor">RowColumnDefinition</a>s.</li>
|
|
<li><a href="../symbols/PathFigure.html" class="linkConstructor">PathFigure</a>s can only be added to <a href="../symbols/Geometry.html" class="linkConstructor">Geometry</a> objects.</li>
|
|
<li><a href="../symbols/PathSegment.html" class="linkConstructor">PathSegment</a>s can only be added to <a href="../symbols/PathFigure.html" class="linkConstructor">PathFigure</a> objects.</li>
|
|
<li>Regular JavaScript Arrays provide a sequence of initializer arguments.</li>
|
|
<li>Regular JavaScript objects provide property/value pairs that are set on the object being built.</li>
|
|
</ul>
|
|
When the initializer argument is a plain JavaScript Object, there are several ways that that object's properties are applied.
|
|
If the property name is a string with a period inside it, this has a special meaning if the object is a <a href="../symbols/Panel.html" class="linkConstructor">Panel</a> or a <a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a>.
|
|
At the current time only a single period separator is valid syntax for a property string, and it is valid only on Panels and Diagrams.
|
|
<p>
|
|
For Panels, the substring before the period is used as the name passed to <a href="../symbols/Panel.html#findObject" class="linkMethod">Panel.findObject</a>
|
|
to get the actual object on which to set the property, which is the substring after the period.
|
|
This is normally useful only on the predefined Panels:
|
|
<ul>
|
|
<li>a <b>"Button"</b> has a <a href="../symbols/Shape.html" class="linkConstructor">Shape</a> named "ButtonBorder" surrounding the content of the Panel.</li>
|
|
<li>a <b>"TreeExpanderButton"</b> has a "ButtonBorder" Shape and a "ButtonIcon" Shape that is the plus-or-minus sign.</li>
|
|
<li>a <b>"SubGraphExpanderButton"</b> has a "ButtonBorder" Shape and a "ButtonIcon" Shape that is the plus-or-minus sign.</li>
|
|
<li>a <b>"ContextMenuButton"</b> has a Shape named "ButtonBorder" surrounding the content of the Panel.</li>
|
|
</ul>
|
|
But you can define your own names that GraphObject.make can build by calling the static function <a href="../symbols/GraphObject.html#.defineBuilder" class="linkStatic">GraphObject.defineBuilder</a>.
|
|
<p>
|
|
For Diagrams, the substring before the period is used as the name of a property on the Diagram itself
|
|
to get the actual object on which to set the property.
|
|
As a special case, if such a property value does not exist on the Diagram, it looks on the <a href="../symbols/Diagram.html#toolManager" class="linkProperty">Diagram.toolManager</a>.
|
|
See some examples below.
|
|
<p>
|
|
Also for Diagrams, and only for Diagrams, if the property name is the name of a <a href="../symbols/DiagramEvent.html" class="linkConstructor">DiagramEvent</a>,
|
|
the property value must be a DiagramEvent listener function, and <a href="../symbols/Diagram.html#addDiagramListener" class="linkMethod">Diagram.addDiagramListener</a> is called
|
|
using that DiagramEvent name and that function.
|
|
Note that all DiagramEvent names are capitalized and do not contain any periods,
|
|
so there cannot be any name conflicts with any properties on <a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a> or <a href="../symbols/ToolManager.html" class="linkConstructor">ToolManager</a>.
|
|
Although you can register multiple listeners for the same DiagramEvent names, due to JavaScript limitations
|
|
those need to be declared using separate JavaScript objects, because JavaScript does not permit duplicate property names
|
|
in an Object literal.
|
|
<p>
|
|
Furthermore for Diagrams, if the property name is <code>"Changed"</code> or <code>"ModelChanged"</code>,
|
|
the property value must be a ChangedEvent listener function, which is called with a <a href="../symbols/ChangedEvent.html" class="linkConstructor">ChangedEvent</a> argument.
|
|
When the property name is <code>"Changed"</code>, it calls <a href="../symbols/Diagram.html#addChangedListener" class="linkMethod">Diagram.addChangedListener</a>,
|
|
notifying about changes to the Diagram or its Layers or GraphObjects.
|
|
When the property name is <code>"ModelChanged"</code>, it calls <a href="../symbols/Model.html#addChangedListener" class="linkMethod">Model.addChangedListener</a> on the <a href="../symbols/Diagram.html#model" class="linkProperty">Diagram.model</a>,
|
|
resulting in notifications about changes to the Model or its data.
|
|
This is handy because the <a href="../symbols/Diagram.html#model" class="linkProperty">Diagram.model</a> property setter will automatically call
|
|
<a href="../symbols/Model.html#removeChangedListener" class="linkMethod">Model.removeChangedListener</a> on the old model, thereby avoiding any overhead if there are any
|
|
more changes to the old model and also avoiding a reference to the listener which might cause garbage collection retention.
|
|
It also will call <a href="../symbols/Model.html#addChangedListener" class="linkMethod">Model.addChangedListener</a> on the new model, helping implement the same behavior with the new model.
|
|
<p>
|
|
If the property name is a number and if the object being constructed is a <a href="../symbols/Brush.html" class="linkConstructor">Brush</a>,
|
|
the number and value are added to the Brush by calling <a href="../symbols/Brush.html#addColorStop" class="linkMethod">Brush.addColorStop</a>.
|
|
<p>
|
|
Otherwise the property name is used as a regular property name on the object being built.
|
|
This tries to do some property name and value checking:
|
|
when a property is not defined on the object being built, it will signal an error.
|
|
Many typos can be found this way that would be ignored by JavaScript code.
|
|
<p>
|
|
If the property name begins with an underscore, this will not complain about the property being undefined.
|
|
Not only is that underscore property set on the object being built, but calls to <a href="../symbols/GraphObject.html#copy" class="linkMethod">copy</a>
|
|
will also copy the values of such named properties to the new objects.
|
|
<p>
|
|
In the samples and in the intro pages this function is called using the alias <code>$</code>.
|
|
You can use a different short name if you would like to preserve the use of <code>$</code> for another JavaScript library.
|
|
<pre>
|
|
var $ = go.GraphObject.make;
|
|
|
|
var diagram =
|
|
$(go.Diagram, "myDiagramDiv",
|
|
{
|
|
initialContentAlignment: go.Spot.Center,
|
|
// don't initialize some properties until after a new model has been loaded
|
|
"InitialLayoutCompleted": loadDiagramProperties,
|
|
allowZoom: false, // don't allow the user to change the diagram's scale
|
|
"grid.visible": true, // display a background grid for the whole diagram
|
|
"grid.gridCellSize": new go.Size(20, 20),
|
|
// allow double-click in background to create a new node
|
|
"clickCreatingTool.archetypeNodeData": { text: "Node" },
|
|
// allow Ctrl-G to call the groupSelection command
|
|
"commandHandler.archetypeGroupData":
|
|
{ text: "Group", isGroup: true, color: "blue" },
|
|
"toolManager.hoverDelay": 100, // how quickly tooltips are shown
|
|
// mouse wheel zooms instead of scrolls
|
|
"toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom,
|
|
"commandHandler.copiesTree": true, // for the copy command
|
|
"commandHandler.deletesTree": true, // for the delete command
|
|
"draggingTool.dragsTree": true, // dragging for both move and copy
|
|
"draggingTool.isGridSnapEnabled": true,
|
|
layout: $(go.TreeLayout,
|
|
{ angle: 90, sorting: go.TreeLayout.SortingAscending })
|
|
});
|
|
|
|
diagram.nodeTemplate =
|
|
$(go.Node, "Auto", // or go.Panel.Auto
|
|
new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
|
|
$(go.Shape, "RoundedRectangle",
|
|
{
|
|
fill: $(go.Brush, "Linear", { 0: "#FEC901", 1: "#FEA200" }),
|
|
stroke: "gray",
|
|
strokeWidth: 2,
|
|
strokeDashArray: [3, 3]
|
|
}),
|
|
$(go.TextBlock,
|
|
{ margin: 5, font: "bold 12pt sans-serif" },
|
|
new go.Binding("text", "key"))
|
|
);
|
|
</pre>
|
|
<p class="boxread">
|
|
See <a href="../../intro/buildingObjects.html">the Introduction page on building objects</a>
|
|
for usage information and examples of GraphObject.make.</div>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Parameters:</dt>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{Function|string}</span> <b>type</b>
|
|
|
|
</dt>
|
|
<dd>a class function or the name of a class in the <code>go</code> namespace,
|
|
or one of several predefined kinds of <a href="../symbols/Panel.html" class="linkConstructor">Panel</a>s: <code>"Button"</code>, <code>"TreeExpanderButton"</code>,
|
|
<code>"SubGraphExpanderButton"</code>, or <code>"ContextMenuButton"</code>.</dd>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{...*}</span> <b>initializers</b>
|
|
|
|
</dt>
|
|
<dd>zero or more values that initialize the new object,
|
|
typically an Object with properties whose values are set on the new object,
|
|
or a JavaScript Array with additional initializer arguments,
|
|
or a <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a> that is added to a <a href="../symbols/Panel.html" class="linkConstructor">Panel</a>,
|
|
or a <a href="../symbols/Binding.html" class="linkConstructor">Binding</a> for one of the new object's properties,
|
|
or a constant value as the initial value of a single property of the new object that
|
|
is recognized to take that value,
|
|
or a string that is used as the value of a commonly set property.</dd>
|
|
|
|
</dl>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Returns:</dt>
|
|
|
|
<dt><span class="light fixedFont">{Object}</span> </dt>
|
|
|
|
</dl>
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="setProperties">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
setProperties(props)
|
|
</div>
|
|
<div class="attributes">
|
|
|
|
|
|
<span class="since" title="since">1.5</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>This method sets a collection of properties according to the property/value pairs that have been set on the given Object,
|
|
in the same manner as <a href="../symbols/GraphObject.html#.make" class="linkStatic">GraphObject.make</a> does when constructing a GraphObject with an argument that is a simple JavaScript Object.<span class="nodetails" id="xmethsetProperties"><a class="morelink" onclick="hst('methsetProperties')">More...</a></span> <span class="details" id="methsetProperties">
|
|
</span><div class="details" id="dmethsetProperties"><p>
|
|
If this is a <a href="../symbols/Panel.html" class="linkConstructor">Panel</a>, you can set properties on named elements within the panel by using a <i>name.property</i> syntax for the property name.
|
|
For example, if a <a href="../symbols/Node.html" class="linkConstructor">Node</a> has a <a href="../symbols/Picture.html" class="linkConstructor">Picture</a> that is named "ICON" (because its <a href="../symbols/GraphObject.html#name" class="linkProperty">name</a> property has been set to "ICON")
|
|
and a <a href="../symbols/TextBlock.html" class="linkConstructor">TextBlock</a> whose name is "TB", one could set properties on the Node and on each of those named elements by:
|
|
<pre>
|
|
aNode.setProperties({
|
|
background: "red",
|
|
"ICON.source": "https://www.example.com/images/alert.jpg",
|
|
"TB.font": "bold 12pt sans-serif"
|
|
});
|
|
</pre>
|
|
<p>
|
|
At the current time only a single dot is permitted in the property "name".
|
|
Note that the use of all-upper-case object names is simply a convention.
|
|
<p>
|
|
Calling this method is much less efficient than setting properties directly.</div>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Parameters:</dt>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{Object}</span> <b>props</b>
|
|
|
|
</dt>
|
|
<dd>a plain JavaScript object with various property values to be set on this GraphObject.</dd>
|
|
|
|
</dl>
|
|
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id=".takeBuilderArgument">
|
|
<td class="name">
|
|
<static>
|
|
<div class="name">
|
|
GraphObject.takeBuilderArgument(args, defval, pred)
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{*}</span>
|
|
|
|
<span class="since" title="since">1.5</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>This static function returns the first argument from the arguments array passed
|
|
to a <a href="../symbols/GraphObject.html#.defineBuilder" class="linkStatic">GraphObject.defineBuilder</a> function by <a href="../symbols/GraphObject.html#.make" class="linkStatic">GraphObject.make</a>.<span class="nodetails" id="xmethtakeBuilderArgument"><a class="morelink" onclick="hst('methtakeBuilderArgument')">More...</a></span> <span class="details" id="methtakeBuilderArgument">
|
|
By default this requires the first argument to be a string,
|
|
but you can provide a predicate to determine whether the argument is suitable.</span>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Parameters:</dt>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{Array.<*>}</span> <b>args</b>
|
|
|
|
</dt>
|
|
<dd>the arguments Array passed to the builder function;
|
|
this may be modified if an acceptable argument is found and returned</dd>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{*=}</span> <b>defval</b>
|
|
|
|
</dt>
|
|
<dd>the default value to return if the argument is optional and not present as the first argument;
|
|
otherwise throw an error when the argument is not there</dd>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{function(*):boolean|null=}</span> <b>pred</b>
|
|
|
|
</dt>
|
|
<dd>a predicate to determine the acceptability of the argument;
|
|
the default predicate checks whether the argument is a string</dd>
|
|
|
|
</dl>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Returns:</dt>
|
|
|
|
<dt><span class="light fixedFont">{*}</span> </dt>
|
|
|
|
</dl>
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
</div><!-- class="table-responsive">-->
|
|
|
|
|
|
|
|
|
|
<!-- ============================== 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 GraphObject.">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col" class="name">Name</th>
|
|
<th scope="col" class="description">Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
|
|
<tr id="Default">
|
|
<td class="name">
|
|
<div class="name">
|
|
Default
|
|
|
|
|
|
<span class="light">{EnumValue}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>GraphObjects with this enumeration as the value of <a href="../symbols/GraphObject.html#stretch" class="linkProperty">GraphObject.stretch</a>
|
|
are stretched depending on the context they are used.<span class="nodetails" id="xfldDefault"><a class="morelink" onclick="hst('fldDefault')">More...</a></span> <span class="details" id="fldDefault"> For instance a 'Circle' figure might
|
|
be uniformly stretched whereas an 'Ellipse' figure might be non-uniformly stretched.</span>
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="Fill">
|
|
<td class="name">
|
|
<div class="name">
|
|
Fill
|
|
|
|
|
|
<span class="light">{EnumValue}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>GraphObjects with this enumeration as the value of <a href="../symbols/GraphObject.html#stretch" class="linkProperty">GraphObject.stretch</a>
|
|
are scaled in both directions so as to fit exactly in the given bounds;
|
|
there is no clipping but the aspect ratio may change, causing the object to appear stretched.
|
|
|
|
|
|
</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>GraphObjects with this enumeration as the value of <a href="../symbols/GraphObject.html#stretch" class="linkProperty">GraphObject.stretch</a>
|
|
are scaled as much as possible in the x-axis.
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="None">
|
|
<td class="name">
|
|
<div class="name">
|
|
None
|
|
|
|
|
|
<span class="light">{EnumValue}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>GraphObjects with this enumeration as the value of <a href="../symbols/GraphObject.html#stretch" class="linkProperty">GraphObject.stretch</a>
|
|
are not automatically scaled to fit in the given bounds;
|
|
there may be clipping in one or both directions if the available dimensions are too small.
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="Uniform">
|
|
<td class="name">
|
|
<div class="name">
|
|
Uniform
|
|
|
|
|
|
<span class="light">{EnumValue}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Pictures with this enumeration as the value of <a href="../symbols/Picture.html#imageStretch" class="linkProperty">Picture.imageStretch</a> are drawn with equal
|
|
scale in both directions to fit the arranged (actual) bounds;
|
|
Panels of type Viewbox with this as the value of <a href="../symbols/Panel.html#viewboxStretch" class="linkProperty">Panel.viewboxStretch</a>
|
|
are scaled equally in both directions to fit in the given bounds.
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="UniformToFill">
|
|
<td class="name">
|
|
<div class="name">
|
|
UniformToFill
|
|
|
|
|
|
<span class="light">{EnumValue}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Pictures with this enumeration as the value of <a href="../symbols/Picture.html#imageStretch" class="linkProperty">Picture.imageStretch</a> are drawn with equal
|
|
scale in both directions to fit the larger side of the image bounds;
|
|
Panels of type Viewbox with this as the value of <a href="../symbols/Panel.html#viewboxStretch" class="linkProperty">Panel.viewboxStretch</a>
|
|
are scaled equally in both directions to fit the larger side of the element's bounds.<span class="nodetails" id="xfldUniformToFill"><a class="morelink" onclick="hst('fldUniformToFill')">More...</a></span> <span class="details" id="fldUniformToFill">
|
|
there may be clipping in one dimension.</span>
|
|
|
|
|
|
</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>GraphObjects with this enumeration as the value of <a href="../symbols/GraphObject.html#stretch" class="linkProperty">GraphObject.stretch</a>
|
|
are scaled as much as possible in the y-axis.
|
|
|
|
|
|
</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>
|