gojs

<!DOCTYPE html><html class="default"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>Binding | 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/style-tsd.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script async src="../assets/search.js" id="search-script"></script></head><body><script>document.body.classList.add(localStorage.getItem("tsd-theme") || "os")</script><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\n font-bold text-2xl lg:text-4xl rounded-lg hover:bg-nwoods-secondary" href="../../index.html"><h1 class="my-0 p-1 leading-none">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" id="contactBtn">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" id="buyBtn">Buy</a></li></ul></div></div><hr class="border-b border-gray-600 opacity-50 my-0 py-0"/></nav><div class="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-base=".."><div class="field"><label for="tsd-search-field" class="tsd-widget search no-caption">Search</label><input type="text" id="tsd-search-field"/></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">All<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> <input type="checkbox" id="tsd-filter-inherited"/><label class="tsd-widget" for="tsd-filter-inherited">Inherited</label></div></div><a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a></div></div></div></div></div><div class="tsd-page-title"><div class="w-full max-w-screen-xl mx-auto px-2"><div class="top-copyright">GoJS® Diagramming Components version 2.3.8 by <a href="https://www.nwoods.com/">Northwoods Software®</a></div><div><h1>Class Binding </h1></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>Binding</li></ul></section><section class="tsd-panel tsd-comment"><div class="tsd-comment tsd-typography"> A Binding describes how to automatically set a property on a <a href="GraphObject.html">GraphObject</a> to a value of a property of data in the model. The target property name and the data source property name are strings. All name matching is case-sensitive. <div>Register bindings by calling <a href="GraphObject.html#bind">GraphObject.bind</a> with a new Binding. Existing bindings become read-only, and no new bindings may be added, when a template (a <a href="Part.html">Part</a>) is copied. Bindings will be shared by all copies of the template's GraphObjects. For example, your node data might be like: <pre><code class="language-js">{ key: 23, say: "hello!" } </code></pre> Your simple node template might be like: <pre><code class="language-js"> var template = new go.Node(go.Panel.Auto); // . . . define the rest of the Node's visual tree . . . var txt = new go.TextBlock(); txt.bind(new go.Binding("text", "say")); template.add(txt); myDiagram.nodeTemplate = template; </code></pre> Using <a href="GraphObject.html#static-make">GraphObject.make</a> it might look like: <pre><code class="language-js"> var $ = go.GraphObject.make; myDiagram.nodeTemplate = $(go.Node, "Auto", . . . $(go.TextBlock, new go.Binding("text", "say")) ) </code></pre> The data binding causes the <a href="TextBlock.html#text">TextBlock.text</a> property of the TextBlock to be set to the value of the data's "say" property. If the value of the "say" property of a particular data object is undefined, the binding is not evaluated: the target property is not set. If there is an error with the 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 Binding is not evaluated. Bindings are not necessarily evaluated in any particular order. Binding sources should not be (or depend in a conversion function on) the category of the data if you might be modifying the category (e.g. by calling <a href="Model.html#setCategoryForNodeData">Model.setCategoryForNodeData</a>), because then some bindings might be evaluated before or after the category has been changed. <h4>Conversions</h4> Sometimes the data value needs to be modified or converted in order to be used as the new value of a <a href="GraphObject.html">GraphObject</a> property. The most common conversion functions are provided for you -- they convert a string to a geometric class: <a href="Point.html#static-parse">Point.parse</a>, <a href="Size.html#static-parse">Size.parse</a>, <a href="Rect.html#static-parse">Rect.parse</a>, <a href="Margin.html#static-parse">Margin.parse</a>, <a href="Spot.html#static-parse">Spot.parse</a>, and <a href="Geometry.html#static-parse">Geometry.parse</a>. But you can easily define your own conversion function. As an example of a conversion function, let's use a function that adds some text prefixing the data property value: <pre><code class="language-js"> new go.Binding("text", "say", v => "I say: " + v) </code></pre> Although simple conversions cover almost all binding cases, there are some infrequent uses that are covered by "Advanced Conversions", discussed below. Conversion functions must not have any side-effects. Conversion functions may be called frequently, so they should be fast and avoid allocating memory. The order in which conversion functions are called is not specified and may vary. <h4>OneWay and TwoWay Bindings</h4> By default bindings are <a href="Binding.html#static-OneWay">Binding.OneWay</a>. OneWay bindings are evaluated when the <a href="Panel.html#data">Panel.data</a> property is set or when you call <a href="Panel.html#updateTargetBindings">Panel.updateTargetBindings</a> or <a href="Model.html#setDataProperty">Model.setDataProperty</a>. OneWay bindings only transfer values from the source to the target. TwoWay bindings are evaluated in the source-to-target direction just as OneWay bindings are evaluated. However when the <a href="GraphObject.html">GraphObject</a> target property is set, the TwoWay bindings are evaluated in the target-to-source direction. There is no point in having a TwoWay binding on a GraphObject property that cannot be set. For efficiency, avoid TwoWay bindings on GraphObject properties that do not change value in your app. You should not have a TwoWay binding with a source that is a node data object's key property, i.e. on the data property whose name is the same as the value of <a href="Model.html#nodeKeyProperty">Model.nodeKeyProperty</a>. Unintentionally changing the node key value to be the same as another node data's key value may cause indeterminate behavior. Furthermore, changing a node data key without changing any references to that node using the key value will result in "dangling" references and inconsistent relationships. You can make that change safely by calling <a href="Model.html#setKeyForNodeData">Model.setKeyForNodeData</a>, but not via a data binding. The target-to-source update can also go through a conversion function. The most common back-conversion functions are provided for you. They convert a geometric class to a string: <a href="Point.html#static-stringify">Point.stringify</a>, <a href="Size.html#static-stringify">Size.stringify</a>, <a href="Rect.html#static-stringify">Rect.stringify</a>, <a href="Margin.html#static-stringify">Margin.stringify</a>, <a href="Spot.html#static-stringify">Spot.stringify</a>, and <a href="Geometry.html#static-stringify">Geometry.stringify</a>. It is common to want to update some data properties based on changes to the diagram. For example, as the user changes the <a href="Part.html#location">Part.location</a> by dragging a Node, you can automatically keep the node's model data in sync using a TwoWay binding. <pre><code class="language-js"> new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify) </code></pre> The call to <a href="Binding.html#makeTwoWay">Binding.makeTwoWay</a> changes the <a href="Binding.html#mode">Binding.mode</a> to be <a href="Binding.html#static-TwoWay">Binding.TwoWay</a> and specifies the <a href="Binding.html#backConverter">Binding.backConverter</a> function to be the <a href="Point.html#static-stringify">Point.stringify</a> static function. Because the Binding is on the whole node (<code>template</code>), the target object is the whole <a href="Node.html">Node</a> and the target property is "location". The value of <code>data.loc</code> will be a string representation of the <code>Node.location</code> value. <h4>Binding Sources</h4> The target of a Binding is always a property of a <a href="GraphObject.html">GraphObject</a> or a <a href="RowColumnDefinition.html">RowColumnDefinition</a>. The source of a Binding is normally a property of a data object in the model. But it is also possible to have the source of a Binding be the shared JavaScript object that is the value of <a href="Model.html#modelData">Model.modelData</a>. You can specify such a binding by calling <a href="Binding.html#ofModel">Binding.ofModel</a>, meaning "a binding of a source that is a property of the Model.modelData". As an example, you might want all Nodes to use the same color. It would be possible but not natural to bind to a property on the node data object, because that property would have to be duplicated on all of the node data objects in the model, and updating the property would mean calling <a href="Model.html#setDataProperty">Model.setDataProperty</a> on each node data object with the same new value. Furthermore if there happened to be no nodes at all in the model, there would be no place to save the data. Hence using the shared <a href="Model.html#modelData">Model.modelData</a> object would be the sensible place for that shared information. <pre><code class="language-js"> new go.Binding("stroke", "strokeColor").ofModel() </code></pre> and to set or modify that color one would just call, within a transaction: <pre><code class="language-js"> model.setDataProperty(model.modelData, "strokeColor", "red"); </code></pre> That would cause all nodes with that model data binding to be re-evaluated. It is not commonplace to have a TwoWay Binding on "ofModel" Bindings, but that should work. Converters also work with "ofModel" Bindings. And it is also possible to have the source of a Binding be another GraphObject that is in the same Part. You can enable such a binding by calling <a href="Binding.html#ofObject">Binding.ofObject</a>, meaning "a binding of a source that is a property of a GraphObject". You just have to make sure that object has a unique <a href="GraphObject.html#name">GraphObject.name</a> or is the Part itself. The source property on the GraphObject has to be settable, and the Part must have a value for <a href="Panel.html#data">Panel.data</a>. (If the source property setter does not notify about property value changes, the binding mechanism will not be invoked. Similarly, if there is no Panel.data, the binding mechanism is not active.) As a common kind of example of data binding between two properties of GraphObjects, consider this Binding on a <a href="Shape.html">Shape</a> which changes the color of the <a href="Shape.html#stroke">Shape.stroke</a> depending on whether the Node is selected (<a href="Part.html#isSelected">Part.isSelected</a>): <pre><code class="language-js"> new go.Binding("stroke", "isSelected", s => s ? "dodgerblue" : "gray").ofObject() </code></pre> Note the call to <a href="Binding.html#ofObject">Binding.ofObject</a>, which tells the Binding that it should use as the source a GraphObject with a particular name. However that name argument is optional -- supplying no name (or supplying an empty string) will cause the binding to operate with the root GraphObject. In this case that would be the Node itself. Now with this binding whenever the value of <a href="Part.html#isSelected">Part.isSelected</a> changes, this Shape's stroke changes color. The conversion function is what changes the boolean "isSelected" value to a brush color specifier. <h4>Advanced Conversions</h4> The binding functionality also has more advanced features for less common situations. The source property name may be an empty string, to convert the object as a whole. Conversion functions may take a second argument that takes the object that is bound. For source-to-target conversions, the second argument will be the <a href="GraphObject.html">GraphObject</a> whose property is bound. For target-to-source (back-)conversions, the second argument will be the source data object and the third argument will be the <a href="Model.html">Model</a>. Here's an example of a two-way data-binding using two custom conversion functions working with two separate data properties. First we define the two conversion functions. <pre><code class="language-js"> function toLocation(data, node) { return new go.Point(data.x, data.y); } function fromLocation(loc, data, model) { model.setDataProperty(data, "x", loc.x); model.setDataProperty(data, "y", loc.y); } </code></pre> Then to data-bind the default template's <a href="Part.html#location">Part.location</a> property to two separate data properties, "x" and "y": <pre><code class="language-js"> new go.Binding("location", "", toLocation).makeTwoWay(fromLocation) </code></pre> An empty string argument for the sourceprop parameter indicates that the whole data object should be passed to the <code>toLocation</code> function, rather than the value of some property of that data. The return value is used as the new value for the <a href="Part.html#location">Part.location</a> property. In almost all cases the second argument is not used. Caution: for efficiency reasons you should try to avoid using an empty source property name. Such bindings will be evaluated much more frequently than ones whose source is a particular property name. The binding works normally for the source-to-target direction. But when the target property is modified it is the source property that is set with the back-converted property value from the target object. Because in this example the source property name is the empty string, and because one cannot replace the whole source data object, any return value from the conversion function is ignored. Instead the conversion function has to modify the data object directly, as this example <code>fromLocation</code> function does. Note that because the source property name is the empty string, the binding system will not know which properties are modified in the call to <code>fromLocation</code>. Hence to support undo and redo, in order to make the data changes we have to call <a href="Model.html#setDataProperty">Model.setDataProperty</a> so that the <a href="UndoManager.html">UndoManager</a> can record the change, including the previous value. <h4>Replacing Items in Arrays</h4> However, although a TwoWay Binding cannot replace the node data object in the <a href="Model.html#nodeDataArray">Model.nodeDataArray</a>, it is possible to replace an item in an <a href="Panel.html#itemArray">Panel.itemArray</a>. So if your node data were: <pre><code class="language-js"> { key: 1, items: ["one", "two", "three"] } </code></pre> And if your node template included something like: <pre><code class="language-js"> $(go.Panel, "Vertical", new go.Binding("itemArray", "items"), { itemTemplate: $(go.Panel, $(go.TextBlock, { editable: true }, new go.Binding("text", "").makeTwoWay()) ) } ) </code></pre> Then the user would be able to edit any of the <a href="TextBlock.html">TextBlock</a>s, causing the item Array to be modified, for example resulting in this node data: <pre><code class="language-js"> { key: 1, items: ["one", "SOME NEW TEXT HERE", "three"] } </code></pre> </div></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="Binding.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="Binding.html#backConverter" class="tsd-kind-icon">backConverter</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Binding.html#converter" class="tsd-kind-icon">converter</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Binding.html#isToModel" class="tsd-kind-icon">isToModel</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Binding.html#mode" class="tsd-kind-icon">mode</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Binding.html#sourceName" class="tsd-kind-icon">sourceName</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Binding.html#sourceProperty" class="tsd-kind-icon">sourceProperty</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Binding.html#targetProperty" class="tsd-kind-icon">targetProperty</a></li></ul></section><section class="tsd-index-section "><h3>Methods</h3><ul class="tsd-index-list"><li class="tsd-kind-method tsd-parent-kind-class"><a href="Binding.html#copy" class="tsd-kind-icon">copy</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Binding.html#makeTwoWay" class="tsd-kind-icon">makeTwoWay</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Binding.html#ofModel" class="tsd-kind-icon">ofModel</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Binding.html#ofObject" class="tsd-kind-icon">ofObject</a></li><li class="tsd-kind-method tsd-parent-kind-class tsd-is-static"><a href="Binding.html#static-parseEnum" class="tsd-kind-icon">parseEnum</a></li><li class="tsd-kind-method tsd-parent-kind-class tsd-is-static"><a href="Binding.html#static-toString" class="tsd-kind-icon">toString</a></li></ul></section><section class="tsd-index-section "><h3>Constants</h3><ul class="tsd-index-list"><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Binding.html#static-OneWay" class="tsd-kind-icon">OneWay</a></li><li class="tsd-kind-constant tsd-parent-kind-class tsd-is-static"><a href="Binding.html#static-TwoWay" class="tsd-kind-icon">TwoWay</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 id="constructor" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> constructor<a href="#constructor" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-signatures tsd-kind-constructor tsd-parent-kind-class"><li class="tsd-signature tsd-kind-icon">new Binding(targetprop?: string, sourceprop?: string, conv?: (val: any, targetObj: any) => any, backconv?: (val: any, sourceData: any, model: <a href="Model.html" class="tsd-signature-type" data-tsd-kind="Class">Model</a>) => any): <a href="Binding.html" class="tsd-signature-type" data-tsd-kind="Class">Binding</a></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography"> The constructor creates a one-way binding. </div><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameters"><li><h5>Optional targetprop: string</h5><div class="tsd-comment tsd-typography"> A string naming the target property on the target object. This should not be the empty string. </div></li><li><h5>Optional sourceprop: string</h5><div class="tsd-comment tsd-typography"> A string naming the source property on the bound data object. If this is the empty string, the whole <a href="Panel.html#data">Panel.data</a> object is used. If this argument is not supplied, the source property is assumed to be the same as the target property. </div></li><li><h5>Optional conv: (val: any, targetObj: any) => any</h5><div class="tsd-comment tsd-typography"> A side-effect-free function converting the data property value to the value to set the target property. If the function is null or not supplied, no conversion takes place. </div><ul class="tsd-parameters"><li class="tsd-parameter-signature"><ul class="tsd-signatures tsd-kind-type-literal"><li class="tsd-signature tsd-kind-icon">(val: any, targetObj: any): any</li></ul><ul class="tsd-descriptions"><li class="tsd-description"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameters"><li><h5>val: any</h5></li><li><h5>targetObj: any</h5></li></ul><h4 class="tsd-returns-title">Returns any</h4></li></ul></li></ul></li><li><h5>Optional backconv: (val: any, sourceData: any, model: <a href="Model.html" class="tsd-signature-type" data-tsd-kind="Class">Model</a>) => any</h5><div class="tsd-comment tsd-typography"> An optional conversion function to convert property values back to data values. Specifying this function or specifying null modifies this binding to set its <a href="Binding.html#mode">mode</a> to be <a href="Binding.html#static-TwoWay">Binding.TwoWay</a>. If you do not want a two-way binding, leave this argument unspecified (<code>undefined</code>). </div><ul class="tsd-parameters"><li class="tsd-parameter-signature"><ul class="tsd-signatures tsd-kind-type-literal"><li class="tsd-signature tsd-kind-icon">(val: any, sourceData: any, model: <a href="Model.html" class="tsd-signature-type" data-tsd-kind="Class">Model</a>): any</li></ul><ul class="tsd-descriptions"><li class="tsd-description"><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameters"><li><h5>val: any</h5></li><li><h5>sourceData: any</h5></li><li><h5>model: <a href="Model.html" class="tsd-signature-type" data-tsd-kind="Class">Model</a></h5></li></ul><h4 class="tsd-returns-title">Returns any</h4></li></ul></li></ul></li></ul><h4 class="tsd-returns-title">Returns <a href="Binding.html" class="tsd-signature-type" data-tsd-kind="Class">Binding</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 id="backConverter" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> backConverter: (val: any, sourceData: any, model: <a href="Model.html" class="tsd-signature-type" data-tsd-kind="Class">Model</a>) => any<a href="#backConverter" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography"> Gets or sets a converter function to apply to the <a href="GraphObject.html">GraphObject</a> property value in order to produce the value to set to a data property. This conversion function is only used in a TwoWay binding, when transferring a value from the target to the source. 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. However, the return value is ignored when the <a href="Binding.html#sourceProperty">sourceProperty</a> is the empty string. <div>Conversion functions must not have any side-effects other than setting the source property. The function is passed the value from the target (the first argument), the source <a href="Panel.html#data">Panel.data</a> object (the second argument), and the <a href="Model.html">Model</a> (the third argument). If the <a href="Binding.html#sourceProperty">sourceProperty</a> is a property name, that property is set to the function's return value. If the <a href="Binding.html#sourceProperty">sourceProperty</a> is the empty string, the function should modify the second argument, which will be the source data object. </div></div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="converter" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> converter: (val: any, targetObj: any) => any<a href="#converter" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography"> Gets or sets a converter function to apply to the data property value in order to produce the value to set to the target property. This conversion function is used in both OneWay and TwoWay bindings, when transferring a value from the source to the target. 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. However, the return value is ignored when the <a href="Binding.html#targetProperty">targetProperty</a> is the empty string. <div>Conversion functions must not have any side-effects other than setting the target property. In particular you should not try to modify the structure of the visual tree in the target GraphObject's Part's visual tree. The function is passed the value from the source (the first argument) and the target <a href="GraphObject.html">GraphObject</a> (the second argument). If the <a href="Binding.html#targetProperty">targetProperty</a> is a property name, that property is set to the function's return value. If the <a href="Binding.html#targetProperty">targetProperty</a> is the empty string, the function should set a property on the second argument, which will be the target GraphObject. </div></div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="isToModel" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> isToModel: boolean<a href="#isToModel" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography"> Gets or sets whether the source data is <a href="Model.html#modelData">Model.modelData</a> rather than a node data or link data object in the model. The default value is false -- the source data object will not be the shared Model.modelData object. <dl class="tsd-comment-tags"><dt class="">see</dt><dd><a href="Binding.html#ofModel">ofModel</a> </dd><dt class="">since</dt><dd>1.7 </dd></dl></div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="mode" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> mode: EnumValue<a href="#mode" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography"> Gets or sets the directions and frequency in which the binding may be evaluated. The default value is <a href="Binding.html#static-OneWay">Binding.OneWay</a>. <a href="Binding.html#static-TwoWay">Binding.TwoWay</a> is the other choice. <div>Use OneWay bindings to initialize GraphObject properties based on model data, or to modify GraphObject properties when the model data changes with a call to <a href="Model.html#setDataProperty">Model.setDataProperty</a>. Use TwoWay bindings to keep model data in sync with changes to GraphObject properties. For efficiency, avoid TwoWay bindings on GraphObject properties that do not change value in your app. You should not have a TwoWay binding on a node data object's key property. </div></div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="sourceName" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> sourceName: string<a href="#sourceName" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography"> Gets or sets the name of the <a href="GraphObject.html">GraphObject</a> that should act as a source object whose property should be gotten by this data binding. The default value is null, which uses the bound <a href="Panel.html#data">Panel.data</a> as the source. If the value is a string, it should be the name of a <a href="GraphObject.html">GraphObject</a> in the visual tree of the <a href="Panel.html">Panel</a> that is bound to the data. Use the empty string to refer to the root panel, which is typically the whole <a href="Node.html">Node</a> or <a href="Link.html">Link</a>, but will be a <a href="Panel.html">Panel</a> if used in a <a href="Panel.html#itemTemplate">Panel.itemTemplate</a>. The name must not contain a period. <div>Binding only works if the source property is settable, not on computed or read-only properties, and if it supports notification. The documentation for the GraphObject (or subclass of GraphObject) property will indicate if the property is settable and if it does not notify. </div></div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="sourceProperty" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> sourceProperty: string<a href="#sourceProperty" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography"> Gets or sets the name of the property to get from the bound data object, the value of <a href="Panel.html#data">Panel.data</a>. The default value is the empty string, which results in setting the target property to the whole data object, rather than to a property value o