mxUtils

removeCursors: function( element )

Removes the cursors from the style of the given DOM node and its descendants.

Parameters

getCurrentStyle: function()

Returns the current style of the specified element.

Parameters

parseCssNumber: function( value )

Parses the given CSS numeric value adding handling for the values thin, medium and thick (2, 4 and 6).

setPrefixedStyle: function()

Adds the given style with the standard name and an optional vendor prefix for the current browser.

mxUtils.setPrefixedStyle(node.style, 'transformOrigin', '0% 0%');

hasScrollbars: function( node )

Returns true if the overflow CSS property of the given node is either scroll or auto.

Parameters

bind: function( scope, funct )

Returns a wrapper function that locks the execution scope of the given function to the specified scope.  Inside funct, the “this” keyword becomes a reference to that scope.

eval: function( expr )

Evaluates the given expression using eval and returns the JavaScript object that represents the expression result.  Supports evaluation of expressions that define functions and returns the function object for these expressions.

Parameters

findNode: function( node, attr, value )

Returns the first node where attr equals value.  This implementation does not use XPath.

getFunctionName: function( f )

Returns the name for the given function.

Parameters

indexOf: function( array, obj )

Returns the index of obj in array or -1 if the array does not contain the given object.

Parameters

forEach: function( array, fn )

Calls the given function for each element of the given array and returns the array.

Parameters

remove: function( obj, array )

Removes all occurrences of the given object in the given array or object.  If there are multiple occurrences of the object, be they associative or as an array entry, all occurrences are removed from the array or deleted from the object.  By removing the object from the array, all elements following the removed element are shifted by one step towards the beginning of the array.

The length of arrays is not modified inside this function.

Parameters

isNode: function( value, nodeName, attributeName, attributeValue )

Returns true if the given value is an XML node with the node name and if the optional attribute has the specified value.

This implementation assumes that the given value is a DOM node if the nodeType property is numeric, that is, if isNaN returns false for value.nodeType.

Parameters

isAncestorNode: function( ancestor, child )

Returns true if the given ancestor is an ancestor of the given DOM node in the DOM.  This also returns true if the child is the ancestor.

Parameters

getChildNodes: function( node, nodeType )

Returns an array of child nodes that are of the given node type.

Parameters

importNode: function( doc, node, allChildren )

Cross browser implementation for document.importNode.  Uses document.importNode in all browsers but IE, where the node is cloned by creating a new node and copying all attributes and children into it using importNode, recursively.

Parameters

createXmlDocument: function()

Returns a new, empty XML document.

parseXml: function()

Parses the specified XML string into a new XML document and returns the new document.

Example

var doc = mxUtils.parseXml(
  '<mxGraphModel><root><MyDiagram id="0"><mxCell/></MyDiagram>'+
  '<MyLayer id="1"><mxCell parent="0" /></MyLayer><MyObject id="2">'+
  '<mxCell style="strokeColor=blue;fillColor=red" parent="1" vertex="1">'+
  '<mxGeometry x="10" y="10" width="80" height="30" as="geometry"/>'+
  '</mxCell></MyObject></root></mxGraphModel>');

Parameters

clearSelection: function()

Clears the current selection in the page.

Returns a pretty printed string that represents the XML tree for the given node.  This method should only be used to print XML for reading, use getXml instead to obtain a string for processing.

Parameters

removeWhitespace: function( node, before )

Removes the sibling text nodes for the given node that only consists of tabs, newlines and spaces.

Parameters

htmlEntities: function( s, newline )

Replaces characters (less than, greater than, newlines and quotes) with their HTML entities in the given string and returns the result.

Parameters

isVml: function( node )

Returns true if the given node is in the VML namespace.

Parameters

getXml: function( node, linefeed )

Returns the XML content of the specified node.  For Internet Explorer, all \r\n\t[\t]* are removed from the XML string and the remaining \r\n are replaced by \n.  All \n are then replaced with linefeed, or 
 if no linefeed is defined.

Parameters

extractTextWithWhitespace: function( elems )

Returns the text content of the specified node.

Parameters

replaceTrailingNewlines: function( str, pattern )

Replaces each trailing newline with the given pattern.

getTextContent: function( node )

Returns the text content of the specified node.

Parameters

setTextContent: function( node, text )

Sets the text content of the specified node.

Parameters

getInnerHtml: function()

Returns the inner HTML for the given node as a string or an empty string if no node was specified.  The inner HTML is the text representing all children of the node, but not the node itself.

Parameters

getOuterHtml: function()

Returns the outer HTML for the given node as a string or an empty string if no node was specified.  The outer HTML is the text representing all children of the node including the node itself.

Parameters

write: function( parent, text )

Creates a text node for the given string and appends it to the given parent.  Returns the text node.

Parameters

writeln: function( parent, text )

Creates a text node for the given string and appends it to the given parent with an additional linefeed.  Returns the text node.

Parameters

br: function( parent, count )

Appends a linebreak to the given parent and returns the linebreak.

Parameters

button: function( label, funct, doc )

Returns a new button with the given level and function as an onclick event handler.

document.body.appendChild(mxUtils.button('Test', function(evt)
{
  alert('Hello, World!');
}));

Parameters

para: function( parent, text )

Appends a new paragraph with the given text to the specified parent and returns the paragraph.

Parameters

addTransparentBackgroundFilter: function( node )

Adds a transparent background to the filter of the given node.  This background can be used in IE8 standards mode (native IE8 only) to pass events through the node.

linkAction: function( parent, text, editor, action, pad )

Adds a hyperlink to the specified parent that invokes action on the specified editor.

Parameters

linkInvoke: function( parent, text, editor, functName, arg, pad )

Adds a hyperlink to the specified parent that invokes the specified function on the editor passing along the specified argument.  The function name is the name of a function of the editor instance, not an action name.

Parameters

link: function( parent, text, funct, pad )

Adds a hyperlink to the specified parent and invokes the given function when the link is clicked.

Parameters

getDocumentSize: function()

Returns the client size for the current document as an mxRectangle.

fit: function( node )

Makes sure the given node is inside the visible area of the window.  This is done by setting the left and top in the style.

load: function( url )

Loads the specified URL synchronously and returns the mxXmlRequest.  Throws an exception if the file cannot be loaded.  See mxUtils.get for an asynchronous implementation.

Example

try
{
  var req = mxUtils.load(filename);
  var root = req.getDocumentElement();
  // Process XML DOM...
}
catch (ex)
{
  mxUtils.alert('Cannot load '+filename+': '+ex);
}

Parameters

get: function( url, onload, onerror, binary, timeout, ontimeout )

Loads the specified URL asynchronously and invokes the given functions depending on the request status.  Returns the mxXmlRequest in use.  Both functions take the mxXmlRequest as the only parameter.  See mxUtils.load for a synchronous implementation.

Example

mxUtils.get(url, function(req)
{
   var node = req.getDocumentElement();
   // Process XML DOM...
});

So for example, to load a diagram into an existing graph model, the following code is used.

mxUtils.get(url, function(req)
{
  var node = req.getDocumentElement();
  var dec = new mxCodec(node.ownerDocument);
  dec.decode(node, graph.getModel());
});

Parameters

getAll: function( urls, onload, onerror )

Loads the URLs in the given array asynchronously and invokes the given function if all requests returned with a valid 2xx status.  The error handler is invoked once on the first error or invalid response.

Parameters

post: function( url, params, onload, onerror )

Posts the specified params to the given URL asynchronously and invokes the given functions depending on the request status.  Returns the mxXmlRequest in use.  Both functions take the mxXmlRequest as the only parameter.  Make sure to use encodeURIComponent for the parameter values.

Example

mxUtils.post(url, 'key=value', function(req)
{
 mxUtils.alert('Ready: '+req.isReady()+' Status: '+req.getStatus());
 // Process req.getDocumentElement() using DOM API if OK...
});

Parameters

submit: function( url, params, doc, target )

Submits the given parameters to the specified URL using mxXmlRequest.simulate and returns the mxXmlRequest.  Make sure to use encodeURIComponent for the parameter values.

Parameters

loadInto: function( url, doc, onload )

Loads the specified URL asynchronously into the specified document, invoking onload after the document has been loaded.  This implementation does not use mxXmlRequest, but the document.load method.

Parameters

getValue: function( array, key, defaultValue )

Returns the value for the given key in the given associative array or the given default value if the value is null.

Parameters

getNumber: function( array, key, defaultValue )

Returns the numeric value for the given key in the given associative array or the given default value (or 0) if the value is null.  The value is converted to a numeric value using the Number function.

Parameters

getColor: function( array, key, defaultValue )

Returns the color value for the given key in the given associative array or the given default value if the value is null.  If the value is mxConstants.NONE then null is returned.

Parameters

clone: function( obj, transients, shallow )

Recursively clones the specified object ignoring all fieldnames in the given array of transient fields.  mxObjectIdentity.FIELD_NAME is always ignored by this function.

Parameters

equalPoints: function( a, b )

Compares all mxPoints in the given lists.

Parameters

equalEntries: function( a, b )

Returns true if all properties of the given objects are equal.  Values with NaN are equal to NaN and unequal to any other value.

Parameters

removeDuplicates: function( arr )

Removes all duplicates from the given array.

isNaN: function( value )

Returns true if the given value is of type number and isNaN returns true.

extend: function( ctor, superCtor )

Assigns a copy of the superclass prototype to the subclass prototype.  Note that this does not call the constructor of the superclass at this point, the superclass constructor should be called explicitely in the subclass constructor.  Below is an example.

MyGraph = function(container, model, renderHint, stylesheet)
{
  mxGraph.call(this, container, model, renderHint, stylesheet);
}

mxUtils.extend(MyGraph, mxGraph);

Parameters

toString: function( obj )

Returns a textual representation of the specified object.

Parameters

toRadians: function( deg )

Converts the given degree to radians.

toDegree: function( rad )

Converts the given radians to degree.

arcToCurves: function( x0, y0, r1, r2, angle, largeArcFlag, sweepFlag, x, y )

Converts the given arc to a series of curves.

getBoundingBox: function( rect, rotation, cx )

Returns the bounding box for the rotated rectangle.

Parameters

getRotatedPoint: function( pt, cos, sin, c )

Rotates the given point by the given cos and sin.

reversePortConstraints: function( constraint )

Reverse the port constraint bitmask.  For example, north | east becomes south | west

findNearestSegment: function( state, x, y )

Finds the index of the nearest segment on the given cell state for the specified coordinate pair.

getDirectedBounds: function ( rect, m, style, flipH, flipV )

Adds the given margins to the given rectangle and rotates and flips the rectangle according to the respective styles in style.

getPerimeterPoint: function ( pts, center, point )

Returns the intersection between the polygon defined by the array of points and the line between center and point.

rectangleIntersectsSegment: function( bounds, p1, p2 )

Returns true if the given rectangle intersects the given segment.

Parameters

contains: function( bounds, x, y )

Returns true if the specified point (x, y) is contained in the given rectangle.

Parameters

intersects: function( a, b )

Returns true if the two rectangles intersect.

Parameters

intersectsHotspot: function( state, x, y, hotspot, min, max )

Returns true if the two rectangles intersect.

Parameters

getOffset: function( container, scrollOffset )

Returns the offset for the specified container as an mxPoint.  The offset is the distance from the top left corner of the container to the top left corner of the document.

Parameters

getDocumentScrollOrigin: function( doc )

Returns the scroll origin of the given document or the current document if no document is given.

getScrollOrigin: function( node, includeAncestors, includeDocument )

Returns the top, left corner of the viewrect as an mxPoint.

Parameters

convertPoint: function( container, x, y )

Converts the specified point (x, y) using the offset of the specified container and returns a new mxPoint with the result.

var pt = mxUtils.convertPoint(graph.container,
  mxEvent.getClientX(evt), mxEvent.getClientY(evt));

Parameters

ltrim: function( str, chars )

Strips all whitespaces from the beginning of the string.  Without the second parameter, this will trim these characters:

• ” “ (ASCII 32 (0x20)), an ordinary space
• ”\t” (ASCII 9 (0x09)), a tab
• ”\n” (ASCII 10 (0x0A)), a new line (line feed)
• ”\r” (ASCII 13 (0x0D)), a carriage return
• ”\0” (ASCII 0 (0x00)), the NUL-byte
• ”\x0B” (ASCII 11 (0x0B)), a vertical tab

rtrim: function( str, chars )

Strips all whitespaces from the end of the string.  Without the second parameter, this will trim these characters:

• ” “ (ASCII 32 (0x20)), an ordinary space
• ”\t” (ASCII 9 (0x09)), a tab
• ”\n” (ASCII 10 (0x0A)), a new line (line feed)
• ”\r” (ASCII 13 (0x0D)), a carriage return
• ”\0” (ASCII 0 (0x00)), the NUL-byte
• ”\x0B” (ASCII 11 (0x0B)), a vertical tab

trim: function( str, chars )

Strips all whitespaces from both end of the string.  Without the second parameter, Javascript function will trim these characters:

• ” “ (ASCII 32 (0x20)), an ordinary space
• ”\t” (ASCII 9 (0x09)), a tab
• ”\n” (ASCII 10 (0x0A)), a new line (line feed)
• ”\r” (ASCII 13 (0x0D)), a carriage return
• ”\0” (ASCII 0 (0x00)), the NUL-byte
• ”\x0B” (ASCII 11 (0x0B)), a vertical tab

isNumeric: function( n )

Returns true if the specified value is numeric, that is, if it is not null, not an empty string, not a HEX number and isNaN returns false.

Parameters

isInteger: function( n )

Returns true if the given value is an valid integer number.

Parameters

mod: function( n, m )

Returns the remainder of division of n by m.  You should use this instead of the built-in operation as the built-in operation does not properly handle negative numbers.

intersection: function ( x0, y0, x1, y1, x2, y2, x3, y3 )

Returns the intersection of two lines as an mxPoint.

Parameters

ptSegDistSq: function( x1, y1, x2, y2, px, py )

Returns the square distance between a segment and a point.  To get the distance between a point and a line (with infinite length) use mxUtils.ptLineDist.

Parameters

ptLineDist: function( x1, y1, x2, y2, px, py )

Returns the distance between a line defined by two points and a point.  To get the distance between a point and a segment (with a specific length) use <mxUtils.ptSeqDistSq>.

Parameters

relativeCcw: function( x1, y1, x2, y2, px, py )

Returns 1 if the given point on the right side of the segment, 0 if its on the segment, and -1 if the point is on the left side of the segment.

Parameters

animateChanges: function( graph, changes )

See mxEffects.animateChanges.  This is for backwards compatibility and will be removed later.

cascadeOpacity: function( graph, cell, opacity )

See mxEffects.cascadeOpacity.  This is for backwards compatibility and will be removed later.

fadeOut: function( node, from, remove, step, delay, isEnabled )

See mxEffects.fadeOut.  This is for backwards compatibility and will be removed later.

setOpacity: function( node, value )

Sets the opacity of the specified DOM node to the given value in %.

Parameters

createImage: function( src )

Creates and returns an image (IMG node) or VML image (v:image) in IE6 in quirks mode.

Parameters

sortCells: function( cells, ascending )

Sorts the given cells according to the order in the cell hierarchy.  Ascending is optional and defaults to true.

getStylename: function( style )

Returns the stylename in a style of the form [(stylename|key=value);] or an empty string if the given style does not contain a stylename.

Parameters

getStylenames: function( style )

Returns the stylenames in a style of the form [(stylename|key=value);] or an empty array if the given style does not contain any stylenames.

Parameters

indexOfStylename: function( style, stylename )

Returns the index of the given stylename in the given style.  This returns -1 if the given stylename does not occur (as a stylename) in the given style, otherwise it returns the index of the first character.

addStylename: function( style, stylename )

Adds the specified stylename to the given style if it does not already contain the stylename.

removeStylename: function( style, stylename )

Removes all occurrences of the specified stylename in the given style and returns the updated style.  Trailing semicolons are not preserved.

removeAllStylenames: function( style )

Removes all stylenames from the given style and returns the updated style.

setCellStyles: function( model, cells, key, value )

Assigns the value for the given key in the styles of the given cells, or removes the key from the styles if the value is null.

Parameters

setStyle: function( style, key, value )

Adds or removes the given key, value pair to the style and returns the new style.  If value is null or zero length then the key is removed from the style.  This is for cell styles, not for CSS styles.

Parameters

setCellStyleFlags: function( model, cells, key, flag, value )

Sets or toggles the flag bit for the given key in the cell’s styles.  If value is null then the flag is toggled.

Example

var cells = graph.getSelectionCells();
mxUtils.setCellStyleFlags(graph.model,
         cells,
         mxConstants.STYLE_FONTSTYLE,
         mxConstants.FONT_BOLD);

Toggles the bold font style.

Parameters

setStyleFlag: function( style, key, flag, value )

Sets or removes the given key from the specified style and returns the new style.  If value is null then the flag is toggled.

Parameters

getAlignmentAsPoint: function( align, valign )

Returns an mxPoint that represents the horizontal and vertical alignment for numeric computations.  X is -0.5 for center, -1 for right and 0 for left alignment.  Y is -0.5 for middle, -1 for bottom and 0 for top alignment.  Default values for missing arguments is top, left.

getSizeForString: function( text, fontSize, fontFamily, textWidth )

Returns an mxRectangle with the size (width and height in pixels) of the given string.  The string may contain HTML markup.  Newlines should be converted to br before calling this method.  The caller is responsible for sanitizing the HTML markup.

Example

var label = graph.getLabel(cell).replace(/\n/g, "<br>");
var size = graph.getSizeForString(label);

Parameters

getViewXml: function( graph, scale, cells, x0, y0 )

getScaleForPageCount: function( pageCount, graph, pageFormat, border )

Returns the scale to be used for printing the graph with the given bounds across the specifies number of pages with the given format.  The scale is always computed such that it given the given amount or fewer pages in the print output.  See mxPrintPreview for an example.

Parameters

show: function( graph, doc, x0, y0, w, h )

Copies the styles and the markup from the graph’s container into the given document and removes all cursor styles.  The document is returned.

This function should be called from within the document with the graph.  If you experience problems with missing stylesheets in IE then try adding the domain to the trusted sites.

Parameters

printScreen: function( graph )

Prints the specified graph using a new window and the built-in print dialog.

This function should be called from within the document with the graph.

Parameters

popup: function( content, isInternalWindow )

Shows the specified text content in a new mxWindow or a new browser window if isInternalWindow is false.

Parameters

alert: function( message )

Displayss the given alert in a new dialog.  This implementation uses the built-in alert function.  This is used to display validation errors when connections cannot be changed or created.

Parameters

prompt: function( message, defaultValue )

Displays the given message in a prompt dialog.  This implementation uses the built-in prompt function.

Parameters

confirm: function( message )

Displays the given message in a confirm dialog.  This implementation uses the built-in confirm function.

Parameters

error: function( message, width, close, icon )

Displays the given error message in a new mxWindow of the given width.  If close is true then an additional close button is added to the window.  The optional icon specifies the icon to be used for the window.  Default is mxUtils.errorImage.

Parameters

makeDraggable: function( element, graphF, funct, dragElement, dx, dy, autoscroll, scalePreview, highlightDropTargets, getDropTarget )

Configures the given DOM element to act as a drag source for the specified graph.  Returns a a new mxDragSource.  If <mxDragSource.guideEnabled> is enabled then the x and y arguments must be used in funct to match the preview location.

Example

var funct = function(graph, evt, cell, x, y)
{
  if (graph.canImportCell(cell))
  {
    var parent = graph.getDefaultParent();
    var vertex = null;

    graph.getModel().beginUpdate();
    try
    {
      vertex = graph.insertVertex(parent, null, 'Hello', x, y, 80, 30);
    }
    finally
    {
      graph.getModel().endUpdate();
    }

    graph.setSelectionCell(vertex);
  }
}

var img = document.createElement('img');
img.setAttribute('src', 'editors/images/rectangle.gif');
img.style.position = 'absolute';
img.style.left = '0px';
img.style.top = '0px';
img.style.width = '16px';
img.style.height = '16px';

var dragImage = img.cloneNode(true);
dragImage.style.width = '32px';
dragImage.style.height = '32px';
mxUtils.makeDraggable(img, graph, funct, dragImage);
document.body.appendChild(img);

Parameters