<!-- saved from url=(0026)http://www.naturaldocs.org -->
<divid=Content><divclass="CFile"><divclass=CTopicid=MainTopic><h1class=CTitle><aname="API_Specification"></a>API Specification</h1><divclass=CBody><h4class=CHeading>Overview</h4><p>This JavaScript library is divided into 8 packages. The top-level <ahref="mxClient-js.html#mxClient"class=LClassid=link1onMouseOver="ShowTip(event, 'tt1', 'link1')"onMouseOut="HideTip('tt1')">mxClient</a> class includes (or dynamically imports) everything else. The current version is stored in <ahref="mxClient-js.html#mxClient.VERSION"class=LVariableid=link2onMouseOver="ShowTip(event, 'tt2', 'link2')"onMouseOut="HideTip('tt2')">mxClient.VERSION</a>.</p><p>The <b>editor</b> package provides the classes required to implement a diagram editor. The main class in this package is <ahref="editor/mxEditor-js.html#mxEditor"class=LClassid=link3onMouseOver="ShowTip(event, 'tt3', 'link3')"onMouseOut="HideTip('tt3')">mxEditor</a>.</p><p>The <b>view</b> and <b>model</b> packages implement the graph component, represented by <ahref="view/mxGraph-js.html#mxGraph"class=LClassid=link4onMouseOver="ShowTip(event, 'tt4', 'link4')"onMouseOut="HideTip('tt4')">mxGraph</a>. It refers to a <ahref="model/mxGraphModel-js.html#mxGraphModel"class=LClassid=link5onMouseOver="ShowTip(event, 'tt5', 'link5')"onMouseOut="HideTip('tt5')">mxGraphModel</a> which contains <ahref="model/mxCell-js.html#mxCell"class=LClassid=link6onMouseOver="ShowTip(event, 'tt6', 'link6')"onMouseOut="HideTip('tt6')">mxCell</a>s and caches the state of the cells in a <ahref="view/mxGraphView-js.html#mxGraphView"class=LClassid=link7onMouseOver="ShowTip(event, 'tt7', 'link7')"onMouseOut="HideTip('tt7')">mxGraphView</a>. The cells are painted using a <ahref="view/mxCellRenderer-js.html#mxCellRenderer"class=LClassid=link8onMouseOver="ShowTip(event, 'tt8', 'link8')"onMouseOut="HideTip('tt8')">mxCellRenderer</a> based on the appearance defined in <ahref="view/mxStylesheet-js.html#mxStylesheet"class=LClassid=link9onMouseOver="ShowTip(event, 'tt9', 'link9')"onMouseOut="HideTip('tt9')">mxStylesheet</a>. Undo history is implemented in <ahref="util/mxUndoManager-js.html#mxUndoManager"class=LClassid=link10onMouseOver="ShowTip(event, 'tt10', 'link10')"onMouseOut="HideTip('tt10')">mxUndoManager</a>. To display an icon on the graph, <ahref="view/mxCellOverlay-js.html#mxCellOverlay"class=LClassid=link11onMouseOver="ShowTip(event, 'tt11', 'link11')"onMouseOut="HideTip('tt11')">mxCellOverlay</a> may be used. Validation rules are defined with <ahref="view/mxMultiplicity-js.html#mxMultiplicity"class=LClassid=link12onMouseOver="ShowTip(event, 'tt12', 'link12')"onMouseOut="HideTip('tt12')">mxMultiplicity</a>.</p><p>The <b>handler</b>, <b>layout</b> and <b>shape</b> packages contain event listeners, layout algorithms and shapes, respectively. The graph event listeners include <ahref="handler/mxRubberband-js.html#mxRubberband"class=LClassid=link13onMouseOver="ShowTip(event, 'tt13', 'link13')"onMouseOut="HideTip('tt13')">mxRubberband</a> for rubberband selection, <ahref="handler/mxTooltipHandler-js.html#mxTooltipHandler"class=LClassid=link14onMouseOver="ShowTip(event, 'tt14', 'link14')"onMouseOut="HideTip('tt14')">mxTooltipHandler</a> for tooltips and <ahref="handler/mxGraphHandler-js.html#mxGraphHandler"class=LClassid=link15onMouseOver="ShowTip(event, 'tt15', 'link15')"onMouseOut="HideTip('tt15')">mxGraphHandler</a> for basic cell modifications. <ahref="layout/mxCompactTreeLayout-js.html#mxCompactTreeLayout"class=LClassid=link16onMouseOver="ShowTip(event, 'tt16', 'link16')"onMouseOut="HideTip('tt16')">mxCompactTreeLayout</a> implements a tree layout algorithm, and the shape package provides various shapes, which are subclasses of <ahref="shape/mxShape-js.html#mxShape"class=LClassid=link17onMouseOver="ShowTip(event, 'tt17', 'link17')"onMouseOut="HideTip('tt17')">mxShape</a>.</p><p>The <b>util</b> package provides utility classes including <ahref="util/mxClipboard-js.html#mx
image.src = url_to_image;</pre></blockquote><h4class=CHeading>Deployment</h4><p>The client is added to the page using the following script tag inside the head of a document:</p><blockquote><preclass="prettyprint"><script type="text/javascript" src="js/mxClient.js"></script></pre></blockquote><p>The deployment version of the mxClient.js file contains all required code in a single file. For deployment, the complete javascript/src directory is required.</p><h4class=CHeading>Source Code</h4><p>If you are a source code customer and you wish to develop using the full source code, the commented source code is shipped in the javascript/devel/source.zip file. It contains one file for each class in mxGraph. To use the source code the source.zip file must be uncompressed and the mxClient.js URL in the HTML page must be changed to reference the uncompressed mxClient.js from the source.zip file.</p><h4class=CHeading>Compression</h4><p>When using Apache2 with mod_deflate, you can use the following directive in src/js/.htaccess to speedup the loading of the JavaScript sources:</p><blockquote><preclass="prettyprint">SetOutputFilter DEFLATE</pre></blockquote><h4class=CHeading>Classes</h4><p>There are two types of “classes” in mxGraph: classes and singletons (where only one instance exists). Singletons are mapped to global objects where the variable name equals the classname. For example mxConstants is an object with all the constants defined as object fields. Normal classes are mapped to a constructor function and a prototype which defines the instance fields and methods. For example, <ahref="editor/mxEditor-js.html#mxEditor"class=LClassid=link59onMouseOver="ShowTip(event, 'tt3', 'link59')"onMouseOut="HideTip('tt3')">mxEditor</a> is a function and mxEditor.prototype is the prototype for the object that the mxEditor function creates. The mx prefix is a convention that is used for all classes in the mxGraph package to avoid conflicts with other objects in the global namespace.</p><h4class=CHeading>Subclassing</h4><p>For subclassing, the superclass must provide a constructor that is either parameterless or handles an invocation with no arguments. Furthermore, the special constructor field must be redefined after extending the prototype. For example, the superclass of mxEditor is <ahref="util/mxEventSource-js.html#mxEventSource"class=LClassid=link60onMouseOver="ShowTip(event, 'tt28', 'link60')"onMouseOut="HideTip('tt28')">mxEventSource</a>. This is represented in JavaScript by first “inheriting” all fields and methods from the superclass by assigning the prototype to an instance of the superclass, eg. mxEditor.prototype = new mxEventSource() and redefining the constructor field using mxEditor.prototype.constructor = mxEditor. The latter rule is applied so that the type of an object can be retrieved via the name of it<69>s constructor using mxUtils.getFunctionName(obj.constructor).</p><h4class=CHeading>Constructor</h4><p>For subclassing in mxGraph, the same scheme should be applied. For example, for subclassing the <ahref="view/mxGraph-js.html#mxGraph"class=LClassid=link61onMouseOver="ShowTip(event, 'tt4', 'link61')"onMouseOut="HideTip('tt4')">mxGraph</a> class, first a constructor must be defined for the new class. The constructor calls the super constructor with any arguments that it may have using the call function on the mxGraph function object, passing along explitely each argument:</p><blockquote><preclass="prettyprint">function MyGraph(container)
{
mxGraph.call(this, container);
}</pre></blockquote><p>The prototype of MyGraph inherits from mxGraph as follows. As usual, the constructor is redefined after extending the superclass:</p><blockquote><preclass="prettyprint">MyGraph.prototype = new mxGraph();
MyGraph.prototype.constructor = MyGraph;</pre></blockquote><p>You may want to define the codec associated for the class after the above code. This code will be executed at class loading time and makes sure the same codec is used to encode instances of mxGraph and MyGraph.</p><blockquote><preclass="prettyprint">var codec = mxCodecRegistry.getCodec(mxGraph);
codec.template = new MyGraph();
mxCodecRegistry.register(codec);</pre></blockquote><h4class=CHeading>Functions</h4><p>In the prototype for MyGraph, functions of mxGraph can then be extended as follows.</p><blockquote><preclass="prettyprint">MyGraph.prototype.isCellSelectable = function(cell)
{
var selectable = mxGraph.prototype.isSelectable.apply(this, arguments);
}</pre></blockquote><p>The supercall in the first line is optional. It is done using the apply function on the isSelectable function object of the mxGraph prototype, using the special this and arguments variables as parameters. Calls to the superclass function are only possible if the function is not replaced in the superclass as follows, which is another way of <20>subclassing<6E> in JavaScript.</p><blockquote><preclass="prettyprint">mxGraph.prototype.isCellSelectable = function(cell)
{
var geo = this.model.getGeometry(cell);
return selectable &&
(geo == null ||
!geo.relative);
}</pre></blockquote><p>The above scheme is useful if a function definition needs to be replaced completely.</p><p>In order to add new functions and fields to the subclass, the following code is used. The example below adds a new function to return the XML representation of the graph model:</p><blockquote><preclass="prettyprint">MyGraph.prototype.getXml = function()
{
var enc = new mxCodec();
return enc.encode(this.getModel());
}</pre></blockquote><h4class=CHeading>Variables</h4><p>Likewise, a new field is declared and defined as follows.</p><blockquote><preclass="prettyprint">MyGraph.prototype.myField = 'Hello, World!';</pre></blockquote><p>Note that the value assigned to myField is created only once, that is, all instances of MyGraph share the same value. If you require instance-specific values, then the field must be defined in the constructor instead.</p><blockquote><preclass="prettyprint">function MyGraph(container)
{
mxGraph.call(this, container);
this.myField = new Array();
}</pre></blockquote><p>Finally, a new instance of MyGraph is created using the following code, where container is a DOM node that acts as a container for the graph view:</p><blockquote><preclass="prettyprint">var graph = new MyGraph(container);</pre></blockquote></div></div></div>
</div><!--Content-->
<divid=Footer><ahref="http://www.naturaldocs.org">Generated by Natural Docs</a></div><!--Footer-->
<divclass=CToolTipid="tt1"><divclass=CClass>Bootstrapping mechanism for the mxGraph thin client. </div></div><divclass=CToolTipid="tt2"><divclass=CVariable>Contains the current version of the mxGraph library. </div></div><divclass=CToolTipid="tt3"><divclass=CClass>Extends mxEventSource to implement a application wrapper for a graph that adds actions, I/O using mxCodec, auto-layout using mxLayoutManager, command history using undoManager, and standard dialogs and widgets, eg. </div></div><divclass=CToolTipid="tt4"><divclass=CClass>Extends mxEventSource to implement a graph component for the browser. </div></div><divclass=CToolTipid="tt5"><divclass=CClass>Extends mxEventSource to implement a graph model. </div></div><divclass=CToolTipid="tt6"><divclass=CClass>Cells are the elements of the graph model. </div></div><divclass=CToolTipid="tt7"><divclass=CClass>Extends mxEventSource to implement a view for a graph. </div></div><divclass=CToolTipid="tt8"><divclass=CClass>Renders cells into a document object model. </div></div><divclass=CToolTipid="tt9"><divclass=CClass>Defines the appearance of the cells in a graph. </div></div><divclass=CToolTipid="tt10"><divclass=CClass>Implements a command history. </div></div><divclass=CToolTipid="tt11"><divclass=CClass>Extends mxEventSource to implement a graph overlay, represented by an icon and a tooltip. </div></div><divclass=CToolTipid="tt12"><divclass=CClass>Defines invalid connections along with the error messages that they produce. </div></div><divclass=CToolTipid="tt13"><divclass=CClass>Event handler that selects rectangular regions. </div></div><divclass=CToolTipid="tt14"><divclass=CClass>Graph event handler that displays tooltips. </div></div><divclass=CToolTipid="tt15"><divclass=CClass>Graph event handler that handles selection. </div></div><divclass=CToolTipid="tt16"><divclass=CClass>Extends mxGraphLayout to implement a compact tree (Moen) algorithm. </div></div><divclass=CToolTipid="tt17"><divclass=CClass>Base class for all shapes. </div></div><divclass=CToolTipid="tt18"><divclass=CClass>Singleton that implements a clipboard for graph cells.</div></div><divclass=CToolTipid="tt19"><divclass=CClass>Defines various global constants.</div></div><divclass=CToolTipid="tt20"><divclass=CClass>Cross-browser DOM event support. </div></div><divclass=CToolTipid="tt21"><divclass=CClass>A singleton class that provides cross-browser helper methods. </div></div><divclass=CToolTipid="tt22"><divclass=CClass>Implements internationalization. </div></div><divclass=CToolTipid="tt23"><divclass=CClass>A singleton class that implements a simple console.</div></div><divclass=CToolTipid="tt24"><divclass=CClass>Generic codec for JavaScript objects that implements a mapping between JavaScript objects and XML nodes that maps each field or element to an attribute or child node, and vice versa.</div></div><divclass=CToolTipid="tt25"><divclass=CClass>XML codec for JavaScript object graphs. </div></div><divclass=CToolTipid="tt26"><divclass=CClass>Singleton class that acts as a global registry for codecs.</div></div><divclass=CToolTipid="tt27"><divclass=CClass>The mxEventObject is a wrapper for all properties of a single event. </div></div><divclass=CToolTipid="tt28"><divclass=CClass>Base class for objects that dispatch named events. </div></div><divclass=CToolTipid="tt29"><divclass=CClass>Base class for all mouse events in mxGraph. </div></div><divclass=CToolTipid="tt30"><divclass=CFunction><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype prettyprint"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass=PBeforeParametersnowrap>mxEventSource.prototype.fireEvent = function(</td><tdclass=PParameternowrap>evt,</td></tr><tr><td></td><tdclass=PParameternowrap>sender</td><tdclass=PAfterParametersnowrap>)</td></tr></table></td></tr></table></blockquote>Dispatches the given event to the listeners which are registered for the event. </div></div><divclass=CToolTipid="tt31"><divclass=CFu
