gojs
Version:
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
236 lines • 184 kB
HTML
<!DOCTYPE html><html class="default"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>Model | 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"><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> <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"><b>GoJS</b>® Diagramming Components<br/>version 2.3.8<br/>by <a href="https://www.nwoods.com/">Northwoods Software®</a></div><div><h1>Class Model </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><span class="target">Model</span><ul class="tsd-hierarchy"><li><a href="GraphLinksModel.html" class="tsd-signature-type" data-tsd-kind="Class">GraphLinksModel</a></li><li><a href="TreeModel.html" class="tsd-signature-type" data-tsd-kind="Class">TreeModel</a></li></ul></li></ul></section><section class="tsd-panel tsd-comment"><div class="tsd-comment tsd-typography">
<p>Models hold the essential data of a diagram, describing the basic entities and their properties and relationships
without specifying the appearance and behavior of the Nodes and Links and Groups that represent them visually.
Models tend to hold only relatively simple data, making them easy to persist by serialization as JSON or XML formatted text.</p>
<div><p>Models hold simple data objects, not <a href="Part.html">Part</a>s such as <a href="Node.html">Node</a>s or <a href="Link.html">Link</a>s.
Node data is normally represented in a <a href="Diagram.html">Diagram</a> by instances of <a href="Node.html">Node</a>,
but they could be represented by simple <a href="Part.html">Part</a>s or by <a href="Group.html">Group</a>s.
A Diagram constructs Parts for its <a href="Diagram.html#model">Diagram.model</a>'s data by copying templates.
Templates are <a href="Panel.html">Panel</a>s of <a href="GraphObject.html">GraphObject</a>s that get some property values from the model data,
accessible via the <a href="Panel.html#data">Panel.data</a> property, using data <a href="Binding.html">Binding</a>.
See <a href="../../intro/usingModels.html">Using Models</a> and <a href="../../intro/dataBinding.html">Data Binding</a> for an introduction.</p>
<p>This Model class only supports holding an array of node data
and interpreting properties on that data to be able to refer to them
using unique key values.
To support simple tree-structured graphs, use a <a href="TreeModel.html">TreeModel</a>, which inherits from this class.
To support links and grouping, use a <a href="GraphLinksModel.html">GraphLinksModel</a>.</p>
<p>Each node data object is assumed to have a unique key value.
The <a href="Model.html#nodeKeyProperty">nodeKeyProperty</a> property names the property on the node data whose value
is the unique key for that node data object.
The default value for this property is "key".
You should not have a TwoWay data binding on the node key property,
because that might cause the property value to be set to a duplicate key value.</p>
<p>The key values must be either strings or numbers or undefined.
If the key is undefined, or if there are duplicate key values,
the model will automatically try to assign a new unique key value.
Caution: if your keys are numbers, do not try to use string representations of those numbers as keys.
Conversely, if your keys are strings that happen to have number syntax, do not try to use those number values.
Sometimes JavaScript will automatically convert from string to number or vice-versa, but sometimes it won't.</p>
<p>For example, one can define a graph consisting of just two nodes:</p>
<pre><code class="language-js"><span class="hl-2"> </span><span class="hl-4">model</span><span class="hl-2">.</span><span class="hl-4">nodeDataArray</span><span class="hl-2"> = [</span><br/><span class="hl-2"> { </span><span class="hl-4">key:</span><span class="hl-2"> </span><span class="hl-6">"Alpha"</span><span class="hl-2"> },</span><br/><span class="hl-2"> { </span><span class="hl-4">key:</span><span class="hl-2"> </span><span class="hl-6">"Beta"</span><span class="hl-2"> }</span><br/><span class="hl-2"> ];</span>
</code></pre>
<p>This model cannot detect the modification of the <a href="Model.html#nodeDataArray">nodeDataArray</a> array
or the modification of any node data object.
If you want to add or remove node data from the <a href="Model.html#nodeDataArray">nodeDataArray</a>,
call the <a href="Model.html#addNodeData">addNodeData</a> or <a href="Model.html#removeNodeData">removeNodeData</a> methods.</p>
<p>If you want to modify a node data object, it depends on whether the property you want to change
is a structural property that the model needs to know about, or whether it is a property
that is only used for data binding or other application-specific purposes.</p>
<p>For the former case, call the appropriate method, such as
<a href="Model.html#setKeyForNodeData">setKeyForNodeData</a>, <a href="Model.html#setCategoryForNodeData">setCategoryForNodeData</a>,
<a href="GraphLinksModel.html#setToKeyForLinkData">GraphLinksModel.setToKeyForLinkData</a>, or <a href="GraphLinksModel.html#setGroupKeyForNodeData">GraphLinksModel.setGroupKeyForNodeData</a>.
These methods have names that start with "set", "add", "insert", or "remove".</p>
<p>For the latter case, when setting an application-specific property, typically for data binding,
and to support undo/redo, call <a href="Model.html#setDataProperty">setDataProperty</a>.</p>
<p>The <a href="Model.html#copyNodeData">copyNodeData</a> method can be called to make a shallow copy of a node data object.
However, if some of those property values are Arrays that want not to be shared but to be copied,
you can set <a href="Model.html#copiesArrays">copiesArrays</a> to true. This is typically very useful when dealing
with data bound item arrays.
Furthermore if the items in those copied Arrays are in fact Objects that need to be copied,
you can also set <a href="Model.html#copiesArrayObjects">copiesArrayObjects</a> to true, causing a copied Array to refer to
newly shallow-copied objects of the original array.</p>
<p>Each model raises <a href="ChangedEvent.html">ChangedEvent</a>s that you can follow by registering a listener via <a href="Model.html#addChangedListener">addChangedListener</a>.
Read more at the Introduction page: <a href="../../intro/changedEvents.html">Changed Events</a>.</p>
<p>Each model comes with its own <a href="UndoManager.html">UndoManager</a> that is initially not enabled.
You will need to set <a href="UndoManager.html#isEnabled">UndoManager.isEnabled</a> to true in order for the
UndoManager to record model changes and for your users to perform undo and redo.</p>
<p>You can temporarily turn off the recording of changes by setting <a href="Model.html#skipsUndoManager">skipsUndoManager</a> to true.
A number of places within the system do that routinely in order to avoid recording temporary changes,
so be sure to remember the original value beforehand and restore it afterwards.
Note that in a <a href="ChangedEvent.html">ChangedEvent</a> listener you may want to ignore events that happen when <a href="Model.html#skipsUndoManager">skipsUndoManager</a> is true.</p>
<p>One normally saves a diagram by just saving its model.
If you can use JSON-formatted text, this is easy to do -- just call <a href="Model.html#toJson">toJson</a>
to get the string representation of the model, and save that string.
Load the diagram by replacing the <a href="Diagram.html#model">Diagram.model</a> with one created by calling
the static function <a href="Model.html#static-fromJson">Model.fromJson</a>:</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">model</span><span class="hl-2"> = </span><span class="hl-4">go</span><span class="hl-2">.</span><span class="hl-4">Model</span><span class="hl-2">.</span><span class="hl-5">fromJson</span><span class="hl-2">(</span><span class="hl-4">loadedString</span><span class="hl-2">);</span>
</code></pre>
<p>Note that JSON and other textual data formats cannot faithfully store all JavaScript functions.
<a href="Model.html#toJson">toJson</a> and <a href="Model.html#static-fromJson">Model.fromJson</a> do not try to save and load functional property values.
You should arrange that all such functions, including event handlers, are established by your app.
<a href="Model.html#toJson">toJson</a> and <a href="Model.html#static-fromJson">Model.fromJson</a> also cannot handle circular references; any sharing of
references will be lost too.
They also skip properties that are not enumerable, those whose names start with an underscore, and those whose values are undefined.</p>
<p>Note that models also do not store the templates used by diagrams,
nor any transient or temporary parts such as <a href="Adornment.html">Adornment</a>s, nor any tools,
nor any <a href="UndoManager.html">UndoManager</a> state, nor any event listeners.
These objects and all other properties of diagrams must be established by your app.</p>
<p>You can add any number of properties to the <a href="Model.html#modelData">modelData</a> object, which is serialized and deserialized
into JSON just like any other model data for nodes or links.
However <a href="Model.html#modelData">modelData</a> is associated with the model as a whole and does not depend on the existence
of any node data or link data.</p>
<p>It is also easy to save the changes that were recorded in the most recent transaction.
Call <a href="Model.html#toIncrementalJson">toIncrementalJson</a> to generate a JSON-format string that holds the current state of modified data
plus the keys of inserted or removed data.
That method requires as an argument a <a href="ChangedEvent.html">ChangedEvent</a> that represents a transaction that completed or
an undo or a redo that just finished.</p>
<p>It is also possible to use such "incremental" JSON to modify an existing model.
Call <a href="Model.html#applyIncrementalJson">applyIncrementalJson</a>, giving it a string generated by <a href="Model.html#toIncrementalJson">toIncrementalJson</a>,
to modify this model by making all of the changes recorded in the JSON text.
Note how this method is a regular instance method, whereas <a href="Model.html#static-fromJson">Model.fromJson</a> is a static function.</p>
</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="Model.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="Model.html#copiesArrayObjects" class="tsd-kind-icon">copies<wbr/>Array<wbr/>Objects</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Model.html#copiesArrays" class="tsd-kind-icon">copies<wbr/>Arrays</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Model.html#copiesKey" class="tsd-kind-icon">copies<wbr/>Key</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Model.html#copyNodeDataFunction" class="tsd-kind-icon">copy<wbr/>Node<wbr/>Data<wbr/>Function</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Model.html#dataFormat" class="tsd-kind-icon">data<wbr/>Format</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Model.html#isReadOnly" class="tsd-kind-icon">is<wbr/>Read<wbr/>Only</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Model.html#makeUniqueKeyFunction" class="tsd-kind-icon">make<wbr/>Unique<wbr/>Key<wbr/>Function</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Model.html#modelData" class="tsd-kind-icon">model<wbr/>Data</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Model.html#name" class="tsd-kind-icon">name</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Model.html#nodeCategoryProperty" class="tsd-kind-icon">node<wbr/>Category<wbr/>Property</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Model.html#nodeDataArray" class="tsd-kind-icon">node<wbr/>Data<wbr/>Array</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Model.html#nodeKeyProperty" class="tsd-kind-icon">node<wbr/>Key<wbr/>Property</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Model.html#skipsUndoManager" class="tsd-kind-icon">skips<wbr/>Undo<wbr/>Manager</a></li><li class="tsd-kind-accessor tsd-parent-kind-class"><a href="Model.html#undoManager" class="tsd-kind-icon">undo<wbr/>Manager</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="Model.html#addArrayItem" class="tsd-kind-icon">add<wbr/>Array<wbr/>Item</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Model.html#addChangedListener" class="tsd-kind-icon">add<wbr/>Changed<wbr/>Listener</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Model.html#addNodeData" class="tsd-kind-icon">add<wbr/>Node<wbr/>Data</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Model.html#addNodeDataCollection" class="tsd-kind-icon">add<wbr/>Node<wbr/>Data<wbr/>Collection</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Model.html#applyIncrementalJson" class="tsd-kind-icon">apply<wbr/>Incremental<wbr/>Json</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Model.html#assignAllDataProperties" class="tsd-kind-icon">assign<wbr/>All<wbr/>Data<wbr/>Properties</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Model.html#clear" class="tsd-kind-icon">clear</a></li><li class="tsd-kind-method tsd-parent-kind-class tsd-has-type-parameter"><a href="Model.html#cloneDeep" class="tsd-kind-icon">clone<wbr/>Deep</a></li><li class="tsd-kind-method tsd-parent-kind-class tsd-is-protected"><a href="Model.html#cloneProtected" class="tsd-kind-icon">clone<wbr/>Protected</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Model.html#commit" class="tsd-kind-icon">commit</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Model.html#commitTransaction" class="tsd-kind-icon">commit<wbr/>Transaction</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Model.html#containsNodeData" class="tsd-kind-icon">contains<wbr/>Node<wbr/>Data</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Model.html#copy" class="tsd-kind-icon">copy</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Model.html#copyNodeData" class="tsd-kind-icon">copy<wbr/>Node<wbr/>Data</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Model.html#findNodeDataForKey" class="tsd-kind-icon">find<wbr/>Node<wbr/>Data<wbr/>For<wbr/>Key</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Model.html#getCategoryForNodeData" class="tsd-kind-icon">get<wbr/>Category<wbr/>For<wbr/>Node<wbr/>Data</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Model.html#getKeyForNodeData" class="tsd-kind-icon">get<wbr/>Key<wbr/>For<wbr/>Node<wbr/>Data</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Model.html#insertArrayItem" class="tsd-kind-icon">insert<wbr/>Array<wbr/>Item</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Model.html#makeNodeDataKeyUnique" class="tsd-kind-icon">make<wbr/>Node<wbr/>Data<wbr/>Key<wbr/>Unique</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Model.html#mergeNodeDataArray" class="tsd-kind-icon">merge<wbr/>Node<wbr/>Data<wbr/>Array</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Model.html#raiseChangedEvent" class="tsd-kind-icon">raise<wbr/>Changed<wbr/>Event</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Model.html#raiseDataChanged" class="tsd-kind-icon">raise<wbr/>Data<wbr/>Changed</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Model.html#removeArrayItem" class="tsd-kind-icon">remove<wbr/>Array<wbr/>Item</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Model.html#removeChangedListener" class="tsd-kind-icon">remove<wbr/>Changed<wbr/>Listener</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Model.html#removeNodeData" class="tsd-kind-icon">remove<wbr/>Node<wbr/>Data</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Model.html#removeNodeDataCollection" class="tsd-kind-icon">remove<wbr/>Node<wbr/>Data<wbr/>Collection</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Model.html#rollbackTransaction" class="tsd-kind-icon">rollback<wbr/>Transaction</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Model.html#set" class="tsd-kind-icon">set</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Model.html#setCategoryForNodeData" class="tsd-kind-icon">set<wbr/>Category<wbr/>For<wbr/>Node<wbr/>Data</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Model.html#setDataProperty" class="tsd-kind-icon">set<wbr/>Data<wbr/>Property</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Model.html#setKeyForNodeData" class="tsd-kind-icon">set<wbr/>Key<wbr/>For<wbr/>Node<wbr/>Data</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Model.html#startTransaction" class="tsd-kind-icon">start<wbr/>Transaction</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Model.html#toIncrementalData" class="tsd-kind-icon">to<wbr/>Incremental<wbr/>Data</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Model.html#toIncrementalJson" class="tsd-kind-icon">to<wbr/>Incremental<wbr/>Json</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Model.html#toJson" class="tsd-kind-icon">to<wbr/>Json</a></li><li class="tsd-kind-method tsd-parent-kind-class"><a href="Model.html#updateTargetBindings" class="tsd-kind-icon">update<wbr/>Target<wbr/>Bindings</a></li><li class="tsd-kind-method tsd-parent-kind-class tsd-is-static"><a href="Model.html#static-fromJson" class="tsd-kind-icon">from<wbr/>Json</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 <wbr/>Model<span class="tsd-signature-symbol">(</span>nodedataarray<span class="tsd-signature-symbol">?: </span><a href="ObjectData.html" class="tsd-signature-type" data-tsd-kind="Interface">ObjectData</a><span class="tsd-signature-symbol">[]</span>, init<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="Model.html" class="tsd-signature-type" data-tsd-kind="Class">Model</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="Model.html" class="tsd-signature-type" data-tsd-kind="Class">Model</a></li><li class="tsd-signature tsd-kind-icon">new <wbr/>Model<span class="tsd-signature-symbol">(</span>init<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="Model.html" class="tsd-signature-type" data-tsd-kind="Class">Model</a><span class="tsd-signature-symbol">></span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><a href="Model.html" class="tsd-signature-type" data-tsd-kind="Class">Model</a></li></ul><ul class="tsd-descriptions"><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>You probably don't want to call this constructor, because this class
does not support links (relationships between nodes) or groups (nodes and links and subgraphs as nodes):
instead, create instances of a subclass such as <a href="GraphLinksModel.html">GraphLinksModel</a> or <a href="TreeModel.html">TreeModel</a>.</p>
</div><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameters"><li><h5><span class="tsd-flag ts-flagOptional">Optional</span> nodedataarray: <a href="ObjectData.html" class="tsd-signature-type" data-tsd-kind="Interface">ObjectData</a><span class="tsd-signature-symbol">[]</span></h5><div class="tsd-comment tsd-typography">
<p>an optional Array containing JavaScript objects to be represented by <a href="Part.html">Part</a>s.</p>
</div></li><li><h5><span class="tsd-flag ts-flagOptional">Optional</span> init: <span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="Model.html" class="tsd-signature-type" data-tsd-kind="Class">Model</a><span class="tsd-signature-symbol">></span></h5><div class="tsd-comment tsd-typography">
<p>Optional initialization properties.</p>
</div></li></ul><h4 class="tsd-returns-title">Returns <a href="Model.html" class="tsd-signature-type" data-tsd-kind="Class">Model</a></h4></li><li class="tsd-description"><div class="tsd-comment tsd-typography">
<p>You probably don't want to call this constructor, because this class
does not support links (relationships between nodes) or groups (nodes and links and subgraphs as nodes):
instead, create instances of a subclass such as <a href="GraphLinksModel.html">GraphLinksModel</a> or <a href="TreeModel.html">TreeModel</a>.</p>
</div><h4 class="tsd-parameters-title">Parameters</h4><ul class="tsd-parameters"><li><h5><span class="tsd-flag ts-flagOptional">Optional</span> init: <span class="tsd-signature-type">Partial</span><span class="tsd-signature-symbol"><</span><a href="Model.html" class="tsd-signature-type" data-tsd-kind="Class">Model</a><span class="tsd-signature-symbol">></span></h5><div class="tsd-comment tsd-typography">
<p>Optional initialization properties.</p>
</div></li></ul><h4 class="tsd-returns-title">Returns <a href="Model.html" class="tsd-signature-type" data-tsd-kind="Class">Model</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="copiesArrayObjects" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> copies<wbr/>Array<wbr/>Objects<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><a href="#copiesArrayObjects" 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">
<p>Gets or sets whether the default behavior for <a href="Model.html#copyNodeData">copyNodeData</a> or <a href="GraphLinksModel.html#copyLinkData">GraphLinksModel.copyLinkData</a>
when copying Arrays also copies array items that are Objects.
This only covers copying Objects that are items in Arrays that are copied when <a href="Model.html#copiesArrays">copiesArrays</a> is true.
Copying an Object when this property is true also recursively copies any Arrays that are property values.
It also assumes that the object's constructor can be called with no arguments.</p>
<div><p>The default value is false.
This property does not affect any behavior when the value of <a href="Model.html#copyNodeDataFunction">copyNodeDataFunction</a>
or <a href="GraphLinksModel.html#copyLinkDataFunction">GraphLinksModel.copyLinkDataFunction</a> has been set to a function.
This property has no effect unless <a href="Model.html#copiesArrays">copiesArrays</a> is true.</p>
<p>Caution: if you want a copied data object to share some references but not others,
you will need to provide your own copying function as <a href="Model.html#copyNodeDataFunction">copyNodeDataFunction</a> rather than setting
this property and <a href="Model.html#copiesArrays">copiesArrays</a> to true.</p>
<p>Warning: there should not be any cyclical references within the model data.</p>
</div><dl class="tsd-comment-tags"><dt class="">see</dt><dd><p><a href="Model.html#copiesArrays">copiesArrays</a>, <a href="Model.html#copyNodeDataFunction">copyNodeDataFunction</a></p>
</dd><dt class="">since</dt><dd><p>1.5</p>
</dd></dl></div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="copiesArrays" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> copies<wbr/>Arrays<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><a href="#copiesArrays" 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">
<p>Gets or sets whether the default behavior for <a href="Model.html#copyNodeData">copyNodeData</a> or <a href="GraphLinksModel.html#copyLinkData">GraphLinksModel.copyLinkData</a>
makes copies of property values that are Arrays.
This only copies Arrays that are top-level property values in data objects, not for Arrays that are in nested objects.
Copying Arrays will also copy any array items that are Objects when <a href="Model.html#copiesArrayObjects">copiesArrayObjects</a> is true.</p>
<div><p>The default value is false.
It is commonplace to set <a href="Model.html#copiesArrayObjects">copiesArrayObjects</a> to true when setting this property to true.
This property does not affect any behavior when the value of <a href="Model.html#copyNodeDataFunction">copyNodeDataFunction</a>
or <a href="GraphLinksModel.html#copyLinkDataFunction">GraphLinksModel.copyLinkDataFunction</a> has been set to a function.</p>
<p>Caution: if you want a copied data object to share some Arrays but not others,
you will need to provide your own copying function as <a href="Model.html#copyNodeDataFunction">copyNodeDataFunction</a> rather than setting
this property to true.</p>
<p>Warning: there should not be any cyclical references within the model data.</p>
</div><dl class="tsd-comment-tags"><dt class="">see</dt><dd><p><a href="Model.html#copiesArrayObjects">copiesArrayObjects</a>, <a href="Model.html#copyNodeDataFunction">copyNodeDataFunction</a></p>
</dd><dt class="">since</dt><dd><p>1.5</p>
</dd></dl></div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="copiesKey" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> copies<wbr/>Key<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><a href="#copiesKey" 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">
<p>Gets or sets whether the default behavior for <a href="Model.html#copyNodeData">copyNodeData</a> or <a href="GraphLinksModel.html#copyLinkData">GraphLinksModel.copyLinkData</a>
when copying properties of a data object also copies the key property value.
Set this to false in order to force a unique key generation for data copied from another Diagram, such as a Palette.</p>
<div><p>The default value is true.
This property does not affect any behavior when the value of <a href="Model.html#copyNodeDataFunction">copyNodeDataFunction</a> has been set to a function.</p>
</div><dl class="tsd-comment-tags"><dt class="">see</dt><dd><p><a href="Model.html#copiesArrays">copiesArrays</a>, <a href="Model.html#copyNodeDataFunction">copyNodeDataFunction</a></p>
</dd><dt class="">since</dt><dd><p>2.0</p>
</dd></dl></div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="copyNodeDataFunction" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> copy<wbr/>Node<wbr/>Data<wbr/>Function<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span>data<span class="tsd-signature-symbol">: </span><a href="ObjectData.html" class="tsd-signature-type" data-tsd-kind="Interface">ObjectData</a>, model<span class="tsd-signature-symbol">: </span><a href="Model.html" class="tsd-signature-type" data-tsd-kind="Class">Model</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> => </span><a href="ObjectData.html" class="tsd-signature-type" data-tsd-kind="Interface">ObjectData</a><a href="#copyNodeDataFunction" 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">
<p>Gets or sets a function that makes a copy of a node data object.</p>
<div><p>You may need to set this property in order to ensure that a copied <a href="Node.html">Node</a> is bound
to data that does not share certain data structures between the original node data and the copied node data.
This property value may be null in order to cause <a href="Model.html#copyNodeData">copyNodeData</a> to make a shallow copy of a JavaScript Object.
The default value is null.</p>
<p>The first argument to the function will be a node data object (potentially a <a href="Part.html">Part</a>'s <a href="Panel.html#data">Panel.data</a>).
The second argument to the function will be this Model itself.</p>
<p>It is common to implement a copying function when the node data has an Array of data
and that Array needs to be copied rather than shared.
Often the objects that are in the Array also need to be copied.</p>
</div></div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="dataFormat" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> data<wbr/>Format<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><a href="#dataFormat" 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">
<p>Gets or sets the name of the format of the diagram data.
The default value is the empty string.
The value must not be null.
Use different values to prevent parts from one model to be copy/pasted or drag-and-dropped into another diagram/model.</p>
</div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="isReadOnly" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> is<wbr/>Read<wbr/>Only<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">boolean</span><a href="#isReadOnly" 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">
<p>Gets or sets whether this model may be modified, such as adding nodes.
By default this value is false.
Setting the <a href="Model.html#nodeDataArray">nodeDataArray</a> to something that is not a true Array of Objects
will cause this to be set to true.</p>
<div><p>Model methods and property setters do not heed this property.
It is up to code that uses a model to check this property when it might want to
prevent changes to the model.</p>
</div></div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="makeUniqueKeyFunction" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> make<wbr/>Unique<wbr/>Key<wbr/>Function<span class="tsd-signature-symbol">: </span><span class="tsd-signature-symbol">(</span>model<span class="tsd-signature-symbol">: </span><a href="Model.html" class="tsd-signature-type" data-tsd-kind="Class">Model</a>, data<span class="tsd-signature-symbol">: </span><a href="ObjectData.html" class="tsd-signature-type" data-tsd-kind="Interface">ObjectData</a><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol"> => </span><a href="../index.html#Key" class="tsd-signature-type" data-tsd-kind="Type alias">Key</a><a href="#makeUniqueKeyFunction" 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">
<p>Gets or sets a function that returns a unique id number or string for a node data object.
This function is called by <a href="Model.html#makeNodeDataKeyUnique">makeNodeDataKeyUnique</a>
when a node data object is added to the model, either as part of a new
<a href="Model.html#nodeDataArray">nodeDataArray</a> or by a call to <a href="Model.html#addNodeData">addNodeData</a>, to make sure the value of
<a href="Model.html#getKeyForNodeData">getKeyForNodeData</a> is unique within the model.</p>
<div><p>The value may be null in order to cause <a href="Model.html#makeNodeDataKeyUnique">makeNodeDataKeyUnique</a> behave in the standard manner.
(The default value is null.)
You may want to supply a function here in order to make sure all of the automatically generated keys
are in a particular format.
Setting this property after setting <a href="Model.html#nodeDataArray">nodeDataArray</a> has no real effect until there is a call
to <a href="Model.html#addNodeData">addNodeData</a>.</p>
<p>If you want to ensure that this function is called when copying data that already has a key,
set <a href="Model.html#copiesKey">copiesKey</a> to false.
This is typically useful when copying a node from a Palette, where the key it has in the Palette's Model
happens to be unique within the target Diagram's Model.
Unless you set <a href="Model.html#copiesKey">copiesKey</a> to false, the original key value will be copied and retained
if it is already unique within the target model.</p>
<p>If a node data object is already in the model and you want to change its key value,
call <a href="Model.html#setKeyForNodeData">setKeyForNodeData</a> with a new and unique key.</p>
</div></div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="modelData" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> model<wbr/>Data<span class="tsd-signature-symbol">: </span><a href="ObjectData.html" class="tsd-signature-type" data-tsd-kind="Interface">ObjectData</a><a href="#modelData" 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">
<p>Gets a JavaScript Object that can hold programmer-defined property values for the model as a whole,
rather than just for one node or one link.</p>
<div><p>By default this an object with no properties.
Any properties that you add to this object will be written out by <a href="Model.html#toJson">toJson</a>
and will be restored by <a href="Model.html#static-fromJson">Model.fromJson</a>, if the following conditions are true:</p>
<ul>
<li>the property is enumerable and its name does not start with an underscore ('_')</li>
<li>the property value is not undefined and is not a function</li>
<li>the model knows how to convert the property value to JSON format</li>
<li>property values that are Objects or Arrays form a tree structure -- no shared or cyclical references</li>
</ul>
<p>Most object classes cannot be serialized into JSON without special knowledge and processing at both ends.
The <a href="Model.html#toJson">toJson</a> and <a href="Model.html#static-fromJson">Model.fromJson</a> methods automatically do such processing for numbers that are NaN
and for objects that are of class <a href="Point.html">Point</a>, <a href="Size.html">Size</a>, <a href="Rect.html">Rect</a>, <a href="Margin.html">Margin</a>, <a href="Spot.html">Spot</a>,
<a href="Brush.html">Brush</a> (but not for brush patterns), and for <a href="Geometry.html">Geometry</a>.</p>
<p>At the current time one cannot have a <a href="Diagram.html">Diagram</a> as a binding target.
Calling <a href="Model.html#setDataProperty">setDataProperty</a> will work to change a property value, but there are no target bindings in any Diagrams to be updated.
Because the binding mechanism is unavailable for this object, we recommend that when you want to save a model
that you explicitly set properties on this object just before calling <a href="Model.html#toJson">toJson</a>.
When loading a model, call <a href="Model.html#static-fromJson">Model.fromJson</a> and explicitly get the properties that you want to set on a Diagram.</p>
</div></div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="name" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> name<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span><a href="#name" 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">
<p>Gets or sets the name of this model.
The initial name is an empty string.
The value must not be null.</p>
</div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="nodeCategoryProperty" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> node<wbr/>Category<wbr/>Property<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><span class="tsd-signature-symbol">(</span>a<span class="tsd-signature-symbol">: </span><a href="ObjectData.html" class="tsd-signature-type" data-tsd-kind="Interface">ObjectData</a>, b<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><span class="tsd-signature-type">string</span><span class="tsd-signature-symbol">)</span><a href="#nodeCategoryProperty" 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">
<p>Gets or sets the name of the node data property that returns a string naming that data's category.
The value may also be a function taking two arguments, where the first argument will be a node data object.
If the second argument is not supplied, the function should return the category name;
if the second argument is supplied, the function should modify the node data object so that it has that new category name.
The default value is the string 'category', meaning that it expects the data to have a property named 'category' if it cares to name a category.
This is used by the diagram to distinguish between different kinds of nodes.
The name must not be null.
If the value is an empty string,
<a href="Model.html#getCategoryForNodeData">getCategoryForNodeData</a> will return an empty string for all node data objects.</p>
<div><p>If you want to set this property you must do so before using the model, and especially before you assign <a href="Diagram.html#model">Diagram.model</a>.
Note that functions cannot be serialized into JSON-formatted text, so if you are using <a href="Model.html#toJson">toJson</a> and <a href="Model.html#static-fromJson">Model.fromJson</a>,
and if you want this property to be a function, you will need to assign this property to your desired function
immediately after creating the model, including when it is created by <a href="Model.html#static-fromJson">Model.fromJson</a>.</p>
</div><dl class="tsd-comment-tags"><dt class="">see</dt><dd><p><a href="Model.html#getCategoryForNodeData">getCategoryForNodeData</a>, <a href="Model.html#setCategoryForNodeData">setCategoryForNodeData</a></p>
</dd></dl></div></li></ul></section><section class="tsd-panel tsd-member tsd-kind-accessor tsd-parent-kind-class"><a id="nodeDataArray" class="tsd-anchor"></a><h3 class="tsd-anchor-link"> node<wbr/>Data<wbr/>Array<span class="tsd-signature-symbol">: </span><a href="ObjectData.html" class="tsd-signature-type" data-tsd-kind="Interface">ObjectData</a><span class="tsd-signature-symbol">[]</span><a href="#nodeDataArray" 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">
<p>Gets or sets the array of node data objects that correspond to <a href="Node.html">Node</a>s,
<a href="Group.html">Group</a>s, or non-Link <a href="Part.html">Part</a>s in the <a href="Diagram.html">Diagram</a>.
The initial value is an empty Array.</p>
<div><p>For each Object in the Array, <a href="Model.html#getKeyForNodeData">getKeyForNodeData</a> should return a number or string
uniquely identifying the node data within the model.
If it returns undefined, this calls <a href="Model.html#makeNodeDataKeyUnique">makeNodeDataKeyUnique</a>,
to make sure the node data has a unique key.
Th