create-gojs-kit
Version:
A CLI for downloading GoJS samples, extensions, and docs
141 lines (139 loc) • 34.3 kB
HTML
<html class="default" lang="en"><head><meta charSet="utf-8"/><link rel="stylesheet" href="../../assets/css/style.css"/><link rel="preconnect" href="https://rsms.me/"/><link rel="stylesheet" href="https://rsms.me/inter/inter.css"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>ThemeBinding | 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/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><link rel="stylesheet" href="../assets/custom.css"/><script defer src="../assets/main.js"></script><script async src="../assets/icons.js" id="tsd-icons-script"></script><script async src="../assets/search.js" id="tsd-search-script"></script><script async src="../assets/navigation.js" id="tsd-nav-script"></script><script type="text/javascript">// formerly in api.js
var hash = null;
function changeHash() {
var panels = document.getElementsByClassName("tsd-panel");
for (let i = 0; i < panels.length; i++) {
var p = panels[i];
p.classList.remove("targeted");
}
hash = window.location.hash.slice(1);
if (hash) {
var elt = document.getElementById(hash);
if (elt) elt.parentNode.classList.add("targeted");
}
}
document.addEventListener("DOMContentLoaded", changeHash);
window.addEventListener("hashchange", changeHash);</script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script><header><nav id="navTop" class="w-full h-[var(--topnav-h)] z-30 bg-[var(--color-background-secondary)] border-b border-b-[var(--color-accent)]"><div class="max-w-screen-xl mx-auto flex flex-wrap items-start justify-between px-4"><a class="!text-white bg-nwoods-primary font-bold !leading-[calc(var(--topnav-h)_-_1px)] my-0 px-2 text-4xl lg:text-5xl logo" href="../../index.html">GoJS</a><div class="relative"><button id="topnavButton" class="h-[calc(var(--topnav-h)_-_1px)] px-2 m-0 text-[var(--color-text)] bg-inherit shadow-none md:hidden hover:!bg-inherit hover:!text-nwoods-accent hover:!shadow-none" aria-label="Navigation"><svg class="h-7 w-7 block" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></button><div id="topnavList" class="hidden md:block"><div class="absolute right-0 z-30 flex flex-col items-end rounded border border-[var(--color-accent)] p-4 pl-12 shadow bg-[var(--color-background-secondary)] text-[var(--color-text)] font-semibold
md:flex-row md:space-x-4 md:items-start md:border-0 md:p-0 md:shadow-none md:!bg-inherit"><a href="../../learn/index.html">Learn</a><a href="../../samples/index.html">Samples</a><a href="../../intro/index.html">Intro</a><a class="active" href="../../api/index.html">API</a><a href="../../download.html">Download</a><a href="https://forum.nwoods.com/c/gojs/11" target="_blank" rel="noopener">Forum</a><a href="https://nwoods.com/contact.html" target="_blank" rel="noopener" id="contactBtn">Contact</a><a href="https://nwoods.com/sales/index.html" target="_blank" rel="noopener" id="buyBtn">Buy</a></div></div></div></div></nav><script>window.addEventListener("DOMContentLoaded", function () {
// topnav
var topButton = document.getElementById("topnavButton");
var topnavList = document.getElementById("topnavList");
if (topButton && topnavList) {
topButton.addEventListener("click", function (e) {
topnavList
.classList
.toggle("hidden");
e.stopPropagation();
});
document.addEventListener("click", function (e) {
// if the clicked element isn't the list, close the list
if (!topnavList.classList.contains("hidden") && !e.target.closest("#topnavList")) {
topButton.click();
}
});
// set active <a> element
// done via active tag below, always API
}
});</script><div class="tsd-page-toolbar"><div class="tsd-toolbar-contents container"><div class="table-cell" id="tsd-search" data-base=".."><div class="field"><div id="tsd-search-help"><code class="!text-lg">/</code> to search</div><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-search"></use></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div><div class="field"><div id="tsd-toolbar-links"></div></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"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-menu"></use></svg></a></div></div></div></header><div class="container container-main"><div class="col-content"><div class="tsd-page-title"><div class="flex w-full max-w-screen-xl mx-auto px-2 items-center justify-between"><div><ul class="tsd-breadcrumb"><li><a href="../index.html">GoJS API</a></li><li><a href="ThemeBinding.html">ThemeBinding</a></li></ul><h1 class="flex items-center">Class ThemeBinding</h1></div><div class="text-xs"><b>GoJS</b>® Diagramming Components<br/>version 3.1.0<br/>by <a href="https://nwoods.com/">Northwoods Software®</a></div></div></div><section class="tsd-panel tsd-hierarchy"><h4>Hierarchy (<a class="link" href="../hierarchy.html#ThemeBinding">view full</a>)</h4><ul class="tsd-hierarchy"><li><a href="Binding.html" class="tsd-signature-type tsd-kind-class">Binding</a><ul class="tsd-hierarchy"><li><span class="target">ThemeBinding</span></li></ul></li></ul></section><section class="tsd-panel tsd-comment"><div class="tsd-comment tsd-typography"><p>A ThemeBinding describes how to automatically set a property on a <a href="GraphObject.html" class="tsd-kind-class">GraphObject</a>
to a value of a property in a <a href="Theme.html" class="tsd-kind-interface">Theme</a>.
The target property name and the data source property name must be strings.
All name matching is case-sensitive.</p>
<p>Register theme bindings by calling <a href="GraphObject.html#theme" class="tsd-kind-method">GraphObject.theme</a>
or another method whose name starts with "theme".</p>
<p>For example, your theme might be like:</p>
<pre><code class="language-js"><span class="hl-2">{ </span><span class="hl-9">colors</span><span class="hl-2">: { </span><span class="hl-9">primary</span><span class="hl-2">: </span><span class="hl-6">'red'</span><span class="hl-2"> } }</span>
</code><button>Copy</button></pre>
<p>Your simple node template might be like:</p>
<pre><code class="language-js"><span class="hl-2"> </span><span class="hl-4">myDiagram</span><span class="hl-2">.</span><span class="hl-4">nodeTemplate</span><span class="hl-2"> =</span><br/><span class="hl-2"> </span><span class="hl-1">new</span><span class="hl-2"> </span><span class="hl-4">go</span><span class="hl-2">.</span><span class="hl-5">Node</span><span class="hl-2">(</span><span class="hl-6">"Auto"</span><span class="hl-2">).</span><span class="hl-5">add</span><span class="hl-2">(</span><br/><span class="hl-2"> </span><span class="hl-1">new</span><span class="hl-2"> </span><span class="hl-4">go</span><span class="hl-2">.</span><span class="hl-5">Shape</span><span class="hl-2">().</span><span class="hl-5">theme</span><span class="hl-2">(</span><span class="hl-6">"fill"</span><span class="hl-2"> , </span><span class="hl-6">"primary"</span><span class="hl-2">),</span><br/><span class="hl-2"> </span><span class="hl-1">new</span><span class="hl-2"> </span><span class="hl-4">go</span><span class="hl-2">.</span><span class="hl-5">TextBlock</span><span class="hl-2">(</span><span class="hl-6">"Hello"</span><span class="hl-2">, { </span><span class="hl-4">font:</span><span class="hl-2"> </span><span class="hl-6">"bold 11pt sans-serif"</span><span class="hl-2"> })</span><br/><span class="hl-2"> );</span>
</code><button>Copy</button></pre>
<p>The theme binding causes the <a href="Shape.html#fill" class="tsd-kind-accessor">Shape.fill</a> property of
the Shape to be set to the value of the theme's "primary" property.
If the value of the "primary" property of a particular theme object is undefined,
the binding is not evaluated: the target property is not set.
If there is an error with the theme binding, you may see a message in the console log.
For this reason you may want to explicitly set the initial value for a property
when defining the GraphObject, since that value will remain as the default value
if the ThemeBinding is not evaluated.</p>
<p>Just like <a href="Binding.html" class="tsd-kind-class">Binding</a>s, it's possible to use different source objects.
The typical source is the Theme itself, but one can also use a property of a data object in the model.
another GraphObject in the same Part, or the shared JavaScript object that is the value of <a href="Model.html#modelData" class="tsd-kind-accessor">Model.modelData</a>.
The values from these other sources are then used to perform the property lookup in the Theme object.
To use these other sources, one can call <a href="GraphObject.html#themeData" class="tsd-kind-method">GraphObject.themeData</a>,
<a href="GraphObject.html#themeObject" class="tsd-kind-method">GraphObject.themeObject</a>, or <a href="GraphObject.html#themeModel" class="tsd-kind-method">GraphObject.themeModel</a>.
Or modify the Binding by calling <a href="ThemeBinding.html#ofData" class="tsd-kind-method">ofData</a>, <a href="Binding.html#ofObject" class="tsd-kind-method">Binding.ofObject</a>, or <a href="Binding.html#ofModel" class="tsd-kind-method">Binding.ofModel</a>.</p>
<p>Note that ThemeBindings are always OneWay.</p>
<p>Existing bindings become read-only, and no new bindings may be added,
when a template (a <a href="Part.html" class="tsd-kind-class">Part</a>) is copied.
Bindings will be shared by all copies of the template's GraphObjects.</p>
<p>For more information about bindings see <a href="Binding.html" class="tsd-kind-class">Binding</a> documentation.
For more information on theming, see the <a href="../../intro/theming.html">Theming intro page</a>.</p>
</div><div class="tsd-comment-tags tsd-typography"><div class="flex items-center"><code class="tsd-tag">since</code><p>3.0</p>
</div></div></section><section class="tsd-panel-group tsd-index-group"><section class="tsd-panel tsd-index-panel"><details class="tsd-index-content tsd-index-accordion" open><summary class="tsd-accordion-summary tsd-index-summary"><h5 class="tsd-index-heading uppercase" role="button" aria-expanded="true" tabIndex="0"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-chevronSmall"></use></svg> Index</h5></summary><div class="tsd-accordion-details"><section class="tsd-index-section"><h3 class="tsd-index-heading">Constructors</h3><div class="tsd-index-list"><a href="ThemeBinding.html#constructor" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-512"></use></svg><span>constructor</span></a>
</div></section><section class="tsd-index-section"><h3 class="tsd-index-heading">Accessors</h3><div class="tsd-index-list"><a href="ThemeBinding.html#themeConverter" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>theme<wbr/>Converter</span></a>
<a href="ThemeBinding.html#themeSource" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>theme<wbr/>Source</span></a>
</div></section><section class="tsd-index-section"><h3 class="tsd-index-heading">Methods</h3><div class="tsd-index-list"><a href="ThemeBinding.html#ofData" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>of<wbr/>Data</span></a>
</div></section></div></details></section></section><section class="tsd-panel-group tsd-index-group tsd-is-inherited"><section class="tsd-panel tsd-index-panel"><details class="tsd-index-content tsd-index-accordion"><summary class="tsd-accordion-summary tsd-index-summary"><h5 class="tsd-index-heading uppercase" role="button" aria-expanded="false" tabIndex="0"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><use href="../assets/icons.svg#icon-chevronSmall"></use></svg> Inherited Index</h5></summary><div class="tsd-accordion-details"><div class="tsd-index-content"><section class="tsd-index-section"><h3 class="tsd-index-heading">Accessors</h3><div class="tsd-index-list"><a href="Binding.html#backConverter" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>Binding.back<wbr/>Converter</span></a>
<a href="Binding.html#converter" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>Binding.converter</span></a>
<a href="Binding.html#isToData" class="tsd-index-link"><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><g id="subicon-R,#FF4D4D"><rect fill="var(--color-icon-background)" width="28" height="28" rx="14"></rect><path transform="translate(2, 2)" fill="none" stroke-width="1.5" stroke="var(--color-text)" d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z" stroke-linecap="round" stroke-linejoin="round"></path></g></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>Binding.is<wbr/>To<wbr/>Data</span></a>
<a href="Binding.html#isToModel" class="tsd-index-link"><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF4D4D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>Binding.is<wbr/>To<wbr/>Model</span></a>
<a href="Binding.html#isToObject" class="tsd-index-link"><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF4D4D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>Binding.is<wbr/>To<wbr/>Object</span></a>
<a href="Binding.html#isToTheme" class="tsd-index-link"><svg class="readonly tsd-subicon" viewBox="0 0 28 28"><use href="#subicon-R,#FF4D4D"></use></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>Binding.is<wbr/>To<wbr/>Theme</span></a>
<a href="Binding.html#mode" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>Binding.mode</span></a>
<a href="Binding.html#sourceName" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>Binding.source<wbr/>Name</span></a>
<a href="Binding.html#sourceProperty" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>Binding.source<wbr/>Property</span></a>
<a href="Binding.html#targetProperty" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>Binding.target<wbr/>Property</span></a>
</div></section><section class="tsd-index-section"><h3 class="tsd-index-heading">Methods</h3><div class="tsd-index-list"><a href="Binding.html#copy" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>Binding.copy</span></a>
<a href="Binding.html#makeTwoWay" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>Binding.make<wbr/>Two<wbr/>Way</span></a>
<a href="Binding.html#ofModel" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>Binding.of<wbr/>Model</span></a>
<a href="Binding.html#ofObject" class="tsd-index-link"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>Binding.of<wbr/>Object</span></a>
<a href="Binding.html#toString" class="tsd-index-link"><svg class="static tsd-subicon" viewBox="0 0 28 28"><g id="subicon-S,#FF4DB8"><rect fill="var(--color-icon-background)" width="28" height="28" rx="14"></rect><path transform="translate(2, 2)" fill="none" stroke-width="1.5" stroke="var(--color-text)" d="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5-3.9 19.5m-2.1-19.5-3.9 19.5" stroke-linecap="round" stroke-linejoin="round"></path></g></svg><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>Binding.to<wbr/>String</span></a>
</div></section></div></div></details></section></section><section class="tsd-panel-group tsd-member-group"><h2>Constructors</h2><section class="tsd-panel tsd-member"><a id="constructor" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>constructor</span><a href="#constructor" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-signature tsd-anchor-link"><a id="constructor.new_ThemeBinding" class="tsd-anchor"></a><span class="tsd-kind-constructor-signature">new <wbr/>Theme<wbr/>Binding</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">targetprop</span><span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">string</span>, <span class="tsd-kind-parameter">sourceprop</span><span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">string</span>, <span class="tsd-kind-parameter">themeSource</span><span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">string</span>, <span class="tsd-kind-parameter">conv</span><span class="tsd-signature-symbol">?: </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">val</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">any</span>, <span class="tsd-kind-parameter">targetObj</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> => </span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">)</span>, <span class="tsd-kind-parameter">themeConverter</span><span class="tsd-signature-symbol">?: </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">val</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">any</span>, <span class="tsd-kind-parameter">targetObj</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> => </span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="ThemeBinding.html" class="tsd-signature-type tsd-kind-class">ThemeBinding</a><a href="#constructor.new_ThemeBinding" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>The constructor creates a Theme binding, where the source value is looked up by the <a href="ThemeManager.html" class="tsd-kind-class">ThemeManager</a>..</p>
</div><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><h5><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">targetprop</span>: <span class="tsd-signature-type">string</span></h5><div class="tsd-comment tsd-typography"><p>A string naming the target property on the target object.
This should not be the empty string.</p>
</div></li><li><h5><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">sourceprop</span>: <span class="tsd-signature-type">string</span></h5><div class="tsd-comment tsd-typography"><p>A string naming the source property, which could be on the Theme, data object, GraphObject, or shared model data object.
If this argument is not supplied, the source property is assumed to be the same as the target property.</p>
</div></li><li><h5><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">themeSource</span>: <span class="tsd-signature-type">string</span></h5><div class="tsd-comment tsd-typography"><p>The source object on the Theme to find the value for the source property name.
If this argument is null or not supplied, the empty string is used.</p>
</div></li><li><h5><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">conv</span>: <span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">val</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">any</span>, <span class="tsd-kind-parameter">targetObj</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> => </span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">)</span></h5><div class="tsd-comment tsd-typography"><p>A side-effect-free function converting the source property value to lookup in the Theme.
If the function is null or not supplied, no conversion takes place.</p>
</div><ul class="tsd-parameters"><li class="tsd-parameter-signature"><ul class="tsd-signatures"><li class="tsd-signature"><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">val</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">any</span>, <span class="tsd-kind-parameter">targetObj</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">any</span></li><li class="tsd-description"><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><h5><span class="tsd-kind-parameter">val</span>: <span class="tsd-signature-type">any</span></h5></li><li><h5><span class="tsd-kind-parameter">targetObj</span>: <span class="tsd-signature-type">any</span></h5></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">any</span></h4></li></ul></li></ul></li><li><h5><code class="tsd-tag ts-flagOptional">Optional</code> <span class="tsd-kind-parameter">themeConverter</span>: <span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">val</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">any</span>, <span class="tsd-kind-parameter">targetObj</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> => </span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">)</span></h5><div class="tsd-comment tsd-typography"><p>An optional side-effect-free function converting the theme value to the value to set the target property.
If the function is null or not supplied, no conversion takes place.</p>
</div><ul class="tsd-parameters"><li class="tsd-parameter-signature"><ul class="tsd-signatures"><li class="tsd-signature"><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">val</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">any</span>, <span class="tsd-kind-parameter">targetObj</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">any</span></li><li class="tsd-description"><div class="tsd-parameters"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameter-list"><li><h5><span class="tsd-kind-parameter">val</span>: <span class="tsd-signature-type">any</span></h5></li><li><h5><span class="tsd-kind-parameter">targetObj</span>: <span class="tsd-signature-type">any</span></h5></li></ul></div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">any</span></h4></li></ul></li></ul></li></ul></div><h4 class="tsd-returns-title">Returns <a href="ThemeBinding.html" class="tsd-signature-type tsd-kind-class">ThemeBinding</a></h4></li></ul></section></section><section class="tsd-panel-group tsd-member-group"><h2>Accessors</h2><section class="tsd-panel tsd-member"><a id="themeConverter" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>theme<wbr/>Converter</span><div class="membertype"><span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">(</span><span class="tsd-kind-parameter">val</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">any</span>, <span class="tsd-kind-parameter">targetObj</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> => </span><span class="tsd-signature-type">any</span><span class="tsd-signature-symbol">)</span></div><a href="#themeConverter" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Gets or sets a converter function to apply to the theme property value
in order to produce the value to set to the target property.
The default value is null -- no conversion takes place.
Otherwise the value should be a function that takes one or two arguments and returns the desired value.</p>
<p>Conversion functions must not have any side-effects.</p>
<p>The function is passed the value from the theme
(the first argument) and the target <a href="GraphObject.html" class="tsd-kind-class">GraphObject</a> (the second argument).
The targetProperty is set to the function's return value.</p>
</div><div class="tsd-comment-tags tsd-typography"><div class="flex items-center"><code class="tsd-tag">since</code><p>3.0</p>
</div></div></li></ul></section><section class="tsd-panel tsd-member"><a id="themeSource" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>theme<wbr/>Source</span><div class="membertype"><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span></div><a href="#themeSource" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Gets or sets the source object on a Theme for a lookup.</p>
<p>This can be used to refine where in the Theme to look, sometimes useful to avoid the need for a conversion function.</p>
<pre><code class="language-js"><span class="hl-2">{</span><br/><span class="hl-2"> </span><span class="hl-9">colors</span><span class="hl-2">: {</span><br/><span class="hl-2"> </span><span class="hl-9">sex</span><span class="hl-2">: {</span><br/><span class="hl-2"> </span><span class="hl-9">M</span><span class="hl-2">: </span><span class="hl-6">'blue'</span><span class="hl-2">,</span><br/><span class="hl-2"> </span><span class="hl-9">F</span><span class="hl-2">: </span><span class="hl-6">'pink'</span><br/><span class="hl-2"> }</span><br/><span class="hl-2"> }</span><br/><span class="hl-2">}</span><br/><span class="hl-2">...</span><br/><span class="hl-4">myDiagram</span><span class="hl-2">.</span><span class="hl-4">nodeTemplate</span><span class="hl-2"> =</span><br/><span class="hl-2"> </span><span class="hl-1">new</span><span class="hl-2"> </span><span class="hl-4">go</span><span class="hl-2">.</span><span class="hl-5">Node</span><span class="hl-2">(</span><span class="hl-6">"Auto"</span><span class="hl-2">).</span><span class="hl-5">add</span><span class="hl-2">(</span><br/><span class="hl-2"> </span><span class="hl-1">new</span><span class="hl-2"> </span><span class="hl-4">go</span><span class="hl-2">.</span><span class="hl-5">Shape</span><span class="hl-2">().</span><span class="hl-5">themeData</span><span class="hl-2">(</span><span class="hl-6">"fill"</span><span class="hl-2">, </span><span class="hl-6">"sex"</span><span class="hl-2">, </span><span class="hl-6">"sex"</span><span class="hl-2">), </span><span class="hl-0">// lookup the "sex" data value in the "sex" Theme object</span><br/><span class="hl-2"> ...</span><br/><span class="hl-2"> )</span>
</code><button>Copy</button></pre>
</div><div class="tsd-comment-tags tsd-typography"><div class="flex items-center"><code class="tsd-tag">defaultValue</code><p><code>''</code> -- the theme will be be searched without any additional object constraint</p>
</div></div></li></ul></section></section><section class="tsd-panel-group tsd-member-group"><h2>Methods</h2><section class="tsd-panel tsd-member"><a id="ofData" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span>of<wbr/>Data</span><a href="#ofData" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></h3><ul class="tsd-signatures"><li class="tsd-signature tsd-anchor-link"><a id="ofData.ofData-1" class="tsd-anchor"></a><span class="tsd-kind-call-signature">of<wbr/>Data</span><span class="tsd-signature-symbol">(</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">this</span><a href="#ofData.ofData-1" aria-label="Permalink" class="tsd-anchor-icon"><svg viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-anchor"></use></svg></a></li><li class="tsd-description"><div class="tsd-comment tsd-typography"><p>Modify this ThemeBinding so that the source is a data object.</p>
<p>Note that one can also call ofObject or ofModel as ThemeBinding is
a subclass of <a href="Binding.html" class="tsd-kind-class">Binding</a>.</p>
</div><h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">this</span></h4><p>this ThemeBinding with a data object source.</p>
<div class="tsd-comment-tags tsd-typography"><div class="flex items-center"><code class="tsd-tag">see</code><ul>
<li>ofObject</li>
<li>ofModel</li>
</ul>
</div></div></li></ul></section></section></div><div class="col-sidebar"><div class="page-menu"><details open class="tsd-index-accordion tsd-page-navigation"><summary class="tsd-accordion-summary"><h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><use href="../assets/icons.svg#icon-chevronDown"></use></svg>On This Page</h3></summary><div class="tsd-accordion-details"><ul><li><a href="#constructor"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-512"></use></svg><span>constructor</span></a></li><li><a href="#themeConverter"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>theme<wbr/>Converter</span></a></li><li><a href="#themeSource"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-262144"></use></svg><span>theme<wbr/>Source</span></a></li><li><a href="#ofData"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-2048"></use></svg><span>of<wbr/>Data</span></a></li></ul></div></details><div class="tsd-navigation settings"><div class="tsd-theme-toggle"><h4 class="uppercase">Theme</h4><select id="tsd-theme"><option value="os">System</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></div><div class="site-menu"><nav class="tsd-navigation"><a href="../index.html"><svg class="tsd-kind-icon" viewBox="0 0 24 24"><use href="../assets/icons.svg#icon-1"></use></svg><span>GoJS API</span></a><ul class="tsd-small-nested-navigation" id="tsd-nav-container" data-base=".."><li>Loading...</li></ul></nav></div></div></div><div class="tsd w-full max-w-screen-xl mx-auto px-2"><div class="bottom-copyright">Copyright © 1998-2025 by Northwoods Software Corporation.</div></div><div class="overlay"></div><script async src="https://www.googletagmanager.com/gtag/js?id=G-S5QK8VSK84"></script><script>window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-S5QK8VSK84');
var getOutboundLink = function(url, label) {
gtag('event', 'click', {
'event_category': 'outbound',
'event_label': label,
'transport_type': 'beacon'
});
}
document.getElementById("contactBtn").addEventListener("click", function() {
getOutboundLink('https://nwoods.com/contact.html', 'contact');
});
document.getElementById("buyBtn").addEventListener("click", function() {
getOutboundLink('https://nwoods.com/sales/index.html', 'buy');
});</script></body></html>