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

Summary

mxGraph	Extends mxEventSource to implement a graph component for the browser.
Events
mxEvent.ROOT	Fires if the root in the model has changed.
mxEvent.ALIGN_CELLS	Fires between begin- and endUpdate in alignCells.
mxEvent.FLIP_EDGE	Fires between begin- and endUpdate in flipEdge.
mxEvent.ORDER_CELLS	Fires between begin- and endUpdate in orderCells.
mxEvent.CELLS_ORDERED	Fires between begin- and endUpdate in cellsOrdered.
mxEvent.GROUP_CELLS	Fires between begin- and endUpdate in groupCells.
mxEvent.UNGROUP_CELLS	Fires between begin- and endUpdate in ungroupCells.
mxEvent.REMOVE_CELLS_FROM_PARENT	Fires between begin- and endUpdate in removeCellsFromParent.
mxEvent.ADD_CELLS	Fires between begin- and endUpdate in addCells.
mxEvent.CELLS_ADDED	Fires between begin- and endUpdate in cellsAdded.
mxEvent.REMOVE_CELLS	Fires between begin- and endUpdate in removeCells.
mxEvent.CELLS_REMOVED	Fires between begin- and endUpdate in cellsRemoved.
mxEvent.SPLIT_EDGE	Fires between begin- and endUpdate in splitEdge.
mxEvent.TOGGLE_CELLS	Fires between begin- and endUpdate in toggleCells.
mxEvent.FOLD_CELLS	Fires between begin- and endUpdate in foldCells.
mxEvent.CELLS_FOLDED	Fires between begin- and endUpdate in cellsFolded.
mxEvent.UPDATE_CELL_SIZE	Fires between begin- and endUpdate in updateCellSize.
mxEvent.RESIZE_CELLS	Fires between begin- and endUpdate in resizeCells.
mxEvent.CELLS_RESIZED	Fires between begin- and endUpdate in cellsResized.
mxEvent.MOVE_CELLS	Fires between begin- and endUpdate in moveCells.
mxEvent.CELLS_MOVED	Fires between begin- and endUpdate in cellsMoved.
mxEvent.CONNECT_CELL	Fires between begin- and endUpdate in connectCell.
mxEvent.CELL_CONNECTED	Fires between begin- and endUpdate in cellConnected.
mxEvent.REFRESH	Fires after refresh was executed.
mxEvent.CLICK	Fires in click after a click event.
mxEvent.DOUBLE_CLICK	Fires in dblClick after a double click.
mxEvent.GESTURE	Fires in fireGestureEvent after a touch gesture.
mxEvent.TAP_AND_HOLD	Fires in tapAndHold if a tap and hold event was detected.
mxEvent.FIRE_MOUSE_EVENT	Fires in fireMouseEvent before the mouse listeners are invoked.
mxEvent.SIZE	Fires after sizeDidChange was executed.
mxEvent.START_EDITING	Fires before the in-place editor starts in startEditingAtCell.
mxEvent.LABEL_CHANGED	Fires between begin- and endUpdate in cellLabelChanged.
mxEvent.ADD_OVERLAY	Fires after an overlay is added in addCellOverlay.
mxEvent.REMOVE_OVERLAY	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.
nativeDoubleClickEnabled	Specifies if native double click events should be deteced.
doubleTapEnabled	Specifies if double taps on touch-based devices should be handled as a double click.
doubleTapTimeout	Specifies the timeout for double taps and non-native double clicks.
doubleTapTolerance	Specifies the tolerance for double taps and double clicks in quirks mode.
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.
tapAndHoldEnabled	Specifies if tap and hold should be used for starting connections on touch-based devices.
tapAndHoldDelay	Specifies the time for a tap and hold.
tapAndHoldInProgress	True if the timer for tap and hold events is running.
tapAndHoldValid	True as long as the timer is running and the touch events stay within the given <tapAndHoldTolerance>.
initialTouchX	Holds the x-coordinate of the intial touch event for tap and hold.
initialTouchY	Holds the y-coordinate of the intial touch event for tap and hold.
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.
autoSizeCellsOnAdd	Specifies if autoSize style should be applied when cells are added.
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.
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 if a child should be constrained inside the parent bounds after a move of the child.
constrainChildrenOnResize	Specifies if children should be constrained according to the constrainChildren switch if cells are resized.
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.
extendParentsOnAdd	Specifies if parents should be extended according to the extendParents switch if cells are added.
recursiveResize	Specifies the return value for isRecursiveResize.
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.
tapAndHold	Handles the mxMouseEvent by highlighting the mxCellState.
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.
updatePageBreaks	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.
autoSizeCell	Removes the given cells from the graph including all connected edges if includeEdges is true.
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.
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.
cellResized	Resizes the parents recursively so that they contain the complete area of the resized child cell.
resizeChildCells	Resizes the child cells of the given cell for the given new geometry with respect to the current geometry of the cell.
constrainChildCells	Constrains the children of the given cell using constrainChild.
scaleCell	Scales the points, position and size of the given cell according to the given vertical and horizontal scaling factors.
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.
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.
getCursorForMouseEvent	Returns the cursor value to be used for the CSS of the shape for the given event.
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.
isExtendParentsOnAdd	Returns extendParentsOnAdd.
setExtendParentsOnAdd	Sets extendParentsOnAdd.
isRecursiveResize	Returns recursiveResize.
setRecursiveResize	Sets recursiveResize.
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.
setConstrainChildrenOnResize	Sets constrainChildrenOnResize.
isConstrainChildrenOnResize	Returns constrainChildrenOnResize.
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 and returned the event.
getStateForEvent	Returns the state for the given touch event.
isEventIgnored	Returns true if the event should be ignored in fireMouseEvent.
isSyntheticEventIgnored	Hook for ignoring synthetic mouse events after touchend in Firefox.
isEventSourceIgnored	Returns true if the event should be ignored in fireMouseEvent.
fireMouseEvent	Dispatches the given event in the graph event dispatch loop.
consumeMouseEvent	Destroys the graph and all its resources.
fireGestureEvent	Dispatches a mxEvent.GESTURE event.
destroy	Destroys the graph and all its resources.

Events

mxEvent.ROOT

Fires if the root in the model has changed. This event has no properties.

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.FLIP_EDGE

Fires between begin- and endUpdate in flipEdge. The <code>edge</code> property contains the edge passed to flipEdge.

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.ADD_CELLS

Fires between begin- and endUpdate in addCells. The <code>cells</code>, <code>parent</code>, <code>index</code>, <code>source</code> and <code>target</code> properties contain the respective arguments that were passed to addCells.

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.SPLIT_EDGE

Fires between begin- and endUpdate in splitEdge. The <code>edge</code> property contains the edge to be splitted, the <code>cells</code>, <code>newEdge</code>, <code>dx</code> and <code>dy</code> properties contain the respective arguments that were passed to splitEdge.

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.FOLD_CELLS

Fires between begin- and endUpdate in foldCells. The <code>collapse</code>, <code>cells</code> and <code>recurse</code> properties contain the respective arguments that were passed to foldCells.

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.MOVE_CELLS

Fires between begin- and endUpdate in moveCells. The <code>cells</code>, <code>dx</code>, <code>dy</code>, <code>clone</code>, <code>target</code> and <code>event</code> properties contain the respective arguments that were passed to moveCells.

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.GESTURE

Fires in fireGestureEvent after a touch gesture. The <code>event</code> property contains the original gesture end event and the <code>cell</code> property contains the optional cell associated with the gesture.

mxEvent.TAP_AND_HOLD

Fires in tapAndHold if a tap and hold event was detected. The <code>event</code> property contains the initial touch event and the <code>cell</code> property contains the cell under the mouse or null if the background was clicked.

mxEvent.FIRE_MOUSE_EVENT

Fires in fireMouseEvent before the mouse listeners are invoked. The <code>eventName</code> property contains the event name and the <code>event</code> property contains the mxMouseEvent.

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, the <code>old</code> property contains the old value 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.

EMPTY_ARRAY

mxGraph.prototype.EMPTY_ARRAY

Immutable empty array instance.

Variables

mouseListeners

mxGraph.prototype.mouseListeners

Holds the mouse event listeners. See fireMouseEvent.

isMouseDown

mxGraph.prototype.isMouseDown

Holds the state of the mouse button.

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.

renderHint

mxGraph.prototype.renderHint

RenderHint as it was passed to the constructor.

dialect

mxGraph.prototype.dialect

Dialect to be used for drawing the graph. Possible values are all constants in mxConstants with a DIALECT-prefix.

gridSize

mxGraph.prototype.gridSize

Specifies the grid size. Default is 10.

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.

nativeDoubleClickEnabled

Specifies if native double click events should be deteced. Default is false for IE in quirks mode or IE10+, true for all other browsers. The doubleTapTimeout value is used to specify the double click speed.

doubleTapEnabled

mxGraph.prototype.doubleTapEnabled

Specifies if double taps on touch-based devices should be handled as a double click. Default is true.

doubleTapTimeout

mxGraph.prototype.doubleTapTimeout

Specifies the timeout for double taps and non-native double clicks. Default is 500 ms.

doubleTapTolerance

mxGraph.prototype.doubleTapTolerance

Specifies the tolerance for double taps and double clicks in quirks mode. Default is 25 pixels.

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

mxGraph.prototype.lastTouchTime

Holds the time of the last touch event for double click detection.

tapAndHoldEnabled

mxGraph.prototype.tapAndHoldEnabled

Specifies if tap and hold should be used for starting connections on touch-based devices. Default is true.

tapAndHoldDelay

mxGraph.prototype.tapAndHoldDelay

Specifies the time for a tap and hold. Default is 500 ms.

tapAndHoldInProgress

mxGraph.prototype.tapAndHoldInProgress

True if the timer for tap and hold events is running.

tapAndHoldValid

mxGraph.prototype.tapAndHoldValid

True as long as the timer is running and the touch events stay within the given <tapAndHoldTolerance>.

initialTouchX

mxGraph.prototype.initialTouchX

Holds the x-coordinate of the intial touch event for tap and hold.

initialTouchY

mxGraph.prototype.initialTouchY

Holds the y-coordinate of the intial touch event for tap and hold.

tolerance

mxGraph.prototype.tolerance

Tolerance for a move to be handled as a single click. Default is 4 pixels.

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.

alternateEdgeStyle

mxGraph.prototype.alternateEdgeStyle

Specifies the alternate edge style to be used if the main control point on an edge is being doubleclicked. 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();

pageVisible

mxGraph.prototype.pageVisible

Specifies if the background page should be visible. Default is false. Not yet implemented.

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.

pageBreakColor

mxGraph.prototype.pageBreakColor

Specifies the color for page breaks. Default is ‘gray’.

pageBreakDashed

mxGraph.prototype.pageBreakDashed

Specifies the page breaks should be dashed. Default is true.

minPageBreakDist

mxGraph.prototype.minPageBreakDist

Specifies the minimum distance for page breaks to be visible. Default is 20 (in pixels).

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.

pageScale

mxGraph.prototype.pageScale

Specifies the scale of the background page. Default is 1.5. Not yet implemented.

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.

foldingEnabled

mxGraph.prototype.foldingEnabled

Specifies if folding (collapse and expand via an image icon in the graph should be enabled). 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.

splitEnabled

mxGraph.prototype.splitEnabled

Specifies if dropping onto edges should be enabled. Default is true.

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.

cellsDisconnectable

mxGraph.prototype.cellsDisconnectable

Specifies the return value for <isCellDisconntable>. 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.

autoSizeCellsOnAdd

mxGraph.prototype.autoSizeCellsOnAdd

Specifies if autoSize style should be applied when cells are added. 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.

ignoreScrollbars

mxGraph.prototype.ignoreScrollbars

Specifies if the graph should automatically scroll regardless of the scrollbars.

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.

resizeContainer

mxGraph.prototype.resizeContainer

Specifies if the container should be resized to the graph size when the graph size has changed. Default is false.

border

mxGraph.prototype.border

Border to be added to the bottom and right side when the container is being resized after the graph has been changed. Default is 0.

keepEdgesInForeground

mxGraph.prototype.keepEdgesInForeground

Specifies if edges should appear in the foreground regardless of their order in the model. If keepEdgesInForeground and keepEdgesInBackground are both true then the normal order is applied. Default is false.

keepEdgesInBackground

mxGraph.prototype.keepEdgesInBackground

Specifies if edges should appear in the background regardless of their order in the model. If keepEdgesInForeground and keepEdgesInBackground are both true then the normal order is applied. Default is false.

allowNegativeCoordinates

mxGraph.prototype.allowNegativeCoordinates

Specifies if negative coordinates for vertices are allowed. Default is true.

constrainChildren

mxGraph.prototype.constrainChildren

Specifies if a child should be constrained inside the parent bounds after a move of the child. Default is true.

constrainChildrenOnResize

mxGraph.prototype.constrainChildrenOnResize

Specifies if children should be constrained according to the constrainChildren switch if cells are resized. Default is false for backwards compatiblity.

extendParents

mxGraph.prototype.extendParents

Specifies if a parent should contain the child bounds after a resize of the child. Default is true. This has precedence over constrainChildren.

extendParentsOnAdd

mxGraph.prototype.extendParentsOnAdd

Specifies if parents should be extended according to the extendParents switch if cells are added. Default is true.

extendParentsOnAdd

Specifies if parents should be extended according to the extendParents switch if cells are added. Default is false for backwards compatiblity.

recursiveResize

mxGraph.prototype.recursiveResize

Specifies the return value for isRecursiveResize. Default is false for backwards compatiblity.

collapseToPreferredSize

mxGraph.prototype.collapseToPreferredSize

Specifies if the cell size should be changed to the preferred size when a cell is first collapsed. Default is true.

zoomFactor

mxGraph.prototype.zoomFactor

Specifies the factor used for zoomIn and zoomOut. Default is 1.2 (120%).

keepSelectionVisibleOnZoom

mxGraph.prototype.keepSelectionVisibleOnZoom

Specifies if the viewport should automatically contain the selection cells after a zoom operation. Default is false.

centerZoom

mxGraph.prototype.centerZoom

Specifies if the zoom operations should go into the center of the actual diagram rather than going from top, left. Default is true.

resetViewOnRootChange

mxGraph.prototype.resetViewOnRootChange

Specifies if the scale and translate should be reset if the root changes in the model. Default is true.

resetEdgesOnResize

mxGraph.prototype.resetEdgesOnResize

Specifies if edge control points should be reset after the resize of a connected cell. Default is false.

resetEdgesOnMove

mxGraph.prototype.resetEdgesOnMove

Specifies if edge control points should be reset after the move of a connected cell. Default is false.

resetEdgesOnConnect

mxGraph.prototype.resetEdgesOnConnect

Specifies if edge control points should be reset after the the edge has been reconnected. Default is true.

allowLoops

mxGraph.prototype.allowLoops

Specifies if loops (aka self-references) are allowed. Default is false.

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.

multigraph

mxGraph.prototype.multigraph

Specifies if multiple edges in the same direction between the same pair of vertices are allowed. Default is true.

connectableEdges

mxGraph.prototype.connectableEdges

Specifies if edges are connectable. Default is false. This overrides the connectable field in edges.

allowDanglingEdges

mxGraph.prototype.allowDanglingEdges

Specifies if edges with disconnected terminals are allowed in the graph. Default is true.

cloneInvalidEdges

mxGraph.prototype.cloneInvalidEdges

Specifies if edges that are cloned should be validated and only inserted if they are valid. Default is true.

disconnectOnMove

mxGraph.prototype.disconnectOnMove

Specifies if edges should be disconnected from their terminals when they are moved. Default is true.

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.

swimlaneSelectionEnabled

mxGraph.prototype.swimlaneSelectionEnabled

Specifies if swimlanes should be selectable via the content if the mouse is released. Default is true.

swimlaneNesting

mxGraph.prototype.swimlaneNesting

Specifies if nesting of swimlanes is allowed. Default is true.

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.

imageBundles

mxGraph.prototype.imageBundles

Holds the list of image bundles.

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.

panDx

mxGraph.prototype.panDx

Current horizontal panning value. Default is 0.

panDy

mxGraph.prototype.panDy

Current vertical panning value. Default is 0.

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’.

collapseExpandResource

mxGraph.prototype.collapseExpandResource

Specifies the resource key for the tooltip on the collapse/expand icon. If the resource for this key does not exist then the value is used as the tooltip. Default is ‘collapse-expand’.

init

mxGraph.prototype.init = function( container )

Initializes the <container> and creates the respective datastructures.

Parameters

container

DOM node that will contain the graph display.

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.

setSelectionModel

mxGraph.prototype.setSelectionModel = function( selectionModel )

Sets the <mxSelectionModel> that contains the selection.

getSelectionCellsForChanges

mxGraph.prototype.getSelectionCellsForChanges = function( changes )

Returns the cells to be selected for the given array of changes.

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.

getRemovedCellsForChanges

mxGraph.prototype.getRemovedCellsForChanges = function( changes )

Returns the cells that have been removed from the model.

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.

Overlays

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.

In-place editing

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.

stopEditing

mxGraph.prototype.stopEditing = function( cancel )

Stops the current editing.

Parameters

cancel

Boolean that specifies if the current editing value should be stored.

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.

Event processing

escape

mxGraph.prototype.escape = function( evt )

Processes an escape keystroke.

Parameters

evt	Mouseevent that represents the keystroke.

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.

tapAndHold

mxGraph.prototype.tapAndHold = function( me )

Handles the mxMouseEvent by highlighting the mxCellState.

Parameters

me	mxMouseEvent that represents the touch event.
state	Optional mxCellState that is associated with the event.

scrollPointToVisible

mxGraph.prototype.scrollPointToVisible = function( x,
y,
extend,
border )

Scrolls the graph to the given point, extending the graph container if specified.

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.

sizeDidChange

mxGraph.prototype.sizeDidChange = function()

Called when the size of the graph has changed. This implementation fires a <size> event after updating the clipping region of the SVG element in SVG-bases browsers.

doResizeContainer

mxGraph.prototype.doResizeContainer = function( width,
height )

Resizes the container for the given graph width and height.

updatePageBreaks

mxGraph.prototype.updatePageBreaks = function( visible,
width,
height )

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.

Cell styles

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.

postProcessCellStyle

mxGraph.prototype.postProcessCellStyle = function( style )

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

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.

Cell alignment and orientation

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.

Order

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.

Grouping

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.

getCellsForGroup

mxGraph.prototype.getCellsForGroup = function( cells )

Returns the cells with the same parent as the first cell in the given array.

getBoundsForGroup

mxGraph.prototype.getBoundsForGroup = function( group,
children,
border )

Returns the bounds to be used for the given group and children.

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.

Cell cloning, insertion and removal

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.

autoSizeCell

mxGraph.prototype.autoSizeCell = function( cell,
recurse )

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

cell	mxCells to be resized.
recurse	Optional boolean which specifies if all descendants should be autosized. Default is true.

removeCells

mxGraph.prototype.removeCells = function( cells,
includeEdges )

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.

Cell visibility

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.

Folding

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.

addAllEdges

mxGraph.prototype.addAllEdges = function( cells )

Returns an array with the given cells and all edges that are connected to a cell or one of its descendants.

getAllEdges

mxGraph.prototype.getAllEdges = function( cells )

Returns all edges connected to the given cells or its descendants.

Cell sizing

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. To implement a minimum width, add a new style eg. minWidth in the vertex and override this method as follows.

var graphGetPreferredSizeForCell = graph.getPreferredSizeForCell;
graph.getPreferredSizeForCell = function(cell)
{
  var result = graphGetPreferredSizeForCell.apply(this, arguments);
  var style = this.getCellStyle(cell);

  if (style['minWidth'] > 0)
  {
    result.width = Math.max(style['minWidth'], result.width);
  }

  return result;
};

Parameters

cell	mxCell for which the preferred size should be returned.

resizeCell

mxGraph.prototype.resizeCell = function( cell,
bounds,
recurse )

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,
recurse )

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,
recurse )

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.
recurse	Optional boolean that specifies if the children should be resized.

cellResized

mxGraph.prototype.cellResized = function( cell,
bounds,
ignoreRelative,
recurse )

Resizes the parents recursively so that they contain the complete area of the resized child cell.

Parameters

cell	mxCell whose bounds should be changed.
bounds	mxRectangles that represent the new bounds.
ignoreRelative	Boolean that indicates if relative cells should be ignored.
recurse	Optional boolean that specifies if the children should be resized.

resizeChildCells

mxGraph.prototype.resizeChildCells = function( cell,
newGeo )

Resizes the child cells of the given cell for the given new geometry with respect to the current geometry of the cell.

Parameters

cell	mxCell that has been resized.
newGeo	mxGeometry that represents the new bounds.

constrainChildCells

mxGraph.prototype.constrainChildCells = function( cell )

Constrains the children of the given cell using constrainChild.

Parameters

cell	mxCell that has been resized.

scaleCell

mxGraph.prototype.scaleCell = function( cell,
dx,
dy,
recurse )

Scales the points, position and size of the given cell according to the given vertical and horizontal scaling factors.

Parameters

cell	mxCell whose geometry should be scaled.
dx	Horizontal scaling factor.
dy	Vertical scaling factor.
recurse	Boolean indicating if the child cells should be scaled.

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.

Cell moving

importCells

mxGraph.prototype.importCells = function( cells,
dx,
dy,
target,
evt )

Clones and inserts the given cells into the graph using the move method and returns the inserted cells. This shortcut is used if cells are inserted via datatransfer.

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,
extend )

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.

translateCell

mxGraph.prototype.translateCell = function( cell,
dx,
dy )

Translates the geometry of the given cell and stores the new, translated geometry in the model as an atomic change.

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.

Cell connecting and connection constraints

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.

Drilldown

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.

exitGroup

mxGraph.prototype.exitGroup = function()

Changes the current root to the next valid root in the displayed cell hierarchy.

home

mxGraph.prototype.home = function()

Uses the root of the model as the root of the displayed cell hierarchy and selects the previous root.

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.

Graph display

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.

zoomActual

mxGraph.prototype.zoomActual = function()

Resets the zoom and panning in the view.

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.

isCloneEvent

mxGraph.prototype.isCloneEvent = function( evt )

Returns true if the given event is a clone event. This implementation returns true if control is pressed.

isToggleEvent

mxGraph.prototype.isToggleEvent = function( evt )

Returns true if the given event is a toggle event. This implementation returns true if the meta key (Cmd) is pressed on Macs or if control is pressed on any other platform.

isGridEnabledEvent

mxGraph.prototype.isGridEnabledEvent = function( evt )

Returns true if the given mouse event should be aligned to the grid.

isConstrainedEvent

mxGraph.prototype.isConstrainedEvent = function( evt )

Returns true if the given mouse event should be aligned to the grid.

Validation

validationAlert

mxGraph.prototype.validationAlert = function( message )

Displays the given validation error in a dialog. This implementation uses mxUtils.alert.

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.

Graph appearance

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');
}

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.

getCursorForMouseEvent

mxGraph.prototype.getCursorForMouseEvent = function( me )

Returns the cursor value to be used for the CSS of the shape for the given event. This implementation calls getCursorForCell.

Parameters

me	mxMouseEvent whose cursor 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.

Graph behaviour

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.

getCloneableCells

mxGraph.prototype.getCloneableCells = function( cells )

Returns the cells which may be exported in the given array of cells.

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.

getExportableCells

mxGraph.prototype.getExportableCells = function( cells )

Returns the cells which may be exported in the given array of cells.

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.

getImportableCells

mxGraph.prototype.getImportableCells = function( cells )

Returns the cells which may be imported in the given array of cells.

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.

getDeletableCells

mxGraph.prototype.getDeletableCells = function( cells )

Returns the cells which may be exported in the given array of cells.

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.

getMovableCells

mxGraph.prototype.getMovableCells = function( cells )

Returns the cells which are movable in the given array of cells.

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.

setCellsMovable

mxGraph.prototype.setCellsMovable = function( value )

Specifies if the graph should allow moving of cells. This implementation updates <cellsMsovable>.

Parameters

value

Boolean indicating if the graph should allow moving of cells.

isGridEnabled

mxGraph.prototype.isGridEnabled = function()

Returns gridEnabled as a boolean.

setGridEnabled

mxGraph.prototype.setGridEnabled = function( value )

Specifies if the grid should be enabled.

Parameters

value

Boolean indicating if the grid should be enabled.

isPortsEnabled

mxGraph.prototype.isPortsEnabled = function()

Returns portsEnabled as a boolean.

setPortsEnabled

mxGraph.prototype.setPortsEnabled = function( value )

Specifies if the ports should be enabled.

Parameters

value

Boolean indicating if the ports should be enabled.

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.

setSwimlaneNesting

mxGraph.prototype.setSwimlaneNesting = function( value )

Specifies if swimlanes can be nested by drag and drop. This is only taken into account if dropEnabled is true.

Parameters

value

Boolean indicating if swimlanes can be nested.

isSwimlaneSelectionEnabled

mxGraph.prototype.isSwimlaneSelectionEnabled = function()

Returns swimlaneSelectionEnabled as a boolean.

setSwimlaneSelectionEnabled

mxGraph.prototype.setSwimlaneSelectionEnabled = function( value )

Specifies if swimlanes should be selected if the mouse is released over their content area.

Parameters

value

Boolean indicating if swimlanes content areas should be selected when the mouse is released over them.

isMultigraph

mxGraph.prototype.isMultigraph = function()

Returns multigraph as a boolean.

setMultigraph

mxGraph.prototype.setMultigraph = function( value )

Specifies if the graph should allow multiple connections between the same pair of vertices.

Parameters

value

Boolean indicating if the graph allows multiple connections between the same pair of vertices.

isAllowLoops

mxGraph.prototype.isAllowLoops = function()

Returns allowLoops as a boolean.

setAllowDanglingEdges

mxGraph.prototype.setAllowDanglingEdges = function( value )

Specifies if dangling edges are allowed, that is, if edges are allowed that do not have a source and/or target terminal defined.

Parameters

value

Boolean indicating if dangling edges are allowed.

isAllowDanglingEdges

mxGraph.prototype.isAllowDanglingEdges = function()

Returns allowDanglingEdges as a boolean.

setConnectableEdges

mxGraph.prototype.setConnectableEdges = function( value )

Specifies if edges should be connectable.

Parameters

value

Boolean indicating if edges should be connectable.

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.

setAllowLoops

mxGraph.prototype.setAllowLoops = function( value )

Specifies if loops are allowed.

Parameters

value

Boolean indicating if loops are allowed.

isDisconnectOnMove

mxGraph.prototype.isDisconnectOnMove = function()

Returns disconnectOnMove as a boolean.

setDisconnectOnMove

mxGraph.prototype.setDisconnectOnMove = function( value )

Specifies if edges should be disconnected when moved. (Note: Cloned edges are always disconnected.)

Parameters

value

Boolean indicating if edges should be disconnected when moved.

isDropEnabled

mxGraph.prototype.isDropEnabled = function()

Returns dropEnabled as a boolean.

setDropEnabled

mxGraph.prototype.setDropEnabled = function( value )

Specifies if the graph should allow dropping of cells onto or into other cells.

Parameters

dropEnabled

Boolean indicating if the graph should allow dropping of cells into other cells.

isSplitEnabled

mxGraph.prototype.isSplitEnabled = function()

Returns splitEnabled as a boolean.

setSplitEnabled

mxGraph.prototype.setSplitEnabled = function( value )

Specifies if the graph should allow dropping of cells onto or into other cells.

Parameters

dropEnabled

Boolean indicating if the graph should allow dropping of cells into other cells.

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.

isCellsBendable

mxGraph.prototype.isCellsBendable = function()

Returns <cellsBenadable>.

setCellsBendable

mxGraph.prototype.setCellsBendable = function( value )

Specifies if the graph should allow bending of edges. This implementation updates <bendable>.

Parameters

value

Boolean indicating if the graph should allow bending of edges.

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.

isConnectable

mxGraph.prototype.isConnectable = function( connectable )

Returns true if the <connectionHandler> is enabled.

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. To update the size of cells when the cells are added, set autoSizeCellsOnAdd to true.

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.

isExtendParentsOnAdd

Returns extendParentsOnAdd.

setExtendParentsOnAdd

Sets extendParentsOnAdd.

Parameters

value

New boolean value for extendParentsOnAdd.

isRecursiveResize

mxGraph.prototype.isRecursiveResize = function()

Returns recursiveResize.

setRecursiveResize

mxGraph.prototype.setRecursiveResize = function( value )

Sets recursiveResize.

Parameters

value

New boolean value for recursiveResize.

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.

setConstrainChildrenOnResize

mxGraph.prototype.setConstrainChildrenOnResize = function( value )

Sets constrainChildrenOnResize.

isConstrainChildrenOnResize

mxGraph.prototype.isConstrainChildrenOnResize = function()

Returns constrainChildrenOnResize.

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.

getFoldableCells

mxGraph.prototype.getFoldableCells = function( cells,
collapse )

Returns the cells which are movable in the given array of cells.

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 splitEnabled is true then this returns isSplitTarget for the given arguments else it returns true if the cell is not collapsed and its child count is greater than 0.

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.

Cell retrieval

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.

getEdgesBetween

mxGraph.prototype.getEdgesBetween = function( source,
target,
directed )

Returns the edges between the given source and target. This takes into account collapsed and invisible cells and returns the connected edges as displayed on the screen.

Parameters

source - target - directed -

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.

Selection

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.

isSelectionEmpty

mxGraph.prototype.isSelectionEmpty = function()

Returns true if the selection is empty.

clearSelection

mxGraph.prototype.clearSelection = function()

Clears the selection using mxGraphSelectionModel.clear.

getSelectionCount

mxGraph.prototype.getSelectionCount = function()

Returns the number of selected cells.

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.

selectNextCell

mxGraph.prototype.selectNextCell = function()

Selects the next cell.

selectPreviousCell

mxGraph.prototype.selectPreviousCell = function()

Selects the previous cell.

selectParentCell

mxGraph.prototype.selectParentCell = function()

Selects the parent cell.

selectChildCell

mxGraph.prototype.selectChildCell = function()

Selects the first child cell.

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.

selectVertices

mxGraph.prototype.selectVertices = function( parent )

Select all vertices inside the given parent or the default parent.

selectVertices

Select all vertices inside the given parent or the default parent.

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.

Selection state

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.

Graph events

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.

removeMouseListener

mxGraph.prototype.removeMouseListener = function( listener )

Removes the specified graph listener.

Parameters

listener

Listener to be removed from the graph event listeners.

updateMouseEvent

mxGraph.prototype.updateMouseEvent = function( me )

Sets the graphX and graphY properties if the given mxMouseEvent if required and returned the event.

getStateForEvent

Returns the state for the given touch event.

isEventIgnored

mxGraph.prototype.isEventIgnored = function( evtName,
me,
sender )

Returns true if the event should be ignored in fireMouseEvent.

isSyntheticEventIgnored

mxGraph.prototype.isSyntheticEventIgnored = function( evtName,
me,
sender )

Hook for ignoring synthetic mouse events after touchend in Firefox.

isEventSourceIgnored

mxGraph.prototype.isEventSourceIgnored = function( evtName,
me )

Returns true if the event should be ignored in fireMouseEvent. This implementation returns true for select, option and input (if not of type checkbox, radio, button, submit or file) event sources if the event is not a mouse event or a left mouse button press event.

Parameters

evtName	The name of the event.
me	mxMouseEvent that should be ignored.

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.

consumeMouseEvent

mxGraph.prototype.consumeMouseEvent = function( evtName,
me,
sender )

Destroys the graph and all its resources.

fireGestureEvent

mxGraph.prototype.fireGestureEvent = function( evt,
cell )

Dispatches a mxEvent.GESTURE event. The following example will resize the cell under the mouse based on the scale property of the native touch event.

graph.addListener(mxEvent.GESTURE, function(sender, eo)
{
  var evt = eo.getProperty('event');
  var state = graph.view.getState(eo.getProperty('cell'));

  if (graph.isEnabled() && graph.isCellResizable(state.cell) && Math.abs(1 - evt.scale) > 0.2)
  {
    var scale = graph.view.scale;
    var tr = graph.view.translate;

    var w = state.width * evt.scale;
    var h = state.height * evt.scale;
    var x = state.x - (w - state.width) / 2;
    var y = state.y - (h - state.height) / 2;

    var bounds = new mxRectangle(graph.snap(x / scale) - tr.x,
         graph.snap(y / scale) - tr.y, graph.snap(w / scale), graph.snap(h / scale));
    graph.resizeCell(state.cell, bounds);
    eo.consume();
  }
});

Parameters

evt	Gestureend event that represents the gesture.
cell	Optional mxCell associated with the gesture.

destroy

mxGraph.prototype.destroy = function()

Destroys the graph and all its resources.