markgojs

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>GoJS® Model Class</title> <script src="../../assets/js/jquery.min.js"></script> <script src="../../assets/js/bootstrap.min.js"></script> <script src="../../assets/js/highlight.js"></script> <script src="../../assets/js/api.js"></script> <script src="../../assets/js/fuse.min.js"></script> <link href="../../assets/css/bootstrap.min.css" rel="stylesheet" >  <link href="../../assets/css/main.css" rel="stylesheet" type="text/css"/> <link href="../../assets/css/api.css" rel="stylesheet" type="text/css"/>  <link rel="stylesheet" href="../../assets/css/highlight.css" type="text/css" media="all" /> </head> <body>  <nav id="non-fixed-nav" class="navbar navbar-inverse navbar-top"> <div class="container-fluid"> <div class="navbar-header"> <div class="navheader-container"> <div class="navheader-collapse" data-toggle="collapse" data-target="#navbar"> <a id="toplogo" class="navbar-brand" href="../../index.html">GoJS</a> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> </div> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="../../index.html">Home</a></li> <li><a href="../../learn/index.html">Learn</a></li> <li><a href="../../samples/index.html">Samples</a></li> <li><a href="../../intro/index.html">Intro</a></li> <li><a href="../../api/index.html">API</a></li> <li><a href="https://www.nwoods.com/components/evalform.htm">Register</a></li> <li><a href="../../download.html">Download</a></li> <li><a href="https://forum.nwoods.com/c/gojs">Forum</a></li> <li><a href="https://www.nwoods.com/contact.html" onclick="ga('send','event','Outbound Link','click','contact');">Contact</a></li> <li class="buy"><a href="https://www.nwoods.com/sales/index.html" onclick="ga('send','event','Outbound Link','click','buy');">Buy</a></li> <li class="activate"><a href="https://www.nwoods.com/app/activate.aspx?sku=gojs">Activate</a></li> </ul> </div> </div> </nav> <div class="container-fluid">  <div id="navindex" class="col-md-2">   <div class="sidebar-nav"> <div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <div class="navheader-container"> <div class="navheader-collapse" data-toggle="collapse" data-target="#DiagramNavbar"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#DiagramNavbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <span class="navbar-brand">Diagram Classes</span> </div> </div> <div id="DiagramNavbar" class="navbar-collapse collapse sidebar-navbar-collapse"> <ul class="classList nav navbar-nav"> <li><a href="../symbols/Adornment.html" class="linkConstructor">Adornment</a></li> <li><a href="../symbols/AnimationManager.html" class="linkConstructor">AnimationManager</a></li> <li><a href="../symbols/CommandHandler.html" class="linkConstructor">CommandHandler</a></li> <li><a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a></li> <li><a href="../symbols/DiagramEvent.html" class="linkConstructor">DiagramEvent</a></li> <li><a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a></li> <li><a href="../symbols/Group.html" class="linkConstructor">Group</a></li> <li><a href="../symbols/InputEvent.html" class="linkConstructor">InputEvent</a></li> <li><a href="../symbols/Layer.html" class="linkConstructor">Layer</a></li> <li><a href="../symbols/Link.html" class="linkConstructor">Link</a></li> <li><a href="../symbols/Node.html" class="linkConstructor">Node</a></li> <li><a href="../symbols/Overview.html" class="linkConstructor">Overview</a></li> <li><a href="../symbols/Palette.html" class="linkConstructor">Palette</a></li> <li><a href="../symbols/Panel.html" class="linkConstructor">Panel</a></li> <li><a href="../symbols/Part.html" class="linkConstructor">Part</a></li> <li><a href="../symbols/Picture.html" class="linkConstructor">Picture</a></li> <li><a href="../symbols/Placeholder.html" class="linkConstructor">Placeholder</a></li> <li><a href="../symbols/RowColumnDefinition.html" class="linkConstructor">RowColumnDefinition</a></li> <li><a href="../symbols/Shape.html" class="linkConstructor">Shape</a></li> <li><a href="../symbols/TextBlock.html" class="linkConstructor">TextBlock</a></li> </ul> </div> </div> <div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <div class="navheader-container"> <div class="navheader-collapse" data-toggle="collapse" data-target="#GeometryNavbar"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#GeometryNavbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <span class="navbar-brand">Geometry Classes</span> </div> </div> <div id="GeometryNavbar" class="navbar-collapse collapse sidebar-navbar-collapse"> <ul class="classList nav navbar-nav"> <li><a href="../symbols/Brush.html" class="linkConstructor">Brush</a></li> <li><a href="../symbols/Geometry.html" class="linkConstructor">Geometry</a></li> <li><a href="../symbols/Margin.html" class="linkConstructor">Margin</a></li> <li><a href="../symbols/PathFigure.html" class="linkConstructor">PathFigure</a></li> <li><a href="../symbols/PathSegment.html" class="linkConstructor">PathSegment</a></li> <li><a href="../symbols/Point.html" class="linkConstructor">Point</a></li> <li><a href="../symbols/Rect.html" class="linkConstructor">Rect</a></li> <li><a href="../symbols/Size.html" class="linkConstructor">Size</a></li> <li><a href="../symbols/Spot.html" class="linkConstructor">Spot</a></li> </ul> </div> </div> <div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <div class="navheader-container"> <div class="navheader-collapse" data-toggle="collapse" data-target="#ModelNavbar"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#ModelNavbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <span class="navbar-brand">Model Classes</span> </div> </div> <div id="ModelNavbar" class="navbar-collapse collapse sidebar-navbar-collapse"> <ul class="classList nav navbar-nav"> <li><a href="../symbols/Binding.html" class="linkConstructor">Binding</a></li> <li><a href="../symbols/ChangedEvent.html" class="linkConstructor">ChangedEvent</a></li> <li><a href="../symbols/GraphLinksModel.html" class="linkConstructor">GraphLinksModel</a></li> <li><a href="../symbols/Model.html" class="linkConstructor">Model</a></li> <li><a href="../symbols/Transaction.html" class="linkConstructor">Transaction</a></li> <li><a href="../symbols/TreeModel.html" class="linkConstructor">TreeModel</a></li> <li><a href="../symbols/UndoManager.html" class="linkConstructor">UndoManager</a></li> </ul> </div> </div> <div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <div class="navheader-container"> <div class="navheader-collapse" data-toggle="collapse" data-target="#LayoutNavbar"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#LayoutNavbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <span class="navbar-brand">Layout Classes</span> </div> </div> <div id="LayoutNavbar" class="navbar-collapse collapse sidebar-navbar-collapse"> <ul class="classList nav navbar-nav"> <li><a href="../symbols/CircularLayout.html" class="linkConstructor">CircularLayout</a></li> <li><a href="../symbols/ForceDirectedLayout.html" class="linkConstructor">ForceDirectedLayout</a></li> <li><a href="../symbols/GridLayout.html" class="linkConstructor">GridLayout</a></li> <li><a href="../symbols/LayeredDigraphLayout.html" class="linkConstructor">LayeredDigraphLayout</a></li> <li><a href="../symbols/Layout.html" class="linkConstructor">Layout</a></li> <li><a href="../symbols/LayoutNetwork.html" class="linkConstructor">LayoutNetwork</a></li> <li><a href="../symbols/TreeLayout.html" class="linkConstructor">TreeLayout</a></li> </ul> </div> </div> <div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <div class="navheader-container"> <div class="navheader-collapse" data-toggle="collapse" data-target="#ToolNavbar"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#ToolNavbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <span class="navbar-brand">Tool Classes</span> </div> </div> <div id="ToolNavbar" class="navbar-collapse collapse sidebar-navbar-collapse"> <ul class="classList nav navbar-nav"> <li><a href="../symbols/ActionTool.html" class="linkConstructor">ActionTool</a></li> <li><a href="../symbols/ClickCreatingTool.html" class="linkConstructor">ClickCreatingTool</a></li> <li><a href="../symbols/ClickSelectingTool.html" class="linkConstructor">ClickSelectingTool</a></li> <li><a href="../symbols/ContextMenuTool.html" class="linkConstructor">ContextMenuTool</a></li> <li><a href="../symbols/DraggingTool.html" class="linkConstructor">DraggingTool</a></li> <li><a href="../symbols/DragSelectingTool.html" class="linkConstructor">DragSelectingTool</a></li> <li><a href="../symbols/HTMLInfo.html" class="linkConstructor">HTMLInfo</a></li> <li><a href="../symbols/LinkingBaseTool.html" class="linkConstructor">LinkingBaseTool</a></li> <li><a href="../symbols/LinkingTool.html" class="linkConstructor">LinkingTool</a></li> <li><a href="../symbols/LinkReshapingTool.html" class="linkConstructor">LinkReshapingTool</a></li> <li><a href="../symbols/PanningTool.html" class="linkConstructor">PanningTool</a></li> <li><a href="../symbols/RelinkingTool.html" class="linkConstructor">RelinkingTool</a></li> <li><a href="../symbols/ResizingTool.html" class="linkConstructor">ResizingTool</a></li> <li><a href="../symbols/RotatingTool.html" class="linkConstructor">RotatingTool</a></li> <li><a href="../symbols/TextEditingTool.html" class="linkConstructor">TextEditingTool</a></li> <li><a href="../symbols/Tool.html" class="linkConstructor">Tool</a></li> <li><a href="../symbols/ToolManager.html" class="linkConstructor">ToolManager</a></li> </ul> </div> </div> <div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <div class="navheader-container"> <div class="navheader-collapse" data-toggle="collapse" data-target="#CollectionNavbar"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#CollectionNavbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <span class="navbar-brand">Collection Classes</span> </div> </div> <div id="CollectionNavbar" class="navbar-collapse collapse sidebar-navbar-collapse"> <ul class="classList nav navbar-nav"> <li><a href="../symbols/Iterable.html" class="linkConstructor">Iterable</a></li> <li><a href="../symbols/Iterator.html" class="linkConstructor">Iterator</a></li> <li><a href="../symbols/List.html" class="linkConstructor">List</a></li> <li><a href="../symbols/Map.html" class="linkConstructor">Map</a></li> <li><a href="../symbols/Set.html" class="linkConstructor">Set</a></li> </ul> </div> </div> </div>   </div> <div id="contentBody" class="col-md-10"> <div class="searchsumm"> <div class="table-wrap"> <div class="table-cell" id="apisearch" data-base="../"> <div class="title">Search API</div> <div class="field"> <label for="search-field" class="search-icon"></label> <input id="search-field" type="text" /> </div> <ul class="results"> <li class="state loading">Preparing search index...</li> <li class="state failure">The search index is not available</li> </ul> </div> <div class="table-cell" id="apisumm"> <input type="checkbox" id="showsumms" /> <label class="apisumms" for="showsumms">Show Summaries</label> </div> </div> </div>  <div id="header" class="fineprint"> <b>GoJS</b>® Diagramming Components<br/>version 1.8.36 for JavaScript/HTML<br/>by <a href="https://www.nwoods.com/">Northwoods Software®</a> </div>  <h2 class="classTitle"> Class Model </h2>  <p class="classsummary"> 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> Models hold simple data objects, not <a href="../symbols/Part.html" class="linkConstructor">Part</a>s such as <a href="../symbols/Node.html" class="linkConstructor">Node</a>s or <a href="../symbols/Link.html" class="linkConstructor">Link</a>s. Node data is normally represented in a <a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a> by instances of <a href="../symbols/Node.html" class="linkConstructor">Node</a>, but they could be represented by simple <a href="../symbols/Part.html" class="linkConstructor">Part</a>s or by <a href="../symbols/Group.html" class="linkConstructor">Group</a>s. A Diagram constructs Parts for its <a href="../symbols/Diagram.html#model" class="linkProperty">Diagram.model</a>'s data by copying templates. Templates are <a href="../symbols/Panel.html" class="linkConstructor">Panel</a>s of <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>s that get some property values from the model data, accessible via the <a href="../symbols/Panel.html#data" class="linkProperty">Panel.data</a> property, using data <a href="../symbols/Binding.html" class="linkConstructor">Binding</a>. See <a href="../../intro/usingModels.html">Using Models</a> and <a href="../../intro/dataBinding.html">Data Binding</a> for an introduction. <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="../symbols/TreeModel.html" class="linkConstructor">TreeModel</a>, which inherits from this class. To support links and grouping, use a <a href="../symbols/GraphLinksModel.html" class="linkConstructor">GraphLinksModel</a>. <p> Each node data object is assumed to have a unique key value. The <a href="../symbols/Model.html#nodeKeyProperty" class="linkProperty">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> 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> For example, one can define a graph consisting of just two nodes: <pre class="javascript"> model.nodeDataArray = [ { key: "Alpha" }, { key: "Beta" } ]; </pre> <p> This model cannot detect the modification of the <a href="../symbols/Model.html#nodeDataArray" class="linkProperty">nodeDataArray</a> array or the modification of any node data object. If you want to add or remove node data from the <a href="../symbols/Model.html#nodeDataArray" class="linkProperty">nodeDataArray</a>, call the <a href="../symbols/Model.html#addNodeData" class="linkMethod">addNodeData</a> or <a href="../symbols/Model.html#removeNodeData" class="linkMethod">removeNodeData</a> methods. <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> For the former case, call the appropriate method, such as <a href="../symbols/Model.html#setKeyForNodeData" class="linkMethod">setKeyForNodeData</a>, <a href="../symbols/Model.html#setCategoryForNodeData" class="linkMethod">setCategoryForNodeData</a>, <a href="../symbols/GraphLinksModel.html#setToKeyForLinkData" class="linkMethod">GraphLinksModel.setToKeyForLinkData</a>, or <a href="../symbols/GraphLinksModel.html#setGroupKeyForNodeData" class="linkMethod">GraphLinksModel.setGroupKeyForNodeData</a>. These methods have names that start with "set", "add", "insert", or "remove". <p> For the latter case, when setting an application-specific property, typically for data binding, and to support undo/redo, call <a href="../symbols/Model.html#setDataProperty" class="linkMethod">setDataProperty</a>. <p> The <a href="../symbols/Model.html#copyNodeData" class="linkMethod">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="../symbols/Model.html#copiesArrays" class="linkProperty">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="../symbols/Model.html#copiesArrayObjects" class="linkProperty">copiesArrayObjects</a> to true, causing a copied Array to refer to newly shallow-copied objects of the original array. <p> Each model raises <a href="../symbols/ChangedEvent.html" class="linkConstructor">ChangedEvent</a>s that you can follow by registering a listener via <a href="../symbols/Model.html#addChangedListener" class="linkMethod">addChangedListener</a>. Read more at the Introduction page: <a href="../../intro/changedEvents.html">Changed Events</a>. <p> Each model comes with its own <a href="../symbols/UndoManager.html" class="linkConstructor">UndoManager</a> that is initially not enabled. You will need to set <a href="../symbols/UndoManager.html#isEnabled" class="linkProperty">UndoManager.isEnabled</a> to true in order for the UndoManager to record model changes and for your users to perform undo and redo. <p> You can temporarily turn off the recording of changes by setting <a href="../symbols/Model.html#skipsUndoManager" class="linkProperty">skipsUndoManager</a> to true. <p> 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="../symbols/ChangedEvent.html" class="linkConstructor">ChangedEvent</a> listener you may want to ignore events that happen when <a href="../symbols/Model.html#skipsUndoManager" class="linkProperty">skipsUndoManager</a> is true. <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="../symbols/Model.html#toJson" class="linkMethod">toJson</a> to get the string representation of the model, and save that string. Load the diagram by replacing the <a href="../symbols/Diagram.html#model" class="linkProperty">Diagram.model</a> with one created by calling the static function <a href="../symbols/Model.html#.fromJson" class="linkStatic">Model.fromJson</a>: <pre class="javascript"> myDiagram.model = go.Model.fromJson(loadedString); </pre> Note that JSON and other textual data formats cannot faithfully store all JavaScript functions. <a href="../symbols/Model.html#toJson" class="linkMethod">toJson</a> and <a href="../symbols/Model.html#.fromJson" class="linkStatic">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="../symbols/Model.html#toJson" class="linkMethod">toJson</a> and <a href="../symbols/Model.html#.fromJson" class="linkStatic">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> Note that models also do not store the templates used by diagrams, nor any transient or temporary parts such as <a href="../symbols/Adornment.html" class="linkConstructor">Adornment</a>s, nor any tools, nor any <a href="../symbols/UndoManager.html" class="linkConstructor">UndoManager</a> state, nor any event listeners. These objects and all other properties of diagrams must be established by your app. <p> You can add any number of properties to the <a href="../symbols/Model.html#modelData" class="linkProperty">modelData</a> object, which is serialized and deserialized into JSON just like any other model data for nodes or links. However <a href="../symbols/Model.html#modelData" class="linkProperty">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> It is also easy to save the changes that were recorded in the most recent transaction. Call <a href="../symbols/Model.html#toIncrementalJson" class="linkMethod">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="../symbols/ChangedEvent.html" class="linkConstructor">ChangedEvent</a> that represents a transaction that completed or an undo or a redo that just finished. <p> It is also possible to use such "incremental" JSON to modify an existing model. Call <a href="../symbols/Model.html#applyIncrementalJson" class="linkMethod">applyIncrementalJson</a>, giving it a string generated by <a href="../symbols/Model.html#toIncrementalJson" class="linkMethod">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="../symbols/Model.html#.fromJson" class="linkStatic">Model.fromJson</a> is a static function. </p>  <h2 id="constructor" class="summaryCaption"> Constructor <span class="nodetails"> Summary</span><span class="details"> Details</span></h2> <div class="table-responsive"> <table class="summaryTable table table-bordered table-condensed" summary="A summary of the constructor documented in the class Model."> <thead> <tr> <th scope="col" class="name">Name</th> <th scope="col" class="description">Description</th> </tr> </thead> <tbody> <tr> <td class="name" > <div class="name"> Model(nodedataarray) </div> </td> <td class="description"> <div class="description"> <p><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="../symbols/GraphLinksModel.html" class="linkConstructor">GraphLinksModel</a> or <a href="../symbols/TreeModel.html" class="linkConstructor">TreeModel</a>.<span class="nodetails" id="xconModel"><a class="morelink" onclick="hst('conModel')">More...</a></span> <span class="details" id="conModel"></span> <dl class="detailList"> <dt class="heading">Parameters:</dt> <dt> <span class="light fixedFont">{Array.<Object>=}</span> <b>nodedataarray</b> </dt> <dd>an optional Array containing JavaScript objects to be represented by <a href="../symbols/Part.html" class="linkConstructor">Part</a>s.</dd> </dl> </div> </td> </tr> </tbody> </table> </div>  <h2 class="summaryCaption">Properties<span class="nodetails"> Summary</span><span class="details"> Details</span></h2> <div class="table-responsive"> <table class="summaryTable table table-bordered table-condensed" summary="A summary of the properties documented in the class Model."> <thead> <tr> <th scope="col" class="name">Name, Value Type</th> <th scope="col" class="description">Description</th> </tr> </thead> <tbody> <tr id="copiesArrayObjects" > <td class="name"> <div class="name"> copiesArrayObjects </div> <div class="attributes"> <span class="light">{boolean}</span> <span class="since" title="since">1.5</span> </div> </td> <td class="description"> <div class="description">  <p>Gets or sets whether the default behavior for <a href="../symbols/Model.html#copyNodeData" class="linkMethod">copyNodeData</a> when copying Arrays also copies array items that are Objects.<span class="nodetails" id="xpropcopiesArrayObjects"><a class="morelink" onclick="hst('propcopiesArrayObjects')">More...</a></span> <span class="details" id="propcopiesArrayObjects"> This only covers copying Objects that are items in Arrays that are copied when <a href="../symbols/Model.html#copiesArrays" class="linkProperty">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. </span><div class="details" id="dpropcopiesArrayObjects"><p> The default value is false. This property does not affect any behavior when the value of <a href="../symbols/Model.html#copyNodeDataFunction" class="linkProperty">copyNodeDataFunction</a> has been set to a function. This property has no effect unless <a href="../symbols/Model.html#copiesArrays" class="linkProperty">copiesArrays</a> is true. <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="../symbols/Model.html#copyNodeDataFunction" class="linkProperty">copyNodeDataFunction</a> rather than setting this property and <a href="../symbols/Model.html#copiesArrays" class="linkProperty">copiesArrays</a> to true. <p> Warning: there should not be any cyclical references within the model data.</div> <div class="seealso">See also: <ul class="seealsolist"> <li><a href="../symbols/Model.html#copiesArrays" class="linkProperty">copiesArrays</a></li> <li><a href="../symbols/Model.html#copyNodeDataFunction" class="linkProperty">copyNodeDataFunction</a></li> </ul> </div> </div> </td> </tr> <tr id="copiesArrays" > <td class="name"> <div class="name"> copiesArrays </div> <div class="attributes"> <span class="light">{boolean}</span> <span class="since" title="since">1.5</span> </div> </td> <td class="description"> <div class="description">  <p>Gets or sets whether the default behavior for <a href="../symbols/Model.html#copyNodeData" class="linkMethod">copyNodeData</a> makes copies of property values that are Arrays.<span class="nodetails" id="xpropcopiesArrays"><a class="morelink" onclick="hst('propcopiesArrays')">More...</a></span> <span class="details" id="propcopiesArrays"> This only copies Arrays that are top-level property values in node data objects, not for Arrays that are in nested objects. Copying Arrays will also copy any array items that are Objects when <a href="../symbols/Model.html#copiesArrayObjects" class="linkProperty">copiesArrayObjects</a> is true. </span><div class="details" id="dpropcopiesArrays"><p> The default value is false. It is commonplace to set <a href="../symbols/Model.html#copiesArrayObjects" class="linkProperty">copiesArrayObjects</a> to true when setting this property to true. This property does not affect any behavior when the value of <a href="../symbols/Model.html#copyNodeDataFunction" class="linkProperty">copyNodeDataFunction</a> has been set to a function. <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="../symbols/Model.html#copyNodeDataFunction" class="linkProperty">copyNodeDataFunction</a> rather than setting this property to true. <p> Warning: there should not be any cyclical references within the model data.</div> <div class="seealso">See also: <ul class="seealsolist"> <li><a href="../symbols/Model.html#copiesArrayObjects" class="linkProperty">copiesArrayObjects</a></li> <li><a href="../symbols/Model.html#copyNodeDataFunction" class="linkProperty">copyNodeDataFunction</a></li> </ul> </div> </div> </td> </tr> <tr id="copyNodeDataFunction" > <td class="name"> <div class="name"> copyNodeDataFunction </div> <div class="attributes"> <span class="light">{function(Object, Model):Object | null}</span> </div> </td> <td class="description"> <div class="description">  <p>Gets or sets a function that makes a copy of a node data object.<span class="nodetails" id="xpropcopyNodeDataFunction"><a class="morelink" onclick="hst('propcopyNodeDataFunction')">More...</a></span> <span class="details" id="propcopyNodeDataFunction"> </span><div class="details" id="dpropcopyNodeDataFunction"><p> You may need to set this property in order to ensure that a copied <a href="../symbols/Node.html" class="linkConstructor">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="../symbols/Model.html#copyNodeData" class="linkMethod">copyNodeData</a> to make a shallow copy of a JavaScript Object. The default value is null. <p> The first argument to the function will be a node data object (potentially a <a href="../symbols/Part.html" class="linkConstructor">Part</a>'s <a href="../symbols/Panel.html#data" class="linkProperty">Panel.data</a>). The second argument to the function will be this Model itself. <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.</div> </div> </td> </tr> <tr id="dataFormat" > <td class="name"> <div class="name"> dataFormat </div> <div class="attributes"> <span class="light">{string}</span> </div> </td> <td class="description"> <div class="description">  <p>Gets or sets the name of the format of the diagram data.<span class="nodetails" id="xpropdataFormat"><a class="morelink" onclick="hst('propdataFormat')">More...</a></span> <span class="details" id="propdataFormat"> 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.</span> </div> </td> </tr> <tr id="isReadOnly" > <td class="name"> <div class="name"> isReadOnly </div> <div class="attributes"> <span class="light">{boolean}</span> </div> </td> <td class="description"> <div class="description">  <p>Gets or sets whether this model may be modified, such as adding nodes.<span class="nodetails" id="xpropisReadOnly"><a class="morelink" onclick="hst('propisReadOnly')">More...</a></span> <span class="details" id="propisReadOnly"> By default this value is false. Setting the <a href="../symbols/Model.html#nodeDataArray" class="linkProperty">nodeDataArray</a> to something that is not a true Array of Objects will cause this to be set to true. </span><div class="details" id="dpropisReadOnly"><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.</div> </div> </td> </tr> <tr id="makeUniqueKeyFunction" > <td class="name"> <div class="name"> makeUniqueKeyFunction </div> <div class="attributes"> <span class="light">{function(Model, Object):(string|number) | null}</span> </div> </td> <td class="description"> <div class="description">  <p>Gets or sets a function that returns a unique id number or string for a node data object.<span class="nodetails" id="xpropmakeUniqueKeyFunction"><a class="morelink" onclick="hst('propmakeUniqueKeyFunction')">More...</a></span> <span class="details" id="propmakeUniqueKeyFunction"> This function is called by <a href="../symbols/Model.html#makeNodeDataKeyUnique" class="linkMethod">makeNodeDataKeyUnique</a> when a node data object is added to the model, either as part of a new <a href="../symbols/Model.html#nodeDataArray" class="linkProperty">nodeDataArray</a> or by a call to <a href="../symbols/Model.html#addNodeData" class="linkMethod">addNodeData</a>, to make sure the value of <a href="../symbols/Model.html#getKeyForNodeData" class="linkMethod">getKeyForNodeData</a> is unique within the model. </span><div class="details" id="dpropmakeUniqueKeyFunction"><p> The value may be null in order to cause <a href="../symbols/Model.html#makeNodeDataKeyUnique" class="linkMethod">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="../symbols/Model.html#nodeDataArray" class="linkProperty">nodeDataArray</a> has no real effect until there is a call to <a href="../symbols/Model.html#addNodeData" class="linkMethod">addNodeData</a>. <p> If a node data object is already in the model and you want to change its key value, call <a href="../symbols/Model.html#setKeyForNodeData" class="linkMethod">setKeyForNodeData</a> with a new and unique key.</div> </div> </td> </tr> <tr id="modelData" > <td class="name"> <div class="name"> modelData </div> <div class="attributes"> <span class="light">{Object}</span> </div> </td> <td class="description"> <div class="description">  <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.<span class="nodetails" id="xpropmodelData"><a class="morelink" onclick="hst('propmodelData')">More...</a></span> <span class="details" id="propmodelData"> </span><div class="details" id="dpropmodelData"><p> By default this an object with no properties. Any properties that you add to this object will be written out by <a href="../symbols/Model.html#toJson" class="linkMethod">toJson</a> and will be restored by <a href="../symbols/Model.html#.fromJson" class="linkStatic">Model.fromJson</a>, if the following conditions are true: <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> Most object classes cannot be serialized into JSON without special knowledge and processing at both ends. The <a href="../symbols/Model.html#toJson" class="linkMethod">toJson</a> and <a href="../symbols/Model.html#.fromJson" class="linkStatic">Model.fromJson</a> methods automatically do such processing for numbers that are NaN and for objects that ar