gojs
Version:
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
291 lines (289 loc) • 13.4 kB
HTML
<html class="default no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Overview | GoJS API</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../assets/css/bootstrap.min.css">
<link rel="stylesheet" href="../assets/css/main.css">
</head>
<body>
<header>
<!-- 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" target="api">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="tsd-page-header">
<div class="tsd-page-toolbar">
<div class="container-fluid plr15">
<div class="table-wrap">
<div class="table-cell" id="tsd-search" data-index="../assets/js/search.js" data-base="..">
<div class="field">
<label for="tsd-search-field" class="tsd-widget search no-caption">Search</label>
<input id="tsd-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>
<a href="../index.html" class="title">GoJS API</a>
</div>
<div class="table-cell" id="tsd-widgets">
<div id="tsd-filter">
<a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a>
<div class="tsd-filter-group">
<div class="tsd-select" id="tsd-filter-visibility">
<span class="tsd-select-label">All</span>
<ul class="tsd-select-list">
<li data-value="public">Public</li>
<li data-value="protected">Public/Protected</li>
<li data-value="private" class="selected">All</li>
</ul>
</div>
</div>
</div>
<a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a>
</div>
</div>
</div>
</div>
<div class="tsd-page-title">
<div class="container-fluid plr15">
<div class="top-copyright">
<!--<b>GoJS</b>® Diagramming Components<br/>version <br/>version 2.1.18 for TypeScript/HTML<br/>by <a href="https://www.nwoods.com/">Northwoods Software®</a>-->
<b>GoJS</b>® Diagramming Components<br/>version 2.1.18<br/>by <a href="https://www.nwoods.com/">Northwoods Software®</a>
</div>
<div>
<h1>Class Overview</h1>
</div>
</div>
</div>
</div>
</header>
<div class="container-fluid container-main plr15">
<div class="row">
<div class="col-8 col-content">
<section class="tsd-panel tsd-hierarchy">
<h3>Hierarchy</h3>
<ul class="tsd-hierarchy">
<li>
<a href="Diagram.html" class="tsd-signature-type">Diagram</a>
<ul class="tsd-hierarchy">
<li>
<span class="target">Overview</span>
</li>
</ul>
</li>
</ul>
</section>
<section class="tsd-panel tsd-comment">
<div class="tsd-comment tsd-typography">
<p>An Overview is a <a href="Diagram.html">Diagram</a> that displays all of a different diagram,
with a rectangular box showing the viewport displayed by that other diagram.</p>
<p class="box">
For more discussion, see <a href="../../intro/overview.html">Introduction to Overviews</a>.
See samples that make use of Overviews in the <a href="../../samples/index.html#overview">samples index</a>.
<p>All you need to do is set <a href="Overview.html#observed">Overview.observed</a>.
For example:</p>
<pre><code class="hljs js"> <span class="hljs-keyword">var</span> myDiagram = <span class="hljs-keyword">new</span> go.Diagram(<span class="hljs-string">"myDiagramDIV"</span>);
. . . other initialization . . .
<span class="hljs-comment">// create and initialize the Overview:</span>
<span class="hljs-keyword">new</span> go.Overview(<span class="hljs-string">"myOverviewDIV"</span>).observed = myDiagram;</code></pre>
<p>The Overview draws what the observed Diagram is displaying,
so setting or modifying any diagram templates or template Maps has no effect.</p>
<p>Animations are not shown in an Overview.</p>
<p>At the current time methods such as <a href="Diagram.html#makeImage">Diagram.makeImage</a>,
<a href="Diagram.html#makeImageData">Diagram.makeImageData</a> and <a href="Diagram.html#makeSvg">Diagram.makeSvg</a> do not work on Overviews.</p>
</div>
</section>
<section class="tsd-panel-group tsd-index-group">
<h2>Index</h2>
<section class="tsd-panel tsd-index-panel">
<div class="tsd-index-content">
<section class="tsd-index-section ">
<h3>Constructors</h3>
<ul class="tsd-index-list">
<li class="tsd-kind-constructor tsd-parent-kind-class"><a href="Overview.html#constructor" class="tsd-kind-icon">constructor</a></li>
</ul>
</section>
<section class="tsd-index-section ">
<h3>Properties</h3>
<ul class="tsd-index-list">
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Overview.html#box" class="tsd-kind-icon">box</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Overview.html#drawsTemporaryLayers" class="tsd-kind-icon">draws<wbr>Temporary<wbr>Layers</a></li>
<li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Overview.html#observed" class="tsd-kind-icon">observed</a></li>
</ul>
</section>
</div>
</section>
</section>
<section class="tsd-panel-group tsd-member-group ">
<h2>Constructors</h2>
<section class="tsd-panel tsd-member tsd-kind-constructor tsd-parent-kind-class">
<a name="constructor" class="tsd-anchor"></a>
<h3>
constructor
</h3>
<ul class="tsd-signatures tsd-kind-constructor tsd-parent-kind-class">
<li class="tsd-signature tsd-kind-icon">new <wbr>Overview<span class="tsd-signature-symbol">(</span>div<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Element</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="Overview.html" class="tsd-signature-type">Overview</a></li>
</ul>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
</div>
<h4 class="tsd-parameters-title">Parameters</h4>
<ul class="tsd-parameters">
<li>
<h5><span class="tsd-flag ts-flagOptional">Optional</span> div: <span class="tsd-signature-type">Element</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">string</span></h5>
<div class="tsd-comment tsd-typography">
<p>A reference to a div or its ID as a string.</p>
</div>
</li>
</ul>
<h4 class="tsd-returns-title">Returns <a href="Overview.html" class="tsd-signature-type">Overview</a></h4>
</li>
</ul>
</section>
</section>
<section class="tsd-panel-group tsd-member-group ">
<h2>Properties</h2>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="box" class="tsd-anchor"></a>
<h3>
box
<span class="tsd-signature-symbol">: </span><a href="Part.html" class="tsd-signature-type">Part</a> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the rectangular <a href="Part.html">Part</a> that represents the
viewport of the <a href="Overview.html#observed">observed</a> <a href="Diagram.html">Diagram</a>.
By default the part contains only a magenta <a href="Shape.html">Shape</a>.
The box's <a href="Part.html#selectionObject">Part.selectionObject</a> is what is resized by the Overview to the apparent size of the observed diagram's viewport.</p>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="drawsTemporaryLayers" class="tsd-anchor"></a>
<h3>
draws<wbr>Temporary<wbr>Layers
<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets whether this overview draws the temporary layers of the observed Diagram.
The default value is true.
Setting this property to false may improve drawing performance,
especially if the <a href="Diagram.html#grid">Diagram.grid</a> is visible.</p>
<p>Setting this property does not notify about any changed event.</p>
<dl class="tsd-comment-tags">
<dt>since</dt>
<dd><p>1.2</p>
</dd>
</dl>
</div>
</li>
</ul>
</section>
<section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class">
<a name="observed" class="tsd-anchor"></a>
<h3>
observed
<span class="tsd-signature-symbol">: </span><a href="Diagram.html" class="tsd-signature-type">Diagram</a><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">null</span> </h3>
<ul class="tsd-descriptions">
<li class="tsd-description">
<div class="tsd-comment tsd-typography">
<p>Gets or sets the <a href="Diagram.html">Diagram</a> for which this Overview is
displaying a model and showing its viewport into that model.</p>
<p>The value must be null or another Diagram, but may not be an Overview.</p>
</div>
</li>
</ul>
</section>
</section>
</div>
<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
<nav class="tsd-navigation primary">
<ul>
<li class="globals ">
<a href="../index.html"><em>GoJS <wbr>Class <wbr>Index</em></a>
</li>
</ul>
</nav>
<nav class="tsd-navigation secondary menu-sticky">
<ul class="before-current">
</ul>
<ul class="current">
<li class="current tsd-kind-class">
<a href="Overview.html" class="tsd-kind-icon">Overview</a>
<ul>
<li class=" tsd-kind-constructor tsd-parent-kind-class">
<a href="Overview.html#constructor" class="tsd-kind-icon">constructor</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Overview.html#box" class="tsd-kind-icon">box</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Overview.html#drawsTemporaryLayers" class="tsd-kind-icon">draws<wbr>Temporary<wbr>Layers</a>
</li>
<li class=" tsd-kind-accessor tsd-parent-kind-class">
<a href="Overview.html#observed" class="tsd-kind-icon">observed</a>
</li>
</ul>
</li>
</ul>
<ul class="after-current">
</ul>
</nav>
</div>
</div>
</div>
<div class="container-fluid bottom-copyright plr15">
Copyright © 1998-2020 by Northwoods Software Corporation.
</div>
<div class="overlay"></div>
<script src="../assets/js/main.js"></script>
<script src="../../assets/js/api.js"></script>
<script src="../../assets/js/bootstrap.min.js"></script>
<script>if (location.protocol == 'file:') document.write('<script src="../assets/js/search.js"><' + '/script>');</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-1506307-5', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>