mxGraph
Extends mxEventSource to implement a graph component for the browser. This is the main class of the package. To activate panning and connections use setPanning and setConnectable. For rubberband selection you must create a new instance of mxRubberband. The following listeners are added to mouseListeners by default:
- <tooltipHandler>: mxTooltipHandler that displays tooltips
- <panningHandler>: mxPanningHandler for panning and popup menus
- <connectionHandler>: mxConnectionHandler for creating connections
- <graphHandler>: mxGraphHandler for moving and cloning cells
These listeners will be called in the above order if they are enabled.
Background Images
To display a background image, set the image, image width and image height using setBackgroundImage. If one of the above values has changed then the view’s mxGraphView.validate should be invoked.
Cell Images
To use images in cells, a shape must be specified in the default vertex style (or any named style). Possible shapes are mxConstants.SHAPE_IMAGE and mxConstants.SHAPE_LABEL. The code to change the shape used in the default vertex style, the following code is used:
var style = graph.getStylesheet().getDefaultVertexStyle(); style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_IMAGE;
For the default vertex style, the image to be displayed can be specified in a cell’s style using the mxConstants.STYLE_IMAGE key and the image URL as a value, for example:
image=http://www.example.com/image.gif
For a named style, the the stylename must be the first element of the cell style:
stylename;image=http://www.example.com/image.gif
A cell style can have any number of key=value pairs added, divided by a semicolon as follows:
[stylename;|key=value;]
Labels
The cell labels are defined by getLabel which uses convertValueToString if labelsVisible is true. If a label must be rendered as HTML markup, then isHtmlLabel should return true for the respective cell. If all labels contain HTML markup, htmlLabels can be set to true. NOTE: Enabling HTML labels carries a possible security risk (see the section on security in the manual).
If wrapping is needed for a label, then isHtmlLabel and isWrapping must return true for the cell whose label should be wrapped. See isWrapping for an example.
If clipping is needed to keep the rendering of a HTML label inside the bounds of its vertex, then <isClipping> should return true for the respective cell.
By default, edge labels are movable and vertex labels are fixed. This can be changed by setting edgeLabelsMovable and vertexLabelsMovable, or by overriding isLabelMovable.
In-place Editing
In-place editing is started with a doubleclick or by typing F2. Programmatically, <edit> is used to check if the cell is editable (isCellEditable) and call startEditingAtCell, which invokes mxCellEditor.startEditing. The editor uses the value returned by getEditingValue as the editing value.
After in-place editing, labelChanged is called, which invokes mxGraphModel.setValue, which in turn calls mxGraphModel.valueForCellChanged via mxValueChange.
The event that triggers in-place editing is passed through to the cellEditor, which may take special actions depending on the type of the event or mouse location, and is also passed to getEditingValue. The event is then passed back to the event processing functions which can perform specific actions based on the trigger event.
Tooltips
Tooltips are implemented by getTooltip, which calls getTooltipForCell if a cell is under the mousepointer. The default implementation checks if the cell has a getTooltip function and calls it if it exists. Hence, in order to provide custom tooltips, the cell must provide a getTooltip function, or one of the two above functions must be overridden.
Typically, for custom cell tooltips, the latter function is overridden as follows:
graph.getTooltipForCell = function(cell)
{
var label = this.convertValueToString(cell);
return 'Tooltip for '+label;
}When using a config file, the function is overridden in the mxGraph section using the following entry:
<add as="getTooltipForCell"><![CDATA[
function(cell)
{
var label = this.convertValueToString(cell);
return 'Tooltip for '+label;
}
]]></add>”this” refers to the graph in the implementation, so for example to check if a cell is an edge, you use this.getModel().isEdge(cell)
For replacing the default implementation of getTooltipForCell (rather than replacing the function on a specific instance), the following code should be used after loading the JavaScript files, but before creating a new mxGraph instance using mxGraph:
mxGraph.prototype.getTooltipForCell = function(cell)
{
var label = this.convertValueToString(cell);
return 'Tooltip for '+label;
}Shapes & Styles
The implementation of new shapes is demonstrated in the examples. We’ll assume that we have implemented a custom shape with the name BoxShape which we want to use for drawing vertices. To use this shape, it must first be registered in the cell renderer as follows:
mxCellRenderer.registerShape('box', BoxShape);The code registers the BoxShape constructor under the name box in the cell renderer of the graph. The shape can now be referenced using the shape-key in a style definition. (The cell renderer contains a set of additional shapes, namely one for each constant with a SHAPE-prefix in mxConstants.)
Styles are a collection of key, value pairs and a stylesheet is a collection of named styles. The names are referenced by the cellstyle, which is stored in mxCell.style with the following format: [stylename;|key=value;]. The string is resolved to a collection of key, value pairs, where the keys are overridden with the values in the string.
When introducing a new shape, the name under which the shape is registered must be used in the stylesheet. There are three ways of doing this:
- By changing the default style, so that all vertices will use the new shape
- By defining a new style, so that only vertices with the respective cellstyle will use the new shape
- By using shape=box in the cellstyle’s optional list of key, value pairs to be overridden
In the first case, the code to fetch and modify the default style for vertices is as follows:
var style = graph.getStylesheet().getDefaultVertexStyle(); style[mxConstants.STYLE_SHAPE] = 'box';
The code takes the default vertex style, which is used for all vertices that do not have a specific cellstyle, and modifies the value for the shape-key in-place to use the new BoxShape for drawing vertices. This is done by assigning the box value in the second line, which refers to the name of the BoxShape in the cell renderer.
In the second case, a collection of key, value pairs is created and then added to the stylesheet under a new name. In order to distinguish the shapename and the stylename we’ll use boxstyle for the stylename:
var style = new Object();
style[mxConstants.STYLE_SHAPE] = 'box';
style[mxConstants.STYLE_STROKECOLOR] = '#000000';
style[mxConstants.STYLE_FONTCOLOR] = '#000000';
graph.getStylesheet().putCellStyle('boxstyle', style);The code adds a new style with the name boxstyle to the stylesheet. To use this style with a cell, it must be referenced from the cellstyle as follows:
var vertex = graph.insertVertex(parent, null, 'Hello, World!', 20, 20, 80, 20,
'boxstyle');To summarize, each new shape must be registered in the mxCellRenderer with a unique name. That name is then used as the value of the shape-key in a default or custom style. If there are multiple custom shapes, then there should be a separate style for each shape.
Inheriting Styles
For fill-, stroke-, gradient- and indicatorColors special keywords can be used. The inherit keyword for one of these colors will inherit the color for the same key from the parent cell. The swimlane keyword does the same, but inherits from the nearest swimlane in the ancestor hierarchy. Finally, the indicated keyword will use the color of the indicator as the color for the given key.
Scrollbars
The <containers> overflow CSS property defines if scrollbars are used to display the graph. For values of ‘auto’ or ‘scroll’, the scrollbars will be shown. Note that the resizeContainer flag is normally not used together with scrollbars, as it will resize the container to match the size of the graph after each change.
Multiplicities and Validation
To control the possible connections in mxGraph, getEdgeValidationError is used. The default implementation of the function uses multiplicities, which is an array of mxMultiplicity. Using this class allows to establish simple multiplicities, which are enforced by the graph.
The mxMultiplicity uses <mxCell.is> to determine for which terminals it applies. The default implementation of <mxCell.is> works with DOM nodes (XML nodes) and checks if the given type parameter matches the nodeName of the node (case insensitive). Optionally, an attributename and value can be specified which are also checked.
getEdgeValidationError is called whenever the connectivity of an edge changes. It returns an empty string or an error message if the edge is invalid or null if the edge is valid. If the returned string is not empty then it is displayed as an error message.
mxMultiplicity allows to specify the multiplicity between a terminal and its possible neighbors. For example, if any rectangle may only be connected to, say, a maximum of two circles you can add the following rule to multiplicities:
graph.multiplicities.push(new mxMultiplicity( true, 'rectangle', null, null, 0, 2, ['circle'], 'Only 2 targets allowed', 'Only shape targets allowed'));
This will display the first error message whenever a rectangle is connected to more than two circles and the second error message if a rectangle is connected to anything but a circle.
For certain multiplicities, such as a minimum of 1 connection, which cannot be enforced at cell creation time (unless the cell is created together with the connection), mxGraph offers <validate> which checks all multiplicities for all cells and displays the respective error messages in an overlay icon on the cells.
If a cell is collapsed and contains validation errors, a respective warning icon is attached to the collapsed cell.
Auto-Layout
For automatic layout, the <getLayout> hook is provided in mxLayoutManager. It can be overridden to return a layout algorithm for the children of a given cell.
Unconnected edges
The default values for all switches are designed to meet the requirements of general diagram drawing applications. A very typical set of settings to avoid edges that are not connected is the following:
graph.setAllowDanglingEdges(false); graph.setDisconnectOnMove(false);
Setting the cloneInvalidEdges switch to true is optional. This switch controls if edges are inserted after a copy, paste or clone-drag if they are invalid. For example, edges are invalid if copied or control-dragged without having selected the corresponding terminals and allowDanglingEdges is false, in which case the edges will not be cloned if the switch is false.
Output
To produce an XML representation for a diagram, the following code can be used.
var enc = new mxCodec(mxUtils.createXmlDocument()); var node = enc.encode(graph.getModel());
This will produce an XML node than can be handled using the DOM API or turned into a string representation using the following code:
var xml = mxUtils.getXml(node);
To obtain a formatted string, mxUtils.getPrettyXml can be used instead.
This string can now be stored in a local persistent storage (for example using Google Gears) or it can be passed to a backend using mxUtils.post as follows. The url variable is the URL of the Java servlet, PHP page or HTTP handler, depending on the server.
var xmlString = encodeURIComponent(mxUtils.getXml(node));
mxUtils.post(url, 'xml='+xmlString, function(req)
{
// Process server response using req of type mxXmlRequest
});Input
To load an XML representation of a diagram into an existing graph object mxUtils.load can be used as follows. The url variable is the URL of the Java servlet, PHP page or HTTP handler that produces the XML string.
var xmlDoc = mxUtils.load(url).getXml(); var node = xmlDoc.documentElement; var dec = new mxCodec(node.ownerDocument); dec.decode(node, graph.getModel());
For creating a page that loads the client and a diagram using a single request please refer to the deployment examples in the backends.
Functional dependencies
Resources
| resources/graph | Language resources for mxGraph |
| mxGraph | Extends mxEventSource to implement a graph component for the browser. |
| Events | |
| mxEvent.ROOT | Fires if the root in the model has changed. |
| mxEvent. | Fires between begin- and endUpdate in alignCells. |
| mxEvent. | Fires between begin- and endUpdate in flipEdge. |
| mxEvent. | Fires between begin- and endUpdate in orderCells. |
| mxEvent. | Fires between begin- and endUpdate in cellsOrdered. |
| mxEvent. | Fires between begin- and endUpdate in groupCells. |
| mxEvent. | Fires between begin- and endUpdate in ungroupCells. |
| mxEvent. | Fires between begin- and endUpdate in removeCellsFromParent. |
| mxEvent. | Fires between begin- and endUpdate in addCells. |
| mxEvent. | Fires between begin- and endUpdate in cellsAdded. |
| mxEvent. | Fires between begin- and endUpdate in removeCells. |
| mxEvent. | Fires between begin- and endUpdate in cellsRemoved. |
| mxEvent. | Fires between begin- and endUpdate in splitEdge. |
| mxEvent. | Fires between begin- and endUpdate in toggleCells. |
| mxEvent. | Fires between begin- and endUpdate in foldCells. |
| mxEvent. | Fires between begin- and endUpdate in cellsFolded. |
| mxEvent. | Fires between begin- and endUpdate in updateCellSize. |
| mxEvent. | Fires between begin- and endUpdate in resizeCells. |
| mxEvent. | Fires between begin- and endUpdate in cellsResized. |
| mxEvent. | Fires between begin- and endUpdate in moveCells. |
| mxEvent. | Fires between begin- and endUpdate in cellsMoved. |
| mxEvent. | Fires between begin- and endUpdate in connectCell. |
| mxEvent. | Fires between begin- and endUpdate in cellConnected. |
| mxEvent. | Fires after refresh was executed. |
| mxEvent. | Fires in click after a click event. |
| mxEvent. | Fires in dblClick after a double click. |
| mxEvent.SIZE | Fires after sizeDidChange was executed. |
| mxEvent. | Fires before the in-place editor starts in startEditingAtCell. |
| mxEvent. | Fires between begin- and endUpdate in cellLabelChanged. |
| mxEvent. | Fires after an overlay is added in addCellOverlay. |
| mxEvent. | Fires after an overlay is removed in removeCellOverlay and removeCellOverlays. |
| mxGraph | Constructs a new mxGraph in the specified container. |
| EMPTY_ARRAY | Immutable empty array instance. |
| Variables | |
| mouseListeners | Holds the mouse event listeners. |
| isMouseDown | Holds the state of the mouse button. |
| model | Holds the mxGraphModel that contains the cells to be displayed. |
| view | Holds the mxGraphView that caches the mxCellStates for the cells. |
| stylesheet | Holds the mxStylesheet that defines the appearance of the cells. |
| selectionModel | Holds the mxGraphSelectionModel that models the current selection. |
| cellEditor | Holds the mxCellEditor that is used as the in-place editing. |
| cellRenderer | Holds the mxCellRenderer for rendering the cells in the graph. |
| multiplicities | An array of mxMultiplicities describing the allowed connections in a graph. |
| renderHint | RenderHint as it was passed to the constructor. |
| dialect | Dialect to be used for drawing the graph. |
| gridSize | Specifies the grid size. |
| gridEnabled | Specifies if the grid is enabled. |
| portsEnabled | Specifies if ports are enabled. |
| doubleTapEnabled | Specifies if double taps on touch-based devices should be handled. |
| doubleTapTimeout | Specifies the timeout for double taps. |
| doubleTapTolerance | Specifies the tolerance for double taps. |
| lastTouchX | Holds the x-coordinate of the last touch event for double tap detection. |
| lastTouchX | Holds the y-coordinate of the last touch event for double tap detection. |
| lastTouchTime | Holds the time of the last touch event for double click detection. |
| gestureEnabled | Specifies if the handleGesture method should be invoked. |
| tolerance | Tolerance for a move to be handled as a single click. |
| defaultOverlap | Value returned by getOverlap if isAllowOverlapParent returns true for the given cell. |
| defaultParent | Specifies the default parent to be used to insert new cells. |
| alternateEdgeStyle | Specifies the alternate edge style to be used if the main control point on an edge is being doubleclicked. |
| backgroundImage | Specifies the mxImage to be returned by getBackgroundImage. |
| pageVisible | Specifies if the background page should be visible. |
| pageBreaksVisible | Specifies if a dashed line should be drawn between multiple pages. |
| pageBreakColor | Specifies the color for page breaks. |
| pageBreakDashed | Specifies the page breaks should be dashed. |
| minPageBreakDist | Specifies the minimum distance for page breaks to be visible. |
| preferPageSize | Specifies if the graph size should be rounded to the next page number in sizeDidChange. |
| pageFormat | Specifies the page format for the background page. |
| pageScale | Specifies the scale of the background page. |
| enabled | Specifies the return value for isEnabled. |
| escapeEnabled | Specifies if mxKeyHandler should invoke escape when the escape key is pressed. |
| invokesStopCellEditing | If true, when editing is to be stopped by way of selection changing, data in diagram changing or other means stopCellEditing is invoked, and changes are saved. |
| enterStopsCellEditing | If true, pressing the enter key without pressing control or shift will stop editing and accept the new value. |
| useScrollbarsForPanning | Specifies if scrollbars should be used for panning in panGraph if any scrollbars are available. |
| exportEnabled | Specifies the return value for canExportCell. |
| importEnabled | Specifies the return value for canImportCell. |
| cellsLocked | Specifies the return value for isCellLocked. |
| cellsCloneable | Specifies the return value for isCellCloneable. |
| foldingEnabled | Specifies if folding (collapse and expand via an image icon in the graph should be enabled). |
| cellsEditable | Specifies the return value for isCellEditable. |
| cellsDeletable | Specifies the return value for isCellDeletable. |
| cellsMovable | Specifies the return value for isCellMovable. |
| edgeLabelsMovable | Specifies the return value for edges in isLabelMovable. |
| vertexLabelsMovable | Specifies the return value for vertices in isLabelMovable. |
| dropEnabled | Specifies the return value for isDropEnabled. |
| splitEnabled | Specifies if dropping onto edges should be enabled. |
| cellsResizable | Specifies the return value for isCellResizable. |
| cellsBendable | Specifies the return value for isCellsBendable. |
| cellsSelectable | Specifies the return value for isCellSelectable. |
| cellsDisconnectable | Specifies the return value for <isCellDisconntable>. |
| autoSizeCells | Specifies if the graph should automatically update the cell size after an edit. |
| autoScroll | Specifies if the graph should automatically scroll if the mouse goes near the container edge while dragging. |
| timerAutoScroll | Specifies if timer-based autoscrolling should be used via mxPanningManager. |
| allowAutoPanning | Specifies if panning via panGraph should be allowed to implement autoscroll if no scrollbars are available in scrollPointToVisible. |
| ignoreScrollbars | Specifies if the graph should automatically scroll regardless of the scrollbars. |
| autoExtend | Specifies if the size of the graph should be automatically extended if the mouse goes near the container edge while dragging. |
| maximumGraphBounds | mxRectangle that specifies the area in which all cells in the diagram should be placed. |
| minimumGraphSize | mxRectangle that specifies the minimum size of the graph. |
| minimumContainerSize | mxRectangle that specifies the minimum size of the <container> if resizeContainer is true. |
| maximumContainerSize | mxRectangle that specifies the maximum size of the container if resizeContainer is true. |
| resizeContainer | Specifies if the container should be resized to the graph size when the graph size has changed. |
| border | Border to be added to the bottom and right side when the container is being resized after the graph has been changed. |
| ordered | Specifies if the display should reflect the order of the cells in the model. |
| keepEdgesInForeground | Specifies if edges should appear in the foreground regardless of their order in the model. |
| keepEdgesInBackground | Specifies if edges should appear in the background regardless of their order in the model. |
| allowNegativeCoordinates | Specifies if negative coordinates for vertices are allowed. |
| constrainChildren | Specifies the return value for isConstrainChildren. |
| extendParents | Specifies if a parent should contain the child bounds after a resize of the child. |
| extendParentsOnAdd | Specifies if parents should be extended according to the extendParents switch if cells are added. |
| collapseToPreferredSize | Specifies if the cell size should be changed to the preferred size when a cell is first collapsed. |
| zoomFactor | Specifies the factor used for zoomIn and zoomOut. |
| keepSelectionVisibleOnZoom | Specifies if the viewport should automatically contain the selection cells after a zoom operation. |
| centerZoom | Specifies if the zoom operations should go into the center of the actual diagram rather than going from top, left. |
| resetViewOnRootChange | Specifies if the scale and translate should be reset if the root changes in the model. |
| resetEdgesOnResize | Specifies if edge control points should be reset after the resize of a connected cell. |
| resetEdgesOnMove | Specifies if edge control points should be reset after the move of a connected cell. |
| resetEdgesOnConnect | Specifies if edge control points should be reset after the the edge has been reconnected. |
| allowLoops | Specifies if loops (aka self-references) are allowed. |
| defaultLoopStyle | mxEdgeStyle to be used for loops. |
| multigraph | Specifies if multiple edges in the same direction between the same pair of vertices are allowed. |
| connectableEdges | Specifies if edges are connectable. |
| allowDanglingEdges | Specifies if edges with disconnected terminals are allowed in the graph. |
| cloneInvalidEdges | Specifies if edges that are cloned should be validated and only inserted if they are valid. |
| disconnectOnMove | Specifies if edges should be disconnected from their terminals when they are moved. |
| labelsVisible | Specifies if labels should be visible. |
| htmlLabels | Specifies the return value for isHtmlLabel. |
| swimlaneSelectionEnabled | Specifies if swimlanes should be selectable via the content if the mouse is released. |
| swimlaneNesting | Specifies if nesting of swimlanes is allowed. |
| swimlaneIndicatorColorAttribute | The attribute used to find the color for the indicator if the indicator color is set to ‘swimlane’. |
| imageBundles | Holds the list of image bundles. |
| minFitScale | Specifies the minimum scale to be applied in fit. |
| maxFitScale | Specifies the maximum scale to be applied in fit. |
| panDx | Current horizontal panning value. |
| panDy | Current vertical panning value. |
| collapsedImage | Specifies the mxImage to indicate a collapsed state. |
| expandedImage | Specifies the mxImage to indicate a expanded state. |
| warningImage | Specifies the mxImage for the image to be used to display a warning overlay. |
| alreadyConnectedResource | Specifies the resource key for the error message to be displayed in non-multigraphs when two vertices are already connected. |
| containsValidationErrorsResource | Specifies the resource key for the warning message to be displayed when a collapsed cell contains validation errors. |
| collapseExpandResource | Specifies the resource key for the tooltip on the collapse/expand icon. |
| init | Initializes the <container> and creates the respective datastructures. |
| createHandlers | Creates the tooltip-, panning-, connection- and graph-handler (in this order). |
| createSelectionModel | Creates a new mxGraphSelectionModel to be used in this graph. |
| createStylesheet | Creates a new mxGraphSelectionModel to be used in this graph. |
| createGraphView | Creates a new mxGraphView to be used in this graph. |
| createCellRenderer | Creates a new mxCellRenderer to be used in this graph. |
| createCellEditor | Creates a new mxCellEditor to be used in this graph. |
| getModel | Returns the mxGraphModel that contains the cells. |
| getView | Returns the mxGraphView that contains the mxCellStates. |
| getStylesheet | Returns the mxStylesheet that defines the style. |
| setStylesheet | Sets the mxStylesheet that defines the style. |
| getSelectionModel | Returns the mxGraphSelectionModel that contains the selection. |
| setSelectionModel | Sets the <mxSelectionModel> that contains the selection. |
| getSelectionCellsForChanges | Returns the cells to be selected for the given array of changes. |
| graphModelChanged | Called when the graph model changes. |
| getRemovedCellsForChanges | Returns the cells that have been removed from the model. |
| processChange | Processes the given change and invalidates the respective cached data in view. |
| removeStateForCell | Removes all cached information for the given cell and its descendants. |
| Overlays | |
| addCellOverlay | Adds an mxCellOverlay for the specified cell. |
| getCellOverlays | Returns the array of mxCellOverlays for the given cell or null, if no overlays are defined. |
| removeCellOverlay | Removes and returns the given mxCellOverlay from the given cell. |
| removeCellOverlays | Removes all mxCellOverlays from the given cell. |
| clearCellOverlays | Removes all mxCellOverlays in the graph for the given cell and all its descendants. |
| setCellWarning | Creates an overlay for the given cell using the warning and image or warningImage and returns the new mxCellOverlay. |
| In-place editing | |
| startEditing | Calls startEditingAtCell using the given cell or the first selection cell. |
| startEditingAtCell | Fires a startEditing event and invokes mxCellEditor.startEditing on <editor>. |
| getEditingValue | Returns the initial value for in-place editing. |
| stopEditing | Stops the current editing. |
| labelChanged | Sets the label of the specified cell to the given value using cellLabelChanged and fires mxEvent.LABEL_CHANGED while the transaction is in progress. |
| cellLabelChanged | Sets the new label for a cell. |
| Event processing | |
| escape | Processes an escape keystroke. |
| click | Processes a singleclick on an optional cell and fires a click event. |
| dblClick | Processes a doubleclick on an optional cell and fires a <dblclick> event. |
| scrollPointToVisible | Scrolls the graph to the given point, extending the graph container if specified. |
| createPanningManager | Creates and returns an mxPanningManager. |
| getBorderSizes | Returns the size of the border and padding on all four sides of the container. |
| getPreferredPageSize | Returns the preferred size of the background page if preferPageSize is true. |
| sizeDidChange | Called when the size of the graph has changed. |
| doResizeContainer | Resizes the container for the given graph width and height. |
| redrawPageBreaks | Invokes from sizeDidChange to redraw the page breaks. |
| Cell styles | |
| getCellStyle | Returns an array of key, value pairs representing the cell style for the given cell. |
| postProcessCellStyle | Tries to resolve the value for the image style in the image bundles and turns short data URIs as defined in mxImageBundle to data URIs as defined in RFC 2397 of the IETF. |
| setCellStyle | Sets the style of the specified cells. |
| toggleCellStyle | Toggles the boolean value for the given key in the style of the given cell. |
| toggleCellStyles | Toggles the boolean value for the given key in the style of the given cells. |
| setCellStyles | Sets the key to value in the styles of the given cells. |
| toggleCellStyleFlags | Toggles the given bit for the given key in the styles of the specified cells. |
| setCellStyleFlags | Sets or toggles the given bit for the given key in the styles of the specified cells. |
| Cell alignment and orientation | |
| alignCells | Aligns the given cells vertically or horizontally according to the given alignment using the optional parameter as the coordinate. |
| flipEdge | Toggles the style of the given edge between null (or empty) and alternateEdgeStyle. |
| addImageBundle | Adds the specified mxImageBundle. |
| removeImageBundle | Removes the specified mxImageBundle. |
| getImageFromBundles | Searches all imageBundles for the specified key and returns the value for the first match or null if the key is not found. |
| Order | |
| orderCells | Moves the given cells to the front or back. |
| cellsOrdered | Moves the given cells to the front or back. |
| Grouping | |
| groupCells | Adds the cells into the given group. |
| getCellsForGroup | Returns the cells with the same parent as the first cell in the given array. |
| getBoundsForGroup | Returns the bounds to be used for the given group and children. |
| createGroupCell | Hook for creating the group cell to hold the given array of mxCells if no group cell was given to the <group> function. |
| ungroupCells | Ungroups the given cells by moving the children the children to their parents parent and removing the empty groups. |
| removeCellsFromParent | Removes the specified cells from their parents and adds them to the default parent. |
| updateGroupBounds | Updates the bounds of the given array of groups so that it includes all child vertices. |
| Cell cloning, insertion and removal | |
| cloneCells | Returns the clones for the given cells. |
| insertVertex | Adds a new vertex into the given parent mxCell using value as the user object and the given coordinates as the mxGeometry of the new vertex. |
| createVertex | Hook method that creates the new vertex for insertVertex. |
| insertEdge | Adds a new edge into the given parent mxCell using value as the user object and the given source and target as the terminals of the new edge. |
| createEdge | Hook method that creates the new edge for insertEdge. |
| addEdge | Adds the edge to the parent and connects it to the given source and target terminals. |
| addCell | Adds the cell to the parent and connects it to the given source and target terminals. |
| addCells | Adds the cells to the parent at the given index, connecting each cell to the optional source and target terminal. |
| cellsAdded | Adds the specified cells to the given parent. |
| removeCells | Removes the given cells from the graph including all connected edges if includeEdges is true. |
| cellsRemoved | Removes the given cells from the model. |
| splitEdge | Splits the given edge by adding the newEdge between the previous source and the given cell and reconnecting the source of the given edge to the given cell. |
| Cell visibility | |
| toggleCells | Sets the visible state of the specified cells and all connected edges if includeEdges is true. |
| cellsToggled | Sets the visible state of the specified cells. |
| Folding | |
| foldCells | Sets the collapsed state of the specified cells and all descendants if recurse is true. |
| cellsFolded | Sets the collapsed state of the specified cells. |
| swapBounds | Swaps the alternate and the actual bounds in the geometry of the given cell invoking updateAlternateBounds before carrying out the swap. |
| updateAlternateBounds | Updates or sets the alternate bounds in the given geometry for the given cell depending on whether the cell is going to be collapsed. |
| addAllEdges | Returns an array with the given cells and all edges that are connected to a cell or one of its descendants. |
| getAllEdges | Returns all edges connected to the given cells or its descendants. |
| Cell sizing | |
| updateCellSize | Updates the size of the given cell in the model using cellSizeUpdated. |
| cellSizeUpdated | Updates the size of the given cell in the model using getPreferredSizeForCell to get the new size. |
| getPreferredSizeForCell | Returns the preferred width and height of the given mxCell as an mxRectangle. |
| handleGesture | Invokes if a gesture event has been detected on a cell state. |
| resizeCell | Sets the bounds of the given cell using resizeCells. |
| resizeCells | Sets the bounds of the given cells and fires a mxEvent.RESIZE_CELLS event while the transaction is in progress. |
| cellsResized | Sets the bounds of the given cells and fires a mxEvent.CELLS_RESIZED event. |
| extendParent | Resizes the parents recursively so that they contain the complete area of the resized child cell. |
| Cell moving | |
| importCells | Clones and inserts the given cells into the graph using the move method and returns the inserted cells. |
| moveCells | Moves or clones the specified cells and moves the cells or clones by the given amount, adding them to the optional target cell. |
| cellsMoved | Moves the specified cells by the given vector, disconnecting the cells using disconnectGraph is disconnect is true. |
| translateCell | Translates the geometry of the given cell and stores the new, translated geometry in the model as an atomic change. |
| getCellContainmentArea | Returns the mxRectangle inside which a cell is to be kept. |
| getMaximumGraphBounds | Returns the bounds inside which the diagram should be kept as an mxRectangle. |
| constrainChild | Keeps the given cell inside the bounds returned by getCellContainmentArea for its parent, according to the rules defined by getOverlap and isConstrainChild. |
| resetEdges | Resets the control points of the edges that are connected to the given cells if not both ends of the edge are in the given cells array. |
| resetEdge | Resets the control points of the given edge. |
| Cell connecting and connection constraints | |
| getAllConnectionConstraints | Returns an array of all mxConnectionConstraints for the given terminal. |
| getConnectionConstraint | Returns an mxConnectionConstraint that describes the given connection point. |
| setConnectionConstraint | Sets the mxConnectionConstraint that describes the given connection point. |
| getConnectionPoint | Returns the nearest point in the list of absolute points or the center of the opposite terminal. |
| connectCell | Connects the specified end of the given edge to the given terminal using cellConnected and fires mxEvent.CONNECT_CELL while the transaction is in progress. |
| cellConnected | Sets the new terminal for the given edge and resets the edge points if resetEdgesOnConnect is true. |
| disconnectGraph | Disconnects the given edges from the terminals which are not in the given array. |
| Drilldown | |
| getCurrentRoot | Returns the current root of the displayed cell hierarchy. |
| getTranslateForRoot | Returns the translation to be used if the given cell is the root cell as an mxPoint. |
| isPort | Returns true if the given cell is a “port”, that is, when connecting to it, the cell returned by getTerminalForPort should be used as the terminal and the port should be referenced by the ID in either the mxConstants.STYLE_SOURCE_PORT or the or the mxConstants.STYLE_TARGET_PORT. |
| getTerminalForPort | Returns the terminal to be used for a given port. |
| getChildOffsetForCell | Returns the offset to be used for the cells inside the given cell. |
| enterGroup | Uses the given cell as the root of the displayed cell hierarchy. |
| exitGroup | Changes the current root to the next valid root in the displayed cell hierarchy. |
| home | Uses the root of the model as the root of the displayed cell hierarchy and selects the previous root. |
| isValidRoot | Returns true if the given cell is a valid root for the cell display hierarchy. |
| Graph display | |
| getGraphBounds | Returns the bounds of the visible graph. |
| getCellBounds | Returns the scaled, translated bounds for the given cell. |
| getBoundingBoxFromGeometry | Returns the bounding box for the geometries of the vertices in the given array of cells. |
| refresh | Clears all cell states or the states for the hierarchy starting at the given cell and validates the graph. |
| snap | Snaps the given numeric value to the grid if gridEnabled is true. |
| panGraph | Shifts the graph display by the given amount. |
| zoomIn | Zooms into the graph by zoomFactor. |
| zoomOut | Zooms out of the graph by zoomFactor. |
| zoomActual | Resets the zoom and panning in the view. |
| zoomTo | Zooms the graph to the given scale with an optional boolean center argument, which is passd to zoom. |
| zoom | Zooms the graph using the given factor. |
| zoomToRect | Zooms the graph to the specified rectangle. |
| fit | Scales the graph such that the complete diagram fits into <container> and returns the current scale in the view. |
| scrollCellToVisible | Pans the graph so that it shows the given cell. |
| scrollRectToVisible | Pans the graph so that it shows the given rectangle. |
| getCellGeometry | Returns the mxGeometry for the given cell. |
| isCellVisible | Returns true if the given cell is visible in this graph. |
| isCellCollapsed | Returns true if the given cell is collapsed in this graph. |
| isCellConnectable | Returns true if the given cell is connectable in this graph. |
| isOrthogonal | Returns true if perimeter points should be computed such that the resulting edge has only horizontal or vertical segments. |
| isLoop | Returns true if the given cell state is a loop. |
| isCloneEvent | Returns true if the given event is a clone event. |
| isToggleEvent | Returns true if the given event is a toggle event. |
| isGridEnabledEvent | Returns true if the given mouse event should be aligned to the grid. |
| isConstrainedEvent | Returns true if the given mouse event should be aligned to the grid. |
| isForceMarqueeEvent | Returns true if the given event forces marquee selection. |
| Validation | |
| validationAlert | Displays the given validation error in a dialog. |
| isEdgeValid | Checks if the return value of getEdgeValidationError for the given arguments is null. |
| getEdgeValidationError | Returns the validation error message to be displayed when inserting or changing an edges’ connectivity. |
| validateEdge | Hook method for subclassers to return an error message for the given edge and terminals. |
| validateGraph | Validates the graph by validating each descendant of the given cell or the root of the model. |
| getCellValidationError | Checks all multiplicities that cannot be enforced while the graph is being modified, namely, all multiplicities that require a minimum of 1 edge. |
| validateCell | Hook method for subclassers to return an error message for the given cell and validation context. |
| Graph appearance | |
| getBackgroundImage | Returns the backgroundImage as an mxImage. |
| setBackgroundImage | Sets the new backgroundImage. |
| getFoldingImage | Returns the mxImage used to display the collapsed state of the specified cell state. |
| convertValueToString | Returns the textual representation for the given cell. |
| getLabel | Returns a string or DOM node that represents the label for the given cell. |
| isHtmlLabel | Returns true if the label must be rendered as HTML markup. |
| isHtmlLabels | Returns htmlLabels. |
| setHtmlLabels | Sets htmlLabels. |
| isWrapping | This enables wrapping for HTML labels. |
| isLabelClipped | Returns true if the overflow portion of labels should be hidden. |
| getTooltip | Returns the string or DOM node that represents the tooltip for the given state, node and coordinate pair. |
| getTooltipForCell | Returns the string or DOM node to be used as the tooltip for the given cell. |
| getCursorForCell | Returns the cursor value to be used for the CSS of the shape for the given cell. |
| getStartSize | Returns the start size of the given swimlane, that is, the width or height of the part that contains the title, depending on the horizontal style. |
| getImage | Returns the image URL for the given cell state. |
| getVerticalAlign | Returns the vertical alignment for the given cell state. |
| getIndicatorColor | Returns the indicator color for the given cell state. |
| getIndicatorGradientColor | Returns the indicator gradient color for the given cell state. |
| getIndicatorShape | Returns the indicator shape for the given cell state. |
| getIndicatorImage | Returns the indicator image for the given cell state. |
| getBorder | Returns the value of border. |
| setBorder | Sets the value of border. |
| isSwimlane | Returns true if the given cell is a swimlane in the graph. |
| Graph behaviour | |
| isResizeContainer | Returns resizeContainer. |
| setResizeContainer | Sets resizeContainer. |
| isEnabled | Returns true if the graph is enabled. |
| setEnabled | Specifies if the graph should allow any interactions. |
| isEscapeEnabled | Returns escapeEnabled. |
| setEscapeEnabled | Sets escapeEnabled. |
| isInvokesStopCellEditing | Returns invokesStopCellEditing. |
| setInvokesStopCellEditing | Sets invokesStopCellEditing. |
| isEnterStopsCellEditing | Returns enterStopsCellEditing. |
| setEnterStopsCellEditing | Sets enterStopsCellEditing. |
| isCellLocked | Returns true if the given cell may not be moved, sized, bended, disconnected, edited or selected. |
| isCellsLocked | Returns true if the given cell may not be moved, sized, bended, disconnected, edited or selected. |
| setLocked | Sets if any cell may be moved, sized, bended, disconnected, edited or selected. |
| getCloneableCells | Returns the cells which may be exported in the given array of cells. |
| isCellCloneable | Returns true if the given cell is cloneable. |
| isCellsCloneable | Returns cellsCloneable, that is, if the graph allows cloning of cells by using control-drag. |
| setCellsCloneable | Specifies if the graph should allow cloning of cells by holding down the control key while cells are being moved. |
| getExportableCells | Returns the cells which may be exported in the given array of cells. |
| canExportCell | Returns true if the given cell may be exported to the clipboard. |
| getImportableCells | Returns the cells which may be imported in the given array of cells. |
| canImportCell | Returns true if the given cell may be imported from the clipboard. |
| isCellSelectable | Returns true if the given cell is selectable. |
| isCellsSelectable | Returns cellsSelectable. |
| setCellsSelectable | Sets cellsSelectable. |
| getDeletableCells | Returns the cells which may be exported in the given array of cells. |
| isCellDeletable | Returns true if the given cell is moveable. |
| isCellsDeletable | Returns cellsDeletable. |
| setCellsDeletable | Sets cellsDeletable. |
| isLabelMovable | Returns true if the given edges’s label is moveable. |
| isCellRotatable | Returns true if the given cell is rotatable. |
| getMovableCells | Returns the cells which are movable in the given array of cells. |
| isCellMovable | Returns true if the given cell is moveable. |
| isCellsMovable | Returns cellsMovable. |
| setCellsMovable | Specifies if the graph should allow moving of cells. |
| isGridEnabled | Returns gridEnabled as a boolean. |
| setGridEnabled | Specifies if the grid should be enabled. |
| isPortsEnabled | Returns portsEnabled as a boolean. |
| setPortsEnabled | Specifies if the ports should be enabled. |
| getGridSize | Returns gridSize. |
| setGridSize | Sets gridSize. |
| getTolerance | Returns tolerance. |
| setTolerance | Sets tolerance. |
| isVertexLabelsMovable | Returns vertexLabelsMovable. |
| setVertexLabelsMovable | Sets vertexLabelsMovable. |
| isEdgeLabelsMovable | Returns edgeLabelsMovable. |
| isEdgeLabelsMovable | Sets edgeLabelsMovable. |
| isSwimlaneNesting | Returns swimlaneNesting as a boolean. |
| setSwimlaneNesting | Specifies if swimlanes can be nested by drag and drop. |
| isSwimlaneSelectionEnabled | Returns swimlaneSelectionEnabled as a boolean. |
| setSwimlaneSelectionEnabled | Specifies if swimlanes should be selected if the mouse is released over their content area. |
| isMultigraph | Returns multigraph as a boolean. |
| setMultigraph | Specifies if the graph should allow multiple connections between the same pair of vertices. |
| isAllowLoops | Returns allowLoops as a boolean. |
| setAllowDanglingEdges | Specifies if dangling edges are allowed, that is, if edges are allowed that do not have a source and/or target terminal defined. |
| isAllowDanglingEdges | Returns allowDanglingEdges as a boolean. |
| setConnectableEdges | Specifies if edges should be connectable. |
| isConnectableEdges | Returns connectableEdges as a boolean. |
| setCloneInvalidEdges | Specifies if edges should be inserted when cloned but not valid wrt. |
| isCloneInvalidEdges | Returns cloneInvalidEdges as a boolean. |
| setAllowLoops | Specifies if loops are allowed. |
| isDisconnectOnMove | Returns disconnectOnMove as a boolean. |
| setDisconnectOnMove | Specifies if edges should be disconnected when moved. |
| isDropEnabled | Returns dropEnabled as a boolean. |
| setDropEnabled | Specifies if the graph should allow dropping of cells onto or into other cells. |
| isSplitEnabled | Returns splitEnabled as a boolean. |
| setSplitEnabled | Specifies if the graph should allow dropping of cells onto or into other cells. |
| isCellResizable | Returns true if the given cell is resizable. |
| isCellsResizable | Returns cellsResizable. |
| setCellsResizable | Specifies if the graph should allow resizing of cells. |
| isTerminalPointMovable | Returns true if the given terminal point is movable. |
| isCellBendable | Returns true if the given cell is bendable. |
| isCellsBendable | Returns <cellsBenadable>. |
| setCellsBendable | Specifies if the graph should allow bending of edges. |
| isCellEditable | Returns true if the given cell is editable. |
| isCellsEditable | Returns cellsEditable. |
| setCellsEditable | Specifies if the graph should allow in-place editing for cell labels. |
| isCellDisconnectable | Returns true if the given cell is disconnectable from the source or target terminal. |
| isCellsDisconnectable | Returns cellsDisconnectable. |
| setCellsDisconnectable | Sets cellsDisconnectable. |
| isValidSource | Returns true if the given cell is a valid source for new connections. |
| isValidTarget | Returns isValidSource for the given cell. |
| isValidConnection | Returns true if the given target cell is a valid target for source. |
| setConnectable | Specifies if the graph should allow new connections. |
| isConnectable | Returns true if the <connectionHandler> is enabled. |
| setTooltips | Specifies if tooltips should be enabled. |
| setPanning | Specifies if panning should be enabled. |
| isEditing | Returns true if the given cell is currently being edited. |
| isAutoSizeCell | Returns true if the size of the given cell should automatically be updated after a change of the label. |
| isAutoSizeCells | Returns autoSizeCells. |
| setAutoSizeCells | Specifies if cell sizes should be automatically updated after a label change. |
| isExtendParent | Returns true if the parent of the given cell should be extended if the child has been resized so that it overlaps the parent. |
| isExtendParents | Returns extendParents. |
| setExtendParents | Sets extendParents. |
| isExtendParentsOnAdd | Returns extendParentsOnAdd. |
| setExtendParentsOnAdd | Sets extendParentsOnAdd. |
| isConstrainChild | Returns true if the given cell should be kept inside the bounds of its parent according to the rules defined by getOverlap and isAllowOverlapParent. |
| isConstrainChildren | Returns constrainChildren. |
| setConstrainChildren | Sets constrainChildren. |
| isConstrainChildren | Returns allowNegativeCoordinates. |
| setConstrainChildren | Sets allowNegativeCoordinates. |
| getOverlap | Returns a decimal number representing the amount of the width and height of the given cell that is allowed to overlap its parent. |
| isAllowOverlapParent | Returns true if the given cell is allowed to be placed outside of the parents area. |
| getFoldableCells | Returns the cells which are movable in the given array of cells. |
| isCellFoldable | Returns true if the given cell is foldable. |
| isValidDropTarget | Returns true if the given cell is a valid drop target for the specified cells. |
| isSplitTarget | Returns true if the given edge may be splitted into two edges with the given cell as a new terminal between the two. |
| getDropTarget | Returns the given cell if it is a drop target for the given cells or the nearest ancestor that may be used as a drop target for the given cells. |
| Cell retrieval | |
| getDefaultParent | Returns defaultParent or mxGraphView.currentRoot or the first child child of mxGraphModel.root if both are null. |
| setDefaultParent | Sets the defaultParent to the given cell. |
| getSwimlane | Returns the nearest ancestor of the given cell which is a swimlane, or the given cell, if it is itself a swimlane. |
| getSwimlaneAt | Returns the bottom-most swimlane that intersects the given point (x, y) in the cell hierarchy that starts at the given parent. |
| getCellAt | Returns the bottom-most cell that intersects the given point (x, y) in the cell hierarchy starting at the given parent. |
| intersects | Returns the bottom-most cell that intersects the given point (x, y) in the cell hierarchy that starts at the given parent. |
| hitsSwimlaneContent | Returns true if the given coordinate pair is inside the content are of the given swimlane. |
| getChildVertices | Returns the visible child vertices of the given parent. |
| getChildEdges | Returns the visible child edges of the given parent. |
| getChildCells | Returns the visible child vertices or edges in the given parent. |
| getConnections | Returns all visible edges connected to the given cell without loops. |
| getIncomingEdges | Returns the visible incoming edges for the given cell. |
| getOutgoingEdges | Returns the visible outgoing edges for the given cell. |
| getEdges | Returns the incoming and/or outgoing edges for the given cell. |
| isValidAncestor | Returns whether or not the specified parent is a valid ancestor of the specified cell, either direct or indirectly based on whether ancestor recursion is enabled. |
| getOpposites | Returns all distinct visible opposite cells for the specified terminal on the given edges. |
| getEdgesBetween | Returns the edges between the given source and target. |
| getPointForEvent | Returns an mxPoint representing the given event in the unscaled, non-translated coordinate space of <container> and applies the grid. |
| getCells | Returns the children of the given parent that are contained in the given rectangle (x, y, width, height). |
| getCellsBeyond | Returns the children of the given parent that are contained in the halfpane from the given point (x0, y0) rightwards and/or downwards depending on rightHalfpane and bottomHalfpane. |
| findTreeRoots | Returns all children in the given parent which do not have incoming edges. |
| traverse | Traverses the (directed) graph invoking the given function for each visited vertex and edge. |
| Selection | |
| isCellSelected | Returns true if the given cell is selected. |
| isSelectionEmpty | Returns true if the selection is empty. |
| clearSelection | Clears the selection using mxGraphSelectionModel.clear. |
| getSelectionCount | Returns the number of selected cells. |
| getSelectionCell | Returns the first cell from the array of selected mxCells. |
| getSelectionCells | Returns the array of selected mxCells. |
| setSelectionCell | Sets the selection cell. |
| setSelectionCells | Sets the selection cell. |
| addSelectionCell | Adds the given cell to the selection. |
| addSelectionCells | Adds the given cells to the selection. |
| removeSelectionCell | Removes the given cell from the selection. |
| removeSelectionCells | Removes the given cells from the selection. |
| selectRegion | Selects and returns the cells inside the given rectangle for the specified event. |
| selectNextCell | Selects the next cell. |
| selectPreviousCell | Selects the previous cell. |
| selectParentCell | Selects the parent cell. |
| selectChildCell | Selects the first child cell. |
| selectCell | Selects the next, parent, first child or previous cell, if all arguments are false. |
| selectAll | Selects all children of the given parent cell or the children of the default parent if no parent is specified. |
| selectVertices | Select all vertices inside the given parent or the default parent. |
| selectVertices | Select all vertices inside the given parent or the default parent. |
| selectCells | Selects all vertices and/or edges depending on the given boolean arguments recursively, starting at the given parent or the default parent if no parent is specified. |
| selectCellForEvent | Selects the given cell by either adding it to the selection or replacing the selection depending on whether the given mouse event is a toggle event. |
| selectCellsForEvent | Selects the given cells by either adding them to the selection or replacing the selection depending on whether the given mouse event is a toggle event. |
| Selection state | |
| createHandler | Creates a new handler for the given cell state. |
| Graph events | |
| addMouseListener | Adds a listener to the graph event dispatch loop. |
| removeMouseListener | Removes the specified graph listener. |
| updateMouseEvent | Sets the graphX and graphY properties if the given mxMouseEvent if required. |
| fireMouseEvent | Dispatches the given event in the graph event dispatch loop. |
| destroy | Destroys the graph and all its resources. |
mxEvent.ALIGN_CELLS
Fires between begin- and endUpdate in alignCells. The <code>cells</code> and <code>align</code> properties contain the respective arguments that were passed to alignCells.
mxEvent.ORDER_CELLS
Fires between begin- and endUpdate in orderCells. The <code>cells</code> and <code>back</code> properties contain the respective arguments that were passed to orderCells.
mxEvent.CELLS_ORDERED
Fires between begin- and endUpdate in cellsOrdered. The <code>cells</code> and <code>back</code> arguments contain the respective arguments that were passed to cellsOrdered.
mxEvent.GROUP_CELLS
Fires between begin- and endUpdate in groupCells. The <code>group</code>, <code>cells</code> and <code>border</code> arguments contain the respective arguments that were passed to groupCells.
mxEvent.UNGROUP_CELLS
Fires between begin- and endUpdate in ungroupCells. The <code>cells</code> property contains the array of cells that was passed to ungroupCells.
mxEvent.REMOVE_CELLS_FROM_PARENT
Fires between begin- and endUpdate in removeCellsFromParent. The <code>cells</code> property contains the array of cells that was passed to removeCellsFromParent.
mxEvent.CELLS_ADDED
Fires between begin- and endUpdate in cellsAdded. The <code>cells</code>, <code>parent</code>, <code>index</code>, <code>source</code>, <code>target</code> and <code>absolute</code> properties contain the respective arguments that were passed to cellsAdded.
mxEvent.REMOVE_CELLS
Fires between begin- and endUpdate in removeCells. The <code>cells</code> and <code>includeEdges</code> arguments contain the respective arguments that were passed to removeCells.
mxEvent.CELLS_REMOVED
Fires between begin- and endUpdate in cellsRemoved. The <code>cells</code> argument contains the array of cells that was removed.
mxEvent.TOGGLE_CELLS
Fires between begin- and endUpdate in toggleCells. The <code>show</code>, <code>cells</code> and <code>includeEdges</code> properties contain the respective arguments that were passed to toggleCells.
mxEvent.CELLS_FOLDED
Fires between begin- and endUpdate in cellsFolded. The <code>collapse</code>, <code>cells</code> and <code>recurse</code> properties contain the respective arguments that were passed to cellsFolded.
mxEvent.UPDATE_CELL_SIZE
Fires between begin- and endUpdate in updateCellSize. The <code>cell</code> and <code>ignoreChildren</code> properties contain the respective arguments that were passed to updateCellSize.
mxEvent.RESIZE_CELLS
Fires between begin- and endUpdate in resizeCells. The <code>cells</code> and <code>bounds</code> properties contain the respective arguments that were passed to resizeCells.
mxEvent.CELLS_RESIZED
Fires between begin- and endUpdate in cellsResized. The <code>cells</code> and <code>bounds</code> properties contain the respective arguments that were passed to cellsResized.
mxEvent.CELLS_MOVED
Fires between begin- and endUpdate in cellsMoved. The <code>cells</code>, <code>dx</code>, <code>dy</code> and <code>disconnect</code> properties contain the respective arguments that were passed to cellsMoved.
mxEvent.CONNECT_CELL
Fires between begin- and endUpdate in connectCell. The <code>edge</code>, <code>terminal</code> and <code>source</code> properties contain the respective arguments that were passed to connectCell.
mxEvent.CELL_CONNECTED
Fires between begin- and endUpdate in cellConnected. The <code>edge</code>, <code>terminal</code> and <code>source</code> properties contain the respective arguments that were passed to cellConnected.
mxEvent.REFRESH
Fires after refresh was executed. This event has no properties.
mxEvent.CLICK
Fires in click after a click event. The <code>event</code> property contains the original mouse event and <code>cell</code> property contains the cell under the mouse or null if the background was clicked.
mxEvent.DOUBLE_CLICK
Fires in dblClick after a double click. The <code>event</code> property contains the original mouse event and the <code>cell</code> property contains the cell under the mouse or null if the background was clicked.
mxEvent.SIZE
Fires after sizeDidChange was executed. The <code>bounds</code> property contains the new graph bounds.
mxEvent.START_EDITING
Fires before the in-place editor starts in startEditingAtCell. The <code>cell</code> property contains the cell that is being edited and the <code>event</code> property contains the optional event argument that was passed to startEditingAtCell.
mxEvent.LABEL_CHANGED
Fires between begin- and endUpdate in cellLabelChanged. The <code>cell</code> property contains the cell, the <code>value</code> property contains the new value for the cell and the optional <code>event</code> property contains the mouse event that started the edit.
mxEvent.ADD_OVERLAY
Fires after an overlay is added in addCellOverlay. The <code>cell</code> property contains the cell and the <code>overlay</code> property contains the mxCellOverlay that was added.
mxEvent.REMOVE_OVERLAY
Fires after an overlay is removed in removeCellOverlay and removeCellOverlays. The <code>cell</code> property contains the cell and the <code>overlay</code> property contains the mxCellOverlay that was removed.
mxGraph
function mxGraph( container, model, renderHint, stylesheet )
Constructs a new mxGraph in the specified container. Model is an optional mxGraphModel. If no model is provided, a new mxGraphModel instance is used as the model. The container must have a valid owner document prior to calling this function in Internet Explorer. RenderHint is a string to affect the display performance and rendering in IE, but not in SVG-based browsers. The parameter is mapped to dialect, which may be one of mxConstants.DIALECT_SVG for SVG-based browsers, mxConstants.DIALECT_STRICTHTML for fastest display mode, mxConstants.DIALECT_PREFERHTML for faster display mode, mxConstants.DIALECT_MIXEDHTML for fast and mxConstants.DIALECT_VML for exact display mode (slowest). The dialects are defined in mxConstants. The default values are DIALECT_SVG for SVG-based browsers and DIALECT_MIXED for IE.
The possible values for the renderingHint parameter are explained below
| fast | The parameter is based on the fact that the display performance is highly improved in IE if the VML is not contained within a VML group element. The lack of a group element only slightly affects the display while panning, but improves the performance by almost a factor of 2, while keeping the display sufficiently accurate. This also allows to render certain shapes as HTML if the display accuracy is not affected, which is implemented by <mxShape.isMixedModeHtml>. This is the default setting and is mapped to DIALECT_MIXEDHTML. |
| faster | Same as fast, but more expensive shapes are avoided. This is controlled by <mxShape.preferModeHtml>. The default implementation will avoid gradients and rounded rectangles, but more significant shapes, such as rhombus, ellipse, actor and cylinder will be rendered accurately. This setting is mapped to DIALECT_PREFERHTML. |
| fastest | Almost anything will be rendered in Html. This allows for rectangles, labels and images. This setting is mapped to DIALECT_STRICTHTML. |
| exact | If accurate panning is required and if the diagram is small (up to 100 cells), then this value should be used. In this mode, a group is created that contains the VML. This allows for accurate panning and is mapped to DIALECT_VML. |
Example
To create a graph inside a DOM node with an id of graph
var container = document.getElementById('graph');
var graph = new mxGraph(container);Parameters
| container | Optional DOM node that acts as a container for the graph. If this is null then the container can be initialized later using init. |
| model | Optional mxGraphModel that constitutes the graph data. |
| renderHint | Optional string that specifies the display accuracy and performance. Default is mxConstants.DIALECT_MIXEDHTML (for IE). |
| stylesheet | Optional mxStylesheet to be used in the graph. |
mouseListeners
mxGraph.prototype.mouseListeners
Holds the mouse event listeners. See fireMouseEvent.
model
mxGraph.prototype.model
Holds the mxGraphModel that contains the cells to be displayed.
view
mxGraph.prototype.view
Holds the mxGraphView that caches the mxCellStates for the cells.
stylesheet
mxGraph.prototype.stylesheet
Holds the mxStylesheet that defines the appearance of the cells.
Example
Use the following code to read a stylesheet into an existing graph.
var req = mxUtils.load('stylesheet.xml');
var root = req.getDocumentElement();
var dec = new mxCodec(root.ownerDocument);
dec.decode(root, graph.stylesheet);selectionModel
mxGraph.prototype.selectionModel
Holds the mxGraphSelectionModel that models the current selection.
cellEditor
mxGraph.prototype.cellEditor
Holds the mxCellEditor that is used as the in-place editing.
cellRenderer
mxGraph.prototype.cellRenderer
Holds the mxCellRenderer for rendering the cells in the graph.
multiplicities
mxGraph.prototype.multiplicities
An array of mxMultiplicities describing the allowed connections in a graph.
dialect
mxGraph.prototype.dialect
Dialect to be used for drawing the graph. Possible values are all constants in mxConstants with a DIALECT-prefix.
gridEnabled
mxGraph.prototype.gridEnabled
Specifies if the grid is enabled. This is used in snap. Default is true.
portsEnabled
mxGraph.prototype.portsEnabled
Specifies if ports are enabled. This is used in cellConnected to update the respective style. Default is true.
defaultOverlap
mxGraph.prototype.defaultOverlap
Value returned by getOverlap if isAllowOverlapParent returns true for the given cell. getOverlap is used in constrainChild if isConstrainChild returns true. The value specifies the portion of the child which is allowed to overlap the parent.
defaultParent
mxGraph.prototype.defaultParent
Specifies the default parent to be used to insert new cells. This is used in getDefaultParent. Default is null.
backgroundImage
mxGraph.prototype.backgroundImage
Specifies the mxImage to be returned by getBackgroundImage. Default is null.
Example
var img = new mxImage('http://www.example.com/maps/examplemap.jpg', 1024, 768);
graph.setBackgroundImage(img);
graph.view.validate();pageBreaksVisible
mxGraph.prototype.pageBreaksVisible
Specifies if a dashed line should be drawn between multiple pages. Default is false. If you change this value while a graph is being displayed then you should call sizeDidChange to force an update of the display.
preferPageSize
mxGraph.prototype.preferPageSize
Specifies if the graph size should be rounded to the next page number in sizeDidChange. This is only used if the graph container has scrollbars. Default is false.
pageFormat
mxGraph.prototype.pageFormat
Specifies the page format for the background page. Default is mxConstants.PAGE_FORMAT_A4_PORTRAIT. This is used as the default in mxPrintPreview and for painting the background page if pageVisible is true and the pagebreaks if pageBreaksVisible is true.
enabled
mxGraph.prototype.enabled
Specifies the return value for isEnabled. Default is true.
escapeEnabled
mxGraph.prototype.escapeEnabled
Specifies if mxKeyHandler should invoke escape when the escape key is pressed. Default is true.
invokesStopCellEditing
mxGraph.prototype.invokesStopCellEditing
If true, when editing is to be stopped by way of selection changing, data in diagram changing or other means stopCellEditing is invoked, and changes are saved. This is implemented in a focus handler in mxCellEditor. Default is true.
enterStopsCellEditing
mxGraph.prototype.enterStopsCellEditing
If true, pressing the enter key without pressing control or shift will stop editing and accept the new value. This is used in mxCellEditor to stop cell editing. Note: You can always use F2 and escape to stop editing. Default is false.
useScrollbarsForPanning
mxGraph.prototype.useScrollbarsForPanning
Specifies if scrollbars should be used for panning in panGraph if any scrollbars are available. If scrollbars are enabled in CSS, but no scrollbars appear because the graph is smaller than the container size, then no panning occurs if this is true. Default is true.
exportEnabled
mxGraph.prototype.exportEnabled
Specifies the return value for canExportCell. Default is true.
importEnabled
mxGraph.prototype.importEnabled
Specifies the return value for canImportCell. Default is true.
cellsLocked
mxGraph.prototype.cellsLocked
Specifies the return value for isCellLocked. Default is false.
cellsCloneable
mxGraph.prototype.cellsCloneable
Specifies the return value for isCellCloneable. Default is true.
cellsEditable
mxGraph.prototype.cellsEditable
Specifies the return value for isCellEditable. Default is true.
cellsDeletable
mxGraph.prototype.cellsDeletable
Specifies the return value for isCellDeletable. Default is true.
cellsMovable
mxGraph.prototype.cellsMovable
Specifies the return value for isCellMovable. Default is true.
edgeLabelsMovable
mxGraph.prototype.edgeLabelsMovable
Specifies the return value for edges in isLabelMovable. Default is true.
vertexLabelsMovable
mxGraph.prototype.vertexLabelsMovable
Specifies the return value for vertices in isLabelMovable. Default is false.
dropEnabled
mxGraph.prototype.dropEnabled
Specifies the return value for isDropEnabled. Default is false.
cellsResizable
mxGraph.prototype.cellsResizable
Specifies the return value for isCellResizable. Default is true.
cellsBendable
mxGraph.prototype.cellsBendable
Specifies the return value for isCellsBendable. Default is true.
cellsSelectable
mxGraph.prototype.cellsSelectable
Specifies the return value for isCellSelectable. Default is true.
autoSizeCells
mxGraph.prototype.autoSizeCells
Specifies if the graph should automatically update the cell size after an edit. This is used in isAutoSizeCell. Default is false.
autoScroll
mxGraph.prototype.autoScroll
Specifies if the graph should automatically scroll if the mouse goes near the container edge while dragging. This is only taken into account if the container has scrollbars. Default is true.
If you need this to work without scrollbars then set ignoreScrollbars to true.
timerAutoScroll
mxGraph.prototype.timerAutoScroll
Specifies if timer-based autoscrolling should be used via mxPanningManager. Note that this disables the code in scrollPointToVisible and uses code in mxPanningManager instead. Note that autoExtend is disabled if this is true and that this should only be used with a scroll buffer or when scollbars are visible and scrollable in all directions. Default is false.
allowAutoPanning
mxGraph.prototype.allowAutoPanning
Specifies if panning via panGraph should be allowed to implement autoscroll if no scrollbars are available in scrollPointToVisible. Default is false.
autoExtend
mxGraph.prototype.autoExtend
Specifies if the size of the graph should be automatically extended if the mouse goes near the container edge while dragging. This is only taken into account if the container has scrollbars. Default is true. See autoScroll.
maximumGraphBounds
mxGraph.prototype.maximumGraphBounds
mxRectangle that specifies the area in which all cells in the diagram should be placed. Uses in getMaximumGraphBounds. Use a width or height of 0 if you only want to give a upper, left corner.
minimumGraphSize
mxGraph.prototype.minimumGraphSize
mxRectangle that specifies the minimum size of the graph. This is ignored if the graph container has no scrollbars. Default is null.
minimumContainerSize
mxGraph.prototype.minimumContainerSize
mxRectangle that specifies the minimum size of the <container> if resizeContainer is true.
maximumContainerSize
mxGraph.prototype.maximumContainerSize
mxRectangle that specifies the maximum size of the container if resizeContainer is true.
ordered
mxGraph.prototype.ordered
Specifies if the display should reflect the order of the cells in the model. Default is true. This has precendence over keepEdgesInBackground and keepEdgesInForeground.
keepEdgesInForeground
mxGraph.prototype.keepEdgesInForeground
Specifies if edges should appear in the foreground regardless of their order in the model. This has precendence over <keepEdgeInBackground>, but not over ordered. Default is false.
keepEdgesInBackground
mxGraph.prototype.keepEdgesInBackground
Specifies if edges should appear in the background regardless of their order in the model. ordered and keepEdgesInForeground have precedence over this setting. Default is true.
constrainChildren
mxGraph.prototype.constrainChildren
Specifies the return value for isConstrainChildren. Default is true.
extendParentsOnAdd
mxGraph.prototype.extendParentsOnAdd
Specifies if parents should be extended according to the extendParents switch if cells are added. Default is true.
defaultLoopStyle
mxGraph.prototype.defaultLoopStyle
mxEdgeStyle to be used for loops. This is a fallback for loops if the mxConstants.STYLE_LOOP is undefined. Default is mxEdgeStyle.Loop.
labelsVisible
mxGraph.prototype.labelsVisible
Specifies if labels should be visible. This is used in getLabel. Default is true.
htmlLabels
mxGraph.prototype.htmlLabels
Specifies the return value for isHtmlLabel. Default is false.
swimlaneIndicatorColorAttribute
mxGraph.prototype.swimlaneIndicatorColorAttribute
The attribute used to find the color for the indicator if the indicator color is set to ‘swimlane’. Default is mxConstants.STYLE_FILLCOLOR.
minFitScale
mxGraph.prototype.minFitScale
Specifies the minimum scale to be applied in fit. Default is 0.1. Set this to null to allow any value.
maxFitScale
mxGraph.prototype.maxFitScale
Specifies the maximum scale to be applied in fit. Default is 8. Set this to null to allow any value.
collapsedImage
mxGraph.prototype.collapsedImage
Specifies the mxImage to indicate a collapsed state. Default value is mxClient.imageBasePath + ‘/collapsed.gif’
expandedImage
mxGraph.prototype.expandedImage
Specifies the mxImage to indicate a expanded state. Default value is mxClient.imageBasePath + ‘/expanded.gif’
warningImage
mxGraph.prototype.warningImage
Specifies the mxImage for the image to be used to display a warning overlay. See setCellWarning. Default value is mxClient.imageBasePath + ‘/warning’. The extension for the image depends on the platform. It is ‘.png’ on the Mac and ‘.gif’ on all other platforms.
alreadyConnectedResource
mxGraph.prototype.alreadyConnectedResource
Specifies the resource key for the error message to be displayed in non-multigraphs when two vertices are already connected. If the resource for this key does not exist then the value is used as the error message. Default is ‘alreadyConnected’.
containsValidationErrorsResource
mxGraph.prototype.containsValidationErrorsResource
Specifies the resource key for the warning message to be displayed when a collapsed cell contains validation errors. If the resource for this key does not exist then the value is used as the warning message. Default is ‘containsValidationErrors’.
createHandlers
mxGraph.prototype.createHandlers = function( container )
Creates the tooltip-, panning-, connection- and graph-handler (in this order). This is called in the constructor before init is called.
createSelectionModel
mxGraph.prototype.createSelectionModel = function()
Creates a new mxGraphSelectionModel to be used in this graph.
createStylesheet
mxGraph.prototype.createStylesheet = function()
Creates a new mxGraphSelectionModel to be used in this graph.
createGraphView
mxGraph.prototype.createGraphView = function()
Creates a new mxGraphView to be used in this graph.
createCellRenderer
mxGraph.prototype.createCellRenderer = function()
Creates a new mxCellRenderer to be used in this graph.
createCellEditor
mxGraph.prototype.createCellEditor = function()
Creates a new mxCellEditor to be used in this graph.
getModel
mxGraph.prototype.getModel = function()
Returns the mxGraphModel that contains the cells.
getView
mxGraph.prototype.getView = function()
Returns the mxGraphView that contains the mxCellStates.
getStylesheet
mxGraph.prototype.getStylesheet = function()
Returns the mxStylesheet that defines the style.
setStylesheet
mxGraph.prototype.setStylesheet = function( stylesheet )
Sets the mxStylesheet that defines the style.
getSelectionModel
mxGraph.prototype.getSelectionModel = function()
Returns the mxGraphSelectionModel that contains the selection.
graphModelChanged
mxGraph.prototype.graphModelChanged = function( changes )
Called when the graph model changes. Invokes processChange on each item of the given array to update the view accordingly.
Parameters
| changes | Array that contains the individual changes. |
processChange
mxGraph.prototype.processChange = function( change )
Processes the given change and invalidates the respective cached data in view. This fires a <root> event if the root has changed in the model.
Parameters
| change | Object that represents the change on the model. |
removeStateForCell
mxGraph.prototype.removeStateForCell = function( cell )
Removes all cached information for the given cell and its descendants. This is called when a cell was removed from the model.
Paramters
| cell | mxCell that was removed from the model. |
addCellOverlay
mxGraph.prototype.addCellOverlay = function( cell, overlay )
Adds an mxCellOverlay for the specified cell. This method fires an <addoverlay> event and returns the new mxCellOverlay.
Parameters
| cell | mxCell to add the overlay for. |
| overlay | mxCellOverlay to be added for the cell. |
getCellOverlays
mxGraph.prototype.getCellOverlays = function( cell )
Returns the array of mxCellOverlays for the given cell or null, if no overlays are defined.
Parameters
| cell | mxCell whose overlays should be returned. |
removeCellOverlay
mxGraph.prototype.removeCellOverlay = function( cell, overlay )
Removes and returns the given mxCellOverlay from the given cell. This method fires a <removeoverlay> event. If no overlay is given, then all overlays are removed using <removeOverlays>.
Parameters
| cell | mxCell whose overlay should be removed. |
| overlay | Optional mxCellOverlay to be removed. |
removeCellOverlays
mxGraph.prototype.removeCellOverlays = function( cell )
Removes all mxCellOverlays from the given cell. This method fires a <removeoverlay> event for each mxCellOverlay and returns the array of mxCellOverlays that was removed from the cell.
Parameters
| cell | mxCell whose overlays should be removed |
clearCellOverlays
mxGraph.prototype.clearCellOverlays = function( cell )
Removes all mxCellOverlays in the graph for the given cell and all its descendants. If no cell is specified then all overlays are removed from the graph. This implementation uses removeCellOverlays to remove the overlays from the individual cells.
Parameters
| cell | Optional mxCell that represents the root of the subtree to remove the overlays from. Default is the root in the model. |
setCellWarning
mxGraph.prototype.setCellWarning = function( cell, warning, img, isSelect )
Creates an overlay for the given cell using the warning and image or warningImage and returns the new mxCellOverlay. The warning is displayed as a tooltip in a red font and may contain HTML markup. If the warning is null or a zero length string, then all overlays are removed from the cell.
Example
graph.setCellWarning(cell, '<b>Warning:</b>: Hello, World!');
Parameters
| cell | mxCell whose warning should be set. |
| warning | String that represents the warning to be displayed. |
| img | Optional mxImage to be used for the overlay. Default is warningImage. |
| isSelect | Optional boolean indicating if a click on the overlay should select the corresponding cell. Default is false. |
startEditing
mxGraph.prototype.startEditing = function( evt )
Calls startEditingAtCell using the given cell or the first selection cell.
Parameters
| evt | Optional mouse event that triggered the editing. |
startEditingAtCell
mxGraph.prototype.startEditingAtCell = function( cell, evt )
Fires a startEditing event and invokes mxCellEditor.startEditing on <editor>.
Parameters
| cell | mxCell to start the in-place editor for. |
| evt | Optional mouse event that triggered the editing. |
getEditingValue
mxGraph.prototype.getEditingValue = function( cell, evt )
Returns the initial value for in-place editing. This implementation returns convertValueToString for the given cell. If this function is overridden, then mxGraphModel.valueForCellChanged should take care of correctly storing the actual new value inside the user object.
Parameters
| cell | mxCell for which the initial editing value should be returned. |
| evt | Optional mouse event that triggered the editor. |
labelChanged
mxGraph.prototype.labelChanged = function( cell, value, evt )
Sets the label of the specified cell to the given value using cellLabelChanged and fires mxEvent.LABEL_CHANGED while the transaction is in progress. Returns the cell whose label was changed.
Parameters
| cell | mxCell whose label should be changed. |
| value | New label to be assigned. |
| evt | Optional event that triggered the change. |
cellLabelChanged
mxGraph.prototype.cellLabelChanged = function( cell, value, autoSize )
Sets the new label for a cell. If autoSize is true then cellSizeUpdated will be called.
In the following example, the function is extended to map changes to attributes in an XML node, as shown in convertValueToString. Alternatively, the handling of this can be implemented as shown in mxGraphModel.valueForCellChanged without the need to clone the user object.
var graphCellLabelChanged = graph.cellLabelChanged;
graph.cellLabelChanged = function(cell, newValue, autoSize)
{
// Cloned for correct undo/redo
var elt = cell.value.cloneNode(true);
elt.setAttribute('label', newValue);
newValue = elt;
graphCellLabelChanged.apply(this, arguments);
};Parameters
| cell | mxCell whose label should be changed. |
| value | New label to be assigned. |
| autoSize | Boolean that specifies if cellSizeUpdated should be called. |
click
mxGraph.prototype.click = function( me )
Processes a singleclick on an optional cell and fires a click event. The click event is fired initially. If the graph is enabled and the event has not been consumed, then the cell is selected using selectCellForEvent or the selection is cleared using clearSelection. The events consumed state is set to true if the corresponding mxMouseEvent has been consumed.
To handle a click event, use the following code.
graph.addListener(mxEvent.CLICK, function(sender, evt)
{
var e = evt.getProperty('event'); // mouse event
var cell = evt.getProperty('cell'); // cell may be null
if (cell != null)
{
// Do something useful with cell and consume the event
evt.consume();
}
});Parameters
| me | mxMouseEvent that represents the single click. |
dblClick
mxGraph.prototype.dblClick = function( evt, cell )
Processes a doubleclick on an optional cell and fires a <dblclick> event. The event is fired initially. If the graph is enabled and the event has not been consumed, then <edit> is called with the given cell. The event is ignored if no cell was specified.
Example for overriding this method.
graph.dblClick = function(evt, cell)
{
var mxe = new mxEventObject(mxEvent.DOUBLE_CLICK, 'event', evt, 'cell', cell);
this.fireEvent(mxe);
if (this.isEnabled() && !mxEvent.isConsumed(evt) && !mxe.isConsumed())
{
mxUtils.alert('Hello, World!');
mxe.consume();
}
}Example listener for this event.
graph.addListener(mxEvent.DOUBLE_CLICK, function(sender, evt)
{
var cell = evt.getProperty('cell');
// do something with the cell...
});Parameters
| evt | Mouseevent that represents the doubleclick. |
| cell | Optional mxCell under the mousepointer. |
createPanningManager
mxGraph.prototype.createPanningManager = function()
Creates and returns an mxPanningManager.
getBorderSizes
mxGraph.prototype.getBorderSizes = function()
Returns the size of the border and padding on all four sides of the container. The left, top, right and bottom borders are stored in the x, y, width and height of the returned mxRectangle, respectively.
getPreferredPageSize
mxGraph.prototype.getPreferredPageSize = function( bounds, width, height )
Returns the preferred size of the background page if preferPageSize is true.
redrawPageBreaks
Invokes from sizeDidChange to redraw the page breaks.
Parameters
| visible | Boolean that specifies if page breaks should be shown. |
| width | Specifies the width of the container in pixels. |
| height | Specifies the height of the container in pixels. |
getCellStyle
mxGraph.prototype.getCellStyle = function( cell )
Returns an array of key, value pairs representing the cell style for the given cell. If no string is defined in the model that specifies the style, then the default style for the cell is returned or EMPTY_ARRAY, if not style can be found. Note: You should try and get the cell state for the given cell and use the cached style in the state before using this method.
Parameters
| cell | mxCell whose style should be returned as an array. |
setCellStyle
mxGraph.prototype.setCellStyle = function( style, cells )
Sets the style of the specified cells. If no cells are given, then the selection cells are changed.
Parameters
| style | String representing the new style of the cells. |
| cells | Optional array of mxCells to set the style for. Default is the selection cells. |
toggleCellStyle
mxGraph.prototype.toggleCellStyle = function( key, defaultValue, cell )
Toggles the boolean value for the given key in the style of the given cell. If no cell is specified then the selection cell is used.
Parameter
| key | String representing the key for the boolean value to be toggled. |
| defaultValue | Optional boolean default value if no value is defined. Default is false. |
| cell | Optional mxCell whose style should be modified. Default is the selection cell. |
toggleCellStyles
mxGraph.prototype.toggleCellStyles = function( key, defaultValue, cells )
Toggles the boolean value for the given key in the style of the given cells. If no cells are specified, then the selection cells are used. For example, this can be used to toggle mxConstants.STYLE_ROUNDED or any other style with a boolean value.
Parameter
| key | String representing the key for the boolean value to be toggled. |
| defaultValue | Optional boolean default value if no value is defined. Default is false. |
| cells | Optional array of mxCells whose styles should be modified. Default is the selection cells. |
setCellStyles
mxGraph.prototype.setCellStyles = function( key, value, cells )
Sets the key to value in the styles of the given cells. This will modify the existing cell styles in-place and override any existing assignment for the given key. If no cells are specified, then the selection cells are changed. If no value is specified, then the respective key is removed from the styles.
Parameters
| key | String representing the key to be assigned. |
| value | String representing the new value for the key. |
| cells | Optional array of mxCells to change the style for. Default is the selection cells. |
toggleCellStyleFlags
mxGraph.prototype.toggleCellStyleFlags = function( key, flag, cells )
Toggles the given bit for the given key in the styles of the specified cells.
Parameters
| key | String representing the key to toggle the flag in. |
| flag | Integer that represents the bit to be toggled. |
| cells | Optional array of mxCells to change the style for. Default is the selection cells. |
setCellStyleFlags
mxGraph.prototype.setCellStyleFlags = function( key, flag, value, cells )
Sets or toggles the given bit for the given key in the styles of the specified cells.
Parameters
| key | String representing the key to toggle the flag in. |
| flag | Integer that represents the bit to be toggled. |
| value | Boolean value to be used or null if the value should be toggled. |
| cells | Optional array of mxCells to change the style for. Default is the selection cells. |
alignCells
mxGraph.prototype.alignCells = function( align, cells, param )
Aligns the given cells vertically or horizontally according to the given alignment using the optional parameter as the coordinate.
Parameters
| align | Specifies the alignment. Possible values are all constants in mxConstants with an ALIGN prefix. |
| cells | Array of mxCells to be aligned. |
| param | Optional coordinate for the alignment. |
flipEdge
mxGraph.prototype.flipEdge = function( edge )
Toggles the style of the given edge between null (or empty) and alternateEdgeStyle. This method fires mxEvent.FLIP_EDGE while the transaction is in progress. Returns the edge that was flipped.
Here is an example that overrides this implementation to invert the value of mxConstants.STYLE_ELBOW without removing any existing styles.
graph.flipEdge = function(edge)
{
if (edge != null)
{
var state = this.view.getState(edge);
var style = (state != null) ? state.style : this.getCellStyle(edge);
if (style != null)
{
var elbow = mxUtils.getValue(style, mxConstants.STYLE_ELBOW,
mxConstants.ELBOW_HORIZONTAL);
var value = (elbow == mxConstants.ELBOW_HORIZONTAL) ?
mxConstants.ELBOW_VERTICAL : mxConstants.ELBOW_HORIZONTAL;
this.setCellStyles(mxConstants.STYLE_ELBOW, value, [edge]);
}
}
};Parameters
| edge | mxCell whose style should be changed. |
addImageBundle
mxGraph.prototype.addImageBundle = function( bundle )
Adds the specified mxImageBundle.
removeImageBundle
mxGraph.prototype.removeImageBundle = function( bundle )
Removes the specified mxImageBundle.
getImageFromBundles
mxGraph.prototype.getImageFromBundles = function( key )
Searches all imageBundles for the specified key and returns the value for the first match or null if the key is not found.
orderCells
mxGraph.prototype.orderCells = function( back, cells )
Moves the given cells to the front or back. The change is carried out using cellsOrdered. This method fires mxEvent.ORDER_CELLS while the transaction is in progress.
Parameters
| back | Boolean that specifies if the cells should be moved to back. |
| cells | Array of mxCells to move to the background. If null is specified then the selection cells are used. |
cellsOrdered
mxGraph.prototype.cellsOrdered = function( cells, back )
Moves the given cells to the front or back. This method fires mxEvent.CELLS_ORDERED while the transaction is in progress.
Parameters
| cells | Array of mxCells whose order should be changed. |
| back | Boolean that specifies if the cells should be moved to back. |
groupCells
mxGraph.prototype.groupCells = function( group, border, cells )
Adds the cells into the given group. The change is carried out using cellsAdded, cellsMoved and cellsResized. This method fires mxEvent.GROUP_CELLS while the transaction is in progress. Returns the new group. A group is only created if there is at least one entry in the given array of cells.
Parameters
| group | mxCell that represents the target group. If null is specified then a new group is created using createGroupCell. |
| border | Optional integer that specifies the border between the child area and the group bounds. Default is 0. |
| cells | Optional array of mxCells to be grouped. If null is specified then the selection cells are used. |
createGroupCell
mxGraph.prototype.createGroupCell = function( cells )
Hook for creating the group cell to hold the given array of mxCells if no group cell was given to the <group> function.
The following code can be used to set the style of new group cells.
var graphCreateGroupCell = graph.createGroupCell;
graph.createGroupCell = function(cells)
{
var group = graphCreateGroupCell.apply(this, arguments);
group.setStyle('group');
return group;
};ungroupCells
mxGraph.prototype.ungroupCells = function( cells )
Ungroups the given cells by moving the children the children to their parents parent and removing the empty groups. Returns the children that have been removed from the groups.
Parameters
| cells | Array of cells to be ungrouped. If null is specified then the selection cells are used. |
removeCellsFromParent
mxGraph.prototype.removeCellsFromParent = function( cells )
Removes the specified cells from their parents and adds them to the default parent. Returns the cells that were removed from their parents.
Parameters
| cells | Array of mxCells to be removed from their parents. |
updateGroupBounds
mxGraph.prototype.updateGroupBounds = function( cells, border, moveGroup )
Updates the bounds of the given array of groups so that it includes all child vertices.
Parameters
| cells | The groups whose bounds should be updated. |
| border | Optional border to be added in the group. Default is 0. |
| moveGroup | Optional boolean that allows the group to be moved. Default is false. |
cloneCells
mxGraph.prototype.cloneCells = function( cells, allowInvalidEdges )
Returns the clones for the given cells. If the terminal of an edge is not in the given array, then the respective end is assigned a terminal point and the terminal is removed.
Parameters
| cells | Array of mxCells to be cloned. |
| allowInvalidEdges | Optional boolean that specifies if invalid edges should be cloned. Default is true. |
insertVertex
mxGraph.prototype.insertVertex = function( parent, id, value, x, y, width, height, style, relative )
Adds a new vertex into the given parent mxCell using value as the user object and the given coordinates as the mxGeometry of the new vertex. The id and style are used for the respective properties of the new mxCell, which is returned.
When adding new vertices from a mouse event, one should take into account the offset of the graph container and the scale and translation of the view in order to find the correct unscaled, untranslated coordinates using mxGraph.getPointForEvent as follows:
var pt = graph.getPointForEvent(evt);
var parent = graph.getDefaultParent();
graph.insertVertex(parent, null,
'Hello, World!', x, y, 220, 30);For adding image cells, the style parameter can be assigned as
stylename;image=imageUrl
See mxGraph for more information on using images.
Parameters
| parent | mxCell that specifies the parent of the new vertex. |
| id | Optional string that defines the Id of the new vertex. |
| value | Object to be used as the user object. |
| x | Integer that defines the x coordinate of the vertex. |
| y | Integer that defines the y coordinate of the vertex. |
| width | Integer that defines the width of the vertex. |
| height | Integer that defines the height of the vertex. |
| style | Optional string that defines the cell style. |
| relative | Optional boolean that specifies if the geometry is relative. Default is false. |
createVertex
mxGraph.prototype.createVertex = function( parent, id, value, x, y, width, height, style, relative )
Hook method that creates the new vertex for insertVertex.
insertEdge
mxGraph.prototype.insertEdge = function( parent, id, value, source, target, style )
Adds a new edge into the given parent mxCell using value as the user object and the given source and target as the terminals of the new edge. The id and style are used for the respective properties of the new mxCell, which is returned.
Parameters
| parent | mxCell that specifies the parent of the new edge. |
| id | Optional string that defines the Id of the new edge. |
| value | JavaScript object to be used as the user object. |
| source | mxCell that defines the source of the edge. |
| target | mxCell that defines the target of the edge. |
| style | Optional string that defines the cell style. |
createEdge
mxGraph.prototype.createEdge = function( parent, id, value, source, target, style )
Hook method that creates the new edge for insertEdge. This implementation does not set the source and target of the edge, these are set when the edge is added to the model.
addEdge
mxGraph.prototype.addEdge = function( edge, parent, source, target, index )
Adds the edge to the parent and connects it to the given source and target terminals. This is a shortcut method. Returns the edge that was added.
Parameters
| edge | mxCell to be inserted into the given parent. |
| parent | mxCell that represents the new parent. If no parent is given then the default parent is used. |
| source | Optional mxCell that represents the source terminal. |
| target | Optional mxCell that represents the target terminal. |
| index | Optional index to insert the cells at. Default is to append. |
addCell
mxGraph.prototype.addCell = function( cell, parent, index, source, target )
Adds the cell to the parent and connects it to the given source and target terminals. This is a shortcut method. Returns the cell that was added.
Parameters
| cell | mxCell to be inserted into the given parent. |
| parent | mxCell that represents the new parent. If no parent is given then the default parent is used. |
| index | Optional index to insert the cells at. Default is to append. |
| source | Optional mxCell that represents the source terminal. |
| target | Optional mxCell that represents the target terminal. |
addCells
mxGraph.prototype.addCells = function( cells, parent, index, source, target )
Adds the cells to the parent at the given index, connecting each cell to the optional source and target terminal. The change is carried out using cellsAdded. This method fires mxEvent.ADD_CELLS while the transaction is in progress. Returns the cells that were added.
Parameters
| cells | Array of mxCells to be inserted. |
| parent | mxCell that represents the new parent. If no parent is given then the default parent is used. |
| index | Optional index to insert the cells at. Default is to append. |
| source | Optional source mxCell for all inserted cells. |
| target | Optional target mxCell for all inserted cells. |
cellsAdded
mxGraph.prototype.cellsAdded = function( cells, parent, index, source, target, absolute, constrain )
Adds the specified cells to the given parent. This method fires mxEvent.CELLS_ADDED while the transaction is in progress.
removeCells
mxGraph.prototype.removeCells = function( cells, includeEdges )
Removes the given cells from the graph including all connected edges if includeEdges is true. The change is carried out using cellsRemoved. This method fires mxEvent.REMOVE_CELLS while the transaction is in progress. The removed cells are returned as an array.
Parameters
| cells | Array of mxCells to remove. If null is specified then the selection cells which are deletable are used. |
| includeEdges | Optional boolean which specifies if all connected edges should be removed as well. Default is true. |
cellsRemoved
mxGraph.prototype.cellsRemoved = function( cells )
Removes the given cells from the model. This method fires mxEvent.CELLS_REMOVED while the transaction is in progress.
Parameters
| cells | Array of mxCells to remove. |
splitEdge
mxGraph.prototype.splitEdge = function( edge, cells, newEdge, dx, dy )
Splits the given edge by adding the newEdge between the previous source and the given cell and reconnecting the source of the given edge to the given cell. This method fires mxEvent.SPLIT_EDGE while the transaction is in progress. Returns the new edge that was inserted.
Parameters
| edge | mxCell that represents the edge to be splitted. |
| cells | mxCells that represents the cells to insert into the edge. |
| newEdge | mxCell that represents the edge to be inserted. |
| dx | Optional integer that specifies the vector to move the cells. |
| dy | Optional integer that specifies the vector to move the cells. |
toggleCells
mxGraph.prototype.toggleCells = function( show, cells, includeEdges )
Sets the visible state of the specified cells and all connected edges if includeEdges is true. The change is carried out using cellsToggled. This method fires mxEvent.TOGGLE_CELLS while the transaction is in progress. Returns the cells whose visible state was changed.
Parameters
| show | Boolean that specifies the visible state to be assigned. |
| cells | Array of mxCells whose visible state should be changed. If null is specified then the selection cells are used. |
| includeEdges | Optional boolean indicating if the visible state of all connected edges should be changed as well. Default is true. |
cellsToggled
mxGraph.prototype.cellsToggled = function( cells, show )
Sets the visible state of the specified cells.
Parameters
| cells | Array of mxCells whose visible state should be changed. |
| show | Boolean that specifies the visible state to be assigned. |
foldCells
mxGraph.prototype.foldCells = function( collapse, recurse, cells, checkFoldable )
Sets the collapsed state of the specified cells and all descendants if recurse is true. The change is carried out using cellsFolded. This method fires mxEvent.FOLD_CELLS while the transaction is in progress. Returns the cells whose collapsed state was changed.
Parameters
| collapsed | Boolean indicating the collapsed state to be assigned. |
| recurse | Optional boolean indicating if the collapsed state of all descendants should be set. Default is false. |
| cells | Array of mxCells whose collapsed state should be set. If null is specified then the foldable selection cells are used. |
| checkFoldable | Optional boolean indicating of isCellFoldable should be checked. Default is false. |
cellsFolded
mxGraph.prototype.cellsFolded = function( cells, collapse, recurse, checkFoldable )
Sets the collapsed state of the specified cells. This method fires mxEvent.CELLS_FOLDED while the transaction is in progress. Returns the cells whose collapsed state was changed.
Parameters
| cells | Array of mxCells whose collapsed state should be set. |
| collapsed | Boolean indicating the collapsed state to be assigned. |
| recurse | Boolean indicating if the collapsed state of all descendants should be set. |
| checkFoldable | Optional boolean indicating of isCellFoldable should be checked. Default is false. |
swapBounds
mxGraph.prototype.swapBounds = function( cell, willCollapse )
Swaps the alternate and the actual bounds in the geometry of the given cell invoking updateAlternateBounds before carrying out the swap.
Parameters
| cell | mxCell for which the bounds should be swapped. |
| willCollapse | Boolean indicating if the cell is going to be collapsed. |
updateAlternateBounds
mxGraph.prototype.updateAlternateBounds = function( cell, geo, willCollapse )
Updates or sets the alternate bounds in the given geometry for the given cell depending on whether the cell is going to be collapsed. If no alternate bounds are defined in the geometry and collapseToPreferredSize is true, then the preferred size is used for the alternate bounds. The top, left corner is always kept at the same location.
Parameters
| cell | mxCell for which the geometry is being udpated. |
| g | mxGeometry for which the alternate bounds should be updated. |
| willCollapse | Boolean indicating if the cell is going to be collapsed. |
updateCellSize
mxGraph.prototype.updateCellSize = function( cell, ignoreChildren )
Updates the size of the given cell in the model using cellSizeUpdated. This method fires mxEvent.UPDATE_CELL_SIZE while the transaction is in progress. Returns the cell whose size was updated.
Parameters
| cell | mxCell whose size should be updated. |
cellSizeUpdated
mxGraph.prototype.cellSizeUpdated = function( cell, ignoreChildren )
Updates the size of the given cell in the model using getPreferredSizeForCell to get the new size.
Parameters
| cell | mxCell for which the size should be changed. |
getPreferredSizeForCell
mxGraph.prototype.getPreferredSizeForCell = function( cell )
Returns the preferred width and height of the given mxCell as an mxRectangle.
Parameters
| cell | mxCell for which the preferred size should be returned. |
handleGesture
mxGraph.prototype.handleGesture = function( state, evt )
Invokes if a gesture event has been detected on a cell state.
Parameters
| state | mxCellState which was pinched. |
| evt | Object that represents the gesture event. |
resizeCell
mxGraph.prototype.resizeCell = function( cell, bounds )
Sets the bounds of the given cell using resizeCells. Returns the cell which was passed to the function.
Parameters
| cell | mxCell whose bounds should be changed. |
| bounds | mxRectangle that represents the new bounds. |
resizeCells
mxGraph.prototype.resizeCells = function( cells, bounds )
Sets the bounds of the given cells and fires a mxEvent.RESIZE_CELLS event while the transaction is in progress. Returns the cells which have been passed to the function.
Parameters
| cells | Array of mxCells whose bounds should be changed. |
| bounds | Array of mxRectangles that represent the new bounds. |
cellsResized
mxGraph.prototype.cellsResized = function( cells, bounds )
Sets the bounds of the given cells and fires a mxEvent.CELLS_RESIZED event. If extendParents is true, then the parent is extended if a child size is changed so that it overlaps with the parent.
The following example shows how to control group resizes to make sure that all child cells stay within the group.
graph.addListener(mxEvent.CELLS_RESIZED, function(sender, evt)
{
var cells = evt.getProperty('cells');
if (cells != null)
{
for (var i = 0; i < cells.length; i++)
{
if (graph.getModel().getChildCount(cells[i]) > 0)
{
var geo = graph.getCellGeometry(cells[i]);
if (geo != null)
{
var children = graph.getChildCells(cells[i], true, true);
var bounds = graph.getBoundingBoxFromGeometry(children, true);
geo = geo.clone();
geo.width = Math.max(geo.width, bounds.width);
geo.height = Math.max(geo.height, bounds.height);
graph.getModel().setGeometry(cells[i], geo);
}
}
}
}
});Parameters
| cells | Array of mxCells whose bounds should be changed. |
| bounds | Array of mxRectangles that represent the new bounds. |
extendParent
mxGraph.prototype.extendParent = function( cell )
Resizes the parents recursively so that they contain the complete area of the resized child cell.
Parameters
| cell | mxCell that has been resized. |
moveCells
mxGraph.prototype.moveCells = function( cells, dx, dy, clone, target, evt )
Moves or clones the specified cells and moves the cells or clones by the given amount, adding them to the optional target cell. The evt is the mouse event as the mouse was released. The change is carried out using cellsMoved. This method fires mxEvent.MOVE_CELLS while the transaction is in progress. Returns the cells that were moved.
Use the following code to move all cells in the graph.
graph.moveCells(graph.getChildCells(null, true, true), 10, 10);
Parameters
| cells | Array of mxCells to be moved, cloned or added to the target. |
| dx | Integer that specifies the x-coordinate of the vector. Default is 0. |
| dy | Integer that specifies the y-coordinate of the vector. Default is 0. |
| clone | Boolean indicating if the cells should be cloned. Default is false. |
| target | mxCell that represents the new parent of the cells. |
| evt | Mouseevent that triggered the invocation. |
cellsMoved
mxGraph.prototype.cellsMoved = function( cells, dx, dy, disconnect, constrain )
Moves the specified cells by the given vector, disconnecting the cells using disconnectGraph is disconnect is true. This method fires mxEvent.CELLS_MOVED while the transaction is in progress.
getCellContainmentArea
mxGraph.prototype.getCellContainmentArea = function( cell )
Returns the mxRectangle inside which a cell is to be kept.
Parameters
| cell | mxCell for which the area should be returned. |
getMaximumGraphBounds
mxGraph.prototype.getMaximumGraphBounds = function()
Returns the bounds inside which the diagram should be kept as an mxRectangle.
constrainChild
mxGraph.prototype.constrainChild = function( cell )
Keeps the given cell inside the bounds returned by getCellContainmentArea for its parent, according to the rules defined by getOverlap and isConstrainChild. This modifies the cell’s geometry in-place and does not clone it.
Parameters
| cells | mxCell which should be constrained. |
resetEdges
mxGraph.prototype.resetEdges = function( cells )
Resets the control points of the edges that are connected to the given cells if not both ends of the edge are in the given cells array.
Parameters
| cells | Array of mxCells for which the connected edges should be reset. |
resetEdge
mxGraph.prototype.resetEdge = function( edge )
Resets the control points of the given edge.
Parameters
| edge | mxCell whose points should be reset. |
getAllConnectionConstraints
mxGraph.prototype.getAllConnectionConstraints = function( terminal, source )
Returns an array of all mxConnectionConstraints for the given terminal. If the shape of the given terminal is a <mxStencilShape> then the constraints of the corresponding mxStencil are returned.
Parameters
| terminal | mxCellState that represents the terminal. |
| source | Boolean that specifies if the terminal is the source or target. |
getConnectionConstraint
mxGraph.prototype.getConnectionConstraint = function( edge, terminal, source )
Returns an mxConnectionConstraint that describes the given connection point. This result can then be passed to getConnectionPoint.
Parameters
| edge | mxCellState that represents the edge. |
| terminal | mxCellState that represents the terminal. |
| source | Boolean indicating if the terminal is the source or target. |
setConnectionConstraint
mxGraph.prototype.setConnectionConstraint = function( edge, terminal, source, constraint )
Sets the mxConnectionConstraint that describes the given connection point. If no constraint is given then nothing is changed. To remove an existing constraint from the given edge, use an empty constraint instead.
Parameters
| edge | mxCell that represents the edge. |
| terminal | mxCell that represents the terminal. |
| source | Boolean indicating if the terminal is the source or target. |
| constraint | Optional mxConnectionConstraint to be used for this connection. |
getConnectionPoint
mxGraph.prototype.getConnectionPoint = function( vertex, constraint )
Returns the nearest point in the list of absolute points or the center of the opposite terminal.
Parameters
| vertex | mxCellState that represents the vertex. |
| constraint | mxConnectionConstraint that represents the connection point constraint as returned by getConnectionConstraint. |
connectCell
mxGraph.prototype.connectCell = function( edge, terminal, source, constraint )
Connects the specified end of the given edge to the given terminal using cellConnected and fires mxEvent.CONNECT_CELL while the transaction is in progress. Returns the updated edge.
Parameters
| edge | mxCell whose terminal should be updated. |
| terminal | mxCell that represents the new terminal to be used. |
| source | Boolean indicating if the new terminal is the source or target. |
| constraint | Optional mxConnectionConstraint to be used for this connection. |
cellConnected
mxGraph.prototype.cellConnected = function( edge, terminal, source, constraint )
Sets the new terminal for the given edge and resets the edge points if resetEdgesOnConnect is true. This method fires mxEvent.CELL_CONNECTED while the transaction is in progress.
Parameters
| edge | mxCell whose terminal should be updated. |
| terminal | mxCell that represents the new terminal to be used. |
| source | Boolean indicating if the new terminal is the source or target. |
| constraint | mxConnectionConstraint to be used for this connection. |
disconnectGraph
mxGraph.prototype.disconnectGraph = function( cells )
Disconnects the given edges from the terminals which are not in the given array.
Parameters
| cells | Array of mxCells to be disconnected. |
getCurrentRoot
mxGraph.prototype.getCurrentRoot = function()
Returns the current root of the displayed cell hierarchy. This is a shortcut to mxGraphView.currentRoot in view.
getTranslateForRoot
mxGraph.prototype.getTranslateForRoot = function( cell )
Returns the translation to be used if the given cell is the root cell as an mxPoint. This implementation returns null.
Example
To keep the children at their absolute position while stepping into groups, this function can be overridden as follows.
var offset = new mxPoint(0, 0);
while (cell != null)
{
var geo = this.model.getGeometry(cell);
if (geo != null)
{
offset.x -= geo.x;
offset.y -= geo.y;
}
cell = this.model.getParent(cell);
}
return offset;Parameters
| cell | mxCell that represents the root. |
isPort
mxGraph.prototype.isPort = function( cell )
Returns true if the given cell is a “port”, that is, when connecting to it, the cell returned by getTerminalForPort should be used as the terminal and the port should be referenced by the ID in either the mxConstants.STYLE_SOURCE_PORT or the or the mxConstants.STYLE_TARGET_PORT. Note that a port should not be movable. This implementation always returns false.
A typical implementation is the following
graph.isPort = function(cell)
{
var geo = this.getCellGeometry(cell);
return (geo != null) ? geo.relative : false;
};Parameters
| cell | mxCell that represents the port. |
getTerminalForPort
mxGraph.prototype.getTerminalForPort = function( cell, source )
Returns the terminal to be used for a given port. This implementation always returns the parent cell.
Parameters
| cell | mxCell that represents the port. |
| source | If the cell is the source or target port. |
getChildOffsetForCell
mxGraph.prototype.getChildOffsetForCell = function( cell )
Returns the offset to be used for the cells inside the given cell. The root and layer cells may be identified using mxGraphModel.isRoot and mxGraphModel.isLayer. For all other current roots, the mxGraphView.currentRoot field points to the respective cell, so that the following holds: cell == this.view.currentRoot. This implementation returns null.
Parameters
| cell | mxCell whose offset should be returned. |
enterGroup
mxGraph.prototype.enterGroup = function( cell )
Uses the given cell as the root of the displayed cell hierarchy. If no cell is specified then the selection cell is used. The cell is only used if isValidRoot returns true.
Parameters
| cell | Optional mxCell to be used as the new root. Default is the selection cell. |
isValidRoot
mxGraph.prototype.isValidRoot = function( cell )
Returns true if the given cell is a valid root for the cell display hierarchy. This implementation returns true for all non-null values.
Parameters
| cell | mxCell which should be checked as a possible root. |
getGraphBounds
mxGraph.prototype.getGraphBounds = function()
Returns the bounds of the visible graph. Shortcut to mxGraphView.getGraphBounds. See also: getBoundingBoxFromGeometry.
getCellBounds
mxGraph.prototype.getCellBounds = function( cell, includeEdges, includeDescendants )
Returns the scaled, translated bounds for the given cell. See mxGraphView.getBounds for arrays.
Parameters
| cell | mxCell whose bounds should be returned. |
| includeEdge | Optional boolean that specifies if the bounds of the connected edges should be included. Default is false. |
| includeDescendants | Optional boolean that specifies if the bounds of all descendants should be included. Default is false. |
getBoundingBoxFromGeometry
mxGraph.prototype.getBoundingBoxFromGeometry = function( cells, includeEdges )
Returns the bounding box for the geometries of the vertices in the given array of cells. This can be used to find the graph bounds during a layout operation (ie. before the last endUpdate) as follows:
var cells = graph.getChildCells(graph.getDefaultParent(), true, true); var bounds = graph.getBoundingBoxFromGeometry(cells, true);
This can then be used to move cells to the origin
if (bounds.x < 0 || bounds.y < 0)
{
graph.moveCells(cells, -Math.min(bounds.x, 0), -Math.min(bounds.y, 0))
}Or to translate the graph view
if (bounds.x < 0 || bounds.y < 0)
{
graph.view.setTranslate(-Math.min(bounds.x, 0), -Math.min(bounds.y, 0));
}Parameters
| cells | Array of mxCells whose bounds should be returned. |
| includeEdges | Specifies if edge bounds should be included by computing the bounding box for all points its geometry. Default is false. |
refresh
mxGraph.prototype.refresh = function( cell )
Clears all cell states or the states for the hierarchy starting at the given cell and validates the graph. This fires a refresh event as the last step.
Parameters
| cell | Optional mxCell for which the cell states should be cleared. |
snap
mxGraph.prototype.snap = function( value )
Snaps the given numeric value to the grid if gridEnabled is true.
Parameters
| value | Numeric value to be snapped to the grid. |
panGraph
mxGraph.prototype.panGraph = function( dx, dy )
Shifts the graph display by the given amount. This is used to preview panning operations, use mxGraphView.setTranslate to set a persistent translation of the view. Fires mxEvent.PAN.
Parameters
| dx | Amount to shift the graph along the x-axis. |
| dy | Amount to shift the graph along the y-axis. |
zoomIn
mxGraph.prototype.zoomIn = function()
Zooms into the graph by zoomFactor.
zoomOut
mxGraph.prototype.zoomOut = function()
Zooms out of the graph by zoomFactor.
zoomTo
mxGraph.prototype.zoomTo = function( scale, center )
Zooms the graph to the given scale with an optional boolean center argument, which is passd to zoom.
zoom
mxGraph.prototype.zoom = function( factor, center )
Zooms the graph using the given factor. Center is an optional boolean argument that keeps the graph scrolled to the center. If the center argument is omitted, then centerZoom will be used as its value.
zoomToRect
mxGraph.prototype.zoomToRect = function( rect )
Zooms the graph to the specified rectangle. If the rectangle does not have same aspect ratio as the display container, it is increased in the smaller relative dimension only until the aspect match. The original rectangle is centralised within this expanded one.
Note that the input rectangular must be un-scaled and un-translated.
Parameters
| rect | The un-scaled and un-translated rectangluar region that should be just visible after the operation |
fit
mxGraph.prototype.fit = function( border, keepOrigin )
Scales the graph such that the complete diagram fits into <container> and returns the current scale in the view. To fit an initial graph prior to rendering, set mxGraphView.rendering to false prior to changing the model and execute the following after changing the model.
graph.fit(); graph.view.rendering = true; graph.refresh();
Parameters
| border | Optional number that specifies the border. Default is 0. |
| keepOrigin | Optional boolean that specifies if the translate should be changed. Default is false. |
scrollCellToVisible
mxGraph.prototype.scrollCellToVisible = function( cell, center )
Pans the graph so that it shows the given cell. Optionally the cell may be centered in the container.
To center a given graph if the <container> has no scrollbars, use the following code.
[code] var bounds = graph.getGraphBounds(); graph.view.setTranslate(-bounds.x - (bounds.width - container.clientWidth) / 2, -bounds.y - (bounds.height - container.clientHeight) / 2); [/code]
Parameters
| cell | mxCell to be made visible. |
| center | Optional boolean flag. Default is false. |
scrollRectToVisible
mxGraph.prototype.scrollRectToVisible = function( rect )
Pans the graph so that it shows the given rectangle.
Parameters
| rect | mxRectangle to be made visible. |
getCellGeometry
mxGraph.prototype.getCellGeometry = function( cell )
Returns the mxGeometry for the given cell. This implementation uses mxGraphModel.getGeometry. Subclasses can override this to implement specific geometries for cells in only one graph, that is, it can return geometries that depend on the current state of the view.
Parameters
| cell | mxCell whose geometry should be returned. |
isCellVisible
mxGraph.prototype.isCellVisible = function( cell )
Returns true if the given cell is visible in this graph. This implementation uses mxGraphModel.isVisible. Subclassers can override this to implement specific visibility for cells in only one graph, that is, without affecting the visible state of the cell.
When using dynamic filter expressions for cell visibility, then the graph should be revalidated after the filter expression has changed.
Parameters
| cell | mxCell whose visible state should be returned. |
isCellCollapsed
mxGraph.prototype.isCellCollapsed = function( cell )
Returns true if the given cell is collapsed in this graph. This implementation uses mxGraphModel.isCollapsed. Subclassers can override this to implement specific collapsed states for cells in only one graph, that is, without affecting the collapsed state of the cell.
When using dynamic filter expressions for the collapsed state, then the graph should be revalidated after the filter expression has changed.
Parameters
| cell | mxCell whose collapsed state should be returned. |
isCellConnectable
mxGraph.prototype.isCellConnectable = function( cell )
Returns true if the given cell is connectable in this graph. This implementation uses mxGraphModel.isConnectable. Subclassers can override this to implement specific connectable states for cells in only one graph, that is, without affecting the connectable state of the cell in the model.
Parameters
| cell | mxCell whose connectable state should be returned. |
isOrthogonal
mxGraph.prototype.isOrthogonal = function( edge )
Returns true if perimeter points should be computed such that the resulting edge has only horizontal or vertical segments.
Parameters
| edge | mxCellState that represents the edge. |
isLoop
mxGraph.prototype.isLoop = function( state )
Returns true if the given cell state is a loop.
Parameters
| state | mxCellState that represents a potential loop. |
isEdgeValid
mxGraph.prototype.isEdgeValid = function( edge, source, target )
Checks if the return value of getEdgeValidationError for the given arguments is null.
Parameters
| edge | mxCell that represents the edge to validate. |
| source | mxCell that represents the source terminal. |
| target | mxCell that represents the target terminal. |
getEdgeValidationError
mxGraph.prototype.getEdgeValidationError = function( edge, source, target )
Returns the validation error message to be displayed when inserting or changing an edges’ connectivity. A return value of null means the edge is valid, a return value of ‘’ means it’s not valid, but do not display an error message. Any other (non-empty) string returned from this method is displayed as an error message when trying to connect an edge to a source and target. This implementation uses the multiplicities, and checks multigraph, allowDanglingEdges and allowLoops to generate validation errors.
For extending this method with specific checks for source/target cells, the method can be extended as follows. Returning an empty string means the edge is invalid with no error message, a non-null string specifies the error message, and null means the edge is valid.
graph.getEdgeValidationError = function(edge, source, target)
{
if (source != null && target != null &&
this.model.getValue(source) != null &&
this.model.getValue(target) != null)
{
if (target is not valid for source)
{
return 'Invalid Target';
}
}
// "Supercall"
return mxGraph.prototype.getEdgeValidationError.apply(this, arguments);
}Parameters
| edge | mxCell that represents the edge to validate. |
| source | mxCell that represents the source terminal. |
| target | mxCell that represents the target terminal. |
validateEdge
mxGraph.prototype.validateEdge = function( edge, source, target )
Hook method for subclassers to return an error message for the given edge and terminals. This implementation returns null.
Parameters
| edge | mxCell that represents the edge to validate. |
| source | mxCell that represents the source terminal. |
| target | mxCell that represents the target terminal. |
validateGraph
mxGraph.prototype.validateGraph = function( cell, context )
Validates the graph by validating each descendant of the given cell or the root of the model. Context is an object that contains the validation state for the complete validation run. The validation errors are attached to their cells using setCellWarning. This function returns true if no validation errors exist in the graph.
Paramters
| cell | Optional mxCell to start the validation recursion. Default is the graph root. |
| context | Object that represents the global validation state. |
getCellValidationError
mxGraph.prototype.getCellValidationError = function( cell )
Checks all multiplicities that cannot be enforced while the graph is being modified, namely, all multiplicities that require a minimum of 1 edge.
Parameters
| cell | mxCell for which the multiplicities should be checked. |
validateCell
mxGraph.prototype.validateCell = function( cell, context )
Hook method for subclassers to return an error message for the given cell and validation context. This implementation returns null. Any HTML breaks will be converted to linefeeds in the calling method.
Parameters
| cell | mxCell that represents the cell to validate. |
| context | Object that represents the global validation state. |
getBackgroundImage
mxGraph.prototype.getBackgroundImage = function()
Returns the backgroundImage as an mxImage.
setBackgroundImage
mxGraph.prototype.setBackgroundImage = function( image )
Sets the new backgroundImage.
Parameters
| image | New mxImage to be used for the background. |
getFoldingImage
mxGraph.prototype.getFoldingImage = function( state )
Returns the mxImage used to display the collapsed state of the specified cell state. This returns null for all edges.
convertValueToString
mxGraph.prototype.convertValueToString = function( cell )
Returns the textual representation for the given cell. This implementation returns the nodename or string-representation of the user object.
Example
The following returns the label attribute from the cells user object if it is an XML node.
graph.convertValueToString = function(cell)
{
return cell.getAttribute('label');
}See also: cellLabelChanged.
Parameters
| cell | mxCell whose textual representation should be returned. |
getLabel
mxGraph.prototype.getLabel = function( cell )
Returns a string or DOM node that represents the label for the given cell. This implementation uses convertValueToString if labelsVisible is true. Otherwise it returns an empty string.
To truncate a label to match the size of the cell, the following code can be used.
graph.getLabel = function(cell)
{
var label = mxGraph.prototype.getLabel.apply(this, arguments);
if (label != null && this.model.isVertex(cell))
{
var geo = this.getCellGeometry(cell);
if (geo != null)
{
var max = parseInt(geo.width / 8);
if (label.length > max)
{
label = label.substring(0, max)+'...';
}
}
}
return mxUtils.htmlEntities(label);
}A resize listener is needed in the graph to force a repaint of the label after a resize.
graph.addListener(mxEvent.RESIZE_CELLS, function(sender, evt)
{
var cells = evt.getProperty('cells');
for (var i = 0; i < cells.length; i++)
{
this.view.removeState(cells[i]);
}
});Parameters
| cell | mxCell whose label should be returned. |
isHtmlLabel
mxGraph.prototype.isHtmlLabel = function( cell )
Returns true if the label must be rendered as HTML markup. The default implementation returns htmlLabels.
Parameters
| cell | mxCell whose label should be displayed as HTML markup. |
isHtmlLabels
mxGraph.prototype.isHtmlLabels = function()
Returns htmlLabels.
setHtmlLabels
mxGraph.prototype.setHtmlLabels = function( value )
Sets htmlLabels.
isWrapping
mxGraph.prototype.isWrapping = function( cell )
This enables wrapping for HTML labels.
Returns true if no white-space CSS style directive should be used for displaying the given cells label. This implementation returns true if mxConstants.STYLE_WHITE_SPACE in the style of the given cell is ‘wrap’.
This is used as a workaround for IE ignoring the white-space directive of child elements if the directive appears in a parent element. It should be overridden to return true if a white-space directive is used in the HTML markup that represents the given cells label. In order for HTML markup to work in labels, isHtmlLabel must also return true for the given cell.
Example
graph.getLabel = function(cell)
{
var tmp = mxGraph.prototype.getLabel.apply(this, arguments); // "supercall"
if (this.model.isEdge(cell))
{
tmp = '<div style="width: 150px; white-space:normal;">'+tmp+'</div>';
}
return tmp;
}
graph.isWrapping = function(state)
{
return this.model.isEdge(state.cell);
}Makes sure no edge label is wider than 150 pixels, otherwise the content is wrapped. Note: No width must be specified for wrapped vertex labels as the vertex defines the width in its geometry.
Parameters
| state | mxCell whose label should be wrapped. |
isLabelClipped
mxGraph.prototype.isLabelClipped = function( cell )
Returns true if the overflow portion of labels should be hidden. If this returns true then vertex labels will be clipped to the size of the vertices. This implementation returns true if mxConstants.STYLE_OVERFLOW in the style of the given cell is ‘hidden’.
Parameters
| state | mxCell whose label should be clipped. |
getTooltip
mxGraph.prototype.getTooltip = function( state, node, x, y )
Returns the string or DOM node that represents the tooltip for the given state, node and coordinate pair. This implementation checks if the given node is a folding icon or overlay and returns the respective tooltip. If this does not result in a tooltip, the handler for the cell is retrieved from <selectionCellsHandler> and the optional getTooltipForNode method is called. If no special tooltip exists here then getTooltipForCell is used with the cell in the given state as the argument to return a tooltip for the given state.
Parameters
| state | mxCellState whose tooltip should be returned. |
| node | DOM node that is currently under the mouse. |
| x | X-coordinate of the mouse. |
| y | Y-coordinate of the mouse. |
getTooltipForCell
mxGraph.prototype.getTooltipForCell = function( cell )
Returns the string or DOM node to be used as the tooltip for the given cell. This implementation uses the cells getTooltip function if it exists, or else it returns convertValueToString for the cell.
Example
graph.getTooltipForCell = function(cell)
{
return 'Hello, World!';
}Replaces all tooltips with the string Hello, World!
Parameters
| cell | mxCell whose tooltip should be returned. |
getCursorForCell
mxGraph.prototype.getCursorForCell = function( cell )
Returns the cursor value to be used for the CSS of the shape for the given cell. This implementation returns null.
Parameters
| cell | mxCell whose cursor should be returned. |
getStartSize
mxGraph.prototype.getStartSize = function( swimlane )
Returns the start size of the given swimlane, that is, the width or height of the part that contains the title, depending on the horizontal style. The return value is an mxRectangle with either width or height set as appropriate.
Parameters
| swimlane | mxCell whose start size should be returned. |
getImage
mxGraph.prototype.getImage = function( state )
Returns the image URL for the given cell state. This implementation returns the value stored under mxConstants.STYLE_IMAGE in the cell style.
Parameters
| state | mxCellState whose image URL should be returned. |
getVerticalAlign
mxGraph.prototype.getVerticalAlign = function( state )
Returns the vertical alignment for the given cell state. This implementation returns the value stored under mxConstants.STYLE_VERTICAL_ALIGN in the cell style.
Parameters
| state | mxCellState whose vertical alignment should be returned. |
getIndicatorColor
mxGraph.prototype.getIndicatorColor = function( state )
Returns the indicator color for the given cell state. This implementation returns the value stored under mxConstants.STYLE_INDICATOR_COLOR in the cell style.
Parameters
| state | mxCellState whose indicator color should be returned. |
getIndicatorGradientColor
mxGraph.prototype.getIndicatorGradientColor = function( state )
Returns the indicator gradient color for the given cell state. This implementation returns the value stored under mxConstants.STYLE_INDICATOR_GRADIENTCOLOR in the cell style.
Parameters
| state | mxCellState whose indicator gradient color should be returned. |
getIndicatorShape
mxGraph.prototype.getIndicatorShape = function( state )
Returns the indicator shape for the given cell state. This implementation returns the value stored under mxConstants.STYLE_INDICATOR_SHAPE in the cell style.
Parameters
| state | mxCellState whose indicator shape should be returned. |
getIndicatorImage
mxGraph.prototype.getIndicatorImage = function( state )
Returns the indicator image for the given cell state. This implementation returns the value stored under mxConstants.STYLE_INDICATOR_IMAGE in the cell style.
Parameters
| state | mxCellState whose indicator image should be returned. |
getBorder
mxGraph.prototype.getBorder = function()
Returns the value of border.
setBorder
mxGraph.prototype.setBorder = function( value )
Sets the value of border.
Parameters
| value | Positive integer that represents the border to be used. |
isSwimlane
mxGraph.prototype.isSwimlane = function ( cell )
Returns true if the given cell is a swimlane in the graph. A swimlane is a container cell with some specific behaviour. This implementation checks if the shape associated with the given cell is a mxSwimlane.
Parameters
| cell | mxCell to be checked. |
isResizeContainer
mxGraph.prototype.isResizeContainer = function()
Returns resizeContainer.
setResizeContainer
mxGraph.prototype.setResizeContainer = function( value )
Sets resizeContainer.
Parameters
| value | Boolean indicating if the container should be resized. |
isEnabled
mxGraph.prototype.isEnabled = function()
Returns true if the graph is enabled.
setEnabled
mxGraph.prototype.setEnabled = function( value )
Specifies if the graph should allow any interactions. This implementation updates enabled.
Parameters
| value | Boolean indicating if the graph should be enabled. |
isEscapeEnabled
mxGraph.prototype.isEscapeEnabled = function()
Returns escapeEnabled.
setEscapeEnabled
mxGraph.prototype.setEscapeEnabled = function( value )
Sets escapeEnabled.
Parameters
| enabled | Boolean indicating if escape should be enabled. |
isInvokesStopCellEditing
mxGraph.prototype.isInvokesStopCellEditing = function()
Returns invokesStopCellEditing.
setInvokesStopCellEditing
mxGraph.prototype.setInvokesStopCellEditing = function( value )
Sets invokesStopCellEditing.
isEnterStopsCellEditing
mxGraph.prototype.isEnterStopsCellEditing = function()
Returns enterStopsCellEditing.
setEnterStopsCellEditing
mxGraph.prototype.setEnterStopsCellEditing = function( value )
Sets enterStopsCellEditing.
isCellLocked
mxGraph.prototype.isCellLocked = function( cell )
Returns true if the given cell may not be moved, sized, bended, disconnected, edited or selected. This implementation returns true for all vertices with a relative geometry if <locked> is false.
Parameters
| cell | mxCell whose locked state should be returned. |
isCellsLocked
mxGraph.prototype.isCellsLocked = function()
Returns true if the given cell may not be moved, sized, bended, disconnected, edited or selected. This implementation returns true for all vertices with a relative geometry if <locked> is false.
Parameters
| cell | mxCell whose locked state should be returned. |
setLocked
Sets if any cell may be moved, sized, bended, disconnected, edited or selected.
Parameters
| value | Boolean that defines the new value for cellsLocked. |
isCellCloneable
mxGraph.prototype.isCellCloneable = function( cell )
Returns true if the given cell is cloneable. This implementation returns isCellsCloneable for all cells unless a cell style specifies mxConstants.STYLE_CLONEABLE to be 0.
Parameters
| cell | Optional mxCell whose cloneable state should be returned. |
isCellsCloneable
mxGraph.prototype.isCellsCloneable = function()
Returns cellsCloneable, that is, if the graph allows cloning of cells by using control-drag.
setCellsCloneable
mxGraph.prototype.setCellsCloneable = function( value )
Specifies if the graph should allow cloning of cells by holding down the control key while cells are being moved. This implementation updates cellsCloneable.
Parameters
| value | Boolean indicating if the graph should be cloneable. |
canExportCell
mxGraph.prototype.canExportCell = function( cell )
Returns true if the given cell may be exported to the clipboard. This implementation returns exportEnabled for all cells.
Parameters
| cell | mxCell that represents the cell to be exported. |
canImportCell
mxGraph.prototype.canImportCell = function( cell )
Returns true if the given cell may be imported from the clipboard. This implementation returns importEnabled for all cells.
Parameters
| cell | mxCell that represents the cell to be imported. |
isCellSelectable
mxGraph.prototype.isCellSelectable = function( cell )
Returns true if the given cell is selectable. This implementation returns cellsSelectable.
To add a new style for making cells (un)selectable, use the following code.
mxGraph.prototype.isCellSelectable = function(cell)
{
var state = this.view.getState(cell);
var style = (state != null) ? state.style : this.getCellStyle(cell);
return this.isCellsSelectable() && !this.isCellLocked(cell) && style['selectable'] != 0;
};You can then use the new style as shown in this example.
graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30, 'selectable=0');
Parameters
| cell | mxCell whose selectable state should be returned. |
isCellsSelectable
mxGraph.prototype.isCellsSelectable = function()
Returns cellsSelectable.
setCellsSelectable
mxGraph.prototype.setCellsSelectable = function( value )
Sets cellsSelectable.
isCellDeletable
mxGraph.prototype.isCellDeletable = function( cell )
Returns true if the given cell is moveable. This returns cellsDeletable for all given cells if a cells style does not specify mxConstants.STYLE_DELETABLE to be 0.
Parameters
| cell | mxCell whose deletable state should be returned. |
isCellsDeletable
mxGraph.prototype.isCellsDeletable = function()
Returns cellsDeletable.
setCellsDeletable
mxGraph.prototype.setCellsDeletable = function( value )
Sets cellsDeletable.
Parameters
| value | Boolean indicating if the graph should allow deletion of cells. |
isLabelMovable
mxGraph.prototype.isLabelMovable = function( cell )
Returns true if the given edges’s label is moveable. This returns <movable> for all given cells if <isLocked> does not return true for the given cell.
Parameters
| cell | mxCell whose label should be moved. |
isCellRotatable
mxGraph.prototype.isCellRotatable = function( cell )
Returns true if the given cell is rotatable. This returns true for the given cell if its style does not specify mxConstants.STYLE_ROTATABLE to be 0.
Parameters
| cell | mxCell whose rotatable state should be returned. |
isCellMovable
mxGraph.prototype.isCellMovable = function( cell )
Returns true if the given cell is moveable. This returns cellsMovable for all given cells if isCellLocked does not return true for the given cell and its style does not specify mxConstants.STYLE_MOVABLE to be 0.
Parameters
| cell | mxCell whose movable state should be returned. |
isCellsMovable
mxGraph.prototype.isCellsMovable = function()
Returns cellsMovable.
isGridEnabled
mxGraph.prototype.isGridEnabled = function()
Returns gridEnabled as a boolean.
isPortsEnabled
mxGraph.prototype.isPortsEnabled = function()
Returns portsEnabled as a boolean.
getGridSize
mxGraph.prototype.getGridSize = function()
Returns gridSize.
setGridSize
mxGraph.prototype.setGridSize = function( value )
Sets gridSize.
getTolerance
mxGraph.prototype.getTolerance = function()
Returns tolerance.
setTolerance
mxGraph.prototype.setTolerance = function( value )
Sets tolerance.
isVertexLabelsMovable
mxGraph.prototype.isVertexLabelsMovable = function()
Returns vertexLabelsMovable.
setVertexLabelsMovable
mxGraph.prototype.setVertexLabelsMovable = function( value )
Sets vertexLabelsMovable.
isEdgeLabelsMovable
mxGraph.prototype.isEdgeLabelsMovable = function()
Returns edgeLabelsMovable.
isEdgeLabelsMovable
Sets edgeLabelsMovable.
isSwimlaneNesting
mxGraph.prototype.isSwimlaneNesting = function()
Returns swimlaneNesting as a boolean.
isSwimlaneSelectionEnabled
mxGraph.prototype.isSwimlaneSelectionEnabled = function()
Returns swimlaneSelectionEnabled as a boolean.
isMultigraph
mxGraph.prototype.isMultigraph = function()
Returns multigraph as a boolean.
isAllowLoops
mxGraph.prototype.isAllowLoops = function()
Returns allowLoops as a boolean.
isAllowDanglingEdges
mxGraph.prototype.isAllowDanglingEdges = function()
Returns allowDanglingEdges as a boolean.
isConnectableEdges
mxGraph.prototype.isConnectableEdges = function()
Returns connectableEdges as a boolean.
setCloneInvalidEdges
mxGraph.prototype.setCloneInvalidEdges = function( value )
Specifies if edges should be inserted when cloned but not valid wrt. getEdgeValidationError. If false such edges will be silently ignored.
Parameters
| value | Boolean indicating if cloned invalid edges should be inserted into the graph or ignored. |
isCloneInvalidEdges
mxGraph.prototype.isCloneInvalidEdges = function()
Returns cloneInvalidEdges as a boolean.
isDisconnectOnMove
mxGraph.prototype.isDisconnectOnMove = function()
Returns disconnectOnMove as a boolean.
isDropEnabled
mxGraph.prototype.isDropEnabled = function()
Returns dropEnabled as a boolean.
isSplitEnabled
mxGraph.prototype.isSplitEnabled = function()
Returns splitEnabled as a boolean.
isCellResizable
mxGraph.prototype.isCellResizable = function( cell )
Returns true if the given cell is resizable. This returns cellsResizable for all given cells if isCellLocked does not return true for the given cell and its style does not specify mxConstants.STYLE_RESIZABLE to be 0.
Parameters
| cell | mxCell whose resizable state should be returned. |
isCellsResizable
mxGraph.prototype.isCellsResizable = function()
Returns cellsResizable.
setCellsResizable
mxGraph.prototype.setCellsResizable = function( value )
Specifies if the graph should allow resizing of cells. This implementation updates cellsResizable.
Parameters
| value | Boolean indicating if the graph should allow resizing of cells. |
isTerminalPointMovable
mxGraph.prototype.isTerminalPointMovable = function( cell, source )
Returns true if the given terminal point is movable. This is independent from isCellConnectable and isCellDisconnectable and controls if terminal points can be moved in the graph if the edge is not connected. Note that it is required for this to return true to connect unconnected edges. This implementation returns true.
Parameters
| cell | mxCell whose terminal point should be moved. |
| source | Boolean indicating if the source or target terminal should be moved. |
isCellBendable
mxGraph.prototype.isCellBendable = function( cell )
Returns true if the given cell is bendable. This returns cellsBendable for all given cells if <isLocked> does not return true for the given cell and its style does not specify mxConstants.STYLE_BENDABLE to be 0.
Parameters
| cell | mxCell whose bendable state should be returned. |
isCellEditable
mxGraph.prototype.isCellEditable = function( cell )
Returns true if the given cell is editable. This returns cellsEditable for all given cells if isCellLocked does not return true for the given cell and its style does not specify mxConstants.STYLE_EDITABLE to be 0.
Parameters
| cell | mxCell whose editable state should be returned. |
isCellsEditable
mxGraph.prototype.isCellsEditable = function()
Returns cellsEditable.
setCellsEditable
mxGraph.prototype.setCellsEditable = function( value )
Specifies if the graph should allow in-place editing for cell labels. This implementation updates cellsEditable.
Parameters
| value | Boolean indicating if the graph should allow in-place editing. |
isCellDisconnectable
mxGraph.prototype.isCellDisconnectable = function( cell, terminal, source )
Returns true if the given cell is disconnectable from the source or target terminal. This returns isCellsDisconnectable for all given cells if isCellLocked does not return true for the given cell.
Parameters
| cell | mxCell whose disconnectable state should be returned. |
| terminal | mxCell that represents the source or target terminal. |
| source | Boolean indicating if the source or target terminal is to be disconnected. |
isCellsDisconnectable
mxGraph.prototype.isCellsDisconnectable = function()
Returns cellsDisconnectable.
setCellsDisconnectable
mxGraph.prototype.setCellsDisconnectable = function( value )
Sets cellsDisconnectable.
isValidSource
mxGraph.prototype.isValidSource = function( cell )
Returns true if the given cell is a valid source for new connections. This implementation returns true for all non-null values and is called by is called by isValidConnection.
Parameters
| cell | mxCell that represents a possible source or null. |
isValidTarget
mxGraph.prototype.isValidTarget = function( cell )
Returns isValidSource for the given cell. This is called by isValidConnection.
Parameters
| cell | mxCell that represents a possible target or null. |
isValidConnection
mxGraph.prototype.isValidConnection = function( source, target )
Returns true if the given target cell is a valid target for source. This is a boolean implementation for not allowing connections between certain pairs of vertices and is called by getEdgeValidationError. This implementation returns true if isValidSource returns true for the source and isValidTarget returns true for the target.
Parameters
| source | mxCell that represents the source cell. |
| target | mxCell that represents the target cell. |
setConnectable
mxGraph.prototype.setConnectable = function( connectable )
Specifies if the graph should allow new connections. This implementation updates mxConnectionHandler.enabled in <connectionHandler>.
Parameters
| connectable | Boolean indicating if new connections should be allowed. |
setTooltips
mxGraph.prototype.setTooltips = function ( enabled )
Specifies if tooltips should be enabled. This implementation updates mxTooltipHandler.enabled in <tooltipHandler>.
Parameters
| enabled | Boolean indicating if tooltips should be enabled. |
setPanning
mxGraph.prototype.setPanning = function( enabled )
Specifies if panning should be enabled. This implementation updates mxPanningHandler.panningEnabled in <panningHandler>.
Parameters
| enabled | Boolean indicating if panning should be enabled. |
isEditing
mxGraph.prototype.isEditing = function( cell )
Returns true if the given cell is currently being edited. If no cell is specified then this returns true if any cell is currently being edited.
Parameters
| cell | mxCell that should be checked. |
isAutoSizeCell
mxGraph.prototype.isAutoSizeCell = function( cell )
Returns true if the size of the given cell should automatically be updated after a change of the label. This implementation returns autoSizeCells or checks if the cell style does specify mxConstants.STYLE_AUTOSIZE to be 1.
Parameters
| cell | mxCell that should be resized. |
isAutoSizeCells
mxGraph.prototype.isAutoSizeCells = function()
Returns autoSizeCells.
setAutoSizeCells
mxGraph.prototype.setAutoSizeCells = function( value )
Specifies if cell sizes should be automatically updated after a label change. This implementation sets autoSizeCells to the given parameter.
Parameters
| value | Boolean indicating if cells should be resized automatically. |
isExtendParent
mxGraph.prototype.isExtendParent = function( cell )
Returns true if the parent of the given cell should be extended if the child has been resized so that it overlaps the parent. This implementation returns isExtendParents if the cell is not an edge.
Parameters
| cell | mxCell that has been resized. |
isExtendParents
mxGraph.prototype.isExtendParents = function()
Returns extendParents.
setExtendParents
mxGraph.prototype.setExtendParents = function( value )
Sets extendParents.
Parameters
| value | New boolean value for extendParents. |
isExtendParentsOnAdd
mxGraph.prototype.isExtendParentsOnAdd = function()
Returns extendParentsOnAdd.
setExtendParentsOnAdd
mxGraph.prototype.setExtendParentsOnAdd = function( value )
Sets extendParentsOnAdd.
Parameters
| value | New boolean value for extendParentsOnAdd. |
isConstrainChild
mxGraph.prototype.isConstrainChild = function( cell )
Returns true if the given cell should be kept inside the bounds of its parent according to the rules defined by getOverlap and isAllowOverlapParent. This implementation returns false for all children of edges and isConstrainChildren otherwise.
Parameters
| cell | mxCell that should be constrained. |
isConstrainChildren
mxGraph.prototype.isConstrainChildren = function()
Returns constrainChildren.
setConstrainChildren
mxGraph.prototype.setConstrainChildren = function( value )
Sets constrainChildren.
isConstrainChildren
Returns allowNegativeCoordinates.
setConstrainChildren
Sets allowNegativeCoordinates.
getOverlap
mxGraph.prototype.getOverlap = function( cell )
Returns a decimal number representing the amount of the width and height of the given cell that is allowed to overlap its parent. A value of 0 means all children must stay inside the parent, 1 means the child is allowed to be placed outside of the parent such that it touches one of the parents sides. If isAllowOverlapParent returns false for the given cell, then this method returns 0.
Parameters
| cell | mxCell for which the overlap ratio should be returned. |
isAllowOverlapParent
mxGraph.prototype.isAllowOverlapParent = function( cell )
Returns true if the given cell is allowed to be placed outside of the parents area.
Parameters
| cell | mxCell that represents the child to be checked. |
isCellFoldable
mxGraph.prototype.isCellFoldable = function( cell, collapse )
Returns true if the given cell is foldable. This implementation returns true if the cell has at least one child and its style does not specify mxConstants.STYLE_FOLDABLE to be 0.
Parameters
| cell | mxCell whose foldable state should be returned. |
isValidDropTarget
mxGraph.prototype.isValidDropTarget = function( cell, cells, evt )
Returns true if the given cell is a valid drop target for the specified cells. If the given cell is an edge, then <isSplitDropTarget> is used, else <isParentDropTarget> is used to compute the return value.
Parameters
| cell | mxCell that represents the possible drop target. |
| cells | mxCells that should be dropped into the target. |
| evt | Mouseevent that triggered the invocation. |
isSplitTarget
mxGraph.prototype.isSplitTarget = function( target, cells, evt )
Returns true if the given edge may be splitted into two edges with the given cell as a new terminal between the two.
Parameters
| target | mxCell that represents the edge to be splitted. |
| cells | mxCells that should split the edge. |
| evt | Mouseevent that triggered the invocation. |
getDropTarget
mxGraph.prototype.getDropTarget = function( cells, evt, cell )
Returns the given cell if it is a drop target for the given cells or the nearest ancestor that may be used as a drop target for the given cells. If the given array contains a swimlane and swimlaneNesting is false then this always returns null. If no cell is given, then the bottommost swimlane at the location of the given event is returned.
This function should only be used if isDropEnabled returns true.
Parameters
| cells | Array of mxCells which are to be dropped onto the target. |
| evt | Mouseevent for the drag and drop. |
| cell | mxCell that is under the mousepointer. |
getDefaultParent
mxGraph.prototype.getDefaultParent = function()
Returns defaultParent or mxGraphView.currentRoot or the first child child of mxGraphModel.root if both are null. The value returned by this function should be used as the parent for new cells (aka default layer).
setDefaultParent
mxGraph.prototype.setDefaultParent = function( cell )
Sets the defaultParent to the given cell. Set this to null to return the first child of the root in getDefaultParent.
getSwimlane
mxGraph.prototype.getSwimlane = function( cell )
Returns the nearest ancestor of the given cell which is a swimlane, or the given cell, if it is itself a swimlane.
Parameters
| cell | mxCell for which the ancestor swimlane should be returned. |
getSwimlaneAt
mxGraph.prototype.getSwimlaneAt = function ( x, y, parent )
Returns the bottom-most swimlane that intersects the given point (x, y) in the cell hierarchy that starts at the given parent.
Parameters
| x | X-coordinate of the location to be checked. |
| y | Y-coordinate of the location to be checked. |
| parent | mxCell that should be used as the root of the recursion. Default is defaultParent. |
getCellAt
mxGraph.prototype.getCellAt = function( x, y, parent, vertices, edges )
Returns the bottom-most cell that intersects the given point (x, y) in the cell hierarchy starting at the given parent. This will also return swimlanes if the given location intersects the content area of the swimlane. If this is not desired, then the hitsSwimlaneContent may be used if the returned cell is a swimlane to determine if the location is inside the content area or on the actual title of the swimlane.
Parameters
| x | X-coordinate of the location to be checked. |
| y | Y-coordinate of the location to be checked. |
| parent | mxCell that should be used as the root of the recursion. Default is defaultParent. |
| vertices | Optional boolean indicating if vertices should be returned. Default is true. |
| edges | Optional boolean indicating if edges should be returned. Default is true. |
intersects
mxGraph.prototype.intersects = function( state, x, y )
Returns the bottom-most cell that intersects the given point (x, y) in the cell hierarchy that starts at the given parent.
Parameters
| state | mxCellState that represents the cell state. |
| x | X-coordinate of the location to be checked. |
| y | Y-coordinate of the location to be checked. |
hitsSwimlaneContent
mxGraph.prototype.hitsSwimlaneContent = function( swimlane, x, y )
Returns true if the given coordinate pair is inside the content are of the given swimlane.
Parameters
| swimlane | mxCell that specifies the swimlane. |
| x | X-coordinate of the mouse event. |
| y | Y-coordinate of the mouse event. |
getChildVertices
mxGraph.prototype.getChildVertices = function( parent )
Returns the visible child vertices of the given parent.
Parameters
| parent | mxCell whose children should be returned. |
getChildEdges
mxGraph.prototype.getChildEdges = function( parent )
Returns the visible child edges of the given parent.
Parameters
| parent | mxCell whose child vertices should be returned. |
getChildCells
mxGraph.prototype.getChildCells = function( parent, vertices, edges )
Returns the visible child vertices or edges in the given parent. If vertices and edges is false, then all children are returned.
Parameters
| parent | mxCell whose children should be returned. |
| vertices | Optional boolean that specifies if child vertices should be returned. Default is false. |
| edges | Optional boolean that specifies if child edges should be returned. Default is false. |
getConnections
mxGraph.prototype.getConnections = function( cell, parent )
Returns all visible edges connected to the given cell without loops.
Parameters
| cell | mxCell whose connections should be returned. |
| parent | Optional parent of the opposite end for a connection to be returned. |
getIncomingEdges
mxGraph.prototype.getIncomingEdges = function( cell, parent )
Returns the visible incoming edges for the given cell. If the optional parent argument is specified, then only child edges of the given parent are returned.
Parameters
| cell | mxCell whose incoming edges should be returned. |
| parent | Optional parent of the opposite end for an edge to be returned. |
getOutgoingEdges
mxGraph.prototype.getOutgoingEdges = function( cell, parent )
Returns the visible outgoing edges for the given cell. If the optional parent argument is specified, then only child edges of the given parent are returned.
Parameters
| cell | mxCell whose outgoing edges should be returned. |
| parent | Optional parent of the opposite end for an edge to be returned. |
getEdges
mxGraph.prototype.getEdges = function( cell, parent, incoming, outgoing, includeLoops, recurse )
Returns the incoming and/or outgoing edges for the given cell. If the optional parent argument is specified, then only edges are returned where the opposite is in the given parent cell. If at least one of incoming or outgoing is true, then loops are ignored, if both are false, then all edges connected to the given cell are returned including loops.
Parameters
| cell | mxCell whose edges should be returned. |
| parent | Optional parent of the opposite end for an edge to be returned. |
| incoming | Optional boolean that specifies if incoming edges should be included in the result. Default is true. |
| outgoing | Optional boolean that specifies if outgoing edges should be included in the result. Default is true. |
| includeLoops | Optional boolean that specifies if loops should be included in the result. Default is true. |
| recurse | Optional boolean the specifies if the parent specified only need be an ancestral parent, true, or the direct parent, false. Default is false |
isValidAncestor
mxGraph.prototype.isValidAncestor = function( cell, parent, recurse )
Returns whether or not the specified parent is a valid ancestor of the specified cell, either direct or indirectly based on whether ancestor recursion is enabled.
Parameters
| cell | mxCell the possible child cell |
| parent | mxCell the possible parent cell |
| recurse | boolean whether or not to recurse the child ancestors |
getOpposites
mxGraph.prototype.getOpposites = function( edges, terminal, sources, targets )
Returns all distinct visible opposite cells for the specified terminal on the given edges.
Parameters
| edges | Array of mxCells that contains the edges whose opposite terminals should be returned. |
| terminal | Terminal that specifies the end whose opposite should be returned. |
| source | Optional boolean that specifies if source terminals should be included in the result. Default is true. |
| targets | Optional boolean that specifies if targer terminals should be included in the result. Default is true. |
getPointForEvent
mxGraph.prototype.getPointForEvent = function( evt, addOffset )
Returns an mxPoint representing the given event in the unscaled, non-translated coordinate space of <container> and applies the grid.
Parameters
| evt | Mousevent that contains the mouse pointer location. |
| addOffset | Optional boolean that specifies if the position should be offset by half of the gridSize. Default is true. |
getCells
mxGraph.prototype.getCells = function( x, y, width, height, parent, result )
Returns the children of the given parent that are contained in the given rectangle (x, y, width, height). The result is added to the optional result array, which is returned from the function. If no result array is specified then a new array is created and returned.
Parameters
| x | X-coordinate of the rectangle. |
| y | Y-coordinate of the rectangle. |
| width | Width of the rectangle. |
| height | Height of the rectangle. |
| parent | mxCell whose children should be checked. Default is defaultParent. |
| result | Optional array to store the result in. |
getCellsBeyond
mxGraph.prototype.getCellsBeyond = function( x0, y0, parent, rightHalfpane, bottomHalfpane )
Returns the children of the given parent that are contained in the halfpane from the given point (x0, y0) rightwards and/or downwards depending on rightHalfpane and bottomHalfpane.
Parameters
| x0 | X-coordinate of the origin. |
| y0 | Y-coordinate of the origin. |
| parent | Optional mxCell whose children should be checked. Default is defaultParent. |
| rightHalfpane | Boolean indicating if the cells in the right halfpane from the origin should be returned. |
| bottomHalfpane | Boolean indicating if the cells in the bottom halfpane from the origin should be returned. |
findTreeRoots
mxGraph.prototype.findTreeRoots = function( parent, isolate, invert )
Returns all children in the given parent which do not have incoming edges. If the result is empty then the with the greatest difference between incoming and outgoing edges is returned.
Parameters
| parent | mxCell whose children should be checked. |
| isolate | Optional boolean that specifies if edges should be ignored if the opposite end is not a child of the given parent cell. Default is false. |
| invert | Optional boolean that specifies if outgoing or incoming edges should be counted for a tree root. If false then outgoing edges will be counted. Default is false. |
traverse
mxGraph.prototype.traverse = function( vertex, directed, func, edge, visited )
Traverses the (directed) graph invoking the given function for each visited vertex and edge. The function is invoked with the current vertex and the incoming edge as a parameter. This implementation makes sure each vertex is only visited once. The function may return false if the traversal should stop at the given vertex.
Example
mxLog.show();
var cell = graph.getSelectionCell();
graph.traverse(cell, false, function(vertex, edge)
{
mxLog.debug(graph.getLabel(vertex));
});Parameters
| vertex | mxCell that represents the vertex where the traversal starts. |
| directed | Optional boolean indicating if edges should only be traversed from source to target. Default is true. |
| func | Visitor function that takes the current vertex and the incoming edge as arguments. The traversal stops if the function returns false. |
| edge | Optional mxCell that represents the incoming edge. This is null for the first step of the traversal. |
| visited | Optional array of cell paths for the visited cells. |
isCellSelected
mxGraph.prototype.isCellSelected = function( cell )
Returns true if the given cell is selected.
Parameters
| cell | mxCell for which the selection state should be returned. |
clearSelection
mxGraph.prototype.clearSelection = function()
Clears the selection using mxGraphSelectionModel.clear.
getSelectionCell
mxGraph.prototype.getSelectionCell = function()
Returns the first cell from the array of selected mxCells.
getSelectionCells
mxGraph.prototype.getSelectionCells = function()
Returns the array of selected mxCells.
setSelectionCell
mxGraph.prototype.setSelectionCell = function( cell )
Sets the selection cell.
Parameters
| cell | mxCell to be selected. |
setSelectionCells
mxGraph.prototype.setSelectionCells = function( cells )
Sets the selection cell.
Parameters
| cells | Array of mxCells to be selected. |
addSelectionCell
mxGraph.prototype.addSelectionCell = function( cell )
Adds the given cell to the selection.
Parameters
| cell | mxCell to be add to the selection. |
addSelectionCells
mxGraph.prototype.addSelectionCells = function( cells )
Adds the given cells to the selection.
Parameters
| cells | Array of mxCells to be added to the selection. |
removeSelectionCell
mxGraph.prototype.removeSelectionCell = function( cell )
Removes the given cell from the selection.
Parameters
| cell | mxCell to be removed from the selection. |
removeSelectionCells
mxGraph.prototype.removeSelectionCells = function( cells )
Removes the given cells from the selection.
Parameters
| cells | Array of mxCells to be removed from the selection. |
selectRegion
mxGraph.prototype.selectRegion = function( rect, evt )
Selects and returns the cells inside the given rectangle for the specified event.
Parameters
| rect | mxRectangle that represents the region to be selected. |
| evt | Mouseevent that triggered the selection. |
selectCell
mxGraph.prototype.selectCell = function( isNext, isParent, isChild )
Selects the next, parent, first child or previous cell, if all arguments are false.
Parameters
| isNext | Boolean indicating if the next cell should be selected. |
| isParent | Boolean indicating if the parent cell should be selected. |
| isChild | Boolean indicating if the first child cell should be selected. |
selectAll
mxGraph.prototype.selectAll = function( parent )
Selects all children of the given parent cell or the children of the default parent if no parent is specified. To select leaf vertices and/or edges use selectCells.
Parameters
| parent | Optional mxCell whose children should be selected. Default is defaultParent. |
selectCells
mxGraph.prototype.selectCells = function( vertices, edges, parent )
Selects all vertices and/or edges depending on the given boolean arguments recursively, starting at the given parent or the default parent if no parent is specified. Use selectAll to select all cells.
Parameters
| vertices | Boolean indicating if vertices should be selected. |
| edges | Boolean indicating if edges should be selected. |
| parent | Optional mxCell that acts as the root of the recursion. Default is defaultParent. |
selectCellForEvent
mxGraph.prototype.selectCellForEvent = function( cell, evt )
Selects the given cell by either adding it to the selection or replacing the selection depending on whether the given mouse event is a toggle event.
Parameters
| cell | mxCell to be selected. |
| evt | Optional mouseevent that triggered the selection. |
selectCellsForEvent
mxGraph.prototype.selectCellsForEvent = function( cells, evt )
Selects the given cells by either adding them to the selection or replacing the selection depending on whether the given mouse event is a toggle event.
Parameters
| cells | Array of mxCells to be selected. |
| evt | Optional mouseevent that triggered the selection. |
createHandler
mxGraph.prototype.createHandler = function( state )
Creates a new handler for the given cell state. This implementation returns a new mxEdgeHandler of the corresponding cell is an edge, otherwise it returns an mxVertexHandler.
Parameters
| state | mxCellState whose handler should be created. |
addMouseListener
mxGraph.prototype.addMouseListener = function( listener )
Adds a listener to the graph event dispatch loop. The listener must implement the mouseDown, mouseMove and mouseUp methods as shown in the mxMouseEvent class.
Parameters
| listener | Listener to be added to the graph event listeners. |
updateMouseEvent
mxGraph.prototype.updateMouseEvent = function( me )
Sets the graphX and graphY properties if the given mxMouseEvent if required.
fireMouseEvent
mxGraph.prototype.fireMouseEvent = function( evtName, me, sender )
Dispatches the given event in the graph event dispatch loop. Possible event names are mxEvent.MOUSE_DOWN, mxEvent.MOUSE_MOVE and mxEvent.MOUSE_UP. All listeners are invoked for all events regardless of the consumed state of the event.
Parameters
| evtName | String that specifies the type of event to be dispatched. |
| me | mxMouseEvent to be fired. |
| sender | Optional sender argument. Default is this. |