markgojs
Version:
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
1,328 lines (368 loc) • 267 kB
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>
<script src="../../assets/js/fuse.min.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="../../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">
<div class="searchsumm">
<div class="table-wrap">
<div class="table-cell" id="apisearch" data-base="../">
<div class="title">Search API</div>
<div class="field">
<label for="search-field" class="search-icon"></label>
<input id="search-field" type="text" />
</div>
<ul class="results">
<li class="state loading">Preparing search index...</li>
<li class="state failure">The search index is not available</li>
</ul>
</div>
<div class="table-cell" id="apisumm">
<input type="checkbox" id="showsumms" />
<label class="apisumms" for="showsumms">Show Summaries</label>
</div>
</div>
</div>
<!-- ============================== header ================================= -->
<div id="header" class="fineprint">
<b>GoJS</b>® Diagramming Components<br/>version 1.8.36 for JavaScript/HTML<br/>by <a href="https://www.nwoods.com/">Northwoods Software®</a>
</div>
<!-- ============================== class title ============================ -->
<h2 class="classTitle">
Class GraphObject
</h2>
<!-- ============================== class summary ========================== -->
<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/links.html">link routing</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/Actio