2950 lines
156 KiB
HTML
2950 lines
156 KiB
HTML
<!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>
|
|
|
|
<link href="../../assets/css/bootstrap.min.css" rel="stylesheet" >
|
|
<!-- custom CSS after bootstrap -->
|
|
<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/api.css" type="text/css" media="all" />-->
|
|
<link rel="stylesheet" href="../../assets/css/highlight.css" type="text/css" media="all" />
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<!-- non-fixed navbar -->
|
|
<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="../../doc/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><!--/.nav-collapse -->
|
|
</div>
|
|
</nav>
|
|
|
|
|
|
<div class="container-fluid">
|
|
|
|
<!-- ============================== classes index ============================ -->
|
|
<div id="navindex" class="col-md-2">
|
|
<!-- begin publish.classesIndex -->
|
|
<!-- <div><a href="../index.html">GoJS Class Index</a></div> -->
|
|
|
|
<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> <!-- /class="sidebar-nav -->
|
|
|
|
|
|
|
|
|
|
<!-- end publish.classesIndex -->
|
|
</div>
|
|
|
|
<div id="contentBody" class="col-md-10">
|
|
<!-- ============================== header ================================= -->
|
|
<div id="header" class="fineprint mt30">
|
|
<b>GoJS</b>® Diagramming Components<br/>version 1.8.5 for JavaScript/HTML<br/>by <a href="https://www.nwoods.com/">Northwoods Software®</a>
|
|
</div>
|
|
|
|
<!-- ============================== class title ============================ -->
|
|
<h2 class="classTitle mt30">
|
|
|
|
Class Model
|
|
|
|
</h2>
|
|
|
|
<!-- ============================== class summary ========================== -->
|
|
<span class="hideshowall">
|
|
<span class="nodetails"><button id="buttonShow">Show Details</button></span>
|
|
<span class="details"><button id="buttonHide">Show Summaries</button></span>
|
|
</span>
|
|
|
|
<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.
|
|
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.
|
|
<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>
|
|
|
|
<!-- ============================== constructor summary ==================== -->
|
|
|
|
<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">
|
|
<!--newp--><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><!-- class="table-responsive">-->
|
|
|
|
|
|
<!-- ============================== properties summary ===================== -->
|
|
|
|
|
|
|
|
<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">
|
|
<!--newp <p> -->
|
|
<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">
|
|
<!--newp <p> -->
|
|
<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">
|
|
<!--newp <p> -->
|
|
<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">
|
|
<!--newp <p> -->
|
|
<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">
|
|
<!--newp <p> -->
|
|
<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">
|
|
<!--newp <p> -->
|
|
<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">
|
|
<!--newp <p> -->
|
|
<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 are of class <a href="../symbols/Point.html" class="linkConstructor">Point</a>, <a href="../symbols/Size.html" class="linkConstructor">Size</a>, <a href="../symbols/Rect.html" class="linkConstructor">Rect</a>, <a href="../symbols/Margin.html" class="linkConstructor">Margin</a>, <a href="../symbols/Spot.html" class="linkConstructor">Spot</a>,
|
|
<a href="../symbols/Brush.html" class="linkConstructor">Brush</a> (but not for brush patterns), and for <a href="../symbols/Geometry.html" class="linkConstructor">Geometry</a>.
|
|
<p>
|
|
At the current time one cannot have a <a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a> as a binding target.
|
|
Calling <a href="../symbols/Model.html#setDataProperty" class="linkMethod">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="../symbols/Model.html#toJson" class="linkMethod">toJson</a>.
|
|
When loading a model, call <a href="../symbols/Model.html#.fromJson" class="linkStatic">Model.fromJson</a> and explicitly get the properties that you want to set on a Diagram.</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="name" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
name
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{string}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the name of this model.<span class="nodetails" id="xpropname"><a class="morelink" onclick="hst('propname')">More...</a></span> <span class="details" id="propname">
|
|
The initial name is an empty string.
|
|
The value must not be null.</span>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="nodeCategoryProperty" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
nodeCategoryProperty
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{string|function(Object,string=):string}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the name of the node data property that returns a string naming that data's category.<span class="nodetails" id="xpropnodeCategoryProperty"><a class="morelink" onclick="hst('propnodeCategoryProperty')">More...</a></span> <span class="details" id="propnodeCategoryProperty">
|
|
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="../symbols/Model.html#getCategoryForNodeData" class="linkMethod">getCategoryForNodeData</a> will return an empty string for all node data objects.</span>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/Model.html#getCategoryForNodeData" class="linkMethod">getCategoryForNodeData</a></li>
|
|
|
|
<li><a href="../symbols/Model.html#setCategoryForNodeData" class="linkMethod">setCategoryForNodeData</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="nodeDataArray" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
nodeDataArray
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{Array.<Object>}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the array of node data objects that correspond to <a href="../symbols/Node.html" class="linkConstructor">Node</a>s,
|
|
<a href="../symbols/Group.html" class="linkConstructor">Group</a>s, or non-Link <a href="../symbols/Part.html" class="linkConstructor">Part</a>s in the <a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a>.<span class="nodetails" id="xpropnodeDataArray"><a class="morelink" onclick="hst('propnodeDataArray')">More...</a></span> <span class="details" id="propnodeDataArray">
|
|
The initial value is an empty Array.
|
|
</span><div class="details" id="dpropnodeDataArray"><p>
|
|
For each Object in the Array, <a href="../symbols/Model.html#getKeyForNodeData" class="linkMethod">getKeyForNodeData</a> should return a number or string
|
|
uniquely identifying the node data within the model.
|
|
If it returns undefined, this calls <a href="../symbols/Model.html#makeNodeDataKeyUnique" class="linkMethod">makeNodeDataKeyUnique</a>,
|
|
to make sure the node data has a unique key.
|
|
These key values may be used by other objects to refer to that particular node data object.
|
|
If more than one node data object has the same key,
|
|
there may be some confusion about which object to reference.
|
|
<p>
|
|
If you want to use a custom data property for holding the unique key value on a node data object,
|
|
you should set <a href="../symbols/Model.html#nodeKeyProperty" class="linkProperty">nodeKeyProperty</a> before you set this <code>nodeDataArray</code> property.
|
|
<p>
|
|
Adding or removing data from this Array will not notify this model or the diagram
|
|
that there are any new nodes or that any nodes have been deleted.
|
|
Instead you should call <a href="../symbols/Model.html#addNodeData" class="linkMethod">addNodeData</a> or <a href="../symbols/Model.html#removeNodeData" class="linkMethod">removeNodeData</a>.</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="nodeKeyProperty" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
nodeKeyProperty
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{string|function(Object,(string|number)=):(string|number)}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the name of the data property that returns a unique id number or string for each node data object.<span class="nodetails" id="xpropnodeKeyProperty"><a class="morelink" onclick="hst('propnodeKeyProperty')">More...</a></span> <span class="details" id="propnodeKeyProperty">
|
|
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 unique key value;
|
|
if the second argument is supplied, the function should modify the node data object so that it has that new value as its unique key value.
|
|
The default value is the name 'key', meaning that it expects the data to have a property named 'key' if it has a key value.
|
|
The name must not be null or the empty string.
|
|
You must set this property before assigning the <a href="../symbols/Model.html#nodeDataArray" class="linkProperty">nodeDataArray</a>.</span>
|
|
|
|
<div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/Model.html#getKeyForNodeData" class="linkMethod">getKeyForNodeData</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="skipsUndoManager" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
skipsUndoManager
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{boolean}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets whether <a href="../symbols/ChangedEvent.html" class="linkConstructor">ChangedEvent</a>s are not recorded by the <a href="../symbols/UndoManager.html" class="linkConstructor">UndoManager</a>.<span class="nodetails" id="xpropskipsUndoManager"><a class="morelink" onclick="hst('propskipsUndoManager')">More...</a></span> <span class="details" id="propskipsUndoManager">
|
|
The initial and normal value is false.
|
|
WARNING: while this property is true do not perform any changes that cause any previous transactions
|
|
to become impossible to undo.
|
|
</span><div class="details" id="dpropskipsUndoManager"><p>
|
|
When this property is true, changing the Model or any data object does not call <a href="../symbols/UndoManager.html#handleChanged" class="linkMethod">UndoManager.handleChanged</a>.
|
|
Even when this property is true,
|
|
transactions (such as calls to <a href="../symbols/Model.html#startTransaction" class="linkMethod">startTransaction</a>) and undo/redo (such as calls to <a href="../symbols/CommandHandler.html#undo" class="linkMethod">CommandHandler.undo</a>)
|
|
are still delegated to the <a href="../symbols/Model.html#undoManager" class="linkProperty">undoManager</a>.
|
|
<p>
|
|
You should set this to true only temporarily, and you should remember its previous value before setting this to true.
|
|
When finishing the period for which you want the UndoManager to be disabled,
|
|
do not blindly set this property to false.
|
|
You should set this back to the value it had before you set it to true.
|
|
For more permanent disabling of the <a href="../symbols/UndoManager.html" class="linkConstructor">UndoManager</a>, set <a href="../symbols/UndoManager.html#isEnabled" class="linkProperty">UndoManager.isEnabled</a> to false.
|
|
<p>
|
|
This property is also set when setting <a href="../symbols/Diagram.html#skipsUndoManager" class="linkProperty">Diagram.skipsUndoManager</a>.
|
|
Setting this property does not raise a <a href="../symbols/ChangedEvent.html" class="linkConstructor">ChangedEvent</a>.</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="undoManager" >
|
|
|
|
<td class="name">
|
|
<div class="name">
|
|
undoManager
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{<a href="../symbols/UndoManager.html" class="linkConstructor">UndoManager</a>}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp <p> -->
|
|
<p>Gets or sets the <a href="../symbols/UndoManager.html" class="linkConstructor">UndoManager</a> for this Model.<span class="nodetails" id="xpropundoManager"><a class="morelink" onclick="hst('propundoManager')">More...</a></span> <span class="details" id="propundoManager">
|
|
</span><div class="details" id="dpropundoManager"><p>
|
|
The default UndoManager has its <a href="../symbols/UndoManager.html#isEnabled" class="linkProperty">UndoManager.isEnabled</a> property set to false.
|
|
If you want users to undo and redo, you should set that property to true once you have initialized the Diagram or its Model.
|
|
<p>
|
|
This property setter does not raise a <a href="../symbols/ChangedEvent.html" class="linkConstructor">ChangedEvent</a>.</div>
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
</div><!-- class="table-responsive">-->
|
|
|
|
|
|
|
|
|
|
|
|
<!-- ============================== methods summary ======================== -->
|
|
|
|
|
|
|
|
<h2 class="summaryCaption">Method <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 methods documented in the class Model.">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col" class="name">Name, Return Type</th>
|
|
<th scope="col" class="description">Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
|
|
<tr id="addArrayItem">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
addArrayItem(arr, val)
|
|
</div>
|
|
<div class="attributes">
|
|
|
|
|
|
<span class="since" title="since">1.1</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Add an item at the end of a data array that may be data bound by a <a href="../symbols/Panel.html" class="linkConstructor">Panel</a> as its <a href="../symbols/Panel.html#itemArray" class="linkProperty">Panel.itemArray</a>,
|
|
in a manner that can be undone/redone and that automatically updates any bindings.<span class="nodetails" id="xmethaddArrayItem"><a class="morelink" onclick="hst('methaddArrayItem')">More...</a></span> <span class="details" id="methaddArrayItem">
|
|
</span><div class="details" id="dmethaddArrayItem"><p>
|
|
This also calls <a href="../symbols/Model.html#raiseChangedEvent" class="linkMethod">raiseChangedEvent</a> to notify all listeners about the <a href="../symbols/ChangedEvent.html#Insert" class="linkConstant">ChangedEvent.Insert</a>.
|
|
<p>
|
|
If you want to add a new node or part to the diagram, call <a href="../symbols/Model.html#addNodeData" class="linkMethod">addNodeData</a>.</div>
|
|
|
|
</p><div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/Model.html#insertArrayItem" class="linkMethod">insertArrayItem</a></li>
|
|
|
|
</ul></div>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Parameters:</dt>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{Array.<*>}</span> <b>arr</b>
|
|
|
|
</dt>
|
|
<dd>an Array that is the value of some <a href="../symbols/Panel.html" class="linkConstructor">Panel</a>'s <a href="../symbols/Panel.html#itemArray" class="linkProperty">Panel.itemArray</a>.</dd>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{*}</span> <b>val</b>
|
|
|
|
</dt>
|
|
<dd>the new value to be pushed onto the array.</dd>
|
|
|
|
</dl>
|
|
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="addChangedListener">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
addChangedListener(listener)
|
|
</div>
|
|
<div class="attributes">
|
|
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Register an event handler that is called when there is a ChangedEvent.<span class="nodetails" id="xmethaddChangedListener"><a class="morelink" onclick="hst('methaddChangedListener')">More...</a></span> <span class="details" id="methaddChangedListener">
|
|
</span><div class="details" id="dmethaddChangedListener"><p>
|
|
This registration does not raise a <a href="../symbols/ChangedEvent.html" class="linkConstructor">ChangedEvent</a>.
|
|
In case a Diagram's Model may be replaced, you may prefer calling <a href="../symbols/Diagram.html#addModelChangedListener" class="linkMethod">Diagram.addModelChangedListener</a> instead of this method.
|
|
<p>
|
|
Event listeners are not written out by <a href="../symbols/Model.html#toJson" class="linkMethod">toJson</a>.</div>
|
|
|
|
</p><div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/Model.html#removeChangedListener" class="linkMethod">removeChangedListener</a></li>
|
|
|
|
<li><a href="../symbols/Diagram.html#addModelChangedListener" class="linkMethod">Diagram.addModelChangedListener</a></li>
|
|
|
|
</ul></div>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Parameters:</dt>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{function(ChangedEvent)}</span> <b>listener</b>
|
|
|
|
</dt>
|
|
<dd>a function that takes a <a href="../symbols/ChangedEvent.html" class="linkConstructor">ChangedEvent</a> as its argument.</dd>
|
|
|
|
</dl>
|
|
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="addNodeData">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
addNodeData(nodedata)
|
|
</div>
|
|
<div class="attributes">
|
|
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>When you want to add a node or group to the diagram,
|
|
call this method with a new data object.<span class="nodetails" id="xmethaddNodeData"><a class="morelink" onclick="hst('methaddNodeData')">More...</a></span> <span class="details" id="methaddNodeData">
|
|
This will add that data to the <a href="../symbols/Model.html#nodeDataArray" class="linkProperty">nodeDataArray</a> and
|
|
notify all listeners that a new node data object has been inserted into the collection.
|
|
</span><div class="details" id="dmethaddNodeData"><p>
|
|
To remove a node from the diagram, you can remove its data object by calling <a href="../symbols/Model.html#removeNodeData" class="linkMethod">removeNodeData</a>.
|
|
<p>
|
|
To add or remove an object or value from an item array, call <a href="../symbols/Model.html#insertArrayItem" class="linkMethod">insertArrayItem</a> or <a href="../symbols/Model.html#removeArrayItem" class="linkMethod">removeArrayItem</a>.</div>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Parameters:</dt>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{Object}</span> <b>nodedata</b>
|
|
|
|
</dt>
|
|
<dd>a JavaScript object represented by a node, group, or non-link.</dd>
|
|
|
|
</dl>
|
|
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="addNodeDataCollection">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
addNodeDataCollection(coll)
|
|
</div>
|
|
<div class="attributes">
|
|
|
|
|
|
<span class="since" title="since">1.3</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Add to this model all of the node data held in an Array or in an <a href="../symbols/Iterable.html" class="linkConstructor">Iterable</a> of node data objects.<span class="nodetails" id="xmethaddNodeDataCollection"><a class="morelink" onclick="hst('methaddNodeDataCollection')">More...</a></span> <span class="details" id="methaddNodeDataCollection"></span>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Parameters:</dt>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{Iterable.<Object>|Array.<Object>}</span> <b>coll</b>
|
|
|
|
</dt>
|
|
<dd>a collection of node data objects to add to the <a href="../symbols/Model.html#nodeDataArray" class="linkProperty">nodeDataArray</a></dd>
|
|
|
|
</dl>
|
|
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="applyIncrementalJson">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
applyIncrementalJson(s)
|
|
</div>
|
|
<div class="attributes">
|
|
|
|
|
|
<span class="since" title="since">1.6</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Modify this model by applying the changes given in an "incremental" model change in JSON format
|
|
generated by <a href="../symbols/Model.html#toIncrementalJson" class="linkMethod">toIncrementalJson</a>.<span class="nodetails" id="xmethapplyIncrementalJson"><a class="morelink" onclick="hst('methapplyIncrementalJson')">More...</a></span> <span class="details" id="methapplyIncrementalJson">
|
|
The expected properties of the argument are described at <a href="../symbols/Model.html#toIncrementalJson" class="linkMethod">toIncrementalJson</a>.
|
|
Incremental changes must be applied in the same order that the changes occurred in the original model.
|
|
</span><div class="details" id="dmethapplyIncrementalJson"><p>
|
|
This requires the "incremental" property to be present and to be a number, as specified by <a href="../symbols/Model.html#toIncrementalJson" class="linkMethod">toIncrementalJson</a>.
|
|
All of the top-level properties in the JSON, such as <a href="../symbols/Model.html#nodeKeyProperty" class="linkProperty">nodeKeyProperty</a>, must be the same as for this model.
|
|
<p>
|
|
This conducts a transaction.</div>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Parameters:</dt>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{string|Object}</span> <b>s</b>
|
|
|
|
</dt>
|
|
<dd>a String in JSON format containing modifications to be performed to the model,
|
|
or a JavaScript Object parsed from such a string</dd>
|
|
|
|
</dl>
|
|
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="clear">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
clear()
|
|
</div>
|
|
<div class="attributes">
|
|
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Clear out all references to any model data.<span class="nodetails" id="xmethclear"><a class="morelink" onclick="hst('methclear')">More...</a></span> <span class="details" id="methclear">
|
|
This also clears out the <a href="../symbols/UndoManager.html" class="linkConstructor">UndoManager</a>, so this operation is not undoable.
|
|
This method is called by <a href="../symbols/Diagram.html#clear" class="linkMethod">Diagram.clear</a>; it does not notify any <a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a>s or other listeners.
|
|
This method does not unregister any Changed event listeners.
|
|
</span><div class="details" id="dmethclear"><p>
|
|
Instead of calling this method, you may prefer to set <a href="../symbols/Model.html#nodeDataArray" class="linkProperty">nodeDataArray</a> to an empty JavaScript Array.
|
|
If this model is a <a href="../symbols/GraphLinksModel.html" class="linkConstructor">GraphLinksModel</a>, you would also want to set <a href="../symbols/GraphLinksModel.html#linkDataArray" class="linkProperty">GraphLinksModel.linkDataArray</a> to a separate empty JavaScript Array.</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="cloneProtected">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
cloneProtected(copy)
|
|
</div>
|
|
<div class="attributes">
|
|
|
|
|
|
<span class="since" title="since">1.6</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Copies properties from this model to the given model, which must be of the same class.<span class="nodetails" id="xmethcloneProtected"><a class="morelink" onclick="hst('methcloneProtected')">More...</a></span> <span class="details" id="methcloneProtected">
|
|
This is called by <a href="../symbols/Model.html#copy" class="linkMethod">copy</a>.
|
|
This method may be overridden.
|
|
Please read the Introduction page on <a href="../../intro/extensions.html">Extensions</a> for how to override methods and how to call this base method.</span>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Parameters:</dt>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{<a href="../symbols/Model.html" class="linkConstructor">Model</a>}</span> <b>copy</b>
|
|
|
|
</dt>
|
|
<dd></dd>
|
|
|
|
</dl>
|
|
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="commit">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
commit(func, tname)
|
|
</div>
|
|
<div class="attributes">
|
|
|
|
|
|
<span class="since" title="since">1.8</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Starts a new transaction, calls the provided function, and commits the transaction.<span class="nodetails" id="xmethcommit"><a class="morelink" onclick="hst('methcommit')">More...</a></span> <span class="details" id="methcommit">
|
|
Code is called within a try-finally loop.
|
|
If the function does not return normally, this rolls back the transaction rather than committing it.
|
|
Example usage:
|
|
<pre>
|
|
model.commit(m => m.addNodeData({ counter: myCounter++ }), "Added Node");
|
|
</pre></span>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Parameters:</dt>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{function(Model)}</span> <b>func</b>
|
|
|
|
</dt>
|
|
<dd></dd>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{(string|null)=}</span> <b>tname</b>
|
|
|
|
</dt>
|
|
<dd>a descriptive name for the transaction, or null to temporarily set <a href="../symbols/Model.html#skipsUndoManager" class="linkProperty">skipsUndoManager</a> to true;
|
|
if no string transaction name is given, an empty string is used as the transaction name</dd>
|
|
|
|
</dl>
|
|
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="commitTransaction">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
commitTransaction(tname)
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{boolean}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Commit the changes of the current transaction.<span class="nodetails" id="xmethcommitTransaction"><a class="morelink" onclick="hst('methcommitTransaction')">More...</a></span> <span class="details" id="methcommitTransaction">
|
|
This just calls <a href="../symbols/UndoManager.html#commitTransaction" class="linkMethod">UndoManager.commitTransaction</a>.</span>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Parameters:</dt>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{string=}</span> <b>tname</b>
|
|
|
|
</dt>
|
|
<dd>a descriptive name for the transaction.</dd>
|
|
|
|
</dl>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Returns:</dt>
|
|
|
|
<dt><span class="light fixedFont">{boolean}</span> the value returned by <a href="../symbols/UndoManager.html#commitTransaction" class="linkMethod">UndoManager.commitTransaction</a>.</dt>
|
|
|
|
</dl>
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="containsNodeData">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
containsNodeData(nodedata)
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{boolean}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Decide if a given node data object is in this model, using reference equality.<span class="nodetails" id="xmethcontainsNodeData"><a class="morelink" onclick="hst('methcontainsNodeData')">More...</a></span> <span class="details" id="methcontainsNodeData">
|
|
</span><div class="details" id="dmethcontainsNodeData"><p>
|
|
If you do not have a reference to the particular data object that is in the <a href="../symbols/Model.html#nodeDataArray" class="linkProperty">nodeDataArray</a>,
|
|
you may need to search for it by iterating through that Array,
|
|
or by finding the desired <a href="../symbols/Node.html" class="linkConstructor">Node</a> or simple <a href="../symbols/Part.html" class="linkConstructor">Part</a> in a <a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a> and getting that node's <a href="../symbols/Panel.html#data" class="linkProperty">Panel.data</a>,
|
|
or most likely by calling <a href="../symbols/Model.html#findNodeDataForKey" class="linkMethod">findNodeDataForKey</a>.</div>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Parameters:</dt>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{Object}</span> <b>nodedata</b>
|
|
|
|
</dt>
|
|
<dd>a JavaScript object represented by a node, group, or non-link.</dd>
|
|
|
|
</dl>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Returns:</dt>
|
|
|
|
<dt><span class="light fixedFont">{boolean}</span> true if it is a node data object in this model; false otherwise.</dt>
|
|
|
|
</dl>
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="copy">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
copy()
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{<a href="../symbols/Model.html" class="linkConstructor">Model</a>}</span>
|
|
|
|
<span class="since" title="since">1.6</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Creates a shallow copy of this Model and returns it.<span class="nodetails" id="xmethcopy"><a class="morelink" onclick="hst('methcopy')">More...</a></span> <span class="details" id="methcopy">
|
|
<em>The data are not copied:</em> <a href="../symbols/Model.html#nodeDataArray" class="linkProperty">nodeDataArray</a>, <a href="../symbols/Model.html#modelData" class="linkProperty">modelData</a>,
|
|
<a href="../symbols/GraphLinksModel.html#linkDataArray" class="linkProperty">GraphLinksModel.linkDataArray</a>, <a href="../symbols/GraphLinksModel.html#archetypeNodeData" class="linkProperty">GraphLinksModel.archetypeNodeData</a> are left empty.
|
|
Nor are any Changed listeners or the UndoManager copied.</span>
|
|
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Returns:</dt>
|
|
|
|
<dt><span class="light fixedFont">{<a href="../symbols/Model.html" class="linkConstructor">Model</a>}</span> an empty copy of the model with the same properties, other than data</dt>
|
|
|
|
</dl>
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="copyNodeData">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
copyNodeData(nodedata)
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{Object}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Make a copy of a node data object.<span class="nodetails" id="xmethcopyNodeData"><a class="morelink" onclick="hst('methcopyNodeData')">More...</a></span> <span class="details" id="methcopyNodeData">
|
|
This uses the value of <a href="../symbols/Model.html#copyNodeDataFunction" class="linkProperty">copyNodeDataFunction</a> to actually perform the copy, unless that property is null.
|
|
When it is null the default behavior is to just make a shallow copy of the JavaScript Object.
|
|
</span><div class="details" id="dmethcopyNodeData"><p>
|
|
However when <a href="../symbols/Model.html#copiesArrays" class="linkProperty">copiesArrays</a> is true, this will make a copy of property values that are JavaScript Arrays.
|
|
This is useful when you do not want the Arrays to be shared between the node data objects.
|
|
Note that if you want to copy some property values that are Arrays but not other properties that are Arrays,
|
|
you cannot use <a href="../symbols/Model.html#copiesArrays" class="linkProperty">copiesArrays</a> but must implement your own <a href="../symbols/Model.html#copyNodeDataFunction" class="linkProperty">copyNodeDataFunction</a>.
|
|
<p>
|
|
In addition when <a href="../symbols/Model.html#copiesArrayObjects" class="linkProperty">copiesArrayObjects</a> is true, if items in the Array being copied are JavaScript Objects,
|
|
those objects are copied, recursively.
|
|
This is useful when the items in copied Arrays are themselves objects that need to be copied.
|
|
Note that if you want to share references to some but not all of the objects in copied Arrays you cannot use
|
|
<a href="../symbols/Model.html#copiesArrayObjects" class="linkProperty">copiesArrayObjects</a> but must implement your own <a href="../symbols/Model.html#copyNodeDataFunction" class="linkProperty">copyNodeDataFunction</a>.
|
|
<p>
|
|
This does not modify the model -- the returned data object is not added to this model.
|
|
This assumes that the data's constructor can be called with no arguments.
|
|
<p>
|
|
Models should not have any references to Diagrams or GraphObjects or Tools or Layouts or other objects
|
|
that form a <a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a>.
|
|
<p>
|
|
Warning: there should not be any cyclical references within the model data, unless you
|
|
either do not turn on <a href="../symbols/Model.html#copiesArrays" class="linkProperty">copiesArrays</a> or <a href="../symbols/Model.html#copiesArrayObjects" class="linkProperty">copiesArrayObjects</a> or unless you have
|
|
supplied your own <a href="../symbols/Model.html#copyNodeDataFunction" class="linkProperty">copyNodeDataFunction</a> that can handle cyclical references.</div>
|
|
|
|
</p><div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/Model.html#addNodeData" class="linkMethod">addNodeData</a></li>
|
|
|
|
</ul></div>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Parameters:</dt>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{Object}</span> <b>nodedata</b>
|
|
|
|
</dt>
|
|
<dd>a JavaScript object represented by a node, group, or non-link.</dd>
|
|
|
|
</dl>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Returns:</dt>
|
|
|
|
<dt><span class="light fixedFont">{Object}</span> </dt>
|
|
|
|
</dl>
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="findNodeDataForKey">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
findNodeDataForKey(key)
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{Object}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Given a number or string, find the node data object in this model
|
|
that uses the given value as its unique key.<span class="nodetails" id="xmethfindNodeDataForKey"><a class="morelink" onclick="hst('methfindNodeDataForKey')">More...</a></span> <span class="details" id="methfindNodeDataForKey"></span>
|
|
|
|
</p><div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/Model.html#containsNodeData" class="linkMethod">containsNodeData</a></li>
|
|
|
|
<li><a href="../symbols/Model.html#getKeyForNodeData" class="linkMethod">getKeyForNodeData</a></li>
|
|
|
|
</ul></div>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Parameters:</dt>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{(string|number|undefined)}</span> <b>key</b>
|
|
|
|
</dt>
|
|
<dd>a string or a number.</dd>
|
|
|
|
</dl>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Returns:</dt>
|
|
|
|
<dt><span class="light fixedFont">{Object}</span> null if the key is not present in the model,
|
|
or if the key is null or undefined or not a string or number.</dt>
|
|
|
|
</dl>
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id=".fromJson">
|
|
<td class="name">
|
|
<static>
|
|
<div class="name">
|
|
Model.fromJson(s, model)
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{<a href="../symbols/Model.html" class="linkConstructor">Model</a>}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>This static function parses a string in JSON format that was written by <a href="../symbols/Model.html#toJson" class="linkMethod">Model.toJson</a>,
|
|
and then constructs, initializes, and returns a model with that information.<span class="nodetails" id="xmethfromJson"><a class="morelink" onclick="hst('methfromJson')">More...</a></span> <span class="details" id="methfromJson">
|
|
</span><div class="details" id="dmethfromJson"><p>
|
|
Note that properties with values that are functions are not written out by <a href="../symbols/Model.html#toJson" class="linkMethod">toJson</a>,
|
|
so reading in such a model will require constructing such a model, initializing its functional property values,
|
|
and explicitly passing it in as the second argument.
|
|
<p>
|
|
Typical usage:
|
|
<pre class="javascript">
|
|
var modelAsText = ...; // fetch the model in textual format from a database
|
|
myDiagram.model = go.Model.fromJson(modelAsText);
|
|
</pre></div>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Parameters:</dt>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{string|Object}</span> <b>s</b>
|
|
|
|
</dt>
|
|
<dd>a String in JSON format containing all of the persistent properties of the model, or an Object already read from JSON text.</dd>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{<a href="../symbols/Model.html" class="linkConstructor">Model</a>=}</span> <b>model</b>
|
|
|
|
</dt>
|
|
<dd>an optional model to be modified; if not supplied, it constructs and returns a new model whose name is specified by the "class" property.</dd>
|
|
|
|
</dl>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Returns:</dt>
|
|
|
|
<dt><span class="light fixedFont">{<a href="../symbols/Model.html" class="linkConstructor">Model</a>}</span> the supplied or created model loaded with data from the given string.</dt>
|
|
|
|
</dl>
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="getCategoryForNodeData">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
getCategoryForNodeData(nodedata)
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{string}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Find the category of a given node data, a string naming the node template
|
|
or group template or part template
|
|
that the <a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a> should use to represent the node data.<span class="nodetails" id="xmethgetCategoryForNodeData"><a class="morelink" onclick="hst('methgetCategoryForNodeData')">More...</a></span> <span class="details" id="methgetCategoryForNodeData"></span>
|
|
|
|
</p><div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/Model.html#nodeCategoryProperty" class="linkProperty">nodeCategoryProperty</a></li>
|
|
|
|
<li><a href="../symbols/Model.html#setCategoryForNodeData" class="linkMethod">setCategoryForNodeData</a></li>
|
|
|
|
</ul></div>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Parameters:</dt>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{Object}</span> <b>nodedata</b>
|
|
|
|
</dt>
|
|
<dd>a JavaScript object represented by a node, group, or non-link.</dd>
|
|
|
|
</dl>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Returns:</dt>
|
|
|
|
<dt><span class="light fixedFont">{string}</span> </dt>
|
|
|
|
</dl>
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="getKeyForNodeData">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
getKeyForNodeData(nodedata)
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{string|number|undefined}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Given a node data object return its unique key: a number or a string.<span class="nodetails" id="xmethgetKeyForNodeData"><a class="morelink" onclick="hst('methgetKeyForNodeData')">More...</a></span> <span class="details" id="methgetKeyForNodeData">
|
|
This returns undefined if there is no key value.
|
|
</span><div class="details" id="dmethgetKeyForNodeData"><p>
|
|
It is possible to change the key for a node data object by calling <a href="../symbols/Model.html#setKeyForNodeData" class="linkMethod">setKeyForNodeData</a>.</div>
|
|
|
|
</p><div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/Model.html#nodeKeyProperty" class="linkProperty">nodeKeyProperty</a></li>
|
|
|
|
<li><a href="../symbols/Model.html#setKeyForNodeData" class="linkMethod">setKeyForNodeData</a></li>
|
|
|
|
<li><a href="../symbols/Model.html#findNodeDataForKey" class="linkMethod">findNodeDataForKey</a></li>
|
|
|
|
</ul></div>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Parameters:</dt>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{Object}</span> <b>nodedata</b>
|
|
|
|
</dt>
|
|
<dd>a JavaScript object represented by a node, group, or non-link.</dd>
|
|
|
|
</dl>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Returns:</dt>
|
|
|
|
<dt><span class="light fixedFont">{string|number|undefined}</span> </dt>
|
|
|
|
</dl>
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="insertArrayItem">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
insertArrayItem(arr, idx, val)
|
|
</div>
|
|
<div class="attributes">
|
|
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Add an item to a data array that may be data bound by a <a href="../symbols/Panel.html" class="linkConstructor">Panel</a> as its <a href="../symbols/Panel.html#itemArray" class="linkProperty">Panel.itemArray</a>,
|
|
given a new data value and the index at which to insert the new value, in a manner that can be undone/redone and that automatically updates any bindings.<span class="nodetails" id="xmethinsertArrayItem"><a class="morelink" onclick="hst('methinsertArrayItem')">More...</a></span> <span class="details" id="methinsertArrayItem">
|
|
</span><div class="details" id="dmethinsertArrayItem"><p>
|
|
This also calls <a href="../symbols/Model.html#raiseChangedEvent" class="linkMethod">raiseChangedEvent</a> to notify all listeners about the <a href="../symbols/ChangedEvent.html#Insert" class="linkConstant">ChangedEvent.Insert</a>.
|
|
<p>
|
|
If you want to add a new node or part to the diagram, call <a href="../symbols/Model.html#addNodeData" class="linkMethod">addNodeData</a>.</div>
|
|
|
|
</p><div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/Model.html#removeArrayItem" class="linkMethod">removeArrayItem</a></li>
|
|
|
|
</ul></div>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Parameters:</dt>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{Array.<*>}</span> <b>arr</b>
|
|
|
|
</dt>
|
|
<dd>an Array that is the value of some <a href="../symbols/Panel.html" class="linkConstructor">Panel</a>'s <a href="../symbols/Panel.html#itemArray" class="linkProperty">Panel.itemArray</a>.</dd>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{number}</span> <b>idx</b>
|
|
|
|
</dt>
|
|
<dd>the zero-based array index where the new value will be inserted; use -1 to push the new value on the end of the array.</dd>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{*}</span> <b>val</b>
|
|
|
|
</dt>
|
|
<dd>the new value to be inserted into the array.</dd>
|
|
|
|
</dl>
|
|
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="makeNodeDataKeyUnique">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
makeNodeDataKeyUnique(nodedata)
|
|
</div>
|
|
<div class="attributes">
|
|
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>This method is called when a node data object is added to the model to make sure that
|
|
<a href="../symbols/Model.html#getKeyForNodeData" class="linkMethod">getKeyForNodeData</a> returns a unique key value.<span class="nodetails" id="xmethmakeNodeDataKeyUnique"><a class="morelink" onclick="hst('methmakeNodeDataKeyUnique')">More...</a></span> <span class="details" id="methmakeNodeDataKeyUnique">
|
|
</span><div class="details" id="dmethmakeNodeDataKeyUnique"><p>
|
|
The key value should be unique within the set of data managed by this model:
|
|
<a href="../symbols/Model.html#nodeDataArray" class="linkProperty">nodeDataArray</a>.
|
|
If the key is already in use, this will assign an unused number to the
|
|
<a href="../symbols/Model.html#nodeKeyProperty" class="linkProperty">nodeKeyProperty</a> property on the data.
|
|
<p>
|
|
If you want to customize the way in which node data gets a unique key,
|
|
you can set the <a href="../symbols/Model.html#makeUniqueKeyFunction" class="linkProperty">makeUniqueKeyFunction</a> functional property.
|
|
<p>
|
|
If the 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> and give it a new unique key value.</div>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Parameters:</dt>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{Object}</span> <b>nodedata</b>
|
|
|
|
</dt>
|
|
<dd>a JavaScript object represented by a node, group, or non-link.</dd>
|
|
|
|
</dl>
|
|
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="raiseChangedEvent">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
raiseChangedEvent(change, propertyname, obj, oldval, newval, oldparam, newparam)
|
|
</div>
|
|
<div class="attributes">
|
|
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Call this method to notify that the model or its objects have changed.<span class="nodetails" id="xmethraiseChangedEvent"><a class="morelink" onclick="hst('methraiseChangedEvent')">More...</a></span> <span class="details" id="methraiseChangedEvent">
|
|
This constructs a <a href="../symbols/ChangedEvent.html" class="linkConstructor">ChangedEvent</a> and calls all Changed listeners.</span>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Parameters:</dt>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{EnumValue}</span> <b>change</b>
|
|
|
|
</dt>
|
|
<dd>specifies the general nature of the change; typically the value is <a href="../symbols/ChangedEvent.html#Property" class="linkConstant">ChangedEvent.Property</a>.</dd>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{string|function(Object,?=):?}</span> <b>propertyname</b>
|
|
|
|
</dt>
|
|
<dd>names the property that was modified, or a function that takes an Object and returns the property value.</dd>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{Object}</span> <b>obj</b>
|
|
|
|
</dt>
|
|
<dd>the object that was modified, typically a <a href="../symbols/GraphObject.html" class="linkConstructor">GraphObject</a>, <a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a>, or a <a href="../symbols/Model.html" class="linkConstructor">Model</a>.</dd>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{*}</span> <b>oldval</b>
|
|
|
|
</dt>
|
|
<dd>the previous or older value.</dd>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{*}</span> <b>newval</b>
|
|
|
|
</dt>
|
|
<dd>the next or newer value.</dd>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{*=}</span> <b>oldparam</b>
|
|
|
|
</dt>
|
|
<dd>an optional value that helps describe the older value.</dd>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{*=}</span> <b>newparam</b>
|
|
|
|
</dt>
|
|
<dd>an optional value that helps describe the newer value.</dd>
|
|
|
|
</dl>
|
|
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="raiseDataChanged">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
raiseDataChanged(data, propertyname, oldval, newval, oldparam, newparam)
|
|
</div>
|
|
<div class="attributes">
|
|
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Call this method to notify about a data property having changed value.<span class="nodetails" id="xmethraiseDataChanged"><a class="morelink" onclick="hst('methraiseDataChanged')">More...</a></span> <span class="details" id="methraiseDataChanged">
|
|
This constructs a <a href="../symbols/ChangedEvent.html" class="linkConstructor">ChangedEvent</a> and calls all Changed listeners.
|
|
</span><div class="details" id="dmethraiseDataChanged"><p>
|
|
You should call this method only if the property value actually changed.
|
|
This method is called by <a href="../symbols/Model.html#setDataProperty" class="linkMethod">setDataProperty</a>.</div>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Parameters:</dt>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{Object}</span> <b>data</b>
|
|
|
|
</dt>
|
|
<dd>the data object whose property changed value.</dd>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{string|function(Object,?=):?}</span> <b>propertyname</b>
|
|
|
|
</dt>
|
|
<dd>the name of the property, or a function that takes an Object and returns the property value.</dd>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{*}</span> <b>oldval</b>
|
|
|
|
</dt>
|
|
<dd>the previous or old value for the property.</dd>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{*}</span> <b>newval</b>
|
|
|
|
</dt>
|
|
<dd>the next or new value for the property.</dd>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{*=}</span> <b>oldparam</b>
|
|
|
|
</dt>
|
|
<dd>an optional value additionally describing the old value.</dd>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{*=}</span> <b>newparam</b>
|
|
|
|
</dt>
|
|
<dd>an optional value additionally describing the new value.</dd>
|
|
|
|
</dl>
|
|
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="removeArrayItem">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
removeArrayItem(arr, idx)
|
|
</div>
|
|
<div class="attributes">
|
|
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Remove an item from a data array that may be data bound by a <a href="../symbols/Panel.html" class="linkConstructor">Panel</a> as its <a href="../symbols/Panel.html#itemArray" class="linkProperty">Panel.itemArray</a>,
|
|
given the index at which to remove a data value, in a manner that can be undone/redone and that automatically updates any bindings.<span class="nodetails" id="xmethremoveArrayItem"><a class="morelink" onclick="hst('methremoveArrayItem')">More...</a></span> <span class="details" id="methremoveArrayItem">
|
|
</span><div class="details" id="dmethremoveArrayItem"><p>
|
|
This also calls <a href="../symbols/Model.html#raiseChangedEvent" class="linkMethod">raiseChangedEvent</a> to notify all listeners about the <a href="../symbols/ChangedEvent.html#Remove" class="linkConstant">ChangedEvent.Remove</a>.
|
|
<p>
|
|
If you want to remove a node from the diagram, call <a href="../symbols/Model.html#removeNodeData" class="linkMethod">removeNodeData</a>.
|
|
<p>
|
|
Note that there is no version of this method that takes an item value instead of an index into the array.
|
|
Because item arrays may hold any JavaScript value, including numbers and strings, there may be duplicate entries with that value in the array.
|
|
To avoid ambiguity, removing an item from an array requires an index.</div>
|
|
|
|
</p><div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/Model.html#insertArrayItem" class="linkMethod">insertArrayItem</a></li>
|
|
|
|
</ul></div>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Parameters:</dt>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{Array.<*>}</span> <b>arr</b>
|
|
|
|
</dt>
|
|
<dd>an Array that is the value of some <a href="../symbols/Panel.html" class="linkConstructor">Panel</a>'s <a href="../symbols/Panel.html#itemArray" class="linkProperty">Panel.itemArray</a>.</dd>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{number=}</span> <b>idx</b>
|
|
|
|
</dt>
|
|
<dd>the zero-based array index of the data item to be removed from the array;
|
|
if not supplied it will remove the last item of the array.</dd>
|
|
|
|
</dl>
|
|
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="removeChangedListener">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
removeChangedListener(listener)
|
|
</div>
|
|
<div class="attributes">
|
|
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Unregister an event handler listener.<span class="nodetails" id="xmethremoveChangedListener"><a class="morelink" onclick="hst('methremoveChangedListener')">More...</a></span> <span class="details" id="methremoveChangedListener">
|
|
</span><div class="details" id="dmethremoveChangedListener"><p>
|
|
This deregistration does not raise a <a href="../symbols/ChangedEvent.html" class="linkConstructor">ChangedEvent</a>.
|
|
In case a Diagram's Model may be replaced, you may prefer calling <a href="../symbols/Diagram.html#removeModelChangedListener" class="linkMethod">Diagram.removeModelChangedListener</a> instead of this method.</div>
|
|
|
|
</p><div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/Model.html#addChangedListener" class="linkMethod">addChangedListener</a></li>
|
|
|
|
<li><a href="../symbols/Diagram.html#removeModelChangedListener" class="linkMethod">Diagram.removeModelChangedListener</a></li>
|
|
|
|
</ul></div>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Parameters:</dt>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{function(ChangedEvent)}</span> <b>listener</b>
|
|
|
|
</dt>
|
|
<dd>a function that takes a <a href="../symbols/ChangedEvent.html" class="linkConstructor">ChangedEvent</a> as its argument.</dd>
|
|
|
|
</dl>
|
|
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="removeNodeData">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
removeNodeData(nodedata)
|
|
</div>
|
|
<div class="attributes">
|
|
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>When you want to remove a node or group from the diagram,
|
|
call this method with an existing data object.<span class="nodetails" id="xmethremoveNodeData"><a class="morelink" onclick="hst('methremoveNodeData')">More...</a></span> <span class="details" id="methremoveNodeData">
|
|
This will remove that data from the <a href="../symbols/Model.html#nodeDataArray" class="linkProperty">nodeDataArray</a> and
|
|
notify all listeners that a node data object has been removed from the collection.
|
|
</span><div class="details" id="dmethremoveNodeData"><p>
|
|
If you do not have a reference to the particular data object that is in the <a href="../symbols/Model.html#nodeDataArray" class="linkProperty">nodeDataArray</a>,
|
|
you may need to search for it by iterating through that Array,
|
|
or by finding the desired <a href="../symbols/Node.html" class="linkConstructor">Node</a> or simple <a href="../symbols/Part.html" class="linkConstructor">Part</a> in a <a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a> and getting that node's <a href="../symbols/Panel.html#data" class="linkProperty">Panel.data</a>,
|
|
or most likely by calling <a href="../symbols/Model.html#findNodeDataForKey" class="linkMethod">findNodeDataForKey</a>.
|
|
<p>
|
|
Removing a node data from a model does not automatically remove
|
|
any connected link data from the model.
|
|
Removing a node data that represents a group does not automatically remove
|
|
any member node data or link data from the model.
|
|
<p>
|
|
To add a node to the diagram, you can add its data object by calling <a href="../symbols/Model.html#addNodeData" class="linkMethod">addNodeData</a>.
|
|
<p>
|
|
To add or remove an object or value from an item array, call <a href="../symbols/Model.html#insertArrayItem" class="linkMethod">insertArrayItem</a> or <a href="../symbols/Model.html#removeArrayItem" class="linkMethod">removeArrayItem</a>.</div>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Parameters:</dt>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{Object}</span> <b>nodedata</b>
|
|
|
|
</dt>
|
|
<dd>a JavaScript object represented by a node, group, or non-link.</dd>
|
|
|
|
</dl>
|
|
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="removeNodeDataCollection">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
removeNodeDataCollection(coll)
|
|
</div>
|
|
<div class="attributes">
|
|
|
|
|
|
<span class="since" title="since">1.3</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Remove from this model all of the node data held in an Array or in an <a href="../symbols/Iterable.html" class="linkConstructor">Iterable</a> of node data objects.<span class="nodetails" id="xmethremoveNodeDataCollection"><a class="morelink" onclick="hst('methremoveNodeDataCollection')">More...</a></span> <span class="details" id="methremoveNodeDataCollection"></span>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Parameters:</dt>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{Iterable.<Object>|Array.<Object>}</span> <b>coll</b>
|
|
|
|
</dt>
|
|
<dd>a collection of node data objects to remove from the <a href="../symbols/Model.html#nodeDataArray" class="linkProperty">nodeDataArray</a></dd>
|
|
|
|
</dl>
|
|
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="rollbackTransaction">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
rollbackTransaction()
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{boolean}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Rollback the current transaction, undoing any recorded changes.<span class="nodetails" id="xmethrollbackTransaction"><a class="morelink" onclick="hst('methrollbackTransaction')">More...</a></span> <span class="details" id="methrollbackTransaction">
|
|
This just calls <a href="../symbols/UndoManager.html#rollbackTransaction" class="linkMethod">UndoManager.rollbackTransaction</a>.</span>
|
|
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Returns:</dt>
|
|
|
|
<dt><span class="light fixedFont">{boolean}</span> the value returned by <a href="../symbols/UndoManager.html#rollbackTransaction" class="linkMethod">UndoManager.rollbackTransaction</a>.</dt>
|
|
|
|
</dl>
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="set">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
set(data, propname, val)
|
|
</div>
|
|
<div class="attributes">
|
|
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>A synonym for <a href="../symbols/Model.html#setDataProperty" class="linkMethod">setDataProperty</a>.<span class="nodetails" id="xmethset"><a class="morelink" onclick="hst('methset')">More...</a></span> <span class="details" id="methset"></span>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Parameters:</dt>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{Object}</span> <b>data</b>
|
|
|
|
</dt>
|
|
<dd>a JavaScript object typically the value of a <a href="../symbols/Panel.html#data" class="linkProperty">Panel.data</a> and represented by a Node, Link, Group, simple Part,
|
|
or item in a <a href="../symbols/Panel.html#itemArray" class="linkProperty">Panel.itemArray</a>; or this model's <a href="../symbols/Model.html#modelData" class="linkProperty">modelData</a>.</dd>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{string}</span> <b>propname</b>
|
|
|
|
</dt>
|
|
<dd>a string that is not null or the empty string.</dd>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{*}</span> <b>val</b>
|
|
|
|
</dt>
|
|
<dd>the new value for the property.</dd>
|
|
|
|
</dl>
|
|
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="setCategoryForNodeData">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
setCategoryForNodeData(nodedata, cat)
|
|
</div>
|
|
<div class="attributes">
|
|
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Change the category of a given node data, a string naming the node template
|
|
or group template or part template
|
|
that the <a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a> should use to represent the node data.<span class="nodetails" id="xmethsetCategoryForNodeData"><a class="morelink" onclick="hst('methsetCategoryForNodeData')">More...</a></span> <span class="details" id="methsetCategoryForNodeData">
|
|
</span><div class="details" id="dmethsetCategoryForNodeData"><p>
|
|
Changing the node template for a node data will cause the existing <a href="../symbols/Node.html" class="linkConstructor">Node</a>, <a href="../symbols/Group.html" class="linkConstructor">Group</a>, or <a href="../symbols/Part.html" class="linkConstructor">Part</a>
|
|
to be replaced with a new instance of the same class
|
|
created by copying the new node template and applying any data-bindings.
|
|
That means that the templates in the <a href="../symbols/Diagram.html#nodeTemplateMap" class="linkProperty">Diagram.nodeTemplateMap</a> or <a href="../symbols/Diagram.html#groupTemplateMap" class="linkProperty">Diagram.groupTemplateMap</a>
|
|
must be instances of the same class -- one cannot convert a <a href="../symbols/Node.html" class="linkConstructor">Node</a> into a <a href="../symbols/Group.html" class="linkConstructor">Group</a> or vice-versa
|
|
by setting the category.
|
|
<p>
|
|
Binding sources should not be (or depend in a conversion function on) the category of the data
|
|
if you might be modifying the category, because then some bindings might be evaluated
|
|
before or after the category has been changed.</div>
|
|
|
|
</p><div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/Model.html#nodeCategoryProperty" class="linkProperty">nodeCategoryProperty</a></li>
|
|
|
|
<li><a href="../symbols/Model.html#getCategoryForNodeData" class="linkMethod">getCategoryForNodeData</a></li>
|
|
|
|
</ul></div>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Parameters:</dt>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{Object}</span> <b>nodedata</b>
|
|
|
|
</dt>
|
|
<dd>a JavaScript object represented by a node, group, or non-link.</dd>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{string}</span> <b>cat</b>
|
|
|
|
</dt>
|
|
<dd>Must not be null.</dd>
|
|
|
|
</dl>
|
|
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="setDataProperty">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
setDataProperty(data, propname, val)
|
|
</div>
|
|
<div class="attributes">
|
|
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Change the value of some property of a node data, a link data, an item data, or the <a href="../symbols/Model.html#modelData" class="linkProperty">Model.modelData</a>,
|
|
given a string naming the property and the new value,
|
|
in a manner that can be undone/redone and that automatically updates any bindings.<span class="nodetails" id="xmethsetDataProperty"><a class="morelink" onclick="hst('methsetDataProperty')">More...</a></span> <span class="details" id="methsetDataProperty">
|
|
</span><div class="details" id="dmethsetDataProperty"><p>
|
|
This gets the old value of the property; if the value is the same as the new value, no side-effects occur.
|
|
This calls <a href="../symbols/Model.html#raiseDataChanged" class="linkMethod">raiseDataChanged</a> to notify about the change.
|
|
<p>
|
|
Note that it is insufficient to modify an item Array (for example by pushing a new item onto the Array) and
|
|
then calling <code>setDataProperty(data, "items", data.items)</code> because the value of
|
|
<code>data.items</code> is still the same reference.
|
|
<p>
|
|
If you modify the property that is the <a href="../symbols/Model.html#nodeKeyProperty" class="linkProperty">nodeKeyProperty</a>, this will call <a href="../symbols/Model.html#setKeyForNodeData" class="linkMethod">setKeyForNodeData</a>.
|
|
<p>
|
|
If you modify the property that is the <a href="../symbols/Model.html#nodeCategoryProperty" class="linkProperty">nodeCategoryProperty</a> or the <a href="../symbols/GraphLinksModel.html#linkCategoryProperty" class="linkProperty">GraphLinksModel.linkCategoryProperty</a>,
|
|
this will call <a href="../symbols/Model.html#setCategoryForNodeData" class="linkMethod">setCategoryForNodeData</a> or <a href="../symbols/GraphLinksModel.html#setCategoryForLinkData" class="linkMethod">GraphLinksModel.setCategoryForLinkData</a>.
|
|
But if the category might change, <a href="../symbols/Binding.html" class="linkConstructor">Binding</a> sources should not be (or depend in a conversion function on) the category of the data,
|
|
because then some bindings might be evaluated before or after the category has been changed.</div>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Parameters:</dt>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{Object}</span> <b>data</b>
|
|
|
|
</dt>
|
|
<dd>a JavaScript object typically the value of a <a href="../symbols/Panel.html#data" class="linkProperty">Panel.data</a> and represented by a Node, Link, Group, simple Part,
|
|
or item in a <a href="../symbols/Panel.html#itemArray" class="linkProperty">Panel.itemArray</a>; or this model's <a href="../symbols/Model.html#modelData" class="linkProperty">modelData</a>.</dd>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{string}</span> <b>propname</b>
|
|
|
|
</dt>
|
|
<dd>a string that is not null or the empty string.</dd>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{*}</span> <b>val</b>
|
|
|
|
</dt>
|
|
<dd>the new value for the property.</dd>
|
|
|
|
</dl>
|
|
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="setKeyForNodeData">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
setKeyForNodeData(nodedata, key)
|
|
</div>
|
|
<div class="attributes">
|
|
|
|
|
|
<span class="since" title="since">1.1</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Change the unique key of a given node data that is already in this model.<span class="nodetails" id="xmethsetKeyForNodeData"><a class="morelink" onclick="hst('methsetKeyForNodeData')">More...</a></span> <span class="details" id="methsetKeyForNodeData">
|
|
The new key value must be unique -- i.e. not in use by another node data object.
|
|
You can call <a href="../symbols/Model.html#findNodeDataForKey" class="linkMethod">findNodeDataForKey</a> to check if a proposed new key is already in use.
|
|
</span><div class="details" id="dmethsetKeyForNodeData"><p>
|
|
This operation will check all data objects in the model and replace all references
|
|
using the old key value with the new one.
|
|
<p>
|
|
If this is called on a node data object that is not (yet) in this model,
|
|
this unconditionally modifies the property to the new key value.</div>
|
|
|
|
</p><div class="seealso">See also:
|
|
<ul class="seealsolist">
|
|
|
|
<li><a href="../symbols/Model.html#nodeKeyProperty" class="linkProperty">nodeKeyProperty</a></li>
|
|
|
|
<li><a href="../symbols/Model.html#getKeyForNodeData" class="linkMethod">getKeyForNodeData</a></li>
|
|
|
|
</ul></div>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Parameters:</dt>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{Object}</span> <b>nodedata</b>
|
|
|
|
</dt>
|
|
<dd>a JavaScript object represented by a node, group, or non-link.</dd>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{string|number}</span> <b>key</b>
|
|
|
|
</dt>
|
|
<dd></dd>
|
|
|
|
</dl>
|
|
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="startTransaction">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
startTransaction(tname)
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{boolean}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Begin a transaction, where the changes are held by a <a href="../symbols/Transaction.html" class="linkConstructor">Transaction</a> object
|
|
in the <a href="../symbols/UndoManager.html" class="linkConstructor">UndoManager</a>.<span class="nodetails" id="xmethstartTransaction"><a class="morelink" onclick="hst('methstartTransaction')">More...</a></span> <span class="details" id="methstartTransaction">
|
|
This just calls <a href="../symbols/UndoManager.html#startTransaction" class="linkMethod">UndoManager.startTransaction</a>.</span>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Parameters:</dt>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{string=}</span> <b>tname</b>
|
|
|
|
</dt>
|
|
<dd>a descriptive name for the transaction.</dd>
|
|
|
|
</dl>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Returns:</dt>
|
|
|
|
<dt><span class="light fixedFont">{boolean}</span> the value returned by <a href="../symbols/UndoManager.html#startTransaction" class="linkMethod">UndoManager.startTransaction</a>.</dt>
|
|
|
|
</dl>
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="toIncrementalJson">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
toIncrementalJson(e, classname)
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{string}</span>
|
|
|
|
<span class="since" title="since">1.6</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Produce a JSON-format string representing the changes in the most recent <a href="../symbols/Transaction.html" class="linkConstructor">Transaction</a>.<span class="nodetails" id="xmethtoIncrementalJson"><a class="morelink" onclick="hst('methtoIncrementalJson')">More...</a></span> <span class="details" id="methtoIncrementalJson">
|
|
This writes out JSON for a model, but recording only changes in the given Transaction,
|
|
with the addition of the "incremental" property to mark it as different from a complete model.
|
|
Instead of the "nodeDataArray" property (and "linkDataArray" property for <a href="../symbols/GraphLinksModel.html" class="linkConstructor">GraphLinksModel</a>s),
|
|
this will have "inserted...", "modified...", and "removed..." properties that are non-empty Arrays.
|
|
</span><div class="details" id="dmethtoIncrementalJson"><p>
|
|
The "modifiedNodeData" Array holds JavaScript objects.
|
|
The "insertedNodeKeys" and "removedNodeKeys" Arrays hold keys (numbers or strings) of data,
|
|
not whole objects, that have been added and/or deleted.
|
|
The "modelData" property holds the <a href="../symbols/Model.html#modelData" class="linkProperty">Model.modelData</a> object, if it was modified.
|
|
<p>
|
|
Note that it is entirely plausible for the same object be in or referenced by all three Arrays,
|
|
because a single <a href="../symbols/Transaction.html" class="linkConstructor">Transaction</a> can include adding a node, modifying it, and removing it.
|
|
<p>
|
|
The purpose of this method is to make it easier to send incremental changes to the server/database,
|
|
instead of sending the whole model.
|
|
Whereas it has always been easy to perform "batch" updates or "file saves":
|
|
<pre>
|
|
myDiagram.addModelChangedListener(function(e) {
|
|
if (e.isTransactionFinished) {
|
|
var json = e.model.toJson();
|
|
// save the whole model upon each transaction completion or undo/redo
|
|
... send to server/database ...
|
|
}
|
|
});
|
|
</pre>
|
|
You can now easily send "incremental" updates:
|
|
<pre>
|
|
myDiagram.addModelChangedListener(function(e) {
|
|
if (e.isTransactionFinished) {
|
|
var json = e.model.toIncrementalJson(e);
|
|
// record each Transaction as a JSON-format string
|
|
... send to server/database ...
|
|
}
|
|
});
|
|
</pre>
|
|
Note that these incremental changes include the results of undo and redo operations.
|
|
Also, when you might call <a href="../symbols/Model.html#applyIncrementalJson" class="linkMethod">applyIncrementalJson</a>, you will need to disable your Changed listener,
|
|
so that it does not send spurious changes to your database during the process of apply incremental changes from the database.
|
|
<p>
|
|
For <a href="../symbols/GraphLinksModel.html" class="linkConstructor">GraphLinksModel</a>s, this method requires that <a href="../symbols/GraphLinksModel.html#linkKeyProperty" class="linkProperty">GraphLinksModel.linkKeyProperty</a> is not an empty string.
|
|
The incremental JSON for GraphLinksModels will include "modifiedLinkData", "insertedLinkKeys", and "removedLinkKeys"
|
|
properties that are non-empty Arrays.
|
|
<p>
|
|
The same restrictions on data property names and data property values applies to this method as it does to <a href="../symbols/Model.html#toJson" class="linkMethod">toJson</a>.</div>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Parameters:</dt>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{<a href="../symbols/ChangedEvent.html" class="linkConstructor">ChangedEvent</a>}</span> <b>e</b>
|
|
|
|
</dt>
|
|
<dd>a Transaction ChangedEvent for which <a href="../symbols/ChangedEvent.html#isTransactionFinished" class="linkProperty">ChangedEvent.isTransactionFinished</a> is true</dd>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{string=}</span> <b>classname</b>
|
|
|
|
</dt>
|
|
<dd>for the written model, defaults to the name of the class of the model</dd>
|
|
|
|
</dl>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Returns:</dt>
|
|
|
|
<dt><span class="light fixedFont">{string}</span> </dt>
|
|
|
|
</dl>
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="toJson">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
toJson(classname)
|
|
</div>
|
|
<div class="attributes">
|
|
<span class="light">{string}</span>
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Generate a string representation of the persistent data in this model, in JSON format,
|
|
that can be read in later with a call to <a href="../symbols/Model.html#.fromJson" class="linkStatic">Model.fromJson</a>.<span class="nodetails" id="xmethtoJson"><a class="morelink" onclick="hst('methtoJson')">More...</a></span> <span class="details" id="methtoJson">
|
|
</span><div class="details" id="dmethtoJson"><p>
|
|
Object properties that are not enumerable or whose names start with "_" are not written out.
|
|
<p>
|
|
Functions are not able to be written in JSON format, so any properties that have function values
|
|
will not be saved in the JSON string.
|
|
<p>
|
|
There must not be any circular references within the model data.
|
|
Any sharing of object references will be lost in the written JSON.
|
|
<p>
|
|
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 are of class <a href="../symbols/Point.html" class="linkConstructor">Point</a>, <a href="../symbols/Size.html" class="linkConstructor">Size</a>, <a href="../symbols/Rect.html" class="linkConstructor">Rect</a>, <a href="../symbols/Margin.html" class="linkConstructor">Margin</a>, <a href="../symbols/Spot.html" class="linkConstructor">Spot</a>,
|
|
<a href="../symbols/Brush.html" class="linkConstructor">Brush</a> (but not for brush patterns), and for <a href="../symbols/Geometry.html" class="linkConstructor">Geometry</a>.
|
|
However, we recommend that you use Binding converters (static functions named "parse" and "stringify")
|
|
to represent Points, Sizes, Rects, Margins, Spots, and Geometries as string values in your data, rather than as Objects.
|
|
This makes the JSON text smaller and simpler and easier to read.
|
|
<p>
|
|
Typical usage:
|
|
<pre class="javascript">
|
|
var modelAsText = myDiagram.model.toJson();
|
|
// now save this text string by sending it to your database
|
|
</pre></div>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Parameters:</dt>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{string=}</span> <b>classname</b>
|
|
|
|
</dt>
|
|
<dd>The optional name of the model class to use in the output;
|
|
for the standard models, this is their class name prefixed with "go.".</dd>
|
|
|
|
</dl>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Returns:</dt>
|
|
|
|
<dt><span class="light fixedFont">{string}</span> a String in JSON format containing all of the persistent properties of the model.</dt>
|
|
|
|
</dl>
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr id="updateTargetBindings">
|
|
<td class="name">
|
|
|
|
<div class="name">
|
|
updateTargetBindings(data, srcpropname)
|
|
</div>
|
|
<div class="attributes">
|
|
|
|
|
|
</div>
|
|
</td>
|
|
<td class="description">
|
|
<div class="description">
|
|
<!--newp--><p><p>Find a <a href="../symbols/Part.html" class="linkConstructor">Part</a> corresponding to the given data and
|
|
call its <a href="../symbols/Panel.html#updateTargetBindings" class="linkMethod">Panel.updateTargetBindings</a> method, in each <a href="../symbols/Diagram.html" class="linkConstructor">Diagram</a>
|
|
that uses this Model.<span class="nodetails" id="xmethupdateTargetBindings"><a class="morelink" onclick="hst('methupdateTargetBindings')">More...</a></span> <span class="details" id="methupdateTargetBindings">
|
|
</span><div class="details" id="dmethupdateTargetBindings"><p>
|
|
Caution: setting a data property without calling <a href="../symbols/Model.html#setDataProperty" class="linkMethod">setDataProperty</a>
|
|
and then calling this updateTargetBindings method will update GraphObjects that are bound to the property,
|
|
but such data settings will not be recorded in the UndoManager and therefore will not be undone/redone,
|
|
causing an inconsistency between the GraphObjects and the part data.</div>
|
|
|
|
|
|
<dl class="detailList">
|
|
<dt class="heading">Parameters:</dt>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{Object}</span> <b>data</b>
|
|
|
|
</dt>
|
|
<dd>The data object in this model that was modified.</dd>
|
|
|
|
<dt>
|
|
<span class="light fixedFont">{string=}</span> <b>srcpropname</b>
|
|
|
|
</dt>
|
|
<dd>If not present or the empty string,
|
|
update all bindings on the target <a href="../symbols/Part.html" class="linkConstructor">Part</a> or item <a href="../symbols/Panel.html" class="linkConstructor">Panel</a>;
|
|
otherwise update only those bindings using this source property name.</dd>
|
|
|
|
</dl>
|
|
|
|
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
</div><!-- class="table-responsive">-->
|
|
|
|
|
|
|
|
|
|
<!-- ============================== events summary ======================== -->
|
|
|
|
|
|
<!-- ============================== fields summary ===================== -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- ============================== constructor details ==================== -->
|
|
|
|
</div> <!-- end contentBody -->
|
|
</div> <!-- end container-fluid -->
|
|
|
|
<!-- ============================== footer ================================= -->
|
|
<div id="footer" class="fineprint" style="clear:both">
|
|
Copyright © 1998-2017 by <a href="https://www.nwoods.com/">Northwoods Software Corporation.</a>
|
|
</div>
|
|
</body>
|
|
</html>
|