sgojs

<!doctype 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="Documentation for GoJS API"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="../../assets/css/style.css"> <link rel="stylesheet" href="../assets/css/main.css"> <script async src="../assets/js/search.js" id="search-script"></script> </head> <body> <header> <nav id="navTop" class="w-full z-30 top-0 text-white bg-nwoods-primary"> <div class="w-full container max-w-screen-lg mx-auto flex flex-wrap sm:flex-nowrap items-center justify-between mt-0 py-2"> <div class="md:pl-4"> <a class="text-white hover:text-white no-underline hover:no-underline font-bold text-2xl lg:text-4xl rounded-lg hover:bg-nwoods-secondary" href="../../index.html"> <h1 class="mb-0 p-1">GoJS</h1> </a> </div> <button id="topnavButton" class="rounded-lg sm:hidden focus:outline-none focus:ring" aria-label="Navigation"> <svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6"> <path id="topnavOpen" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path> <path id="topnavClosed" class="hidden" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path> </svg> </button> <div id="topnavList" class="hidden sm:block items-center w-auto mt-0 text-white p-0 z-20"> <ul class="list-reset list-none font-semibold flex justify-end flex-wrap sm:flex-nowrap items-center px-0 pb-0"> <li class="p-1 sm:p-0"><a class="topnav-link" href="../../learn/index.html">Learn</a></li> <li class="p-1 sm:p-0"><a class="topnav-link" href="../../samples/index.html">Samples</a></li> <li class="p-1 sm:p-0"><a class="topnav-link" href="../../intro/index.html">Intro</a></li> <li class="p-1 sm:p-0"><a class="topnav-link" href="../../api/index.html">API</a></li> <li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/products/register.html">Register</a></li> <li class="p-1 sm:p-0"><a class="topnav-link" href="../../download.html">Download</a></li> <li class="p-1 sm:p-0"><a class="topnav-link" href="https://forum.nwoods.com/c/gojs/11">Forum</a></li> <li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/contact.html" target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a></li> <li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/sales/index.html" target="_blank"rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a></li> </ul> </div> </div> <hr class="border-b border-gray-600 opacity-50 my-0 py-0" /> </nav> <div class="tsd tsd-page-header"> <div class="tsd-page-toolbar"> <div class="w-full max-w-screen-xl mx-auto px-2"> <div class="table-wrap"> <div class="table-cell" id="tsd-search" data-index="../assets/js/search.json" 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 tsd-page-title"> <div class="w-full max-w-screen-xl mx-auto px-2"> <div class="top-copyright"> <b>GoJS</b>® Diagramming Components<br/>version 2.1.47<br/>by <a href="https://www.nwoods.com/">Northwoods Software®</a> </div> <div> <h1>Class Overview</h1> </div> </div> </div> </div> </header> <div class="tsd w-full max-w-screen-xl mx-auto pb-4"> <div class="row px-2 w-full"> <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" data-tsd-kind="Class">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="language-js"><span style="color: #D4D4D4"> </span><span style="color: #569CD6">var</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">myDiagram</span><span style="color: #D4D4D4"> = </span><span style="color: #569CD6">new</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">go</span><span style="color: #D4D4D4">.</span><span style="color: #DCDCAA">Diagram</span><span style="color: #D4D4D4">(</span><span style="color: #CE9178">"myDiagramDIV"</span><span style="color: #D4D4D4">);</span> <span style="color: #D4D4D4"> . . . </span><span style="color: #9CDCFE">other</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">initialization</span><span style="color: #D4D4D4"> . . .</span> <span style="color: #D4D4D4"> </span><span style="color: #6A9955">// create and initialize the Overview:</span> <span style="color: #D4D4D4"> </span><span style="color: #569CD6">new</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">go</span><span style="color: #D4D4D4">.</span><span style="color: #DCDCAA">Overview</span><span style="color: #D4D4D4">(</span><span style="color: #CE9178">"myOverviewDIV"</span><span style="color: #D4D4D4">).</span><span style="color: #9CDCFE">observed</span><span style="color: #D4D4D4"> = </span><span style="color: #9CDCFE">myDiagram</span><span style="color: #D4D4D4">;</span> </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 tsd-is-overwrite"><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 tsd-is-overwrite"> <a name="constructor" class="tsd-anchor"></a> <h3> constructor </h3> <ul class="tsd-signatures tsd-kind-constructor tsd-parent-kind-class tsd-is-overwrite"> <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">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">Element</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="Overview.html" class="tsd-signature-type" data-tsd-kind="Class">Overview</a></li> </ul> <ul class="tsd-descriptions"> <li class="tsd-description"> <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">string</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">Element</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" data-tsd-kind="Class">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" data-tsd-kind="Class">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" data-tsd-kind="Class">Diagram</a> </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=" "> <a href="../index.html">GoJS <wbr>Class <wbr>Index</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 tsd-is-overwrite"> <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="tsd w-full max-w-screen-xl mx-auto px-2"> <div class="bottom-copyright">Copyright © 1998-2021 by Northwoods Software Corporation.</div> </div> <div class="overlay"></div> <script src="../assets/js/main.js"></script> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-1506307-5"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-1506307-5'); var getOutboundLink = function(url, label) { gtag('event', 'click', { 'event_category': 'outbound', 'event_label': label, 'transport_type': 'beacon' }); } // topnav var topButton = document.getElementById("topnavButton"); var topnavList = document.getElementById("topnavList"); topButton.addEventListener("click", function() { this.classList.toggle("active"); topnavList.classList.toggle("hidden"); document.getElementById("topnavOpen").classList.toggle("hidden"); document.getElementById("topnavClosed").classList.toggle("hidden"); }); </script> </body> </html>