Optional DOM node that acts as a container for the graph. If this is null then the container can be initialized later using init.
Optional mxGraphModel that constitutes the graph data.
Optional string that specifies the display accuracy and performance. Default is mxConstants.DIALECT_MIXEDHTML (for IE).
Optional mxStylesheet to be used in the graph.
Specifies if panning via panGraph should be allowed to implement autoscroll if no scrollbars are available in scrollPointToVisible. To enable panning inside the container, near the edge, set mxPanningManager.border to a positive value.
Specifies if edges with disconnected terminals are allowed in the graph.
Specifies if loops (aka self-references) are allowed.
Specifies if negative coordinates for vertices are allowed.
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.
Specifies the alternate edge style to be used if the main control point on an edge is being double clicked.
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. See 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.
If you need this to work without scrollbars then set ignoreScrollbars to true. Please consult the ignoreScrollbars for details. In general, with no scrollbars, the use of allowAutoPanning is recommended.
Specifies if the graph should automatically update the cell size after an edit. This is used in isAutoSizeCell.
Specifies if autoSize style should be applied when cells are added.
Specifies the mxImage to be returned by getBackgroundImage.
Border to be added to the bottom and right side when the container is being resized after the graph has been changed.
Holds the mxCellEditor that is used as the in-place editing.
Holds the mxCellRenderer for rendering the cells in the graph.
Specifies the return value for isCellsBendable.
Specifies the return value for isCellCloneable.
Specifies the return value for isCellDeletable.
Specifies the return value for isCellsDisconnectable.
Specifies the return value for isCellEditable.
Specifies the return value for isCellLocked.
Specifies the return value for isCellMovable.
Specifies the return value for isCellsResizable.
Specifies the return value for isCellsSelectable.
Specifies if the zoom operations should go into the center of the actual diagram rather than going from top, left.
Specifies if edges that are cloned should be validated and only inserted if they are valid.
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.
Specifies if the cell size should be changed to the preferred size when a cell is first collapsed.
Specifies the mxImage to indicate a collapsed state. Default value is mxClient.imageBasePath + '/collapsed.gif'
Specifies if edges are connectable. This overrides the connectable field in edges.
Specifies if a child should be constrained inside the parent bounds after a move or resize of the child.
Specifies if child cells with relative geometries should be constrained
inside the parent bounds, if constrainChildren is true, and/or the
maximumGraphBounds.
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.
Creates and returns a new mxTooltipHandler to be used in this graph.
mxEdgeStyle to be used for loops. This is a fallback for loops if the mxConstants.STYLE_LOOP is undefined.
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.
Specifies the default parent to be used to insert new cells. This is used in getDefaultParent.
Dialect to be used for drawing the graph. Possible values are all constants in mxConstants with a DIALECT-prefix.
Specifies if edges should be disconnected from their terminals when they are moved.
Specifies if double taps on touch-based devices should be handled as a double click.
Specifies the timeout in milliseconds for double taps and non-native double clicks.
Specifies the tolerance in pixels for double taps and double clicks in quirks mode.
Specifies the return value for isDropEnabled.
Specifies the return value for edges in isLabelMovable.
Specifies the return value for isEnabled.
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.
Specifies if mxKeyHandler should invoke escape when the escape key is pressed.
Variable: eventListeners
Holds the event names and associated listeners in an array. The array contains the event name followed by the respective listener for each registered listener.
Variable: eventSource
Optional source for events. Default is null.
Variable: eventsEnabled
Specifies if events can be fired. Default is true.
Specifies the mxImage to indicate a expanded state. Default value is mxClient.imageBasePath + '/expanded.gif'
Specifies the return value for canExportCell.
Specifies if a parent should contain the child bounds after a resize of the child. This has precedence over constrainChildren.
Specifies if parents should be extended according to the extendParents switch if cells are added.
Specifies if parents should be extended according to the extendParents switch if cells are added.
Specifies if folding (collapse and expand via an image icon in the graph should be enabled).
Specifies if the grid is enabled. This is used in snap.
Specifies the grid size.
Specifies the return value for isHtmlLabel.
Specifies if the graph should automatically scroll regardless of the
scrollbars. This will scroll the container using positive values for
scroll positions (ie usually only rightwards and downwards). To avoid
possible conflicts with panning, set translateToScrollPosition to true.
Holds the list of image bundles.
Specifies the return value for canImportCell.
Holds the x-coordinate of the initial touch event for tap and hold.
Holds the y-coordinate of the initial touch event for tap and hold.
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.
Holds the state of the mouse button.
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.
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.
Specifies if the viewport should automatically contain the selection cells after a zoom operation.
Specifies if labels should be visible. This is used in getLabel. Default is true.
Holds the time of the last touch event for double click detection.
Holds the x-coordinate of the last touch event for double tap detection.
Specifies the maximum scale to be applied in fit. Set this to null to allow any value.
mxRectangle that specifies the maximum size of the container if
resizeContainer is true.
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.
Specifies the minimum scale to be applied in fit. Set this to null to allow any value.
Specifies the minimum distance in pixels for page breaks to be visible.
mxRectangle that specifies the minimum size of the container if
resizeContainer is true.
mxRectangle that specifies the minimum size of the graph. This is ignored if the graph container has no scrollbars.
Holds the mxGraphModel that contains the cells to be displayed.
Holds the mouse event listeners. See fireMouseEvent.
Specifies if multiple edges in the same direction between the same pair of vertices are allowed.
An array of mxMultiplicity describing the allowed connections in a graph.
Specifies if native double click events should be detected.
Specifies the color for page breaks.
Specifies the page breaks should be dashed.
Specifies if a dashed line should be drawn between multiple pages. If you change this value while a graph is being displayed then you should call sizeDidChange to force an update of the display.
Specifies the page format for the background page.
This is used as the default in mxPrintPreview and for painting the background page
if pageVisible is true and the page breaks if pageBreaksVisible is true.
Specifies the scale of the background page. Not yet implemented.
Specifies if the background page should be visible. Not yet implemented.
Current horizontal panning value.
Current vertical panning value.
Specifies if ports are enabled. This is used in cellConnected to update the respective style.
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.
Specifies the return value for isRecursiveResize.
RenderHint as it was passed to the constructor.
Specifies if edge control points should be reset after the the edge has been reconnected.
Specifies if edge control points should be reset after the move of a connected cell.
Specifies if edge control points should be reset after the resize of a connected cell.
Specifies if the scale and translate should be reset if the root changes in the model.
Specifies if the container should be resized to the graph size when the graph size has changed.
Holds the mxGraphSelectionModel that models the current selection.
Specifies if dropping onto edges should be enabled. This is ignored if
dropEnabled is false. If enabled, it will call splitEdge to carry
out the drop operation.
Holds the mxStylesheet that defines the appearance of the cells.
Use the following code to read a stylesheet into an existing graph.
The attribute used to find the color for the indicator if the indicator color is set to 'swimlane'.
Specifies if nesting of swimlanes is allowed.
Specifies if swimlanes should be selectable via the content if the mouse is released.
Specifies the time in milliseconds for a tap and hold.
Specifies if tap and hold should be used for starting connections on touch-based devices.
True if the timer for tap and hold events is running.
True as long as the timer is running and the touch events
stay within the given {@link tapAndHoldTolerance}.
Specifies if autoscrolling should be carried out via mxPanningManager even if the container has scrollbars. This disables scrollPointToVisible and uses mxPanningManager instead. If this is true then autoExtend is disabled. It should only be used with a scroll buffer or when scollbars are visible and scrollable in all directions.
Tolerance in pixels for a move to be handled as a single click.
Specifies if the graph should automatically convert the current scroll position to a translate in the graph view when a mouseUp event is received. This can be used to avoid conflicts when using autoScroll and ignoreScrollbars with no scrollbars in the container.
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.
Specifies the return value for vertices in isLabelMovable.
Holds the mxGraphView that caches the mxCellStates for the cells.
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.
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.
mxCell to be inserted into the given parent.
mxCell that represents the new parent. If no parent is given then the default parent is used.
Optional index to insert the cells at. Default is 'to append'.
Optional mxCell that represents the source terminal.
Optional mxCell that represents the target terminal.
Adds an mxCellOverlay for the specified cell. This method fires an {@link addoverlay} event and returns the new mxCellOverlay.
mxCell to add the overlay for.
mxCellOverlay to be added for the cell.
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.
Array of mxCell to be inserted.
mxCell that represents the new parent. If no parent is given then the default parent is used.
Optional index to insert the cells at. Default is 'to append'.
Optional source mxCell for all inserted cells.
Optional target mxCell for all inserted cells.
Optional boolean indicating of cells should be kept at
their absolute position. Default is false.
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.
mxCell to be inserted into the given parent.
mxCell that represents the new parent. If no parent is given then the default parent is used.
Optional mxCell that represents the source terminal.
Optional mxCell that represents the target terminal.
Optional index to insert the cells at. Default is 'to append'.
Adds the specified mxImageBundle.
Function: addListener
Binds the specified function to the given event name. If no event name is given, then the listener is registered for all events.
The parameters of the listener are the sender and an
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.
Listener to be added to the graph event listeners.
Aligns the given cells vertically or horizontally according to the given alignment using the optional parameter as the coordinate.
Specifies the alignment. Possible values are all constants in mxConstants with an ALIGN prefix.
Array of mxCell to be aligned.
Optional coordinate for the alignment.
Returns true if the given cell may be exported to the clipboard. This implementation returns exportEnabled for all cells.
Returns true if the given cell may be imported from the clipboard. This implementation returns importEnabled for all cells.
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.
mxCell whose terminal should be updated.
mxCell that represents the new terminal to be used.
Boolean indicating if the new terminal is the source or target.
mxConnectionConstraint to be used for this connection.
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);
};
mxCell whose label should be changed.
New label to be assigned.
Boolean that specifies if cellSizeUpdated should be called.
Resizes the parents recursively so that they contain the complete area of the resized child cell.
mxCell whose bounds should be changed.
{@link mxRectangles} that represent the new bounds.
Boolean that indicates if relative cells should be ignored.
Optional boolean that specifies if the children should be resized.
Updates the size of the given cell in the model using getPreferredSizeForCell to get the new size.
Adds the specified cells to the given parent. This method fires mxEvent.CELLS_ADDED while the transaction is in progress.
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.
Array of mxCell whose collapsed state should be set.
Boolean indicating the collapsed state to be assigned.
Boolean indicating if the collapsed state of all descendants should be set.
Optional boolean indicating of isCellFoldable should be
checked. Default is false.
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.
Moves the given cells to the front or back. This method fires mxEvent.CELLS_ORDERED while the transaction is in progress.
Array of mxCell whose order should be changed.
Boolean that specifies if the cells should be moved to back.
Removes the given cells from the model. This method fires mxEvent.CELLS_REMOVED while the transaction is in progress.
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);
}
}
}
}
});
Array of mxCell whose bounds should be changed.
Array of {@link mxRectangles} that represent the new bounds.
Optional boolean that specifies if the children should be resized.
Centers the graph in the container.
Optional boolean that specifies if the graph should be centered
horizontally. Default is true.
Optional boolean that specifies if the graph should be centered
vertically. Default is true.
Optional float that specifies the horizontal center. Default is 0.5.
Optional float that specifies the vertical center. Default is 0.5.
Removes all {@link 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.
Optional mxCell that represents the root of the subtree to remove the overlays from. Default is the root in the model.
Clears the selection using mxGraphSelectionModel.clear.
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();
}
});
mxMouseEvent that represents the single click.
Returns the clone for the given cell. Uses cloneCells.
mxCell to be cloned.
Optional boolean that specifies if invalid edges
should be cloned. Default is true.
Optional mapping for existing clones.
Optional boolean indicating if the position of the cells should
be updated to reflect the lost parent cell. Default is false.
Returns the clones for the given cells. The clones are created recursively using mxGraphModel.cloneCells. 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.
Array of mxCell to be cloned.
Optional boolean that specifies if invalid edges
should be cloned. Default is true.
Optional mapping for existing clones.
Optional boolean indicating if the position of the cells should
be updated to reflect the lost parent cell. Default is false.
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.
mxCell whose terminal should be updated.
mxCell that represents the new terminal to be used.
Boolean indicating if the new terminal is the source or target.
Optional mxConnectionConstraint to be used for this connection.
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.
mxCell which should be constrained.
Specifies if the size should be changed first. Default is true.
Constrains the children of the given cell using constrainChild.
Consumes the given mxMouseEvent if it's a touchStart event.
Returns the textual representation for the given cell. This implementation returns the nodename or string-representation of the user object.
The following returns the label attribute from the cells user object if it is an XML node.
Creates a new mxCellEditor to be used in this graph.
Creates a new mxCellRenderer to be used in this graph.
Creates and returns a new mxConnectionHandler to be used in this graph.
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.
Hooks to create a new mxEdgeHandler for the given mxCellState.
mxCellState to create the handler for.
Hooks to create a new mxEdgeSegmentHandler for the given mxCellState.
mxCellState to create the handler for.
Hooks to create a new mxElbowEdgeHandler for the given mxCellState.
mxCellState to create the handler for.
Creates and returns a new mxGraphHandler to be used in this graph.
Creates a new mxGraphView to be used in this graph.
Hook for creating the group cell to hold the given array of mxCell if no group cell was given to the {@link 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;
};
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.
mxCellState whose handler should be created.
Creates the tooltip-, panning-, connection- and graph-handler (in this order). This is called in the constructor before init is called.
Creates and returns a new mxPanningHandler to be used in this graph.
Creates and returns an mxPanningManager.
Creates and returns a new mxPopupMenuHandler to be used in this graph.
Creates a new mxGraphSelectionModel to be used in this graph.
Creates a new mxGraphSelectionModel to be used in this graph.
Creates and returns a new mxTooltipHandler to be used in this graph.
Hook method that creates the new vertex for insertVertex.
Hooks to create a new mxVertexHandler for the given mxCellState.
mxCellState to create the handler for.
Processes a doubleclick on an optional cell and fires a {@link dblclick} event. The event is fired initially. If the graph is enabled and the event has not been consumed, then {@link 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 and consume the
// event to prevent in-place editing from start
});
Mouseevent that represents the doubleclick.
Optional mxCell under the mousepointer.
Destroys the graph and all its resources.
Resizes the container for the given graph width and height.
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.
Processes an escape keystroke.
Mouseevent that represents the keystroke.
Changes the current root to the next valid root in the displayed cell hierarchy.
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.
mxCell whose children should be checked.
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.
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.
Function: fireEvent
Dispatches the given event to the listeners which are registered for the event. The sender argument is optional. The current execution scope ("this") is used for the listener invocation (see <mxUtils.bind>).
Example:
(code) fireEvent(new mxEventObject("eventName", key1, val1, .., keyN, valN)) (end)
Parameters:
evt -
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();
}
});
Gestureend event that represents the gesture.
Optional mxCell associated with the gesture.
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.
String that specifies the type of event to be dispatched.
mxMouseEvent to be fired.
Optional sender argument. Default is this.
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();
To fit and center the graph, the following code can be used.
var margin = 2;
var max = 3;
var bounds = graph.getGraphBounds();
var cw = graph.container.clientWidth - margin;
var ch = graph.container.clientHeight - margin;
var w = bounds.width / graph.view.scale;
var h = bounds.height / graph.view.scale;
var s = Math.min(max, Math.min(cw / w, ch / h));
graph.view.scaleAndTranslate(s,
(margin + cw - w * s) / (2 * s) - bounds.x / graph.view.scale,
(margin + ch - h * s) / (2 * s) - bounds.y / graph.view.scale);
Optional number that specifies the border. Default is border.
Optional boolean that specifies if the translate should be
changed. Default is false.
Optional margin in pixels. Default is 0.
Optional boolean that specifies if the scale should be set or
just returned. Default is true.
Optional boolean that specifies if the width should be
ignored. Default is false.
Optional boolean that specifies if the height should be
ignored. Default is false.
Optional maximum height.
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 style = this.getCurrentCellStyle(edge);
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]);
}
};
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.
Boolean indicating the collapsed state to be assigned.
Optional boolean indicating if the collapsed state of all
descendants should be set. Default is false.
Array of mxCell whose collapsed state should be set. If null is specified then the foldable selection cells are used.
Optional boolean indicating of isCellFoldable should be
checked. Default is false.
Optional native event that triggered the invocation.
Returns the actual start size of the given swimlane taking into account direction and horizontal and vertial flip styles. The start size is returned as an mxRectangle where top, left, bottom, right start sizes are returned as x, y, height and width, respectively.
mxCell whose start size should be returned.
Optional boolean that specifies if cell state should be ignored.
Returns an array of all {@link mxConnectionConstraints} for the given terminal. If the shape of the given terminal is a {@link mxStencilShape} then the constraints of the corresponding mxStencil are returned.
mxCellState that represents the terminal.
Boolean that specifies if the terminal is the source or target.
Returns the backgroundImage as an mxImage.
Returns the value of border.
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.
Returns the bounding box for the given array of mxCell. The bounding box for each cell and its descendants is computed using mxGraphView.getBoundingBox.
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));
}
Array of mxCell whose bounds should be returned.
Specifies if edge bounds should be included by computing
the bounding box for all points in geometry. Default is false.
Returns the bounds to be used for the given group and children.
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.
X-coordinate of the location to be checked.
Y-coordinate of the location to be checked.
mxCell that should be used as the root of the recursion. Default is current root of the view or the root of the model.
Optional boolean indicating if vertices should be returned.
Default is true.
Optional boolean indicating if edges should be returned. Default
is true.
Optional function that returns true if cell should be ignored. The function is passed the cell state and the x and y parameter.
Returns the scaled, translated bounds for the given cell. See mxGraphView.getBounds for arrays.
mxCell whose bounds should be returned.
Optional boolean that specifies if the bounds of
the connected edges should be included. Default is false.
Optional boolean that specifies if the bounds
of all descendants should be included. Default is false.
Returns the mxRectangle inside which a cell is to be kept.
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.
Returns the array of {@link mxCellOverlays} for the given cell or null, if no overlays are defined.
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 an empty object, if no 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.
Checks all multiplicities that cannot be enforced while the graph is being modified, namely, all multiplicities that require a minimum of 1 edge.
Returns the child vertices and edges of the given parent that are contained in the given rectangle. The result is added to the optional result array, which is returned. If no result array is specified then a new array is created and returned.
X-coordinate of the rectangle.
Y-coordinate of the rectangle.
Width of the rectangle.
Height of the rectangle.
mxCell that should be used as the root of the recursion. Default is current root of the view or the root of the model.
Optional array to store the result in.
Returns the children of the given parent that are contained in the halfpane from the given point (x0, y0) rightwards or downwards depending on rightHalfpane and bottomHalfpane.
X-coordinate of the origin.
Y-coordinate of the origin.
Optional mxCell whose children should be checked. Default is defaultParent.
Boolean indicating if the cells in the right halfpane from the origin should be returned.
Boolean indicating if the cells in the bottom halfpane from the origin should be returned.
Returns the visible child vertices or edges in the given parent. If vertices and edges is false, then all children are returned.
mxCell whose children should be returned.
Optional boolean that specifies if child vertices should
be returned. Default is false.
Optional boolean that specifies if child edges should
be returned. Default is false.
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.
Returns an mxConnectionConstraint that describes the given connection point. This result can then be passed to getConnectionPoint.
mxCellState that represents the edge.
mxCellState that represents the terminal.
Boolean indicating if the terminal is the source or target.
Returns the nearest point in the list of absolute points or the center of the opposite terminal.
mxCellState that represents the vertex.
mxConnectionConstraint that represents the connection point constraint as returned by getConnectionConstraint.
Returns the style for the given cell from the cell state, if one exists, or using getCellStyle.
mxCell whose style should be returned as an array.
Optional boolean that specifies if the cell state should be ignored.
Returns the current root of the displayed cell hierarchy. This is a shortcut to mxGraphView.currentRoot in view.
Returns the cursor value to be used for the CSS of the shape for the given event. This implementation calls getCursorForCell.
mxMouseEvent whose cursor should be returned.
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).
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.
Array of mxCell which are to be dropped onto the target.
Mouseevent for the drag and drop.
mxCell that is under the mousepointer.
Optional boolean to indicate of cells will be cloned.
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 getEdgeValidationError.apply(this, arguments);
}
mxCell that represents the edge to validate.
mxCell that represents the source terminal.
mxCell that represents the target terminal.
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.
mxCell whose edges should be returned.
Optional parent of the opposite end for an edge to be returned.
Optional boolean that specifies if incoming edges should
be included in the result. Default is true.
Optional boolean that specifies if outgoing edges should
be included in the result. Default is true.
Optional boolean that specifies if loops should be
included in the result. Default is true.
Optional boolean the specifies if the parent specified only need be an ancestral parent, true, or the direct parent, false. Default is false
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.
mxCell for which the initial editing value should be returned.
Optional mouse event that triggered the editor.
Function: getEventSource
Returns
Returns the mxCellState to be used when firing the mouse event for the given state. This implementation returns the given state.
mxCellState - State whose event source should be returned.
Returns the mxImage used to display the collapsed state of the specified cell state. This returns null for all edges.
Returns the bounds of the visible graph. Shortcut to mxGraphView.getGraphBounds. See also: getBoundingBoxFromGeometry.
Returns gridSize.
Returns the image URL for the given cell state. This implementation returns the value stored under mxConstants.STYLE_IMAGE in the cell style.
mxCellState whose image URL should be returned.
Searches all imageBundles for the specified key and returns the value for the first match or null if the key is not found.
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.
mxCell whose incoming edges should be returned.
Optional parent of the opposite end for an edge to be returned.
Returns the indicator color for the given cell state. This implementation returns the value stored under mxConstants.STYLE_INDICATOR_COLOR in the cell style.
mxCellState whose indicator color should be returned.
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.
mxCellState whose indicator gradient color should be returned.
Returns the indicator image for the given cell state. This implementation returns the value stored under mxConstants.STYLE_INDICATOR_IMAGE in the cell style.
mxCellState whose indicator image should be returned.
Returns the indicator shape for the given cell state. This implementation returns the value stored under mxConstants.STYLE_INDICATOR_SHAPE in the cell style.
mxCellState whose indicator shape should be returned.
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 = 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]);
}
});
Returns the bounds inside which the diagram should be kept as an mxRectangle.
Returns the mxGraphModel that contains the cells.
Returns all distinct visible opposite cells for the specified terminal on the given edges.
Array of mxCell that contains the edges whose opposite terminals should be returned.
Terminal that specifies the end whose opposite should be returned.
Optional boolean that specifies if source terminals should be
included in the result. Default is true.
Optional boolean that specifies if targer terminals should be
included in the result. Default is true.
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.
mxCell whose outgoing edges should be returned.
Optional parent of the opposite end for an edge to be returned.
Returns the constraint used to connect to the outline of the given state.
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.
Returns the preferred size of the background page if preferPageSize is true.
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;
};
mxCell for which the preferred size should be returned.
Optional maximum text width for word wrapping.
Returns the cells to be selected for the given array of changes.
Optional function that takes a change and returns true if the change should be ignored.
Returns the number of selected cells.
Returns the mxGraphSelectionModel that contains the selection.
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.
mxCell whose start size should be returned.
Optional boolean that specifies if cell state should be ignored.
Returns the state for the given touch event.
Returns the mxStylesheet that defines the style.
Returns the bottom-most swimlane that intersects the given point (x, y) in the cell hierarchy that starts at the given parent.
X-coordinate of the location to be checked.
Y-coordinate of the location to be checked.
mxCell that should be used as the root of the recursion. Default is defaultParent.
Returns the direction for the given swimlane style.
Returns tolerance.
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.
mxCellState whose tooltip should be returned.
DOM node that is currently under the mouse.
X-coordinate of the mouse.
Y-coordinate of the mouse.
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.
Returns the vertical alignment for the given cell state. This implementation returns the value stored under mxConstants.STYLE_VERTICAL_ALIGN in the cell style.
mxCellState whose vertical alignment should be returned.
Returns the mxGraphView that contains the {@link mxCellStates}.
Called when the graph model changes. Invokes processChange on each item of the given array to update the view accordingly.
Array that contains the individual changes.
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.
mxCell that represents the target group. If null is specified
then a new group is created using createGroupCell.
Optional integer that specifies the border between the child
area and the group bounds. Default is 0.
Optional array of mxCell to be grouped. If null is specified
then the selection cells are used.
Uses the root of the model as the root of the displayed cell hierarchy and selects the previous root.
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.
Array of mxCell to be imported.
Integer that specifies the x-coordinate of the vector. Default is 0.
Integer that specifies the y-coordinate of the vector. Default is 0.
mxCell that represents the new parent of the cells.
Mouseevent that triggered the invocation.
Optional mapping for existing clones.
Initializes the container and creates the respective datastructures.
DOM node that will contain the graph display.
mxCell that specifies the parent of the new edge.
Optional string that defines the Id of the new edge.
JavaScript object to be used as the user object.
mxCell that defines the source of the edge.
mxCell that defines the target of the edge.
Optional string that defines the cell style.
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.
mxCell that specifies the parent of the new vertex.
Optional string that defines the Id of the new vertex.
Object to be used as the user object.
Integer that defines the x coordinate of the vertex.
Integer that defines the y coordinate of the vertex.
Integer that defines the width of the vertex.
Integer that defines the height of the vertex.
Optional string that defines the cell style.
Optional boolean that specifies if the geometry is relative.
Default is false.
Returns the bottom-most cell that intersects the given point (x, y) in the cell hierarchy that starts at the given parent.
mxCellState that represents the cell state.
X-coordinate of the location to be checked.
Y-coordinate of the location to be checked.
Returns allowDanglingEdges as a boolean.
Returns allowLoops as a boolean.
Returns allowNegativeCoordinates.
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.
Returns autoSizeCells.
Returns true if the given cell is bendable. This returns cellsBendable for all given cells if {@link isLocked} does not return true for the given cell and its style does not specify mxConstants.STYLE_BENDABLE to be 0.
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.
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.
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.
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.
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.
mxCell whose disconnectable state should be returned.
mxCell that represents the source or target terminal.
Boolean indicating if the source or target terminal is to be disconnected.
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.
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.
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.
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.
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.
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.
isCellSelectable = function(cell)
{
var style = this.getCurrentCellStyle(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');
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.
Returns {@link cellsBenadable}.
Returns cellsCloneable, that is, if the graph allows cloning of cells by using control-drag.
Returns cellsDeletable.
Returns cellsDisconnectable.
Returns cellsEditable.
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 {@link locked} is false.
Returns cellsMovable.
Returns cellsResizable.
Returns cellsSelectable.
Returns true if the given event is a clone event. This implementation returns true if control is pressed.
Returns cloneInvalidEdges as a boolean.
Returns true if the connectionHandler is enabled.
Returns connectableEdges as a boolean.
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.
Returns constrainChildren.
Returns constrainRelativeChildren.
Returns true if the given mouse event should be aligned to the grid.
Returns disconnectOnMove as a boolean.
Returns dropEnabled as a boolean.
Returns edgeLabelsMovable.
Returns true if the graph is enabled.
Returns enterStopsCellEditing.
Returns escapeEnabled.
Returns true if the event should be ignored in fireMouseEvent.
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.
The name of the event.
mxMouseEvent that should be ignored.
Function: isEventsEnabled
Returns
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.
Returns extendParents.
Returns extendParentsOnAdd.
Returns extendParentsOnMove.
Returns gridEnabled as a boolean.
Returns true if the given mouse event should be aligned to the grid.
Returns true if the label must be rendered as HTML markup. The default implementation returns htmlLabels.
Returns htmlLabels.
Returns true if the given mouse event should not allow any connections to be made. This implementation returns false.
Returns invokesStopCellEditing.
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'.
Returns true if the given cell state is a loop.
mxCellState that represents a potential loop.
Returns multigraph as a boolean.
Returns true if perimeter points should be computed such that the resulting edge has only horizontal or vertical segments.
mxCellState that represents the edge.
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;
};
Returns portsEnabled as a boolean.
Returns recursiveResize.
mxCellState that is being resized.
Returns resizeContainer.
Returns true if the selection is empty.
Returns true if any sibling of the given cell is selected.
Returns splitEnabled as a boolean.
Returns true if the given edge may be splitted into two edges with the given cell as a new terminal between the two.
mxCell that represents the edge to be splitted.
mxCell that should split the edge.
Mouseevent that triggered the invocation.
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.
mxCell to be checked.
Optional boolean that specifies if the cell state should be ignored.
Returns swimlaneNesting as a boolean.
Returns swimlaneSelectionEnabled as a boolean.
Hook for ignoring synthetic mouse events after touchend in Firefox.
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.
mxCell whose terminal point should be moved.
Boolean indicating if the source or target terminal should be moved.
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.
Hook for implementing click-through behaviour on selected cells. If this returns true the cell behind the selected cell will be selected. This implementation returns false;
Returns true if the given state has no stroke- or fillcolor and no image.
mxCellState to check.
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.
mxCell the possible child cell
mxCell the possible parent cell
boolean whether or not to recurse the child ancestors
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.
mxCell that represents the source cell.
mxCell that represents the target cell.
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.
mxCell that represents the possible drop target.
mxCell that should be dropped into the target.
Mouseevent that triggered the invocation.
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.
Returns isValidSource for the given cell. This is called by isValidConnection.
Returns vertexLabelsMovable.
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.
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.
mxCell whose label should be changed.
New label to be assigned.
Optional event that triggered the change.
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);
Array of mxCell to be moved, cloned or added to the target.
Integer that specifies the x-coordinate of the vector. Default is 0.
Integer that specifies the y-coordinate of the vector. Default is 0.
Boolean indicating if the cells should be cloned. Default is false.
mxCell that represents the new parent of the cells.
Mouseevent that triggered the invocation.
Optional mapping for existing clones.
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.
Boolean that specifies if the cells should be moved to back.
Array of mxCell to move to the background. If null is specified then the selection cells are used.
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.
Amount to shift the graph along the x-axis.
Amount to shift the graph along the y-axis.
Processes the given change and invalidates the respective cached data in view. This fires a {@link root} event if the root has changed in the model.
Object that represents the change on the model.
Removes and returns the given mxCellOverlay from the given cell. This method fires a {@link removeoverlay} event. If no overlay is given, then all overlays are removed using {@link removeOverlays}.
mxCell whose overlay should be removed.
Optional mxCellOverlay to be removed.
Removes all {@link mxCellOverlays} from the given cell. This method fires a {@link removeoverlay} event for each mxCellOverlay and returns the array of {@link mxCellOverlays} that was removed from the cell.
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.
Array of mxCell to remove. If null is specified then the selection cells which are deletable are used.
Optional boolean which specifies if all connected edges
should be removed as well. Default is true.
Hook to remove the groups after ungroupCells.
Removes the specified mxImageBundle.
Function: removeListener
Removes all occurrences of the given listener from
Removes the specified graph listener.
Listener to be removed from the graph event listeners.
Sets the bounds of the given cell using resizeCells. Returns the cell which was passed to the function.
mxCell whose bounds should be changed.
mxRectangle that represents the new bounds.
Sets the bounds of the given cells and fires a mxEvent.RESIZE_CELLS event while the transaction is in progress. Returns the cells which have been passed to the function.
Array of mxCell whose bounds should be changed.
Array of {@link mxRectangles} that represent the new bounds.
Resizes the child cells of the given cell for the given new geometry with respect to the current geometry of the cell.
mxCell that has been resized.
mxGeometry that represents the new bounds.
Scales the points, position and size of the given cell according to the given vertical and horizontal scaling factors.
mxCell whose geometry should be scaled.
Horizontal scaling factor.
Vertical scaling factor.
Boolean indicating if the child cells should be scaled.
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]
mxCell to be made visible.
Optional boolean flag. Default is false.
Scrolls the graph to the given point, extending the graph container if specified.
Pans the graph so that it shows the given rectangle.
mxRectangle to be made visible.
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.
Optional mxCell whose children should be selected. Default is defaultParent.
Optional boolean specifying whether all descendants should be
selected. Default is false.
Selects the next, parent, first child or previous cell, if all arguments are false.
Boolean indicating if the next cell should be selected.
Boolean indicating if the parent cell should be selected.
Boolean indicating if the first child cell should be selected.
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. For vertices, only cells with no children are selected.
Boolean indicating if vertices should be selected.
Boolean indicating if edges should be selected.
Optional mxCell that acts as the root of the recursion. Default is defaultParent.
Optional boolean that specifies if groups should be
selected. Default is false.
Selects the first child cell.
Select all vertices inside the given parent or the default parent.
Selects the next cell.
Selects the parent cell.
Selects the previous cell.
Selects and returns the cells inside the given rectangle for the specified event.
mxRectangle that represents the region to be selected.
Mouseevent that triggered the selection.
Select all vertices inside the given parent or the default parent.
Specifies if dangling edges are allowed, that is, if edges are allowed that do not have a source and/or target terminal defined.
Boolean indicating if dangling edges are allowed.
Specifies if loops are allowed.
Boolean indicating if loops are allowed.
Sets allowNegativeCoordinates.
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.
Boolean indicating if cells should be resized automatically.
Sets the new backgroundImage.
Sets the value of border.
Positive integer that represents the border to be used.
Sets or toggles the given bit for the given key in the styles of the specified cells.
String representing the key to toggle the flag in.
Integer that represents the bit to be toggled.
Boolean value to be used or null if the value should be toggled.
Optional array of mxCell to change the style for. Default is the selection 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.
String representing the key to be assigned.
String representing the new value for the key.
Optional array of mxCell to change the style for. Default is the selection cells.
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.
mxCell whose warning should be set.
String that represents the warning to be displayed.
Optional mxImage to be used for the overlay. Default is warningImage.
Optional boolean indicating if a click on the overlay
should select the corresponding cell. Default is false.
Specifies if the graph should allow bending of edges. This implementation updates {@link bendable}.
Boolean indicating if the graph should allow bending of edges.
Specifies if the graph should allow cloning of cells by holding down the control key while cells are being moved. This implementation updates cellsCloneable.
Boolean indicating if the graph should be cloneable.
Sets cellsDeletable.
Boolean indicating if the graph should allow deletion of cells.
Sets cellsDisconnectable.
Specifies if the graph should allow in-place editing for cell labels. This implementation updates cellsEditable.
Boolean indicating if the graph should allow in-place editing.
Sets if any cell may be moved, sized, bended, disconnected, edited or selected.
Boolean that defines the new value for cellsLocked.
Specifies if the graph should allow moving of cells. This implementation updates {@link cellsMsovable}.
Boolean indicating if the graph should allow moving of cells.
Specifies if the graph should allow resizing of cells. This implementation updates cellsResizable.
Boolean indicating if the graph should allow resizing of cells.
Sets cellsSelectable.
Specifies if edges should be inserted when cloned but not valid wrt. getEdgeValidationError. If false such edges will be silently ignored.
Boolean indicating if cloned invalid edges should be inserted into the graph or ignored.
Specifies if the graph should allow new connections. This implementation updates mxConnectionHandler.enabled in connectionHandler.
Boolean indicating if new connections should be allowed.
Specifies if edges should be connectable.
Boolean indicating if edges should be connectable.
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.
mxCell that represents the edge.
mxCell that represents the terminal.
Boolean indicating if the terminal is the source or target.
Optional mxConnectionConstraint to be used for this connection.
Sets constrainChildren.
Sets the defaultParent to the given cell. Set this to null to return the first child of the root in getDefaultParent.
Specifies if edges should be disconnected when moved. (Note: Cloned edges are always disconnected.)
Boolean indicating if edges should be disconnected when moved.
Specifies if the graph should allow dropping of cells onto or into other cells.
Sets edgeLabelsMovable.
Specifies if the graph should allow any interactions. This implementation updates enabled.
Boolean indicating if the graph should be enabled.
Sets enterStopsCellEditing.
Sets escapeEnabled.
Function: setEventSource
Sets
Function: setEventsEnabled
Sets
Sets extendParents.
New boolean value for extendParents.
Sets extendParentsOnAdd.
New boolean value for extendParentsOnAdd.
Sets extendParentsOnMove.
New boolean value for extendParentsOnAdd.
Specifies if the grid should be enabled.
Boolean indicating if the grid should be enabled.
Sets gridSize.
Sets htmlLabels.
Sets invokesStopCellEditing.
Specifies if the graph should allow multiple connections between the same pair of vertices.
Boolean indicating if the graph allows multiple connections between the same pair of vertices.
Specifies if panning should be enabled. This implementation updates mxPanningHandler.panningEnabled in panningHandler.
Boolean indicating if panning should be enabled.
Specifies if the ports should be enabled.
Boolean indicating if the ports should be enabled.
Sets recursiveResize.
New boolean value for recursiveResize.
Sets resizeContainer.
Boolean indicating if the container should be resized.
Sets the {@link mxSelectionModel} that contains the selection.
Specifies if the graph should allow dropping of cells onto or into other cells.
Sets the mxStylesheet that defines the style.
Specifies if swimlanes can be nested by drag and drop. This is only taken into account if dropEnabled is true.
Boolean indicating if swimlanes can be nested.
Specifies if swimlanes should be selected if the mouse is released over their content area.
Boolean indicating if swimlanes content areas should be selected when the mouse is released over them.
Sets tolerance.
Specifies if tooltips should be enabled. This implementation updates mxTooltipHandler.enabled in tooltipHandler.
Boolean indicating if tooltips should be enabled.
Sets vertexLabelsMovable.
Called when the size of the graph has changed. This implementation fires a {@link size} event after updating the clipping region of the SVG element in SVG-bases browsers.
Snaps the given numeric value to the grid if gridEnabled is true.
Numeric value to be snapped to the grid.
Snaps the given delta with the given scaled bounds.
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.
mxCell that represents the edge to be splitted.
mxCell that represents the cells to insert into the edge.
mxCell that represents the edge to be inserted.
Optional integer that specifies the vector to move the cells.
Optional integer that specifies the vector to move the cells.
Integer that specifies the x-coordinate of the drop location.
Integer that specifies the y-coordinate of the drop location.
Optional parent to insert the cell. If null the parent of the edge is used.
Calls startEditingAtCell using the given cell or the first selection cell.
Optional mouse event that triggered the editing.
Fires a startEditing event and invokes mxCellEditor.startEditing on {@link editor}. After editing was started, a {@link editingStarted} event is fired.
mxCell to start the in-place editor for.
Optional mouse event that triggered the editing.
Stops the current editing and fires a {@link editingStopped} event.
Boolean that specifies if the current editing value should be stored.
Swaps the alternate and the actual bounds in the geometry of the given cell invoking updateAlternateBounds before carrying out the swap.
mxCell for which the bounds should be swapped.
Boolean indicating if the cell is going to be collapsed.
Handles the mxMouseEvent by highlighting the mxCellState.
mxMouseEvent that represents the touch event.
Toggles the boolean value for the given key in the style of the given cell and returns the new value as 0 or 1. If no cell is specified then the selection cell is used.
Parameter:
String representing the key for the boolean value to be toggled.
Optional boolean default value if no value is defined.
Default is false.
Optional mxCell whose style should be modified. Default is the selection cell.
Toggles the given bit for the given key in the styles of the specified cells.
String representing the key to toggle the flag in.
Integer that represents the bit to be toggled.
Optional array of mxCell to change the style for. Default is the selection cells.
Toggles the boolean value for the given key in the style of the given cells and returns the new value as 0 or 1. 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:
String representing the key for the boolean value to be toggled.
Optional boolean default value if no value is defined.
Default is false.
Optional array of mxCell whose styles should be modified. Default is the selection cells.
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.
Boolean that specifies the visible state to be assigned.
Array of mxCell whose visible state should be changed. If null is specified then the selection cells are used.
Optional boolean indicating if the visible state of all
connected edges should be changed as well. Default is true.
Translates the geometry of the given cell and stores the new, translated geometry in the model as an atomic change.
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.
mxCell that represents the vertex where the traversal starts.
Optional boolean indicating if edges should only be traversed
from source to target. Default is true.
Visitor function that takes the current vertex and the incoming edge as arguments. The traversal stops if the function returns false.
Optional mxCell that represents the incoming edge. This is null for the first step of the traversal.
Optional mxDictionary from cells to true for the visited cells.
Optional boolean to traverse in inverse direction. Default is false.
This is ignored if directed is false.
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.
Array of cells to be ungrouped. If null is specified then the selection cells are used.
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.
mxCell for which the geometry is being udpated.
Boolean indicating if the cell is going to be collapsed.
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.
Updates the bounds of the given groups to include all children and returns the passed-in cells. Call this with the groups in parent to child order, top-most group first, the cells are processed in reverse order and cells with no children are ignored.
The groups whose bounds should be updated. If this is null, then the selection cells are used.
Optional border to be added in the group. Default is 0.
Optional boolean that allows the group to be moved. Default is false.
Optional top border to be added in the group. Default is 0.
Optional top border to be added in the group. Default is 0.
Optional top border to be added in the group. Default is 0.
Optional top border to be added in the group. Default is 0.
Sets the graphX and graphY properties if the given mxMouseEvent if required and returned the event.
mxMouseEvent to be updated.
Name of the mouse event.
Invokes from sizeDidChange to redraw the page breaks.
Boolean that specifies if page breaks should be shown.
Specifies the width of the container in pixels.
Specifies the height of the container in pixels.
Removes selection cells that are not in the model from the selection.
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.
mxCell that represents the cell to validate.
Object that represents the global validation state.
Hook method for subclassers to return an error message for the given edge and terminals. This implementation returns null.
mxCell that represents the edge to validate.
mxCell that represents the source terminal.
mxCell that represents the target terminal.
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. Returns null in the case of successful validation or an array of strings (warnings) in the case of failed validations.
Paramters:
Optional mxCell to start the validation recursion. Default is the graph root.
Object that represents the global validation state.
Displays the given validation error in a dialog. This implementation uses mxUtils.alert.
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.
Resets the zoom and panning in the view.
Zooms into the graph by zoomFactor.
Zooms out of the graph by zoomFactor.
Zooms the graph to the given scale with an optional boolean center argument, which is passd to zoom.
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.
The un-scaled and un-translated rectangluar region that should be just visible after the operation
Generated using TypeDoc
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:
These listeners will be called in the above order if they are enabled.