A singleton class that provides cross-browser helper methods. This is a global functionality. To access the functions in this class, use the global classname appended by the functionname. You may have to load chrome://global/content/contentAreaUtils.js to disable certain security restrictions in Mozilla for the <open>, <save>, <saveAs> and <copy> function.
mxUtils.error('Browser is not supported!', 200, false);
mxUtils | A singleton class that provides cross-browser helper methods. |
Variables | |
errorResource | Specifies the resource key for the title of the error window. |
closeResource | Specifies the resource key for the label of the close button. |
errorImage | Defines the image used for error dialogs. |
Functions | |
removeCursors | Removes the cursors from the style of the given DOM node and its descendants. |
getCurrentStyle | Returns the current style of the specified element. |
parseCssNumber | Parses the given CSS numeric value adding handling for the values thin, medium and thick (2, 4 and 6). |
setPrefixedStyle | Adds the given style with the standard name and an optional vendor prefix for the current browser. |
hasScrollbars | Returns true if the overflow CSS property of the given node is either scroll or auto. |
bind | Returns a wrapper function that locks the execution scope of the given function to the specified scope. |
eval | Evaluates the given expression using eval and returns the JavaScript object that represents the expression result. |
findNode | Returns the first node where attr equals value. |
getFunctionName | Returns the name for the given function. |
indexOf | Returns the index of obj in array or -1 if the array does not contain the given object. |
forEach | Calls the given function for each element of the given array and returns the array. |
remove | Removes all occurrences of the given object in the given array or object. |
isNode | Returns true if the given value is an XML node with the node name and if the optional attribute has the specified value. |
isAncestorNode | Returns true if the given ancestor is an ancestor of the given DOM node in the DOM. |
getChildNodes | Returns an array of child nodes that are of the given node type. |
importNode | Cross browser implementation for document.importNode. |
importNodeImplementation | Full DOM API implementation for importNode without using importNode API call. |
createXmlDocument | Returns a new, empty XML document. |
createMsXmlDocument | Returns a new, empty Microsoft.XMLDOM document using ActiveXObject. |
parseXml | Parses the specified XML string into a new XML document and returns the new document. |
clearSelection | Clears the current selection in the page. |
removeWhitespace | Removes the sibling text nodes for the given node that only consists of tabs, newlines and spaces. |
htmlEntities | Replaces characters (less than, greater than, newlines and quotes) with their HTML entities in the given string and returns the result. |
isVml | Returns true if the given node is in the VML namespace. |
getXml | Returns the XML content of the specified node. |
getPrettyXML | Returns a pretty printed string that represents the XML tree for the given node. |
extractTextWithWhitespace | Returns the text content of the specified node. |
replaceTrailingNewlines | Replaces each trailing newline with the given pattern. |
getTextContent | Returns the text content of the specified node. |
setTextContent | Sets the text content of the specified node. |
getInnerHtml | Returns the inner HTML for the given node as a string or an empty string if no node was specified. |
getOuterHtml | Returns the outer HTML for the given node as a string or an empty string if no node was specified. |
write | Creates a text node for the given string and appends it to the given parent. |
writeln | Creates a text node for the given string and appends it to the given parent with an additional linefeed. |
br | Appends a linebreak to the given parent and returns the linebreak. |
button | Returns a new button with the given level and function as an onclick event handler. |
para | Appends a new paragraph with the given text to the specified parent and returns the paragraph. |
addTransparentBackgroundFilter | Adds a transparent background to the filter of the given node. |
linkAction | Adds a hyperlink to the specified parent that invokes action on the specified editor. |
linkInvoke | Adds a hyperlink to the specified parent that invokes the specified function on the editor passing along the specified argument. |
link | Adds a hyperlink to the specified parent and invokes the given function when the link is clicked. |
getDocumentSize | Returns the client size for the current document as an mxRectangle. |
fit | Makes sure the given node is inside the visible area of the window. |
load | Loads the specified URL synchronously and returns the mxXmlRequest. |
get | Loads the specified URL asynchronously and invokes the given functions depending on the request status. |
getAll | Loads the URLs in the given array asynchronously and invokes the given function if all requests returned with a valid 2xx status. |
post | Posts the specified params to the given URL asynchronously and invokes the given functions depending on the request status. |
submit | Submits the given parameters to the specified URL using mxXmlRequest.simulate and returns the mxXmlRequest. |
loadInto | Loads the specified URL asynchronously into the specified document, invoking onload after the document has been loaded. |
getValue | Returns the value for the given key in the given associative array or the given default value if the value is null. |
getNumber | 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. |
getColor | Returns the color value for the given key in the given associative array or the given default value if the value is null. |
clone | Recursively clones the specified object ignoring all fieldnames in the given array of transient fields. |
equalPoints | Compares all mxPoints in the given lists. |
equalEntries | Returns true if all properties of the given objects are equal. |
removeDuplicates | Removes all duplicates from the given array. |
isNaN | Returns true if the given value is of type number and isNaN returns true. |
extend | Assigns a copy of the superclass prototype to the subclass prototype. |
toString | Returns a textual representation of the specified object. |
toRadians | Converts the given degree to radians. |
toDegree | Converts the given radians to degree. |
arcToCurves | Converts the given arc to a series of curves. |
getBoundingBox | Returns the bounding box for the rotated rectangle. |
getRotatedPoint | Rotates the given point by the given cos and sin. |
reversePortConstraints | Reverse the port constraint bitmask. |
findNearestSegment | Finds the index of the nearest segment on the given cell state for the specified coordinate pair. |
getDirectedBounds | Adds the given margins to the given rectangle and rotates and flips the rectangle according to the respective styles in style. |
getPerimeterPoint | Returns the intersection between the polygon defined by the array of points and the line between center and point. |
rectangleIntersectsSegment | Returns true if the given rectangle intersects the given segment. |
contains | Returns true if the specified point (x, y) is contained in the given rectangle. |
intersects | Returns true if the two rectangles intersect. |
intersectsHotspot | Returns true if the state and the hotspot intersect. |
getOffset | Returns the offset for the specified container as an mxPoint. |
getDocumentScrollOrigin | Returns the scroll origin of the given document or the current document if no document is given. |
getScrollOrigin | Returns the top, left corner of the viewrect as an mxPoint. |
convertPoint | Converts the specified point (x, y) using the offset of the specified container and returns a new mxPoint with the result. |
ltrim | Strips all whitespaces from the beginning of the string. |
rtrim | Strips all whitespaces from the end of the string. |
trim | Strips all whitespaces from both end of the string. |
isNumeric | 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. |
isInteger | Returns true if the given value is an valid integer number. |
mod | Returns the remainder of division of n by m. |
intersection | Returns the intersection of two lines as an mxPoint. |
ptSegDistSq | Returns the square distance between a segment and a point. |
ptLineDist | Returns the distance between a line defined by two points and a point. |
relativeCcw | 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. |
animateChanges | See mxEffects.animateChanges. |
cascadeOpacity | See mxEffects.cascadeOpacity. |
fadeOut | See mxEffects.fadeOut. |
setOpacity | Sets the opacity of the specified DOM node to the given value in %. |
createImage | Creates and returns an image (IMG node) or VML image (v:image) in IE6 in quirks mode. |
sortCells | Sorts the given cells according to the order in the cell hierarchy. |
getStylename | 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. |
getStylenames | 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. |
indexOfStylename | Returns the index of the given stylename in the given style. |
addStylename | Adds the specified stylename to the given style if it does not already contain the stylename. |
removeStylename | Removes all occurrences of the specified stylename in the given style and returns the updated style. |
removeAllStylenames | Removes all stylenames from the given style and returns the updated style. |
setCellStyles | 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. |
setStyle | Adds or removes the given key, value pair to the style and returns the new style. |
setCellStyleFlags | Sets or toggles the flag bit for the given key in the cell’s styles. |
setStyleFlag | Sets or removes the given key from the specified style and returns the new style. |
getAlignmentAsPoint | Returns an mxPoint that represents the horizontal and vertical alignment for numeric computations. |
getSizeForString | Returns an mxRectangle with the size (width and height in pixels) of the given string. |
getViewXml | |
getScaleForPageCount | Returns the scale to be used for printing the graph with the given bounds across the specifies number of pages with the given format. |
show | Copies the styles and the markup from the graph’s container into the given document and removes all cursor styles. |
printScreen | Prints the specified graph using a new window and the built-in print dialog. |
popup | Shows the specified text content in a new mxWindow or a new browser window if isInternalWindow is false. |
alert | Displayss the given alert in a new dialog. |
prompt | Displays the given message in a prompt dialog. |
confirm | Displays the given message in a confirm dialog. |
error | Displays the given error message in a new mxWindow of the given width. |
makeDraggable | Configures the given DOM element to act as a drag source for the specified graph. |
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.
expr | A string that represents a JavaScript expression. |
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.
obj | Object to find in the given array. |
array | Array to check for the given obj. |
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.
value | Object that should be examined as a node. |
nodeName | String that specifies the node name. |
attributeName | Optional attribute name to check. |
attributeValue | Optional attribute value to check. |
getChildNodes: function( node, nodeType )
Returns an array of child nodes that are of the given node type.
node | Parent DOM node to return the children from. |
nodeType | Optional node type to return. Default is mxConstants.NODETYPE_ELEMENT. |
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.
doc | Document to import the node into. |
node | Node to be imported. |
allChildren | If all children should be imported. |
parseXml: function()
Parses the specified XML string into a new XML document and returns the new document.
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>');
xml | String that contains the XML data. |
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.
node | DOM node to return the XML for. |
linefeed | Optional string that linefeeds are converted into. Default is 
 |
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.
node | DOM node to return the XML for. |
tab | Optional string that specifies the indentation for one level. Default is two spaces. |
indent | Optional string that represents the current indentation. Default is an empty string. |
newline | Option string that represents a linefeed. Default is ‘\n’. |
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!'); }));
label | String that represents the label of the button. |
funct | Function to be called if the button is pressed. |
doc | Optional document to be used for creating the button. Default is the current document. |
linkAction: function( parent, text, editor, action, pad )
Adds a hyperlink to the specified parent that invokes action on the specified editor.
parent | DOM node to contain the new link. |
text | String that is used as the link label. |
editor | mxEditor that will execute the action. |
action | String that defines the name of the action to be executed. |
pad | Optional left-padding for the link. Default is 0. |
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.
parent | DOM node to contain the new link. |
text | String that is used as the link label. |
editor | mxEditor instance to execute the function on. |
functName | String that represents the name of the function. |
arg | Object that represents the argument to the function. |
pad | Optional left-padding for the link. Default is 0. |
link: function( parent, text, funct, pad )
Adds a hyperlink to the specified parent and invokes the given function when the link is clicked.
parent | DOM node to contain the new link. |
text | String that is used as the link label. |
funct | Function to execute when the link is clicked. |
pad | Optional left-padding for the link. Default is 0. |
getDocumentSize: function()
Returns the client size for the current document as an mxRectangle.
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.
try { var req = mxUtils.load(filename); var root = req.getDocumentElement(); // Process XML DOM... } catch (ex) { mxUtils.alert('Cannot load '+filename+': '+ex); }
url | URL to get the data from. |
get: function( url, onload, onerror, binary, timeout, ontimeout, headers )
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.
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()); });
url | URL to get the data from. |
onload | Optional function to execute for a successful response. |
onerror | Optional function to execute on error. |
binary | Optional boolean parameter that specifies if the request is binary. |
timeout | Optional timeout in ms before calling ontimeout. |
ontimeout | Optional function to execute on timeout. |
headers | Optional with headers, eg. {‘Authorization’: ‘token xyz’} |
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.
urls | Array of URLs to be loaded. |
onload | Callback with array of mxXmlRequests. |
onerror | Optional function to execute on error. |
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.
mxUtils.post(url, 'key=value', function(req) { mxUtils.alert('Ready: '+req.isReady()+' Status: '+req.getStatus()); // Process req.getDocumentElement() using DOM API if OK... });
url | URL to get the data from. |
params | Parameters for the post request. |
onload | Optional function to execute for a successful response. |
onerror | Optional function to execute on error. |
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.
url | URL to get the data from. |
params | Parameters for the form. |
doc | Document to create the form in. |
target | Target to send the form result to. |
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.
url | URL to get the data from. |
doc | The document to load the URL into. |
onload | Function to execute when the URL has been loaded. |
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.
array | Associative array that contains the value for the key. |
key | Key whose value should be returned. |
defaultValue | Value to be returned if the value for the given key is null. |
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.
array | Associative array that contains the value for the key. |
key | Key whose value should be returned. |
defaultValue | Value to be returned if the value for the given key is null. Default is 0. |
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.
array | Associative array that contains the value for the key. |
key | Key whose value should be returned. |
defaultValue | Value to be returned if the value for the given key is null. Default is null. |
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.
obj | Object to be cloned. |
transients | Optional array of strings representing the fieldname to be ignored. |
shallow | Optional boolean argument to specify if a shallow clone should be created, that is, one where all object references are not cloned or, in other words, one where only atomic (strings, numbers) values are cloned. Default is false. |
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);
ctor | Constructor of the subclass. |
superCtor | Constructor of the superclass. |
getBoundingBox: function( rect, rotation, cx )
Returns the bounding box for the rotated rectangle.
rect | mxRectangle to be rotated. |
angle | Number that represents the angle (in degrees). |
cx | Optional mxPoint that represents the rotation center. If no rotation center is given then the center of rect is used. |
rectangleIntersectsSegment: function( bounds, p1, p2 )
Returns true if the given rectangle intersects the given segment.
bounds | mxRectangle that represents the rectangle. |
p1 | mxPoint that represents the first point of the segment. |
p2 | mxPoint that represents the second point of the segment. |
contains: function( bounds, x, y )
Returns true if the specified point (x, y) is contained in the given rectangle.
bounds | mxRectangle that represents the area. |
x | X-coordinate of the point. |
y | Y-coordinate of the point. |
intersects: function( a, b )
Returns true if the two rectangles intersect.
a | mxRectangle to be checked for intersection. |
b | mxRectangle to be checked for intersection. |
intersectsHotspot: function( state, x, y, hotspot, min, max )
Returns true if the state and the hotspot intersect.
state | mxCellState |
x | X-coordinate. |
y | Y-coordinate. |
hotspot | Optional size of the hostpot. |
min | Optional min size of the hostpot. |
max | Optional max size of the hostpot. |
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.
container | DOM node to return the offset for. |
scollOffset | Optional boolean to add the scroll offset of the document. Default is false. |
getScrollOrigin: function( node, includeAncestors, includeDocument )
Returns the top, left corner of the viewrect as an mxPoint.
node | DOM node whose scroll origin should be returned. |
includeAncestors | Whether the scroll origin of the ancestors should be included. Default is false. |
includeDocument | Whether the scroll origin of the document should be included. Default is true. |
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));
container | DOM node to use for the offset. |
x | X-coordinate of the point to be converted. |
y | Y-coordinate of the point to be converted. |
ltrim: function( str, chars )
Strips all whitespaces from the beginning of the string. Without the second parameter, this will trim these characters:
rtrim: function( str, chars )
Strips all whitespaces from the end of the string. Without the second parameter, this will trim these characters:
trim: function( str, chars )
Strips all whitespaces from both end of the string. Without the second parameter, Javascript function will trim these characters:
intersection: function ( x0, y0, x1, y1, x2, y2, x3, y3 )
Returns the intersection of two lines as an mxPoint.
x0 | X-coordinate of the first line’s startpoint. |
y0 | X-coordinate of the first line’s startpoint. |
x1 | X-coordinate of the first line’s endpoint. |
y1 | Y-coordinate of the first line’s endpoint. |
x2 | X-coordinate of the second line’s startpoint. |
y2 | Y-coordinate of the second line’s startpoint. |
x3 | X-coordinate of the second line’s endpoint. |
y3 | Y-coordinate of the second line’s endpoint. |
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.
x1 | X-coordinate of the startpoint of the segment. |
y1 | Y-coordinate of the startpoint of the segment. |
x2 | X-coordinate of the endpoint of the segment. |
y2 | Y-coordinate of the endpoint of the segment. |
px | X-coordinate of the point. |
py | Y-coordinate of the point. |
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>.
x1 | X-coordinate of point 1 of the line. |
y1 | Y-coordinate of point 1 of the line. |
x2 | X-coordinate of point 1 of the line. |
y2 | Y-coordinate of point 1 of the line. |
px | X-coordinate of the point. |
py | Y-coordinate of the point. |
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.
x1 | X-coordinate of the startpoint of the segment. |
y1 | Y-coordinate of the startpoint of the segment. |
x2 | X-coordinate of the endpoint of the segment. |
y2 | Y-coordinate of the endpoint of the segment. |
px | X-coordinate of the point. |
py | Y-coordinate of the point. |
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.
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.
model | mxGraphModel to execute the transaction in. |
cells | Array of mxCells to be updated. |
key | Key of the style to be changed. |
value | New value for the given key. |
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.
style | String of the form [(stylename|key=value);]. |
key | Key of the style to be changed. |
value | New value for the given key. |
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.
var cells = graph.getSelectionCells(); mxUtils.setCellStyleFlags(graph.model, cells, mxConstants.STYLE_FONTSTYLE, mxConstants.FONT_BOLD);
Toggles the bold font style.
model | mxGraphModel that contains the cells. |
cells | Array of mxCells to change the style for. |
key | Key of the style to be changed. |
flag | Integer for the bit to be changed. |
value | Optional boolean value for the flag. |
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.
style | String of the form [(stylename|key=value);]. |
key | Key of the style to be changed. |
flag | Integer for the bit to be changed. |
value | Optional boolean value for the given flag. |
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, fontStyle )
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.
var label = graph.getLabel(cell).replace(/\n/g, "<br>"); var size = graph.getSizeForString(label);
text | String whose size should be returned. |
fontSize | Integer that specifies the font size in pixels. Default is mxConstants.DEFAULT_FONTSIZE. |
fontFamily | String that specifies the name of the font family. Default is mxConstants.DEFAULT_FONTFAMILY. |
textWidth | Optional width for text wrapping. |
fontStyle | Optional font style. |
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.
pageCount | Specifies the number of pages in the print output. |
graph | mxGraph that should be printed. |
pageFormat | Optional mxRectangle that specifies the page format. Default is mxConstants.PAGE_FORMAT_A4_PORTRAIT. |
border | The border along each side of every page. |
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.
graph | mxGraph to be copied. |
doc | Document where the new graph is created. |
x0 | X-coordinate of the graph view origin. Default is 0. |
y0 | Y-coordinate of the graph view origin. Default is 0. |
w | Optional width of the graph view. |
h | Optional height of the graph view. |
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.
graph | mxGraph to be printed. |
popup: function( content, isInternalWindow )
Shows the specified text content in a new mxWindow or a new browser window if isInternalWindow is false.
content | String that specifies the text to be displayed. |
isInternalWindow | Optional boolean indicating if an mxWindow should be used instead of a new browser window. Default is false. |
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.
message | String specifying the message to be displayed. |
width | Integer specifying the width of the window. |
close | Optional boolean indicating whether to add a close button. |
icon | Optional icon for the window decoration. |
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.
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);
element | DOM element to make draggable. |
graphF | mxGraph that acts as the drop target or a function that takes a mouse event and returns the current mxGraph. |
funct | Function to execute on a successful drop. |
dragElement | Optional DOM node to be used for the drag preview. |
dx | Optional horizontal offset between the cursor and the drag preview. |
dy | Optional vertical offset between the cursor and the drag preview. |
autoscroll | Optional boolean that specifies if autoscroll should be used. Default is mxGraph.autoscroll. |
scalePreview | Optional boolean that specifies if the preview element should be scaled according to the graph scale. If this is true, then the offsets will also be scaled. Default is false. |
highlightDropTargets | Optional boolean that specifies if dropTargets should be highlighted. Default is true. |
getDropTarget | Optional function to return the drop target for a given location (x, y). Default is mxGraph.getCellAt. |
Specifies the resource key for the title of the error window.
errorResource: ( mxClient. language ! = 'none' ) ? 'error' : ''
Specifies the resource key for the label of the close button.
closeResource: ( mxClient. language ! = 'none' ) ? 'close' : ''
Defines the image used for error dialogs.
errorImage: mxClient.imageBasePath + '/error.gif'
Removes the cursors from the style of the given DOM node and its descendants.
removeCursors: function( element )
Returns the current style of the specified element.
getCurrentStyle: function()
Parses the given CSS numeric value adding handling for the values thin, medium and thick (2, 4 and 6).
parseCssNumber: function( value )
Adds the given style with the standard name and an optional vendor prefix for the current browser.
setPrefixedStyle: function()
Returns true if the overflow CSS property of the given node is either scroll or auto.
hasScrollbars: function( node )
Returns a wrapper function that locks the execution scope of the given function to the specified scope.
bind: function( scope, funct )
Evaluates the given expression using eval and returns the JavaScript object that represents the expression result.
eval: function( expr )
Returns the first node where attr equals value.
findNode: function( node, attr, value )
Returns the name for the given function.
getFunctionName: function( f )
Returns the index of obj in array or -1 if the array does not contain the given object.
indexOf: function( array, obj )
Calls the given function for each element of the given array and returns the array.
forEach: function( array, fn )
Removes all occurrences of the given object in the given array or object.
remove: function( obj, array )
Returns true if the given value is an XML node with the node name and if the optional attribute has the specified value.
isNode: function( value, nodeName, attributeName, attributeValue )
Returns true if the given ancestor is an ancestor of the given DOM node in the DOM.
isAncestorNode: function( ancestor, child )
Returns an array of child nodes that are of the given node type.
getChildNodes: function( node, nodeType )
Cross browser implementation for document.importNode.
importNode: function( doc, node, allChildren )
Full DOM API implementation for importNode without using importNode API call.
importNodeImplementation: function( doc, node, allChildren )
Returns a new, empty XML document.
createXmlDocument: function()
Returns a new, empty Microsoft.XMLDOM document using ActiveXObject.
createMsXmlDocument: function()
Parses the specified XML string into a new XML document and returns the new document.
parseXml: function()
Clears the current selection in the page.
clearSelection: function()
Removes the sibling text nodes for the given node that only consists of tabs, newlines and spaces.
removeWhitespace: function( node, before )
Replaces characters (less than, greater than, newlines and quotes) with their HTML entities in the given string and returns the result.
htmlEntities: function( s, newline )
Returns true if the given node is in the VML namespace.
isVml: function( node )
Returns the XML content of the specified node.
getXml: function( node, linefeed )
Returns the text content of the specified node.
extractTextWithWhitespace: function( elems )
Replaces each trailing newline with the given pattern.
replaceTrailingNewlines: function( str, pattern )
Returns the text content of the specified node.
getTextContent: function( node )
Sets the text content of the specified node.
setTextContent: function( node, text )
Returns the inner HTML for the given node as a string or an empty string if no node was specified.
getInnerHtml: function()
Returns the outer HTML for the given node as a string or an empty string if no node was specified.
getOuterHtml: function()
Creates a text node for the given string and appends it to the given parent.
write: function( parent, text )
Creates a text node for the given string and appends it to the given parent with an additional linefeed.
writeln: function( parent, text )
Appends a linebreak to the given parent and returns the linebreak.
br: function( parent, count )
Returns a new button with the given level and function as an onclick event handler.
button: function( label, funct, doc )
Appends a new paragraph with the given text to the specified parent and returns the paragraph.
para: function( parent, text )
Adds a transparent background to the filter of the given node.
addTransparentBackgroundFilter: function( node )
Adds a hyperlink to the specified parent that invokes action on the specified editor.
linkAction: function( parent, text, editor, action, pad )
Adds a hyperlink to the specified parent that invokes the specified function on the editor passing along the specified argument.
linkInvoke: function( parent, text, editor, functName, arg, pad )
Adds a hyperlink to the specified parent and invokes the given function when the link is clicked.
link: function( parent, text, funct, pad )
Returns the client size for the current document as an mxRectangle.
getDocumentSize: function()
Makes sure the given node is inside the visible area of the window.
fit: function( node )
Loads the specified URL synchronously and returns the mxXmlRequest.
load: function( url )
Loads the specified URL asynchronously and invokes the given functions depending on the request status.
get: function( url, onload, onerror, binary, timeout, ontimeout, headers )
Loads the URLs in the given array asynchronously and invokes the given function if all requests returned with a valid 2xx status.
getAll: function( urls, onload, onerror )
Posts the specified params to the given URL asynchronously and invokes the given functions depending on the request status.
post: function( url, params, onload, onerror )
Submits the given parameters to the specified URL using mxXmlRequest.simulate and returns the mxXmlRequest.
submit: function( url, params, doc, target )
Creates and posts a request to the given target URL using a dynamically created form inside the given document.
mxXmlRequest.prototype.simulate = function( doc, target )
Loads the specified URL asynchronously into the specified document, invoking onload after the document has been loaded.
loadInto: function( url, doc, onload )
Returns the value for the given key in the given associative array or the given default value if the value is null.
getValue: 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.
getNumber: 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.
getColor: function( array, key, defaultValue )
Recursively clones the specified object ignoring all fieldnames in the given array of transient fields.
clone: function( obj, transients, shallow )
Compares all mxPoints in the given lists.
equalPoints: function( a, b )
Returns true if all properties of the given objects are equal.
equalEntries: function( a, b )
Removes all duplicates from the given array.
removeDuplicates: function( arr )
Returns true if the given value is of type number and isNaN returns true.
isNaN: function( value )
Assigns a copy of the superclass prototype to the subclass prototype.
extend: function( ctor, superCtor )
Returns a textual representation of the specified object.
toString: function( obj )
Converts the given degree to radians.
toRadians: function( deg )
Converts the given radians to degree.
toDegree: function( rad )
Converts the given arc to a series of curves.
arcToCurves: function( x0, y0, r1, r2, angle, largeArcFlag, sweepFlag, x, y )
Returns the bounding box for the rotated rectangle.
getBoundingBox: function( rect, rotation, cx )
Rotates the given point by the given cos and sin.
getRotatedPoint: function( pt, cos, sin, c )
Reverse the port constraint bitmask.
reversePortConstraints: function( constraint )
Finds the index of the nearest segment on the given cell state for the specified coordinate pair.
findNearestSegment: function( state, x, y )
Adds the given margins to the given rectangle and rotates and flips the rectangle according to the respective styles in style.
getDirectedBounds: function ( rect, m, style, flipH, flipV )
Returns the intersection between the polygon defined by the array of points and the line between center and point.
getPerimeterPoint: function ( pts, center, point )
Returns true if the given rectangle intersects the given segment.
rectangleIntersectsSegment: function( bounds, p1, p2 )
Returns true if the specified point (x, y) is contained in the given rectangle.
contains: function( bounds, x, y )
Returns true if the two rectangles intersect.
intersects: function( a, b )
Returns true if the state and the hotspot intersect.
intersectsHotspot: function( state, x, y, hotspot, min, max )
Returns the offset for the specified container as an mxPoint.
getOffset: function( container, scrollOffset )
Returns the scroll origin of the given document or the current document if no document is given.
getDocumentScrollOrigin: function( doc )
Returns the top, left corner of the viewrect as an mxPoint.
getScrollOrigin: function( node, includeAncestors, includeDocument )
Converts the specified point (x, y) using the offset of the specified container and returns a new mxPoint with the result.
convertPoint: function( container, x, y )
Strips all whitespaces from the beginning of the string.
ltrim: function( str, chars )
Strips all whitespaces from the end of the string.
rtrim: function( str, chars )
Strips all whitespaces from both end of the string.
trim: function( str, chars )
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.
isNumeric: function( n )
Returns true if the given value is an valid integer number.
isInteger: function( n )
Returns the remainder of division of n by m.
mod: function( n, m )
Returns the intersection of two lines as an mxPoint.
intersection: function ( x0, y0, x1, y1, x2, y2, x3, y3 )
Returns the square distance between a segment and a point.
ptSegDistSq: function( x1, y1, x2, y2, px, py )
Returns the distance between a line defined by two points and a point.
ptLineDist: 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.
relativeCcw: function( x1, y1, x2, y2, px, py )
See mxEffects.animateChanges.
animateChanges: function( graph, changes )
Asynchronous animated move operation.
animateChanges: function( graph, changes, done )
See mxEffects.cascadeOpacity.
cascadeOpacity: function( graph, cell, opacity )
Sets the opacity on the given cell and its descendants.
cascadeOpacity: function( graph, cell, opacity )
See mxEffects.fadeOut.
fadeOut: function( node, from, remove, step, delay, isEnabled )
Asynchronous fade-out operation.
fadeOut: function( node, from, remove, step, delay, isEnabled )
Sets the opacity of the specified DOM node to the given value in %.
setOpacity: function( node, value )
Creates and returns an image (IMG node) or VML image (v:image) in IE6 in quirks mode.
createImage: function( src )
Sorts the given cells according to the order in the cell hierarchy.
sortCells: function( cells, ascending )
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.
getStylename: 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.
getStylenames: function( style )
Returns the index of the given stylename in the given style.
indexOfStylename: function( style, stylename )
Adds the specified stylename to the given style if it does not already contain the stylename.
addStylename: function( style, stylename )
Removes all occurrences of the specified stylename in the given style and returns the updated style.
removeStylename: function( style, stylename )
Removes all stylenames from the given style and returns the updated style.
removeAllStylenames: function( style )
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.
setCellStyles: function( model, cells, key, value )
Adds or removes the given key, value pair to the style and returns the new style.
setStyle: function( style, key, value )
Sets or toggles the flag bit for the given key in the cell’s styles.
setCellStyleFlags: function( model, cells, key, flag, value )
Sets or removes the given key from the specified style and returns the new style.
setStyleFlag: function( style, key, flag, value )
Returns an mxPoint that represents the horizontal and vertical alignment for numeric computations.
getAlignmentAsPoint: function( align, valign )
Returns an mxRectangle with the size (width and height in pixels) of the given string.
getSizeForString: function( text, fontSize, fontFamily, textWidth, fontStyle )
getViewXml: function( graph, scale, cells, x0, y0 )
Returns the scale to be used for printing the graph with the given bounds across the specifies number of pages with the given format.
getScaleForPageCount: function( pageCount, graph, pageFormat, border )
Copies the styles and the markup from the graph’s container into the given document and removes all cursor styles.
show: function( graph, doc, x0, y0, w, h )
Prints the specified graph using a new window and the built-in print dialog.
printScreen: function( graph )
Shows the specified text content in a new mxWindow or a new browser window if isInternalWindow is false.
popup: function( content, isInternalWindow )
Displayss the given alert in a new dialog.
alert: function( message )
Displays the given message in a prompt dialog.
prompt: function( message, defaultValue )
Displays the given message in a confirm dialog.
confirm: function( message )
Displays the given error message in a new mxWindow of the given width.
error: function( message, width, close, icon )
Configures the given DOM element to act as a drag source for the specified graph.
makeDraggable: function( element, graphF, funct, dragElement, dx, dy, autoscroll, scalePreview, highlightDropTargets, getDropTarget )
DOM node of type ELEMENT.
NODETYPE_ELEMENT: 1
Defines the value for none.
NONE: 'none'
Name of the field to be used to store the object ID.
FIELD_NAME: 'mxObjectId'
Defines the default size (in px).
DEFAULT_FONTSIZE: 11
Defines the default family for all fonts.
DEFAULT_FONTFAMILY: 'Arial
Defines the rectangle for the A4 portrait page format.
PAGE_FORMAT_A4_PORTRAIT: new mxRectangle( 0, 0, 827, 1169 )