diff options
Diffstat (limited to 'src/js/view')
| -rw-r--r-- | src/js/view/mxCellEditor.js | 522 | ||||
| -rw-r--r-- | src/js/view/mxCellOverlay.js | 233 | ||||
| -rw-r--r-- | src/js/view/mxCellRenderer.js | 1480 | ||||
| -rw-r--r-- | src/js/view/mxCellState.js | 375 | ||||
| -rw-r--r-- | src/js/view/mxCellStatePreview.js | 223 | ||||
| -rw-r--r-- | src/js/view/mxConnectionConstraint.js | 42 | ||||
| -rw-r--r-- | src/js/view/mxEdgeStyle.js | 1302 | ||||
| -rw-r--r-- | src/js/view/mxGraph.js | 11176 | ||||
| -rw-r--r-- | src/js/view/mxGraphSelectionModel.js | 435 | ||||
| -rw-r--r-- | src/js/view/mxGraphView.js | 2545 | ||||
| -rw-r--r-- | src/js/view/mxLayoutManager.js | 375 | ||||
| -rw-r--r-- | src/js/view/mxMultiplicity.js | 257 | ||||
| -rw-r--r-- | src/js/view/mxOutline.js | 649 | ||||
| -rw-r--r-- | src/js/view/mxPerimeter.js | 484 | ||||
| -rw-r--r-- | src/js/view/mxPrintPreview.js | 801 | ||||
| -rw-r--r-- | src/js/view/mxSpaceManager.js | 460 | ||||
| -rw-r--r-- | src/js/view/mxStyleRegistry.js | 70 | ||||
| -rw-r--r-- | src/js/view/mxStylesheet.js | 266 | ||||
| -rw-r--r-- | src/js/view/mxSwimlaneManager.js | 449 | ||||
| -rw-r--r-- | src/js/view/mxTemporaryCellStates.js | 105 |
20 files changed, 22249 insertions, 0 deletions
diff --git a/src/js/view/mxCellEditor.js b/src/js/view/mxCellEditor.js new file mode 100644 index 0000000..2086cca --- /dev/null +++ b/src/js/view/mxCellEditor.js @@ -0,0 +1,522 @@ +/** + * $Id: mxCellEditor.js,v 1.62 2012-12-11 16:59:31 gaudenz Exp $ + * Copyright (c) 2006-2010, JGraph Ltd + */ +/** + * Class: mxCellEditor + * + * In-place editor for the graph. To control this editor, use + * <mxGraph.invokesStopCellEditing>, <mxGraph.enterStopsCellEditing> and + * <mxGraph.escapeEnabled>. If <mxGraph.enterStopsCellEditing> is true then + * ctrl-enter or shift-enter can be used to create a linefeed. The F2 and + * escape keys can always be used to stop editing. To customize the location + * of the textbox in the graph, override <getEditorBounds> as follows: + * + * (code) + * graph.cellEditor.getEditorBounds = function(state) + * { + * var result = mxCellEditor.prototype.getEditorBounds.apply(this, arguments); + * + * if (this.graph.getModel().isEdge(state.cell)) + * { + * result.x = state.getCenterX() - result.width / 2; + * result.y = state.getCenterY() - result.height / 2; + * } + * + * return result; + * }; + * (end) + * + * The textarea uses the mxCellEditor CSS class. You can modify this class in + * your custom CSS. Note: You should modify the CSS after loading the client + * in the page. + * + * Example: + * + * To only allow numeric input in the in-place editor, use the following code. + * + * (code) + * var text = graph.cellEditor.textarea; + * + * mxEvent.addListener(text, 'keydown', function (evt) + * { + * if (!(evt.keyCode >= 48 && evt.keyCode <= 57) && + * !(evt.keyCode >= 96 && evt.keyCode <= 105)) + * { + * mxEvent.consume(evt); + * } + * }); + * (end) + * + * Initial values: + * + * To implement an initial value for cells without a label, use the + * <emptyLabelText> variable. + * + * Resize in Chrome: + * + * Resize of the textarea is disabled by default. If you want to enable + * this feature extend <init> and set this.textarea.style.resize = ''. + * + * Constructor: mxCellEditor + * + * Constructs a new in-place editor for the specified graph. + * + * Parameters: + * + * graph - Reference to the enclosing <mxGraph>. + */ +function mxCellEditor(graph) +{ + this.graph = graph; +}; + +/** + * Variable: graph + * + * Reference to the enclosing <mxGraph>. + */ +mxCellEditor.prototype.graph = null; + +/** + * Variable: textarea + * + * Holds the input textarea. Note that this may be null before the first + * edit. Instantiated in <init>. + */ +mxCellEditor.prototype.textarea = null; + +/** + * Variable: editingCell + * + * Reference to the <mxCell> that is currently being edited. + */ +mxCellEditor.prototype.editingCell = null; + +/** + * Variable: trigger + * + * Reference to the event that was used to start editing. + */ +mxCellEditor.prototype.trigger = null; + +/** + * Variable: modified + * + * Specifies if the label has been modified. + */ +mxCellEditor.prototype.modified = false; + +/** + * Variable: emptyLabelText + * + * Text to be displayed for empty labels. Default is ''. This can be set + * to eg. "[Type Here]" to easier visualize editing of empty labels. The + * value is only displayed before the first keystroke and is never used + * as the actual editin value. + */ +mxCellEditor.prototype.emptyLabelText = ''; + +/** + * Variable: textNode + * + * Reference to the label DOM node that has been hidden. + */ +mxCellEditor.prototype.textNode = ''; + +/** + * Function: init + * + * Creates the <textarea> and installs the event listeners. The key handler + * updates the <modified> state. + */ +mxCellEditor.prototype.init = function () +{ + this.textarea = document.createElement('textarea'); + + this.textarea.className = 'mxCellEditor'; + this.textarea.style.position = 'absolute'; + this.textarea.style.overflow = 'visible'; + + this.textarea.setAttribute('cols', '20'); + this.textarea.setAttribute('rows', '4'); + + if (mxClient.IS_GC) + { + this.textarea.style.resize = 'none'; + } + + mxEvent.addListener(this.textarea, 'blur', mxUtils.bind(this, function(evt) + { + this.focusLost(); + })); + + mxEvent.addListener(this.textarea, 'keydown', mxUtils.bind(this, function(evt) + { + if (!mxEvent.isConsumed(evt)) + { + if (evt.keyCode == 113 /* F2 */ || (this.graph.isEnterStopsCellEditing() && + evt.keyCode == 13 /* Enter */ && !mxEvent.isControlDown(evt) && + !mxEvent.isShiftDown(evt))) + { + this.graph.stopEditing(false); + mxEvent.consume(evt); + } + else if (evt.keyCode == 27 /* Escape */) + { + this.graph.stopEditing(true); + mxEvent.consume(evt); + } + else + { + // Clears the initial empty label on the first keystroke + if (this.clearOnChange) + { + this.clearOnChange = false; + this.textarea.value = ''; + } + + // Updates the modified flag for storing the value + this.setModified(true); + } + } + })); +}; + +/** + * Function: isModified + * + * Returns <modified>. + */ +mxCellEditor.prototype.isModified = function() +{ + return this.modified; +}; + +/** + * Function: setModified + * + * Sets <modified> to the specified boolean value. + */ +mxCellEditor.prototype.setModified = function(value) +{ + this.modified = value; +}; + +/** + * Function: focusLost + * + * Called if the textarea has lost focus. + */ +mxCellEditor.prototype.focusLost = function() +{ + this.stopEditing(!this.graph.isInvokesStopCellEditing()); +}; + +/** + * Function: startEditing + * + * Starts the editor for the given cell. + * + * Parameters: + * + * cell - <mxCell> to start editing. + * trigger - Optional mouse event that triggered the editor. + */ +mxCellEditor.prototype.startEditing = function(cell, trigger) +{ + // Lazy instantiates textarea to save memory in IE + if (this.textarea == null) + { + this.init(); + } + + this.stopEditing(true); + var state = this.graph.getView().getState(cell); + + if (state != null) + { + this.editingCell = cell; + this.trigger = trigger; + this.textNode = null; + + if (state.text != null && this.isHideLabel(state)) + { + this.textNode = state.text.node; + this.textNode.style.visibility = 'hidden'; + } + + // Configures the style of the in-place editor + var scale = this.graph.getView().scale; + var size = mxUtils.getValue(state.style, mxConstants.STYLE_FONTSIZE, mxConstants.DEFAULT_FONTSIZE) * scale; + var family = mxUtils.getValue(state.style, mxConstants.STYLE_FONTFAMILY, mxConstants.DEFAULT_FONTFAMILY); + var color = mxUtils.getValue(state.style, mxConstants.STYLE_FONTCOLOR, 'black'); + var align = (this.graph.model.isEdge(state.cell)) ? mxConstants.ALIGN_LEFT : + mxUtils.getValue(state.style, mxConstants.STYLE_ALIGN, mxConstants.ALIGN_LEFT); + var bold = (mxUtils.getValue(state.style, mxConstants.STYLE_FONTSTYLE, 0) & + mxConstants.FONT_BOLD) == mxConstants.FONT_BOLD; + var italic = (mxUtils.getValue(state.style, mxConstants.STYLE_FONTSTYLE, 0) & + mxConstants.FONT_ITALIC) == mxConstants.FONT_ITALIC; + var uline = (mxUtils.getValue(state.style, mxConstants.STYLE_FONTSTYLE, 0) & + mxConstants.FONT_UNDERLINE) == mxConstants.FONT_UNDERLINE; + + this.textarea.style.fontSize = size + 'px'; + this.textarea.style.fontFamily = family; + this.textarea.style.textAlign = align; + this.textarea.style.color = color; + this.textarea.style.fontWeight = (bold) ? 'bold' : 'normal'; + this.textarea.style.fontStyle = (italic) ? 'italic' : ''; + this.textarea.style.textDecoration = (uline) ? 'underline' : ''; + + // Specifies the bounds of the editor box + var bounds = this.getEditorBounds(state); + + this.textarea.style.left = bounds.x + 'px'; + this.textarea.style.top = bounds.y + 'px'; + this.textarea.style.width = bounds.width + 'px'; + this.textarea.style.height = bounds.height + 'px'; + this.textarea.style.zIndex = 5; + + var value = this.getInitialValue(state, trigger); + + // Uses an optional text value for empty labels which is cleared + // when the first keystroke appears. This makes it easier to see + // that a label is being edited even if the label is empty. + if (value == null || value.length == 0) + { + value = this.getEmptyLabelText(); + this.clearOnChange = true; + } + else + { + this.clearOnChange = false; + } + + this.setModified(false); + this.textarea.value = value; + this.graph.container.appendChild(this.textarea); + + if (this.textarea.style.display != 'none') + { + // FIXME: Doesn't bring up the virtual keyboard on iPad + this.textarea.focus(); + this.textarea.select(); + } + } +}; + +/** + * Function: stopEditing + * + * Stops the editor and applies the value if cancel is false. + */ +mxCellEditor.prototype.stopEditing = function(cancel) +{ + cancel = cancel || false; + + if (this.editingCell != null) + { + if (this.textNode != null) + { + this.textNode.style.visibility = 'visible'; + this.textNode = null; + } + + if (!cancel && this.isModified()) + { + this.graph.labelChanged(this.editingCell, this.getCurrentValue(), this.trigger); + } + + this.editingCell = null; + this.trigger = null; + this.textarea.blur(); + this.textarea.parentNode.removeChild(this.textarea); + } +}; + +/** + * Function: getInitialValue + * + * Gets the initial editing value for the given cell. + */ +mxCellEditor.prototype.getInitialValue = function(state, trigger) +{ + return this.graph.getEditingValue(state.cell, trigger); +}; + +/** + * Function: getCurrentValue + * + * Returns the current editing value. + */ +mxCellEditor.prototype.getCurrentValue = function() +{ + return this.textarea.value.replace(/\r/g, ''); +}; + +/** + * Function: isHideLabel + * + * Returns true if the label should be hidden while the cell is being + * edited. + */ +mxCellEditor.prototype.isHideLabel = function(state) +{ + return true; +}; + +/** + * Function: getMinimumSize + * + * Returns the minimum width and height for editing the given state. + */ +mxCellEditor.prototype.getMinimumSize = function(state) +{ + var scale = this.graph.getView().scale; + + return new mxRectangle(0, 0, (state.text == null) ? 30 : state.text.size * scale + 20, + (this.textarea.style.textAlign == 'left') ? 120 : 40); +}; + +/** + * Function: getEditorBounds + * + * Returns the <mxRectangle> that defines the bounds of the editor. + */ +mxCellEditor.prototype.getEditorBounds = function(state) +{ + var isEdge = this.graph.getModel().isEdge(state.cell); + var scale = this.graph.getView().scale; + var minSize = this.getMinimumSize(state); + var minWidth = minSize.width; + var minHeight = minSize.height; + + var spacing = parseInt(state.style[mxConstants.STYLE_SPACING] || 2) * scale; + var spacingTop = (parseInt(state.style[mxConstants.STYLE_SPACING_TOP] || 0)) * scale + spacing; + var spacingRight = (parseInt(state.style[mxConstants.STYLE_SPACING_RIGHT] || 0)) * scale + spacing; + var spacingBottom = (parseInt(state.style[mxConstants.STYLE_SPACING_BOTTOM] || 0)) * scale + spacing; + var spacingLeft = (parseInt(state.style[mxConstants.STYLE_SPACING_LEFT] || 0)) * scale + spacing; + + var result = new mxRectangle(state.x, state.y, + Math.max(minWidth, state.width - spacingLeft - spacingRight), + Math.max(minHeight, state.height - spacingTop - spacingBottom)); + + if (isEdge) + { + result.x = state.absoluteOffset.x; + result.y = state.absoluteOffset.y; + + if (state.text != null && state.text.boundingBox != null) + { + // Workaround for label containing just spaces in which case + // the bounding box location contains negative numbers + if (state.text.boundingBox.x > 0) + { + result.x = state.text.boundingBox.x; + } + + if (state.text.boundingBox.y > 0) + { + result.y = state.text.boundingBox.y; + } + } + } + else if (state.text != null && state.text.boundingBox != null) + { + result.x = Math.min(result.x, state.text.boundingBox.x); + result.y = Math.min(result.y, state.text.boundingBox.y); + } + + result.x += spacingLeft; + result.y += spacingTop; + + if (state.text != null && state.text.boundingBox != null) + { + if (!isEdge) + { + result.width = Math.max(result.width, state.text.boundingBox.width); + result.height = Math.max(result.height, state.text.boundingBox.height); + } + else + { + result.width = Math.max(minWidth, state.text.boundingBox.width); + result.height = Math.max(minHeight, state.text.boundingBox.height); + } + } + + // Applies the horizontal and vertical label positions + if (this.graph.getModel().isVertex(state.cell)) + { + var horizontal = mxUtils.getValue(state.style, mxConstants.STYLE_LABEL_POSITION, mxConstants.ALIGN_CENTER); + + if (horizontal == mxConstants.ALIGN_LEFT) + { + result.x -= state.width; + } + else if (horizontal == mxConstants.ALIGN_RIGHT) + { + result.x += state.width; + } + + var vertical = mxUtils.getValue(state.style, mxConstants.STYLE_VERTICAL_LABEL_POSITION, mxConstants.ALIGN_MIDDLE); + + if (vertical == mxConstants.ALIGN_TOP) + { + result.y -= state.height; + } + else if (vertical == mxConstants.ALIGN_BOTTOM) + { + result.y += state.height; + } + } + + return result; +}; + +/** + * Function: getEmptyLabelText + * + * Returns the initial label value to be used of the label of the given + * cell is empty. This label is displayed and cleared on the first keystroke. + * This implementation returns <emptyLabelText>. + * + * Parameters: + * + * cell - <mxCell> for which a text for an empty editing box should be + * returned. + */ +mxCellEditor.prototype.getEmptyLabelText = function (cell) +{ + return this.emptyLabelText; +}; + +/** + * Function: getEditingCell + * + * Returns the cell that is currently being edited or null if no cell is + * being edited. + */ +mxCellEditor.prototype.getEditingCell = function () +{ + return this.editingCell; +}; + +/** + * Function: destroy + * + * Destroys the editor and removes all associated resources. + */ +mxCellEditor.prototype.destroy = function () +{ + if (this.textarea != null) + { + mxEvent.release(this.textarea); + + if (this.textarea.parentNode != null) + { + this.textarea.parentNode.removeChild(this.textarea); + } + + this.textarea = null; + } +}; diff --git a/src/js/view/mxCellOverlay.js b/src/js/view/mxCellOverlay.js new file mode 100644 index 0000000..316e2c4 --- /dev/null +++ b/src/js/view/mxCellOverlay.js @@ -0,0 +1,233 @@ +/** + * $Id: mxCellOverlay.js,v 1.18 2012-12-06 15:58:44 gaudenz Exp $ + * Copyright (c) 2006-2010, JGraph Ltd + */ +/** + * Class: mxCellOverlay + * + * Extends <mxEventSource> to implement a graph overlay, represented by an icon + * and a tooltip. Overlays can handle and fire <click> events and are added to + * the graph using <mxGraph.addCellOverlay>, and removed using + * <mxGraph.removeCellOverlay>, or <mxGraph.removeCellOverlays> to remove all overlays. + * The <mxGraph.getCellOverlays> function returns the array of overlays for a given + * cell in a graph. If multiple overlays exist for the same cell, then + * <getBounds> should be overridden in at least one of the overlays. + * + * Overlays appear on top of all cells in a special layer. If this is not + * desirable, then the image must be rendered as part of the shape or label of + * the cell instead. + * + * Example: + * + * The following adds a new overlays for a given vertex and selects the cell + * if the overlay is clicked. + * + * (code) + * var overlay = new mxCellOverlay(img, html); + * graph.addCellOverlay(vertex, overlay); + * overlay.addListener(mxEvent.CLICK, function(sender, evt) + * { + * var cell = evt.getProperty('cell'); + * graph.setSelectionCell(cell); + * }); + * (end) + * + * For cell overlays to be printed use <mxPrintPreview.printOverlays>. + * + * Event: mxEvent.CLICK + * + * Fires when the user clicks on the overlay. The <code>event</code> property + * contains the corresponding mouse event and the <code>cell</code> property + * contains the cell. For touch devices this is fired if the element receives + * a touchend event. + * + * Constructor: mxCellOverlay + * + * Constructs a new overlay using the given image and tooltip. + * + * Parameters: + * + * image - <mxImage> that represents the icon to be displayed. + * tooltip - Optional string that specifies the tooltip. + * align - Optional horizontal alignment for the overlay. Possible + * values are <ALIGN_LEFT>, <ALIGN_CENTER> and <ALIGN_RIGHT> + * (default). + * verticalAlign - Vertical alignment for the overlay. Possible + * values are <ALIGN_TOP>, <ALIGN_MIDDLE> and <ALIGN_BOTTOM> + * (default). + */ +function mxCellOverlay(image, tooltip, align, verticalAlign, offset, cursor) +{ + this.image = image; + this.tooltip = tooltip; + this.align = (align != null) ? align : this.align; + this.verticalAlign = (verticalAlign != null) ? verticalAlign : this.verticalAlign; + this.offset = (offset != null) ? offset : new mxPoint(); + this.cursor = (cursor != null) ? cursor : 'help'; +}; + +/** + * Extends mxEventSource. + */ +mxCellOverlay.prototype = new mxEventSource(); +mxCellOverlay.prototype.constructor = mxCellOverlay; + +/** + * Variable: image + * + * Holds the <mxImage> to be used as the icon. + */ +mxCellOverlay.prototype.image = null; + +/** + * Variable: tooltip + * + * Holds the optional string to be used as the tooltip. + */ +mxCellOverlay.prototype.tooltip = null; + +/** + * Variable: align + * + * Holds the horizontal alignment for the overlay. Default is + * <mxConstants.ALIGN_RIGHT>. For edges, the overlay always appears in the + * center of the edge. + */ +mxCellOverlay.prototype.align = mxConstants.ALIGN_RIGHT; + +/** + * Variable: verticalAlign + * + * Holds the vertical alignment for the overlay. Default is + * <mxConstants.ALIGN_BOTTOM>. For edges, the overlay always appears in the + * center of the edge. + */ +mxCellOverlay.prototype.verticalAlign = mxConstants.ALIGN_BOTTOM; + +/** + * Variable: offset + * + * Holds the offset as an <mxPoint>. The offset will be scaled according to the + * current scale. + */ +mxCellOverlay.prototype.offset = null; + +/** + * Variable: cursor + * + * Holds the cursor for the overlay. Default is 'help'. + */ +mxCellOverlay.prototype.cursor = null; + +/** + * Variable: defaultOverlap + * + * Defines the overlapping for the overlay, that is, the proportional distance + * from the origin to the point defined by the alignment. Default is 0.5. + */ +mxCellOverlay.prototype.defaultOverlap = 0.5; + +/** + * Function: getBounds + * + * Returns the bounds of the overlay for the given <mxCellState> as an + * <mxRectangle>. This should be overridden when using multiple overlays + * per cell so that the overlays do not overlap. + * + * The following example will place the overlay along an edge (where + * x=[-1..1] from the start to the end of the edge and y is the + * orthogonal offset in px). + * + * (code) + * overlay.getBounds = function(state) + * { + * var bounds = mxCellOverlay.prototype.getBounds.apply(this, arguments); + * + * if (state.view.graph.getModel().isEdge(state.cell)) + * { + * var pt = state.view.getPoint(state, {x: 0, y: 0, relative: true}); + * + * bounds.x = pt.x - bounds.width / 2; + * bounds.y = pt.y - bounds.height / 2; + * } + * + * return bounds; + * }; + * (end) + * + * Parameters: + * + * state - <mxCellState> that represents the current state of the + * associated cell. + */ +mxCellOverlay.prototype.getBounds = function(state) +{ + var isEdge = state.view.graph.getModel().isEdge(state.cell); + var s = state.view.scale; + var pt = null; + + var w = this.image.width; + var h = this.image.height; + + if (isEdge) + { + var pts = state.absolutePoints; + + if (pts.length % 2 == 1) + { + pt = pts[Math.floor(pts.length / 2)]; + } + else + { + var idx = pts.length / 2; + var p0 = pts[idx-1]; + var p1 = pts[idx]; + pt = new mxPoint(p0.x + (p1.x - p0.x) / 2, + p0.y + (p1.y - p0.y) / 2); + } + } + else + { + pt = new mxPoint(); + + if (this.align == mxConstants.ALIGN_LEFT) + { + pt.x = state.x; + } + else if (this.align == mxConstants.ALIGN_CENTER) + { + pt.x = state.x + state.width / 2; + } + else + { + pt.x = state.x + state.width; + } + + if (this.verticalAlign == mxConstants.ALIGN_TOP) + { + pt.y = state.y; + } + else if (this.verticalAlign == mxConstants.ALIGN_MIDDLE) + { + pt.y = state.y + state.height / 2; + } + else + { + pt.y = state.y + state.height; + } + } + + return new mxRectangle(pt.x - (w * this.defaultOverlap - this.offset.x) * s, + pt.y - (h * this.defaultOverlap - this.offset.y) * s, w * s, h * s); +}; + +/** + * Function: toString + * + * Returns the textual representation of the overlay to be used as the + * tooltip. This implementation returns <tooltip>. + */ +mxCellOverlay.prototype.toString = function() +{ + return this.tooltip; +}; diff --git a/src/js/view/mxCellRenderer.js b/src/js/view/mxCellRenderer.js new file mode 100644 index 0000000..6b506ad --- /dev/null +++ b/src/js/view/mxCellRenderer.js @@ -0,0 +1,1480 @@ +/** + * $Id: mxCellRenderer.js,v 1.189 2012-11-20 09:06:07 gaudenz Exp $ + * Copyright (c) 2006-2010, JGraph Ltd + */ +/** + * Class: mxCellRenderer + * + * Renders cells into a document object model. The <defaultShapes> is a global + * map of shapename, constructor pairs that is used in all instances. You can + * get a list of all available shape names using the following code. + * + * In general the cell renderer is in charge of creating, redrawing and + * destroying the shape and label associated with a cell state, as well as + * some other graphical objects, namely controls and overlays. The shape + * hieararchy in the display (ie. the hierarchy in which the DOM nodes + * appear in the document) does not reflect the cell hierarchy. The shapes + * are a (flat) sequence of shapes and labels inside the draw pane of the + * graph view, with some exceptions, namely the HTML labels being placed + * directly inside the graph container for certain browsers. + * + * (code) + * mxLog.show(); + * for (var i in mxCellRenderer.prototype.defaultShapes) + * { + * mxLog.debug(i); + * } + * (end) + * + * Constructor: mxCellRenderer + * + * Constructs a new cell renderer with the following built-in shapes: + * arrow, rectangle, ellipse, rhombus, image, line, label, cylinder, + * swimlane, connector, actor and cloud. + */ +function mxCellRenderer() +{ + this.shapes = mxUtils.clone(this.defaultShapes); +}; + +/** + * Variable: shapes + * + * Array that maps from shape names to shape constructors. All entries + * in <defaultShapes> are added to this array. + */ +mxCellRenderer.prototype.shapes = null; + +/** + * Variable: defaultEdgeShape + * + * Defines the default shape for edges. Default is <mxConnector>. + */ +mxCellRenderer.prototype.defaultEdgeShape = mxConnector; + +/** + * Variable: defaultVertexShape + * + * Defines the default shape for vertices. Default is <mxRectangleShape>. + */ +mxCellRenderer.prototype.defaultVertexShape = mxRectangleShape; + +/** + * Variable: defaultShapes + * + * Static array that contains the globally registered shapes which are + * known to all instances of this class. For adding instance-specific + * shapes you should use <registerShape> on the instance. For adding + * a shape to this array you can use the following code: + * + * (code) + * mxCellRenderer.prototype.defaultShapes['myshape'] = myShape; + * (end) + * + * Where 'myshape' is the key under which the shape is to be registered + * and myShape is the name of the constructor function. + */ +mxCellRenderer.prototype.defaultShapes = new Object(); + +// Adds default shapes into the default shapes array +mxCellRenderer.prototype.defaultShapes[mxConstants.SHAPE_ARROW] = mxArrow; +mxCellRenderer.prototype.defaultShapes[mxConstants.SHAPE_RECTANGLE] = mxRectangleShape; +mxCellRenderer.prototype.defaultShapes[mxConstants.SHAPE_ELLIPSE] = mxEllipse; +mxCellRenderer.prototype.defaultShapes[mxConstants.SHAPE_DOUBLE_ELLIPSE] = mxDoubleEllipse; +mxCellRenderer.prototype.defaultShapes[mxConstants.SHAPE_RHOMBUS] = mxRhombus; +mxCellRenderer.prototype.defaultShapes[mxConstants.SHAPE_IMAGE] = mxImageShape; +mxCellRenderer.prototype.defaultShapes[mxConstants.SHAPE_LINE] = mxLine; +mxCellRenderer.prototype.defaultShapes[mxConstants.SHAPE_LABEL] = mxLabel; +mxCellRenderer.prototype.defaultShapes[mxConstants.SHAPE_CYLINDER] = mxCylinder; +mxCellRenderer.prototype.defaultShapes[mxConstants.SHAPE_SWIMLANE] = mxSwimlane; +mxCellRenderer.prototype.defaultShapes[mxConstants.SHAPE_CONNECTOR] = mxConnector; +mxCellRenderer.prototype.defaultShapes[mxConstants.SHAPE_ACTOR] = mxActor; +mxCellRenderer.prototype.defaultShapes[mxConstants.SHAPE_CLOUD] = mxCloud; +mxCellRenderer.prototype.defaultShapes[mxConstants.SHAPE_TRIANGLE] = mxTriangle; +mxCellRenderer.prototype.defaultShapes[mxConstants.SHAPE_HEXAGON] = mxHexagon; + +/** + * Function: registerShape + * + * Registers the given constructor under the specified key in this instance + * of the renderer. + * + * Example: + * + * (code) + * this.registerShape(mxConstants.SHAPE_RECTANGLE, mxRectangleShape); + * (end) + * + * Parameters: + * + * key - String representing the shape name. + * shape - Constructor of the <mxShape> subclass. + */ +mxCellRenderer.prototype.registerShape = function(key, shape) +{ + this.shapes[key] = shape; +}; + +/** + * Function: initialize + * + * Initializes the display for the given cell state. This is required once + * after the cell state has been created. This is invoked in + * mxGraphView.createState. + * + * Parameters: + * + * state - <mxCellState> for which the display should be initialized. + * rendering - Optional boolean that specifies if the cell should actually + * be initialized for any given DOM node. If this is false then init + * will not be called on the shape. + */ +mxCellRenderer.prototype.initialize = function(state, rendering) +{ + var model = state.view.graph.getModel(); + + if (state.view.graph.container != null && state.shape == null && + state.cell != state.view.currentRoot && + (model.isVertex(state.cell) || model.isEdge(state.cell))) + { + this.createShape(state); + + if (state.shape != null && (rendering == null || rendering)) + { + this.initializeShape(state); + + // Maintains the model order in the DOM + if (state.view.graph.ordered || model.isEdge(state.cell)) + { + //state.orderChanged = true; + state.invalidOrder = true; + } + else if (state.view.graph.keepEdgesInForeground && this.firstEdge != null) + { + if (this.firstEdge.parentNode == state.shape.node.parentNode) + { + this.insertState(state, this.firstEdge); + } + else + { + this.firstEdge = null; + } + } + + state.shape.scale = state.view.scale; + + this.createCellOverlays(state); + this.installListeners(state); + } + } +}; + +/** + * Function: initializeShape + * + * Initializes the shape in the given state by calling its init method with + * the correct container. + * + * Parameters: + * + * state - <mxCellState> for which the shape should be initialized. + */ +mxCellRenderer.prototype.initializeShape = function(state) +{ + state.shape.init(state.view.getDrawPane()); +}; + +/** + * Returns the previous state that has a shape inside the given parent. + */ +mxCellRenderer.prototype.getPreviousStateInContainer = function(state, container) +{ + var result = null; + var graph = state.view.graph; + var model = graph.getModel(); + var child = state.cell; + var p = model.getParent(child); + + while (p != null && result == null) + { + result = this.findPreviousStateInContainer(graph, p, child, container); + child = p; + p = model.getParent(child); + } + + return result; +}; + +/** + * Returns the previous state that has a shape inside the given parent. + */ +mxCellRenderer.prototype.findPreviousStateInContainer = function(graph, cell, stop, container) +{ + // Recurse first + var result = null; + var model = graph.getModel(); + + if (stop != null) + { + var start = cell.getIndex(stop); + + for (var i = start - 1; i >= 0 && result == null; i--) + { + result = this.findPreviousStateInContainer(graph, model.getChildAt(cell, i), null, container); + } + } + else + { + var childCount = model.getChildCount(cell); + + for (var i = childCount - 1; i >= 0 && result == null; i--) + { + result = this.findPreviousStateInContainer(graph, model.getChildAt(cell, i), null, container); + } + } + + if (result == null) + { + result = graph.view.getState(cell); + + if (result != null && (result.shape == null || result.shape.node == null || + result.shape.node.parentNode != container)) + { + result = null; + } + } + + return result; +}; + +/** + * Function: order + * + * Orders the DOM node of the shape for the given state according to the + * position of the corresponding cell in the graph model. + * + * Parameters: + * + * state - <mxCellState> whose shape's DOM node should be ordered. + */ +mxCellRenderer.prototype.order = function(state) +{ + var container = state.shape.node.parentNode; + var previous = this.getPreviousStateInContainer(state, container); + var nextNode = container.firstChild; + + if (previous != null) + { + nextNode = previous.shape.node; + + if (previous.text != null && previous.text.node != null && + previous.text.node.parentNode == container) + { + nextNode = previous.text.node; + } + + nextNode = nextNode.nextSibling; + } + + this.insertState(state, nextNode); +}; + +/** + * Function: orderEdge + * + * Orders the DOM node of the shape for the given edge's state according to + * the <mxGraph.keepEdgesInBackground> and <mxGraph.keepEdgesInBackground> + * rules. + * + * Parameters: + * + * state - <mxCellState> whose shape's DOM node should be ordered. + */ +mxCellRenderer.prototype.orderEdge = function(state) +{ + var view = state.view; + var model = view.graph.getModel(); + + // Moves edges to the foreground/background + if (view.graph.keepEdgesInForeground) + { + if (this.firstEdge == null || this.firstEdge.parentNode == null || + this.firstEdge.parentNode != state.shape.node.parentNode) + { + this.firstEdge = state.shape.node; + } + } + else if (view.graph.keepEdgesInBackground) + { + var node = state.shape.node; + var parent = node.parentNode; + + // Keeps the DOM node in front of its parent + var pcell = model.getParent(state.cell); + var pstate = view.getState(pcell); + + if (pstate != null && pstate.shape != null && pstate.shape.node != null) + { + var child = pstate.shape.node.nextSibling; + + if (child != null && child != node) + { + this.insertState(state, child); + } + } + else + { + var child = parent.firstChild; + + if (child != null && child != node) + { + this.insertState(state, child); + } + } + } +}; + +/** + * Function: insertState + * + * Inserts the given state before the given node into its parent. + * + * Parameters: + * + * state - <mxCellState> for which the shape should be created. + */ +mxCellRenderer.prototype.insertState = function(state, nextNode) +{ + state.shape.node.parentNode.insertBefore(state.shape.node, nextNode); + + if (state.text != null && state.text.node != null && + state.text.node.parentNode == state.shape.node.parentNode) + { + state.shape.node.parentNode.insertBefore(state.text.node, state.shape.node.nextSibling); + } +}; + +/** + * Function: createShape + * + * Creates the shape for the given cell state. The shape is configured + * using <configureShape>. + * + * Parameters: + * + * state - <mxCellState> for which the shape should be created. + */ +mxCellRenderer.prototype.createShape = function(state) +{ + if (state.style != null) + { + // Checks if there is a stencil for the name and creates + // a shape instance for the stencil if one exists + var key = state.style[mxConstants.STYLE_SHAPE]; + var stencil = mxStencilRegistry.getStencil(key); + + if (stencil != null) + { + state.shape = new mxStencilShape(stencil); + } + else + { + var ctor = this.getShapeConstructor(state); + state.shape = new ctor(); + } + + // Sets the initial bounds and points (will be updated in redraw) + state.shape.points = state.absolutePoints; + state.shape.bounds = new mxRectangle( + state.x, state.y, state.width, state.height); + state.shape.dialect = state.view.graph.dialect; + + this.configureShape(state); + } +}; + +/** + * Function: getShapeConstructor + * + * Returns the constructor to be used for creating the shape. + */ +mxCellRenderer.prototype.getShapeConstructor = function(state) +{ + var key = state.style[mxConstants.STYLE_SHAPE]; + var ctor = (key != null) ? this.shapes[key] : null; + + if (ctor == null) + { + ctor = (state.view.graph.getModel().isEdge(state.cell)) ? + this.defaultEdgeShape : this.defaultVertexShape; + } + + return ctor; +}; + +/** + * Function: configureShape + * + * Configures the shape for the given cell state. + * + * Parameters: + * + * state - <mxCellState> for which the shape should be configured. + */ +mxCellRenderer.prototype.configureShape = function(state) +{ + state.shape.apply(state); + var image = state.view.graph.getImage(state); + + if (image != null) + { + state.shape.image = image; + } + + var indicator = state.view.graph.getIndicatorColor(state); + var key = state.view.graph.getIndicatorShape(state); + var ctor = (key != null) ? this.shapes[key] : null; + + // Configures the indicator shape or image + if (indicator != null) + { + state.shape.indicatorShape = ctor; + state.shape.indicatorColor = indicator; + state.shape.indicatorGradientColor = + state.view.graph.getIndicatorGradientColor(state); + state.shape.indicatorDirection = + state.style[mxConstants.STYLE_INDICATOR_DIRECTION]; + } + else + { + var indicator = state.view.graph.getIndicatorImage(state); + + if (indicator != null) + { + state.shape.indicatorImage = indicator; + } + } + + this.postConfigureShape(state); +}; + +/** + * Function: postConfigureShape + * + * Replaces any reserved words used for attributes, eg. inherit, + * indicated or swimlane for colors in the shape for the given state. + * This implementation resolves these keywords on the fill, stroke + * and gradient color keys. + */ +mxCellRenderer.prototype.postConfigureShape = function(state) +{ + if (state.shape != null) + { + this.resolveColor(state, 'indicatorColor', mxConstants.STYLE_FILLCOLOR); + this.resolveColor(state, 'indicatorGradientColor', mxConstants.STYLE_GRADIENTCOLOR); + this.resolveColor(state, 'fill', mxConstants.STYLE_FILLCOLOR); + this.resolveColor(state, 'stroke', mxConstants.STYLE_STROKECOLOR); + this.resolveColor(state, 'gradient', mxConstants.STYLE_GRADIENTCOLOR); + } +}; + +/** + * Function: resolveColor + * + * Resolves special keywords 'inherit', 'indicated' and 'swimlane' and sets + * the respective color on the shape. + */ +mxCellRenderer.prototype.resolveColor = function(state, field, key) +{ + var value = state.shape[field]; + var graph = state.view.graph; + var referenced = null; + + if (value == 'inherit') + { + referenced = graph.model.getParent(state.cell); + } + else if (value == 'swimlane') + { + if (graph.model.getTerminal(state.cell, false) != null) + { + referenced = graph.model.getTerminal(state.cell, false); + } + else + { + referenced = state.cell; + } + + referenced = graph.getSwimlane(referenced); + key = graph.swimlaneIndicatorColorAttribute; + } + else if (value == 'indicated') + { + state.shape[field] = state.shape.indicatorColor; + } + + if (referenced != null) + { + var rstate = graph.getView().getState(referenced); + state.shape[field] = null; + + if (rstate != null) + { + if (rstate.shape != null && field != 'indicatorColor') + { + state.shape[field] = rstate.shape[field]; + } + else + { + state.shape[field] = rstate.style[key]; + } + } + } +}; + +/** + * Function: getLabelValue + * + * Returns the value to be used for the label. + * + * Parameters: + * + * state - <mxCellState> for which the label should be created. + */ +mxCellRenderer.prototype.getLabelValue = function(state) +{ + var graph = state.view.graph; + var value = graph.getLabel(state.cell); + + if (!graph.isHtmlLabel(state.cell) && !mxUtils.isNode(value) && + graph.dialect != mxConstants.DIALECT_SVG && value != null) + { + value = mxUtils.htmlEntities(value, false); + } + + return value; +}; + +/** + * Function: createLabel + * + * Creates the label for the given cell state. + * + * Parameters: + * + * state - <mxCellState> for which the label should be created. + */ +mxCellRenderer.prototype.createLabel = function(state, value) +{ + var graph = state.view.graph; + var isEdge = graph.getModel().isEdge(state.cell); + + if (state.style[mxConstants.STYLE_FONTSIZE] > 0 || + state.style[mxConstants.STYLE_FONTSIZE] == null) + { + // Avoids using DOM node for empty labels + var isForceHtml = (graph.isHtmlLabel(state.cell) || + (value != null && mxUtils.isNode(value))) && + graph.dialect == mxConstants.DIALECT_SVG; + + state.text = new mxText(value, new mxRectangle(), + (state.style[mxConstants.STYLE_ALIGN] || + mxConstants.ALIGN_CENTER), + graph.getVerticalAlign(state), + state.style[mxConstants.STYLE_FONTCOLOR], + state.style[mxConstants.STYLE_FONTFAMILY], + state.style[mxConstants.STYLE_FONTSIZE], + state.style[mxConstants.STYLE_FONTSTYLE], + state.style[mxConstants.STYLE_SPACING], + state.style[mxConstants.STYLE_SPACING_TOP], + state.style[mxConstants.STYLE_SPACING_RIGHT], + state.style[mxConstants.STYLE_SPACING_BOTTOM], + state.style[mxConstants.STYLE_SPACING_LEFT], + state.style[mxConstants.STYLE_HORIZONTAL], + state.style[mxConstants.STYLE_LABEL_BACKGROUNDCOLOR], + state.style[mxConstants.STYLE_LABEL_BORDERCOLOR], + graph.isWrapping(state.cell) && graph.isHtmlLabel(state.cell), + graph.isLabelClipped(state.cell), + state.style[mxConstants.STYLE_OVERFLOW], + state.style[mxConstants.STYLE_LABEL_PADDING]); + state.text.opacity = state.style[mxConstants.STYLE_TEXT_OPACITY]; + + state.text.dialect = (isForceHtml) ? + mxConstants.DIALECT_STRICTHTML : + state.view.graph.dialect; + this.initializeLabel(state); + + // Workaround for touch devices routing all events for a mouse + // gesture (down, move, up) via the initial DOM node. IE is even + // worse in that it redirects the event via the initial DOM node + // but the event source is the node under the mouse, so we need + // to check if this is the case and force getCellAt for the + // subsequent mouseMoves and the final mouseUp. + var forceGetCell = false; + + var getState = function(evt) + { + var result = state; + + if (mxClient.IS_TOUCH || forceGetCell) + { + var x = mxEvent.getClientX(evt); + var y = mxEvent.getClientY(evt); + + // Dispatches the drop event to the graph which + // consumes and executes the source function + var pt = mxUtils.convertPoint(graph.container, x, y); + result = graph.view.getState(graph.getCellAt(pt.x, pt.y)); + } + + return result; + }; + + // TODO: Add handling for gestures + var md = (mxClient.IS_TOUCH) ? 'touchstart' : 'mousedown'; + var mm = (mxClient.IS_TOUCH) ? 'touchmove' : 'mousemove'; + var mu = (mxClient.IS_TOUCH) ? 'touchend' : 'mouseup'; + + mxEvent.addListener(state.text.node, md, + mxUtils.bind(this, function(evt) + { + if (this.isLabelEvent(state, evt)) + { + graph.fireMouseEvent(mxEvent.MOUSE_DOWN, + new mxMouseEvent(evt, state)); + forceGetCell = graph.dialect != mxConstants.DIALECT_SVG && mxEvent.getSource(evt).nodeName == 'IMG'; + } + }) + ); + + mxEvent.addListener(state.text.node, mm, + mxUtils.bind(this, function(evt) + { + if (this.isLabelEvent(state, evt)) + { + graph.fireMouseEvent(mxEvent.MOUSE_MOVE, + new mxMouseEvent(evt, getState(evt))); + } + }) + ); + + mxEvent.addListener(state.text.node, mu, + mxUtils.bind(this, function(evt) + { + if (this.isLabelEvent(state, evt)) + { + graph.fireMouseEvent(mxEvent.MOUSE_UP, + new mxMouseEvent(evt, getState(evt))); + forceGetCell = false; + } + }) + ); + + mxEvent.addListener(state.text.node, 'dblclick', + mxUtils.bind(this, function(evt) + { + if (this.isLabelEvent(state, evt)) + { + graph.dblClick(evt, state.cell); + mxEvent.consume(evt); + } + }) + ); + } +}; + +/** + * Function: initializeLabel + * + * Initiailzes the label with a suitable container. + * + * Parameters: + * + * state - <mxCellState> whose label should be initialized. + */ +mxCellRenderer.prototype.initializeLabel = function(state) +{ + var graph = state.view.graph; + + if (state.text.dialect != mxConstants.DIALECT_SVG) + { + // Adds the text to the container if the dialect is not SVG and we + // have an SVG-based browser which doesn't support foreignObjects + if (mxClient.IS_SVG && mxClient.NO_FO) + { + state.text.init(graph.container); + } + else if (mxUtils.isVml(state.view.getDrawPane())) + { + if (state.shape.label != null) + { + state.text.init(state.shape.label); + } + else + { + state.text.init(state.shape.node); + } + } + } + + if (state.text.node == null) + { + state.text.init(state.view.getDrawPane()); + + if (state.shape != null && state.text != null) + { + state.shape.node.parentNode.insertBefore( + state.text.node, state.shape.node.nextSibling); + } + } +}; + +/** + * Function: createCellOverlays + * + * Creates the actual shape for showing the overlay for the given cell state. + * + * Parameters: + * + * state - <mxCellState> for which the overlay should be created. + */ +mxCellRenderer.prototype.createCellOverlays = function(state) +{ + var graph = state.view.graph; + var overlays = graph.getCellOverlays(state.cell); + var dict = null; + + if (overlays != null) + { + dict = new mxDictionary(); + + for (var i = 0; i < overlays.length; i++) + { + var shape = (state.overlays != null) ? state.overlays.remove(overlays[i]) : null; + + if (shape == null) + { + var tmp = new mxImageShape(new mxRectangle(), + overlays[i].image.src); + tmp.dialect = state.view.graph.dialect; + tmp.preserveImageAspect = false; + tmp.overlay = overlays[i]; + this.initializeOverlay(state, tmp); + this.installCellOverlayListeners(state, overlays[i], tmp); + + if (overlays[i].cursor != null) + { + tmp.node.style.cursor = overlays[i].cursor; + } + + dict.put(overlays[i], tmp); + } + else + { + dict.put(overlays[i], shape); + } + } + } + + // Removes unused + if (state.overlays != null) + { + state.overlays.visit(function(id, shape) + { + shape.destroy(); + }); + } + + state.overlays = dict; +}; + +/** + * Function: initializeOverlay + * + * Initializes the given overlay. + * + * Parameters: + * + * state - <mxCellState> for which the overlay should be created. + * overlay - <mxImageShape> that represents the overlay. + */ +mxCellRenderer.prototype.initializeOverlay = function(state, overlay) +{ + overlay.init(state.view.getOverlayPane()); +}; + +/** + * Function: installOverlayListeners + * + * Installs the listeners for the given <mxCellState>, <mxCellOverlay> and + * <mxShape> that represents the overlay. + */ +mxCellRenderer.prototype.installCellOverlayListeners = function(state, overlay, shape) +{ + var graph = state.view.graph; + + mxEvent.addListener(shape.node, 'click', function (evt) + { + if (graph.isEditing()) + { + graph.stopEditing(!graph.isInvokesStopCellEditing()); + } + + overlay.fireEvent(new mxEventObject(mxEvent.CLICK, + 'event', evt, 'cell', state.cell)); + }); + + var md = (mxClient.IS_TOUCH) ? 'touchstart' : 'mousedown'; + var mm = (mxClient.IS_TOUCH) ? 'touchmove' : 'mousemove'; + + mxEvent.addListener(shape.node, md, function (evt) + { + mxEvent.consume(evt); + }); + + mxEvent.addListener(shape.node, mm, function (evt) + { + graph.fireMouseEvent(mxEvent.MOUSE_MOVE, + new mxMouseEvent(evt, state)); + }); + + if (mxClient.IS_TOUCH) + { + mxEvent.addListener(shape.node, 'touchend', function (evt) + { + overlay.fireEvent(new mxEventObject(mxEvent.CLICK, + 'event', evt, 'cell', state.cell)); + }); + } +}; + +/** + * Function: createControl + * + * Creates the control for the given cell state. + * + * Parameters: + * + * state - <mxCellState> for which the control should be created. + */ +mxCellRenderer.prototype.createControl = function(state) +{ + var graph = state.view.graph; + var image = graph.getFoldingImage(state); + + if (graph.foldingEnabled && image != null) + { + if (state.control == null) + { + var b = new mxRectangle(0, 0, image.width, image.height); + state.control = new mxImageShape(b, image.src); + state.control.dialect = graph.dialect; + state.control.preserveImageAspect = false; + + this.initControl(state, state.control, true, function (evt) + { + if (graph.isEnabled()) + { + var collapse = !graph.isCellCollapsed(state.cell); + graph.foldCells(collapse, false, [state.cell]); + mxEvent.consume(evt); + } + }); + } + } + else if (state.control != null) + { + state.control.destroy(); + state.control = null; + } +}; + +/** + * Function: initControl + * + * Initializes the given control and returns the corresponding DOM node. + * + * Parameters: + * + * state - <mxCellState> for which the control should be initialized. + * control - <mxShape> to be initialized. + * handleEvents - Boolean indicating if mousedown and mousemove should fire events via the graph. + * clickHandler - Optional function to implement clicks on the control. + */ +mxCellRenderer.prototype.initControl = function(state, control, handleEvents, clickHandler) +{ + var graph = state.view.graph; + + // In the special case where the label is in HTML and the display is SVG the image + // should go into the graph container directly in order to be clickable. Otherwise + // it is obscured by the HTML label that overlaps the cell. + var isForceHtml = graph.isHtmlLabel(state.cell) && + mxClient.NO_FO && + graph.dialect == mxConstants.DIALECT_SVG; + + if (isForceHtml) + { + control.dialect = mxConstants.DIALECT_PREFERHTML; + control.init(graph.container); + control.node.style.zIndex = 1; + } + else + { + control.init(state.view.getOverlayPane()); + } + + var node = control.innerNode || control.node; + + if (clickHandler) + { + if (graph.isEnabled()) + { + node.style.cursor = 'pointer'; + } + + mxEvent.addListener(node, 'click', clickHandler); + } + + if (handleEvents) + { + var md = (mxClient.IS_TOUCH) ? 'touchstart' : 'mousedown'; + var mm = (mxClient.IS_TOUCH) ? 'touchmove' : 'mousemove'; + + mxEvent.addListener(node, md, function (evt) + { + graph.fireMouseEvent(mxEvent.MOUSE_DOWN, new mxMouseEvent(evt, state)); + mxEvent.consume(evt); + }); + + mxEvent.addListener(node, mm, function (evt) + { + graph.fireMouseEvent(mxEvent.MOUSE_MOVE, new mxMouseEvent(evt, state)); + }); + } + + return node; +}; + +/** + * Function: isShapeEvent + * + * Returns true if the event is for the shape of the given state. This + * implementation always returns true. + * + * Parameters: + * + * state - <mxCellState> whose shape fired the event. + * evt - Mouse event which was fired. + */ +mxCellRenderer.prototype.isShapeEvent = function(state, evt) +{ + return true; +}; + +/** + * Function: isLabelEvent + * + * Returns true if the event is for the label of the given state. This + * implementation always returns true. + * + * Parameters: + * + * state - <mxCellState> whose label fired the event. + * evt - Mouse event which was fired. + */ +mxCellRenderer.prototype.isLabelEvent = function(state, evt) +{ + return true; +}; + +/** + * Function: installListeners + * + * Installs the event listeners for the given cell state. + * + * Parameters: + * + * state - <mxCellState> for which the event listeners should be isntalled. + */ +mxCellRenderer.prototype.installListeners = function(state) +{ + var graph = state.view.graph; + + // Receives events from transparent backgrounds + if (graph.dialect == mxConstants.DIALECT_SVG) + { + var events = 'all'; + + // Disabled fill-events on non-filled edges + if (graph.getModel().isEdge(state.cell) && state.shape.stroke != null && + (state.shape.fill == null || state.shape.fill == mxConstants.NONE)) + { + events = 'visibleStroke'; + } + + // Specifies the event-processing on the shape + if (state.shape.innerNode != null) + { + state.shape.innerNode.setAttribute('pointer-events', events); + } + else + { + state.shape.node.setAttribute('pointer-events', events); + } + } + + // Workaround for touch devices routing all events for a mouse + // gesture (down, move, up) via the initial DOM node. Same for + // HTML images in all IE versions (VML images are working). + var getState = function(evt) + { + var result = state; + + if ((graph.dialect != mxConstants.DIALECT_SVG && mxEvent.getSource(evt).nodeName == 'IMG') || mxClient.IS_TOUCH) + { + var x = mxEvent.getClientX(evt); + var y = mxEvent.getClientY(evt); + + // Dispatches the drop event to the graph which + // consumes and executes the source function + var pt = mxUtils.convertPoint(graph.container, x, y); + result = graph.view.getState(graph.getCellAt(pt.x, pt.y)); + } + + return result; + }; + + // Experimental support for two-finger pinch to resize cells + var gestureInProgress = false; + + mxEvent.addListener(state.shape.node, 'gesturestart', + mxUtils.bind(this, function(evt) + { + // FIXME: Breaks encapsulation to reset the double + // tap event handling when gestures take place + graph.lastTouchTime = 0; + + gestureInProgress = true; + mxEvent.consume(evt); + }) + ); + + var md = (mxClient.IS_TOUCH) ? 'touchstart' : 'mousedown'; + var mm = (mxClient.IS_TOUCH) ? 'touchmove' : 'mousemove'; + var mu = (mxClient.IS_TOUCH) ? 'touchend' : 'mouseup'; + + mxEvent.addListener(state.shape.node, md, + mxUtils.bind(this, function(evt) + { + if (this.isShapeEvent(state, evt) && !gestureInProgress) + { + // Redirects events from the "event-transparent" region of + // a swimlane to the graph. This is only required in HTML, + // SVG and VML do not fire mouse events on transparent + // backgrounds. + graph.fireMouseEvent(mxEvent.MOUSE_DOWN, + new mxMouseEvent(evt, (state.shape != null && + mxEvent.getSource(evt) == state.shape.content) ? + null : state)); + } + else if (gestureInProgress) + { + mxEvent.consume(evt); + } + }) + ); + + mxEvent.addListener(state.shape.node, mm, + mxUtils.bind(this, function(evt) + { + if (this.isShapeEvent(state, evt) && !gestureInProgress) + { + graph.fireMouseEvent(mxEvent.MOUSE_MOVE, + new mxMouseEvent(evt, (state.shape != null && + mxEvent.getSource(evt) == state.shape.content) ? + null : getState(evt))); + } + else if (gestureInProgress) + { + mxEvent.consume(evt); + } + }) + ); + + mxEvent.addListener(state.shape.node, mu, + mxUtils.bind(this, function(evt) + { + if (this.isShapeEvent(state, evt) && !gestureInProgress) + { + graph.fireMouseEvent(mxEvent.MOUSE_UP, + new mxMouseEvent(evt, (state.shape != null && + mxEvent.getSource(evt) == state.shape.content) ? + null : getState(evt))); + } + else if (gestureInProgress) + { + mxEvent.consume(evt); + } + }) + ); + + // Experimental handling for gestures. Double-tap handling is implemented + // in mxGraph.fireMouseEvent. + var dc = (mxClient.IS_TOUCH) ? 'gestureend' : 'dblclick'; + + mxEvent.addListener(state.shape.node, dc, + mxUtils.bind(this, function(evt) + { + gestureInProgress = false; + + if (dc == 'gestureend') + { + // FIXME: Breaks encapsulation to reset the double + // tap event handling when gestures take place + graph.lastTouchTime = 0; + + if (graph.gestureEnabled) + { + graph.handleGesture(state, evt); + mxEvent.consume(evt); + } + } + else if (this.isShapeEvent(state, evt)) + { + graph.dblClick(evt, (state.shape != null && + mxEvent.getSource(evt) == state.shape.content) ? + null : state.cell); + mxEvent.consume(evt); + } + }) + ); +}; + +/** + * Function: redrawLabel + * + * Redraws the label for the given cell state. + * + * Parameters: + * + * state - <mxCellState> whose label should be redrawn. + */ +mxCellRenderer.prototype.redrawLabel = function(state) +{ + var value = this.getLabelValue(state); + + // FIXME: Add label always if HTML label and NO_FO + if (state.text == null && value != null && (mxUtils.isNode(value) || value.length > 0)) + { + this.createLabel(state, value); + } + else if (state.text != null && (value == null || value.length == 0)) + { + state.text.destroy(); + state.text = null; + } + + if (state.text != null) + { + var graph = state.view.graph; + var wrapping = graph.isWrapping(state.cell); + var clipping = graph.isLabelClipped(state.cell); + var bounds = this.getLabelBounds(state); + + if (state.text.value != value || state.text.isWrapping != wrapping || + state.text.isClipping != clipping || state.text.scale != state.view.scale || + !state.text.bounds.equals(bounds)) + { + state.text.value = value; + state.text.bounds = bounds; + state.text.scale = this.getTextScale(state); + state.text.isWrapping = wrapping; + state.text.isClipping = clipping; + + state.text.redraw(); + } + } +}; + +/** + * Function: getTextScale + * + * Returns the scaling used for the label of the given state + * + * Parameters: + * + * state - <mxCellState> whose label scale should be returned. + */ +mxCellRenderer.prototype.getTextScale = function(state) +{ + return state.view.scale; +}; + +/** + * Function: getLabelBounds + * + * Returns the bounds to be used to draw the label of the given state. + * + * Parameters: + * + * state - <mxCellState> whose label bounds should be returned. + */ +mxCellRenderer.prototype.getLabelBounds = function(state) +{ + var graph = state.view.graph; + var isEdge = graph.getModel().isEdge(state.cell); + var bounds = new mxRectangle(state.absoluteOffset.x, state.absoluteOffset.y); + + if (!isEdge) + { + bounds.x += state.x; + bounds.y += state.y; + + // Minimum of 1 fixes alignment bug in HTML labels + bounds.width = Math.max(1, state.width); + bounds.height = Math.max(1, state.height); + + if (graph.isSwimlane(state.cell)) + { + var scale = graph.view.scale; + var size = graph.getStartSize(state.cell); + + if (size.width > 0) + { + bounds.width = size.width * scale; + } + else if (size.height > 0) + { + bounds.height = size.height * scale; + } + } + } + + return bounds; +}; + +/** + * Function: redrawCellOverlays + * + * Redraws the overlays for the given cell state. + * + * Parameters: + * + * state - <mxCellState> whose overlays should be redrawn. + */ +mxCellRenderer.prototype.redrawCellOverlays = function(state) +{ + this.createCellOverlays(state); + + if (state.overlays != null) + { + state.overlays.visit(function(id, shape) + { + var bounds = shape.overlay.getBounds(state); + + if (shape.bounds == null || shape.scale != state.view.scale || + !shape.bounds.equals(bounds)) + { + shape.bounds = bounds; + shape.scale = state.view.scale; + shape.redraw(); + } + }); + } +}; + +/** + * Function: redrawControl + * + * Redraws the control for the given cell state. + * + * Parameters: + * + * state - <mxCellState> whose control should be redrawn. + */ +mxCellRenderer.prototype.redrawControl = function(state) +{ + if (state.control != null) + { + var bounds = this.getControlBounds(state); + var s = state.view.scale; + + if (state.control.scale != s || !state.control.bounds.equals(bounds)) + { + state.control.bounds = bounds; + state.control.scale = s; + state.control.redraw(); + } + } +}; + +/** + * Function: getControlBounds + * + * Returns the bounds to be used to draw the control (folding icon) of the + * given state. + */ +mxCellRenderer.prototype.getControlBounds = function(state) +{ + if (state.control != null) + { + var oldScale = state.control.scale; + var w = state.control.bounds.width / oldScale; + var h = state.control.bounds.height / oldScale; + var s = state.view.scale; + + return (state.view.graph.getModel().isEdge(state.cell)) ? + new mxRectangle(state.x + state.width / 2 - w / 2 * s, + state.y + state.height / 2 - h / 2 * s, w * s, h * s) + : new mxRectangle(state.x + w / 2 * s, + state.y + h / 2 * s, w * s, h * s); + } + + return null; +}; + +/** + * Function: redraw + * + * Updates the bounds or points and scale of the shapes for the given cell + * state. This is called in mxGraphView.validatePoints as the last step of + * updating all cells. + * + * Parameters: + * + * state - <mxCellState> for which the shapes should be updated. + * force - Optional boolean that specifies if the cell should be reconfiured + * and redrawn without any additional checks. + * rendering - Optional boolean that specifies if the cell should actually + * be drawn into the DOM. If this is false then redraw and/or reconfigure + * will not be called on the shape. + */ +mxCellRenderer.prototype.redraw = function(state, force, rendering) +{ + if (state.shape != null) + { + var model = state.view.graph.getModel(); + var isEdge = model.isEdge(state.cell); + reconfigure = (force != null) ? force : false; + + // Handles changes of the collapse icon + this.createControl(state); + + // Handles changes to the order in the DOM + if (state.orderChanged || state.invalidOrder) + { + if (state.view.graph.ordered) + { + this.order(state); + } + else + { + // Assert state.cell is edge + this.orderEdge(state); + } + + // Required to update inherited styles + reconfigure = state.orderChanged; + } + + delete state.invalidOrder; + delete state.orderChanged; + + // Checks if the style in the state is different from the style + // in the shape and re-applies the style if required + if (!reconfigure && !mxUtils.equalEntries(state.shape.style, state.style)) + { + reconfigure = true; + } + + // Reconfiures the shape after an order or style change + if (reconfigure) + { + this.configureShape(state); + state.shape.reconfigure(); + } + + // Redraws the cell if required + if (force || state.shape.bounds == null || state.shape.scale != state.view.scale || + !state.shape.bounds.equals(state) || + !mxUtils.equalPoints(state.shape.points, state.absolutePoints)) + { + // FIXME: Move indicator color update into shape.redraw +// var indicator = state.view.graph.getIndicatorColor(state); +// if (indicator != null) +// { +// state.shape.indicatorColor = indicator; +// } + + if (state.absolutePoints != null) + { + state.shape.points = state.absolutePoints.slice(); + } + else + { + state.shape.points = null; + } + + state.shape.bounds = new mxRectangle( + state.x, state.y, state.width, state.height); + state.shape.scale = state.view.scale; + + if (rendering == null || rendering) + { + state.shape.redraw(); + } + else + { + state.shape.updateBoundingBox(); + } + } + + // Updates the text label, overlays and control + if (rendering == null || rendering) + { + this.redrawLabel(state); + this.redrawCellOverlays(state); + this.redrawControl(state); + } + } +}; + +/** + * Function: destroy + * + * Destroys the shapes associated with the given cell state. + * + * Parameters: + * + * state - <mxCellState> for which the shapes should be destroyed. + */ +mxCellRenderer.prototype.destroy = function(state) +{ + if (state.shape != null) + { + if (state.text != null) + { + state.text.destroy(); + state.text = null; + } + + if (state.overlays != null) + { + state.overlays.visit(function(id, shape) + { + shape.destroy(); + }); + + state.overlays = null; + } + + if (state.control != null) + { + state.control.destroy(); + state.control = null; + } + + state.shape.destroy(); + state.shape = null; + } +}; diff --git a/src/js/view/mxCellState.js b/src/js/view/mxCellState.js new file mode 100644 index 0000000..7e7a3b0 --- /dev/null +++ b/src/js/view/mxCellState.js @@ -0,0 +1,375 @@ +/** + * $Id: mxCellState.js,v 1.42 2012-03-19 10:47:08 gaudenz Exp $ + * Copyright (c) 2006-2010, JGraph Ltd + */ +/** + * Class: mxCellState + * + * Represents the current state of a cell in a given <mxGraphView>. + * + * For edges, the edge label position is stored in <absoluteOffset>. + * + * The size for oversize labels can be retrieved using the boundingBox property + * of the <text> field as shown below. + * + * (code) + * var bbox = (state.text != null) ? state.text.boundingBox : null; + * (end) + * + * Constructor: mxCellState + * + * Constructs a new object that represents the current state of the given + * cell in the specified view. + * + * Parameters: + * + * view - <mxGraphView> that contains the state. + * cell - <mxCell> that this state represents. + * style - Array of key, value pairs that constitute the style. + */ +function mxCellState(view, cell, style) +{ + this.view = view; + this.cell = cell; + this.style = style; + + this.origin = new mxPoint(); + this.absoluteOffset = new mxPoint(); +}; + +/** + * Extends mxRectangle. + */ +mxCellState.prototype = new mxRectangle(); +mxCellState.prototype.constructor = mxCellState; + +/** + * Variable: view + * + * Reference to the enclosing <mxGraphView>. + */ +mxCellState.prototype.view = null; + +/** + * Variable: cell + * + * Reference to the <mxCell> that is represented by this state. + */ +mxCellState.prototype.cell = null; + +/** + * Variable: style + * + * Contains an array of key, value pairs that represent the style of the + * cell. + */ +mxCellState.prototype.style = null; + +/** + * Variable: invalid + * + * Specifies if the state is invalid. Default is true. + */ +mxCellState.prototype.invalid = true; + +/** + * Variable: invalidOrder + * + * Specifies if the cell has an invalid order. For internal use. Default is + * false. + */ +mxCellState.prototype.invalidOrder = false; + +/** + * Variable: orderChanged + * + * Specifies if the cell has changed order and the display needs to be + * updated. + */ +mxCellState.prototype.orderChanged = false; + +/** + * Variable: origin + * + * <mxPoint> that holds the origin for all child cells. Default is a new + * empty <mxPoint>. + */ +mxCellState.prototype.origin = null; + +/** + * Variable: absolutePoints + * + * Holds an array of <mxPoints> that represent the absolute points of an + * edge. + */ +mxCellState.prototype.absolutePoints = null; + +/** + * Variable: absoluteOffset + * + * <mxPoint> that holds the absolute offset. For edges, this is the + * absolute coordinates of the label position. For vertices, this is the + * offset of the label relative to the top, left corner of the vertex. + */ +mxCellState.prototype.absoluteOffset = null; + +/** + * Variable: visibleSourceState + * + * Caches the visible source terminal state. + */ +mxCellState.prototype.visibleSourceState = null; + +/** + * Variable: visibleTargetState + * + * Caches the visible target terminal state. + */ +mxCellState.prototype.visibleTargetState = null; + +/** + * Variable: terminalDistance + * + * Caches the distance between the end points for an edge. + */ +mxCellState.prototype.terminalDistance = 0; + +/** + * Variable: length + * + * Caches the length of an edge. + */ +mxCellState.prototype.length = 0; + +/** + * Variable: segments + * + * Array of numbers that represent the cached length of each segment of the + * edge. + */ +mxCellState.prototype.segments = null; + +/** + * Variable: shape + * + * Holds the <mxShape> that represents the cell graphically. + */ +mxCellState.prototype.shape = null; + +/** + * Variable: text + * + * Holds the <mxText> that represents the label of the cell. Thi smay be + * null if the cell has no label. + */ +mxCellState.prototype.text = null; + +/** + * Function: getPerimeterBounds + * + * Returns the <mxRectangle> that should be used as the perimeter of the + * cell. + * + * Parameters: + * + * border - Optional border to be added around the perimeter bounds. + * bounds - Optional <mxRectangle> to be used as the initial bounds. + */ +mxCellState.prototype.getPerimeterBounds = function (border, bounds) +{ + border = border || 0; + bounds = (bounds != null) ? bounds : new mxRectangle(this.x, this.y, this.width, this.height); + + if (this.shape != null && this.shape.stencil != null) + { + var aspect = this.shape.stencil.computeAspect(this, bounds, null); + + bounds.x = aspect.x; + bounds.y = aspect.y; + bounds.width = this.shape.stencil.w0 * aspect.width; + bounds.height = this.shape.stencil.h0 * aspect.height; + } + + if (border != 0) + { + bounds.grow(border); + } + + return bounds; +}; + +/** + * Function: setAbsoluteTerminalPoint + * + * Sets the first or last point in <absolutePoints> depending on isSource. + * + * Parameters: + * + * point - <mxPoint> that represents the terminal point. + * isSource - Boolean that specifies if the first or last point should + * be assigned. + */ +mxCellState.prototype.setAbsoluteTerminalPoint = function (point, isSource) +{ + if (isSource) + { + if (this.absolutePoints == null) + { + this.absolutePoints = []; + } + + if (this.absolutePoints.length == 0) + { + this.absolutePoints.push(point); + } + else + { + this.absolutePoints[0] = point; + } + } + else + { + if (this.absolutePoints == null) + { + this.absolutePoints = []; + this.absolutePoints.push(null); + this.absolutePoints.push(point); + } + else if (this.absolutePoints.length == 1) + { + this.absolutePoints.push(point); + } + else + { + this.absolutePoints[this.absolutePoints.length - 1] = point; + } + } +}; + +/** + * Function: setCursor + * + * Sets the given cursor on the shape and text shape. + */ +mxCellState.prototype.setCursor = function (cursor) +{ + if (this.shape != null) + { + this.shape.setCursor(cursor); + } + + if (this.text != null) + { + this.text.setCursor(cursor); + } +}; + +/** + * Function: getVisibleTerminal + * + * Returns the visible source or target terminal cell. + * + * Parameters: + * + * source - Boolean that specifies if the source or target cell should be + * returned. + */ +mxCellState.prototype.getVisibleTerminal = function (source) +{ + var tmp = this.getVisibleTerminalState(source); + + return (tmp != null) ? tmp.cell : null; +}; + +/** + * Function: getVisibleTerminalState + * + * Returns the visible source or target terminal state. + * + * Parameters: + * + * source - Boolean that specifies if the source or target state should be + * returned. + */ +mxCellState.prototype.getVisibleTerminalState = function (source) +{ + return (source) ? this.visibleSourceState : this.visibleTargetState; +}; + +/** + * Function: setVisibleTerminalState + * + * Sets the visible source or target terminal state. + * + * Parameters: + * + * terminalState - <mxCellState> that represents the terminal. + * source - Boolean that specifies if the source or target state should be set. + */ +mxCellState.prototype.setVisibleTerminalState = function (terminalState, source) +{ + if (source) + { + this.visibleSourceState = terminalState; + } + else + { + this.visibleTargetState = terminalState; + } +}; + +/** + * Destructor: destroy + * + * Destroys the state and all associated resources. + */ +mxCellState.prototype.destroy = function () +{ + this.view.graph.cellRenderer.destroy(this); +}; + +/** + * Function: clone + * + * Returns a clone of this <mxPoint>. + */ +mxCellState.prototype.clone = function() +{ + var clone = new mxCellState(this.view, this.cell, this.style); + + // Clones the absolute points + if (this.absolutePoints != null) + { + clone.absolutePoints = []; + + for (var i = 0; i < this.absolutePoints.length; i++) + { + clone.absolutePoints[i] = this.absolutePoints[i].clone(); + } + } + + if (this.origin != null) + { + clone.origin = this.origin.clone(); + } + + if (this.absoluteOffset != null) + { + clone.absoluteOffset = this.absoluteOffset.clone(); + } + + if (this.boundingBox != null) + { + clone.boundingBox = this.boundingBox.clone(); + } + + clone.terminalDistance = this.terminalDistance; + clone.segments = this.segments; + clone.length = this.length; + clone.x = this.x; + clone.y = this.y; + clone.width = this.width; + clone.height = this.height; + + return clone; +}; diff --git a/src/js/view/mxCellStatePreview.js b/src/js/view/mxCellStatePreview.js new file mode 100644 index 0000000..b853748 --- /dev/null +++ b/src/js/view/mxCellStatePreview.js @@ -0,0 +1,223 @@ +/** + * $Id: mxCellStatePreview.js,v 1.6 2012-10-26 07:19:11 gaudenz Exp $ + * Copyright (c) 2006-2010, JGraph Ltd + */ +/** + * + * Class: mxCellStatePreview + * + * Implements a live preview for moving cells. + * + * Constructor: mxCellStatePreview + * + * Constructs a move preview for the given graph. + * + * Parameters: + * + * graph - Reference to the enclosing <mxGraph>. + */ +function mxCellStatePreview(graph) +{ + this.graph = graph; + this.deltas = new Object(); +}; + +/** + * Variable: graph + * + * Reference to the enclosing <mxGraph>. + */ +mxCellStatePreview.prototype.graph = null; + +/** + * Variable: deltas + * + * Reference to the enclosing <mxGraph>. + */ +mxCellStatePreview.prototype.deltas = null; + +/** + * Variable: count + * + * Contains the number of entries in the map. + */ +mxCellStatePreview.prototype.count = 0; + +/** + * Function: isEmpty + * + * Returns true if this contains no entries. + */ +mxCellStatePreview.prototype.isEmpty = function() +{ + return this.count == 0; +}; + +/** + * Function: moveState + */ +mxCellStatePreview.prototype.moveState = function(state, dx, dy, add, includeEdges) +{ + add = (add != null) ? add : true; + includeEdges = (includeEdges != null) ? includeEdges : true; + var id = mxCellPath.create(state.cell); + var delta = this.deltas[id]; + + if (delta == null) + { + delta = new mxPoint(dx, dy); + this.deltas[id] = delta; + this.count++; + } + else + { + if (add) + { + delta.X += dx; + delta.Y += dy; + } + else + { + delta.X = dx; + delta.Y = dy; + } + } + + if (includeEdges) + { + this.addEdges(state); + } + + return delta; +}; + +/** + * Function: show + */ +mxCellStatePreview.prototype.show = function(visitor) +{ + var model = this.graph.getModel(); + var root = model.getRoot(); + + // Translates the states in step + for (var id in this.deltas) + { + var cell = mxCellPath.resolve(root, id); + var state = this.graph.view.getState(cell); + var delta = this.deltas[id]; + var parentState = this.graph.view.getState( + model.getParent(cell)); + this.translateState(parentState, state, delta.x, delta.y); + } + + // Revalidates the states in step + for (var id in this.deltas) + { + var cell = mxCellPath.resolve(root, id); + var state = this.graph.view.getState(cell); + var delta = this.deltas[id]; + var parentState = this.graph.view.getState( + model.getParent(cell)); + this.revalidateState(parentState, state, delta.x, delta.y, visitor); + } +}; + +/** + * Function: translateState + */ +mxCellStatePreview.prototype.translateState = function(parentState, state, dx, dy) +{ + if (state != null) + { + var model = this.graph.getModel(); + + if (model.isVertex(state.cell)) + { + // LATER: Use hashtable to store initial state bounds + state.invalid = true; + this.graph.view.validateBounds(parentState, state.cell); + var geo = model.getGeometry(state.cell); + var id = mxCellPath.create(state.cell); + + // Moves selection cells and non-relative vertices in + // the first phase so that edge terminal points will + // be updated in the second phase + if ((dx != 0 || dy != 0) && geo != null && + (!geo.relative || this.deltas[id] != null)) + { + state.x += dx; + state.y += dy; + } + } + + var childCount = model.getChildCount(state.cell); + + for (var i = 0; i < childCount; i++) + { + this.translateState(state, this.graph.view.getState( + model.getChildAt(state.cell, i)), dx, dy); + } + } +}; + +/** + * Function: revalidateState + */ +mxCellStatePreview.prototype.revalidateState = function(parentState, state, dx, dy, visitor) +{ + if (state != null) + { + // Updates the edge terminal points and restores the + // (relative) positions of any (relative) children + state.invalid = true; + this.graph.view.validatePoints(parentState, state.cell); + + // Moves selection vertices which are relative + var id = mxCellPath.create(state.cell); + var model = this.graph.getModel(); + var geo = this.graph.getCellGeometry(state.cell); + + if ((dx != 0 || dy != 0) && geo != null && geo.relative && + model.isVertex(state.cell) && (parentState == null || + model.isVertex(parentState.cell) || this.deltas[id] != null)) + { + state.x += dx; + state.y += dy; + + this.graph.cellRenderer.redraw(state); + } + + // Invokes the visitor on the given state + if (visitor != null) + { + visitor(state); + } + + var childCount = model.getChildCount(state.cell); + + for (var i = 0; i < childCount; i++) + { + this.revalidateState(state, this.graph.view.getState(model.getChildAt( + state.cell, i)), dx, dy, visitor); + } + } +}; + +/** + * Function: addEdges + */ +mxCellStatePreview.prototype.addEdges = function(state) +{ + var model = this.graph.getModel(); + var edgeCount = model.getEdgeCount(state.cell); + + for (var i = 0; i < edgeCount; i++) + { + var s = this.graph.view.getState(model.getEdgeAt(state.cell, i)); + + if (s != null) + { + this.moveState(s, 0, 0); + } + } +}; diff --git a/src/js/view/mxConnectionConstraint.js b/src/js/view/mxConnectionConstraint.js new file mode 100644 index 0000000..70f457f --- /dev/null +++ b/src/js/view/mxConnectionConstraint.js @@ -0,0 +1,42 @@ +/** + * $Id: mxConnectionConstraint.js,v 1.2 2010-04-29 09:33:52 gaudenz Exp $ + * Copyright (c) 2006-2010, JGraph Ltd + */ +/** + * Class: mxConnectionConstraint + * + * Defines an object that contains the constraints about how to connect one + * side of an edge to its terminal. + * + * Constructor: mxConnectionConstraint + * + * Constructs a new connection constraint for the given point and boolean + * arguments. + * + * Parameters: + * + * point - Optional <mxPoint> that specifies the fixed location of the point + * in relative coordinates. Default is null. + * perimeter - Optional boolean that specifies if the fixed point should be + * projected onto the perimeter of the terminal. Default is true. + */ +function mxConnectionConstraint(point, perimeter) +{ + this.point = point; + this.perimeter = (perimeter != null) ? perimeter : true; +}; + +/** + * Variable: point + * + * <mxPoint> that specifies the fixed location of the connection point. + */ +mxConnectionConstraint.prototype.point = null; + +/** + * Variable: perimeter + * + * Boolean that specifies if the point should be projected onto the perimeter + * of the terminal. + */ +mxConnectionConstraint.prototype.perimeter = null; diff --git a/src/js/view/mxEdgeStyle.js b/src/js/view/mxEdgeStyle.js new file mode 100644 index 0000000..41493d6 --- /dev/null +++ b/src/js/view/mxEdgeStyle.js @@ -0,0 +1,1302 @@ +/** + * $Id: mxEdgeStyle.js,v 1.68 2012-11-20 09:06:07 gaudenz Exp $ + * Copyright (c) 2006-2010, JGraph Ltd + */ +var mxEdgeStyle = +{ + /** + * Class: mxEdgeStyle + * + * Provides various edge styles to be used as the values for + * <mxConstants.STYLE_EDGE> in a cell style. + * + * Example: + * + * (code) + * var style = stylesheet.getDefaultEdgeStyle(); + * style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector; + * (end) + * + * Sets the default edge style to <ElbowConnector>. + * + * Custom edge style: + * + * To write a custom edge style, a function must be added to the mxEdgeStyle + * object as follows: + * + * (code) + * mxEdgeStyle.MyStyle = function(state, source, target, points, result) + * { + * if (source != null && target != null) + * { + * var pt = new mxPoint(target.getCenterX(), source.getCenterY()); + * + * if (mxUtils.contains(source, pt.x, pt.y)) + * { + * pt.y = source.y + source.height; + * } + * + * result.push(pt); + * } + * }; + * (end) + * + * In the above example, a right angle is created using a point on the + * horizontal center of the target vertex and the vertical center of the source + * vertex. The code checks if that point intersects the source vertex and makes + * the edge straight if it does. The point is then added into the result array, + * which acts as the return value of the function. + * + * The new edge style should then be registered in the <mxStyleRegistry> as follows: + * (code) + * mxStyleRegistry.putValue('myEdgeStyle', mxEdgeStyle.MyStyle); + * (end) + * + * The custom edge style above can now be used in a specific edge as follows: + * + * (code) + * model.setStyle(edge, 'edgeStyle=myEdgeStyle'); + * (end) + * + * Note that the key of the <mxStyleRegistry> entry for the function should + * be used in string values, unless <mxGraphView.allowEval> is true, in + * which case you can also use mxEdgeStyle.MyStyle for the value in the + * cell style above. + * + * Or it can be used for all edges in the graph as follows: + * + * (code) + * var style = graph.getStylesheet().getDefaultEdgeStyle(); + * style[mxConstants.STYLE_EDGE] = mxEdgeStyle.MyStyle; + * (end) + * + * Note that the object can be used directly when programmatically setting + * the value, but the key in the <mxStyleRegistry> should be used when + * setting the value via a key, value pair in a cell style. + * + * Function: EntityRelation + * + * Implements an entity relation style for edges (as used in database + * schema diagrams). At the time the function is called, the result + * array contains a placeholder (null) for the first absolute point, + * that is, the point where the edge and source terminal are connected. + * The implementation of the style then adds all intermediate waypoints + * except for the last point, that is, the connection point between the + * edge and the target terminal. The first ant the last point in the + * result array are then replaced with mxPoints that take into account + * the terminal's perimeter and next point on the edge. + * + * Parameters: + * + * state - <mxCellState> that represents the edge to be updated. + * source - <mxCellState> that represents the source terminal. + * target - <mxCellState> that represents the target terminal. + * points - List of relative control points. + * result - Array of <mxPoints> that represent the actual points of the + * edge. + */ + EntityRelation: function (state, source, target, points, result) + { + var view = state.view; + var graph = view.graph; + var segment = mxUtils.getValue(state.style, + mxConstants.STYLE_SEGMENT, + mxConstants.ENTITY_SEGMENT) * view.scale; + + var pts = state.absolutePoints; + var p0 = pts[0]; + var pe = pts[pts.length-1]; + + var isSourceLeft = false; + + if (p0 != null) + { + source = new mxCellState(); + source.x = p0.x; + source.y = p0.y; + } + else if (source != null) + { + var constraint = mxUtils.getPortConstraints(source, state, true, mxConstants.DIRECTION_MASK_NONE); + + if (constraint != mxConstants.DIRECTION_MASK_NONE) + { + isSourceLeft = constraint == mxConstants.DIRECTION_MASK_WEST; + } + else + { + var sourceGeometry = graph.getCellGeometry(source.cell); + + if (sourceGeometry.relative) + { + isSourceLeft = sourceGeometry.x <= 0.5; + } + else if (target != null) + { + isSourceLeft = target.x + target.width < source.x; + } + } + } + else + { + return; + } + + var isTargetLeft = true; + + if (pe != null) + { + target = new mxCellState(); + target.x = pe.x; + target.y = pe.y; + } + else if (target != null) + { + var constraint = mxUtils.getPortConstraints(target, state, false, mxConstants.DIRECTION_MASK_NONE); + + if (constraint != mxConstants.DIRECTION_MASK_NONE) + { + isTargetLeft = constraint == mxConstants.DIRECTION_MASK_WEST; + } + else + { + var targetGeometry = graph.getCellGeometry(target.cell); + + if (targetGeometry.relative) + { + isTargetLeft = targetGeometry.x <= 0.5; + } + else if (source != null) + { + isTargetLeft = source.x + source.width < target.x; + } + } + } + + if (source != null && target != null) + { + var x0 = (isSourceLeft) ? source.x : source.x + source.width; + var y0 = view.getRoutingCenterY(source); + + var xe = (isTargetLeft) ? target.x : target.x + target.width; + var ye = view.getRoutingCenterY(target); + + var seg = segment; + + var dx = (isSourceLeft) ? -seg : seg; + var dep = new mxPoint(x0 + dx, y0); + + dx = (isTargetLeft) ? -seg : seg; + var arr = new mxPoint(xe + dx, ye); + + // Adds intermediate points if both go out on same side + if (isSourceLeft == isTargetLeft) + { + var x = (isSourceLeft) ? + Math.min(x0, xe)-segment : + Math.max(x0, xe)+segment; + + result.push(new mxPoint(x, y0)); + result.push(new mxPoint(x, ye)); + } + else if ((dep.x < arr.x) == isSourceLeft) + { + var midY = y0 + (ye - y0) / 2; + + result.push(dep); + result.push(new mxPoint(dep.x, midY)); + result.push(new mxPoint(arr.x, midY)); + result.push(arr); + } + else + { + result.push(dep); + result.push(arr); + } + } + }, + + /** + * Function: Loop + * + * Implements a self-reference, aka. loop. + */ + Loop: function (state, source, target, points, result) + { + if (source != null) + { + var view = state.view; + var graph = view.graph; + var pt = (points != null && points.length > 0) ? points[0] : null; + + if (pt != null) + { + pt = view.transformControlPoint(state, pt); + + if (mxUtils.contains(source, pt.x, pt.y)) + { + pt = null; + } + } + + var x = 0; + var dx = 0; + var y = 0; + var dy = 0; + + var seg = mxUtils.getValue(state.style, mxConstants.STYLE_SEGMENT, + graph.gridSize) * view.scale; + var dir = mxUtils.getValue(state.style, mxConstants.STYLE_DIRECTION, + mxConstants.DIRECTION_WEST); + + if (dir == mxConstants.DIRECTION_NORTH || + dir == mxConstants.DIRECTION_SOUTH) + { + x = view.getRoutingCenterX(source); + dx = seg; + } + else + { + y = view.getRoutingCenterY(source); + dy = seg; + } + + if (pt == null || + pt.x < source.x || + pt.x > source.x + source.width) + { + if (pt != null) + { + x = pt.x; + dy = Math.max(Math.abs(y - pt.y), dy); + } + else + { + if (dir == mxConstants.DIRECTION_NORTH) + { + y = source.y - 2 * dx; + } + else if (dir == mxConstants.DIRECTION_SOUTH) + { + y = source.y + source.height + 2 * dx; + } + else if (dir == mxConstants.DIRECTION_EAST) + { + x = source.x - 2 * dy; + } + else + { + x = source.x + source.width + 2 * dy; + } + } + } + else if (pt != null) + { + x = view.getRoutingCenterX(source); + dx = Math.max(Math.abs(x - pt.x), dy); + y = pt.y; + dy = 0; + } + + result.push(new mxPoint(x - dx, y - dy)); + result.push(new mxPoint(x + dx, y + dy)); + } + }, + + /** + * Function: ElbowConnector + * + * Uses either <SideToSide> or <TopToBottom> depending on the horizontal + * flag in the cell style. <SideToSide> is used if horizontal is true or + * unspecified. See <EntityRelation> for a description of the + * parameters. + */ + ElbowConnector: function (state, source, target, points, result) + { + var pt = (points != null && points.length > 0) ? points[0] : null; + + var vertical = false; + var horizontal = false; + + if (source != null && target != null) + { + if (pt != null) + { + var left = Math.min(source.x, target.x); + var right = Math.max(source.x + source.width, + target.x + target.width); + + var top = Math.min(source.y, target.y); + var bottom = Math.max(source.y + source.height, + target.y + target.height); + + pt = state.view.transformControlPoint(state, pt); + + vertical = pt.y < top || pt.y > bottom; + horizontal = pt.x < left || pt.x > right; + } + else + { + var left = Math.max(source.x, target.x); + var right = Math.min(source.x + source.width, + target.x + target.width); + + vertical = left == right; + + if (!vertical) + { + var top = Math.max(source.y, target.y); + var bottom = Math.min(source.y + source.height, + target.y + target.height); + + horizontal = top == bottom; + } + } + } + + if (!horizontal && (vertical || + state.style[mxConstants.STYLE_ELBOW] == mxConstants.ELBOW_VERTICAL)) + { + mxEdgeStyle.TopToBottom(state, source, target, points, result); + } + else + { + mxEdgeStyle.SideToSide(state, source, target, points, result); + } + }, + + /** + * Function: SideToSide + * + * Implements a vertical elbow edge. See <EntityRelation> for a description + * of the parameters. + */ + SideToSide: function (state, source, target, points, result) + { + var view = state.view; + var pt = (points != null && points.length > 0) ? points[0] : null; + var pts = state.absolutePoints; + var p0 = pts[0]; + var pe = pts[pts.length-1]; + + if (pt != null) + { + pt = view.transformControlPoint(state, pt); + } + + if (p0 != null) + { + source = new mxCellState(); + source.x = p0.x; + source.y = p0.y; + } + + if (pe != null) + { + target = new mxCellState(); + target.x = pe.x; + target.y = pe.y; + } + + if (source != null && target != null) + { + var l = Math.max(source.x, target.x); + var r = Math.min(source.x + source.width, + target.x + target.width); + + var x = (pt != null) ? pt.x : r + (l - r) / 2; + + var y1 = view.getRoutingCenterY(source); + var y2 = view.getRoutingCenterY(target); + + if (pt != null) + { + if (pt.y >= source.y && pt.y <= source.y + source.height) + { + y1 = pt.y; + } + + if (pt.y >= target.y && pt.y <= target.y + target.height) + { + y2 = pt.y; + } + } + + if (!mxUtils.contains(target, x, y1) && + !mxUtils.contains(source, x, y1)) + { + result.push(new mxPoint(x, y1)); + } + + if (!mxUtils.contains(target, x, y2) && + !mxUtils.contains(source, x, y2)) + { + result.push(new mxPoint(x, y2)); + } + + if (result.length == 1) + { + if (pt != null) + { + if (!mxUtils.contains(target, x, pt.y) && + !mxUtils.contains(source, x, pt.y)) + { + result.push(new mxPoint(x, pt.y)); + } + } + else + { + var t = Math.max(source.y, target.y); + var b = Math.min(source.y + source.height, + target.y + target.height); + + result.push(new mxPoint(x, t + (b - t) / 2)); + } + } + } + }, + + /** + * Function: TopToBottom + * + * Implements a horizontal elbow edge. See <EntityRelation> for a + * description of the parameters. + */ + TopToBottom: function(state, source, target, points, result) + { + var view = state.view; + var pt = (points != null && points.length > 0) ? points[0] : null; + var pts = state.absolutePoints; + var p0 = pts[0]; + var pe = pts[pts.length-1]; + + if (pt != null) + { + pt = view.transformControlPoint(state, pt); + } + + if (p0 != null) + { + source = new mxCellState(); + source.x = p0.x; + source.y = p0.y; + } + + if (pe != null) + { + target = new mxCellState(); + target.x = pe.x; + target.y = pe.y; + } + + if (source != null && target != null) + { + var t = Math.max(source.y, target.y); + var b = Math.min(source.y + source.height, + target.y + target.height); + + var x = view.getRoutingCenterX(source); + + if (pt != null && + pt.x >= source.x && + pt.x <= source.x + source.width) + { + x = pt.x; + } + + var y = (pt != null) ? pt.y : b + (t - b) / 2; + + if (!mxUtils.contains(target, x, y) && + !mxUtils.contains(source, x, y)) + { + result.push(new mxPoint(x, y)); + } + + if (pt != null && + pt.x >= target.x && + pt.x <= target.x + target.width) + { + x = pt.x; + } + else + { + x = view.getRoutingCenterX(target); + } + + if (!mxUtils.contains(target, x, y) && + !mxUtils.contains(source, x, y)) + { + result.push(new mxPoint(x, y)); + } + + if (result.length == 1) + { + if (pt != null && result.length == 1) + { + if (!mxUtils.contains(target, pt.x, y) && + !mxUtils.contains(source, pt.x, y)) + { + result.push(new mxPoint(pt.x, y)); + } + } + else + { + var l = Math.max(source.x, target.x); + var r = Math.min(source.x + source.width, + target.x + target.width); + + result.push(new mxPoint(l + (r - l) / 2, y)); + } + } + } + }, + + /** + * Function: SegmentConnector + * + * Implements an orthogonal edge style. Use <mxEdgeSegmentHandler> + * as an interactive handler for this style. + */ + SegmentConnector: function(state, source, target, hints, result) + { + // Creates array of all way- and terminalpoints + var pts = state.absolutePoints; + var horizontal = true; + var hint = null; + + // Adds the first point + var pt = pts[0]; + + if (pt == null && source != null) + { + pt = new mxPoint(state.view.getRoutingCenterX(source), state.view.getRoutingCenterY(source)); + } + else if (pt != null) + { + pt = pt.clone(); + } + + var lastInx = pts.length - 1; + + // Adds the waypoints + if (hints != null && hints.length > 0) + { + hint = state.view.transformControlPoint(state, hints[0]); + + var currentTerm = source; + var currentPt = pts[0]; + var hozChan = false; + var vertChan = false; + var currentHint = hint; + var hintsLen = hints.length; + + for (var i = 0; i < 2; i++) + { + var fixedVertAlign = currentPt != null && currentPt.x == currentHint.x; + var fixedHozAlign = currentPt != null && currentPt.y == currentHint.y; + var inHozChan = currentTerm != null && (currentHint.y >= currentTerm.y && + currentHint.y <= currentTerm.y + currentTerm.height); + var inVertChan = currentTerm != null && (currentHint.x >= currentTerm.x && + currentHint.x <= currentTerm.x + currentTerm.width); + + hozChan = fixedHozAlign || (currentPt == null && inHozChan); + vertChan = fixedVertAlign || (currentPt == null && inVertChan); + + if (currentPt != null && (!fixedHozAlign && !fixedVertAlign) && (inHozChan || inVertChan)) + { + horizontal = inHozChan ? false : true; + break; + } + + if (vertChan || hozChan) + { + horizontal = hozChan; + + if (i == 1) + { + // Work back from target end + horizontal = hints.length % 2 == 0 ? hozChan : vertChan; + } + + break; + } + + currentTerm = target; + currentPt = pts[lastInx]; + currentHint = state.view.transformControlPoint(state, hints[hintsLen - 1]); + } + + if (horizontal && ((pts[0] != null && pts[0].y != hint.y) || + (pts[0] == null && source != null && + (hint.y < source.y || hint.y > source.y + source.height)))) + { + result.push(new mxPoint(pt.x, hint.y)); + } + else if (!horizontal && ((pts[0] != null && pts[0].x != hint.x) || + (pts[0] == null && source != null && + (hint.x < source.x || hint.x > source.x + source.width)))) + { + result.push(new mxPoint(hint.x, pt.y)); + } + + if (horizontal) + { + pt.y = hint.y; + } + else + { + pt.x = hint.x; + } + + for (var i = 0; i < hints.length; i++) + { + horizontal = !horizontal; + hint = state.view.transformControlPoint(state, hints[i]); + +// mxLog.show(); +// mxLog.debug('hint', i, hint.x, hint.y); + + if (horizontal) + { + pt.y = hint.y; + } + else + { + pt.x = hint.x; + } + + result.push(pt.clone()); + } + } + else + { + hint = pt; + // FIXME: First click in connect preview toggles orientation + horizontal = true; + } + + // Adds the last point + pt = pts[lastInx]; + + if (pt == null && target != null) + { + pt = new mxPoint(state.view.getRoutingCenterX(target), state.view.getRoutingCenterY(target)); + } + + if (horizontal && ((pts[lastInx] != null && pts[lastInx].y != hint.y) || + (pts[lastInx] == null && target != null && + (hint.y < target.y || hint.y > target.y + target.height)))) + { + result.push(new mxPoint(pt.x, hint.y)); + } + else if (!horizontal && ((pts[lastInx] != null && pts[lastInx].x != hint.x) || + (pts[lastInx] == null && target != null && + (hint.x < target.x || hint.x > target.x + target.width)))) + { + result.push(new mxPoint(hint.x, pt.y)); + } + + // Removes bends inside the source terminal for floating ports + if (pts[0] == null && source != null) + { + while (result.length > 1 && mxUtils.contains(source, result[1].x, result[1].y)) + { + result = result.splice(1, 1); + } + } + + // Removes bends inside the target terminal + if (pts[lastInx] == null && target != null) + { + while (result.length > 1 && mxUtils.contains(target, result[result.length - 1].x, result[result.length - 1].y)) + { + result = result.splice(result.length - 1, 1); + } + } + + }, + + orthBuffer: 10, + + dirVectors: [ [ -1, 0 ], + [ 0, -1 ], [ 1, 0 ], [ 0, 1 ], [ -1, 0 ], [ 0, -1 ], [ 1, 0 ] ], + + wayPoints1: [ [ 0, 0], [ 0, 0], [ 0, 0], [ 0, 0], [ 0, 0], [ 0, 0], + [ 0, 0], [ 0, 0], [ 0, 0], [ 0, 0], [ 0, 0], [ 0, 0] ], + + routePatterns: [ + [ [ 513, 2308, 2081, 2562 ], [ 513, 1090, 514, 2184, 2114, 2561 ], + [ 513, 1090, 514, 2564, 2184, 2562 ], + [ 513, 2308, 2561, 1090, 514, 2568, 2308 ] ], + [ [ 514, 1057, 513, 2308, 2081, 2562 ], [ 514, 2184, 2114, 2561 ], + [ 514, 2184, 2562, 1057, 513, 2564, 2184 ], + [ 514, 1057, 513, 2568, 2308, 2561 ] ], + [ [ 1090, 514, 1057, 513, 2308, 2081, 2562 ], [ 2114, 2561 ], + [ 1090, 2562, 1057, 513, 2564, 2184 ], + [ 1090, 514, 1057, 513, 2308, 2561, 2568 ] ], + [ [ 2081, 2562 ], [ 1057, 513, 1090, 514, 2184, 2114, 2561 ], + [ 1057, 513, 1090, 514, 2184, 2562, 2564 ], + [ 1057, 2561, 1090, 514, 2568, 2308 ] ] ], + + inlineRoutePatterns: [ + [ null, [ 2114, 2568 ], null, null ], + [ null, [ 514, 2081, 2114, 2568 ] , null, null ], + [ null, [ 2114, 2561 ], null, null ], + [ [ 2081, 2562 ], [ 1057, 2114, 2568 ], + [ 2184, 2562 ], + null ] ], + vertexSeperations: [], + + limits: [ + [ 0, 0, 0, 0, 0, 0, 0, 0, 0 ], + [ 0, 0, 0, 0, 0, 0, 0, 0, 0 ] ], + + LEFT_MASK: 32, + + TOP_MASK: 64, + + RIGHT_MASK: 128, + + BOTTOM_MASK: 256, + + LEFT: 1, + + TOP: 2, + + RIGHT: 4, + + BOTTOM: 8, + + // TODO remove magic numbers + SIDE_MASK: 480, + //mxEdgeStyle.LEFT_MASK | mxEdgeStyle.TOP_MASK | mxEdgeStyle.RIGHT_MASK + //| mxEdgeStyle.BOTTOM_MASK, + + CENTER_MASK: 512, + + SOURCE_MASK: 1024, + + TARGET_MASK: 2048, + + VERTEX_MASK: 3072, + // mxEdgeStyle.SOURCE_MASK | mxEdgeStyle.TARGET_MASK, + + /** + * Function: OrthConnector + * + * Implements a local orthogonal router between the given + * cells. + */ + OrthConnector: function(state, source, target, points, result) + { + var graph = state.view.graph; + var sourceEdge = source == null ? false : graph.getModel().isEdge(source.cell); + var targetEdge = target == null ? false : graph.getModel().isEdge(target.cell); + + if ((points != null && points.length > 0) || (sourceEdge) || (targetEdge)) + { + mxEdgeStyle.SegmentConnector(state, source, target, points, result); + return; + } + + var pts = state.absolutePoints; + var p0 = pts[0]; + var pe = pts[pts.length-1]; + + var sourceX = source != null ? source.x : p0.x; + var sourceY = source != null ? source.y : p0.y; + var sourceWidth = source != null ? source.width : 1; + var sourceHeight = source != null ? source.height : 1; + + var targetX = target != null ? target.x : pe.x; + var targetY = target != null ? target.y : pe.y; + var targetWidth = target != null ? target.width : 1; + var targetHeight = target != null ? target.height : 1; + + var scaledOrthBuffer = state.view.scale * mxEdgeStyle.orthBuffer; + // Determine the side(s) of the source and target vertices + // that the edge may connect to + // portConstraint [source, target] + var portConstraint = [mxConstants.DIRECTION_MASK_ALL, mxConstants.DIRECTION_MASK_ALL]; + + if (source != null) + { + portConstraint[0] = mxUtils.getPortConstraints(source, state, true, + mxConstants.DIRECTION_MASK_ALL); + } + + if (target != null) + { + portConstraint[1] = mxUtils.getPortConstraints(target, state, false, + mxConstants.DIRECTION_MASK_ALL); + } + + var dir = [0, 0] ; + + // Work out which faces of the vertices present against each other + // in a way that would allow a 3-segment connection if port constraints + // permitted. + // geo -> [source, target] [x, y, width, height] + var geo = [ [sourceX, sourceY, sourceWidth, sourceHeight] , + [targetX, targetY, targetWidth, targetHeight] ]; + + for (var i = 0; i < 2; i++) + { + mxEdgeStyle.limits[i][1] = geo[i][0] - scaledOrthBuffer; + mxEdgeStyle.limits[i][2] = geo[i][1] - scaledOrthBuffer; + mxEdgeStyle.limits[i][4] = geo[i][0] + geo[i][2] + scaledOrthBuffer; + mxEdgeStyle.limits[i][8] = geo[i][1] + geo[i][3] + scaledOrthBuffer; + } + + // Work out which quad the target is in + var sourceCenX = geo[0][0] + geo[0][2] / 2.0; + var sourceCenY = geo[0][1] + geo[0][3] / 2.0; + var targetCenX = geo[1][0] + geo[1][2] / 2.0; + var targetCenY = geo[1][1] + geo[1][3] / 2.0; + + var dx = sourceCenX - targetCenX; + var dy = sourceCenY - targetCenY; + + var quad = 0; + + if (dx < 0) + { + if (dy < 0) + { + quad = 2; + } + else + { + quad = 1; + } + } + else + { + if (dy <= 0) + { + quad = 3; + + // Special case on x = 0 and negative y + if (dx == 0) + { + quad = 2; + } + } + } + + // Check for connection constraints + var currentTerm = null; + + if (source != null) + { + currentTerm = p0; + } + + var constraint = [ [0.5, 0.5] , [0.5, 0.5] ]; + + for (var i = 0; i < 2; i++) + { + if (currentTerm != null) + { + constraint[i][0] = (currentTerm.x - geo[i][0]) / geo[i][2]; + + if (constraint[i][0] < 0.01) + { + dir[i] = mxConstants.DIRECTION_MASK_WEST; + } + else if (constraint[i][0] > 0.99) + { + dir[i] = mxConstants.DIRECTION_MASK_EAST; + } + + constraint[i][1] = (currentTerm.y - geo[i][1]) / geo[i][3]; + + if (constraint[i][1] < 0.01) + { + dir[i] = mxConstants.DIRECTION_MASK_NORTH; + } + else if (constraint[i][1] > 0.99) + { + dir[i] = mxConstants.DIRECTION_MASK_SOUTH; + } + } + + currentTerm = null; + + if (target != null) + { + currentTerm = pe; + } + } + + var sourceTopDist = geo[0][1] - (geo[1][1] + geo[1][3]); + var sourceLeftDist = geo[0][0] - (geo[1][0] + geo[1][2]); + var sourceBottomDist = geo[1][1] - (geo[0][1] + geo[0][3]); + var sourceRightDist = geo[1][0] - (geo[0][0] + geo[0][2]); + + mxEdgeStyle.vertexSeperations[1] = Math.max( + sourceLeftDist - 2 * scaledOrthBuffer, 0); + mxEdgeStyle.vertexSeperations[2] = Math.max(sourceTopDist - 2 * scaledOrthBuffer, + 0); + mxEdgeStyle.vertexSeperations[4] = Math.max(sourceBottomDist - 2 + * scaledOrthBuffer, 0); + mxEdgeStyle.vertexSeperations[3] = Math.max(sourceRightDist - 2 + * scaledOrthBuffer, 0); + + //============================================================== + // Start of source and target direction determination + + // Work through the preferred orientations by relative positioning + // of the vertices and list them in preferred and available order + + var dirPref = []; + var horPref = []; + var vertPref = []; + + horPref[0] = (sourceLeftDist >= sourceRightDist) ? mxConstants.DIRECTION_MASK_WEST + : mxConstants.DIRECTION_MASK_EAST; + vertPref[0] = (sourceTopDist >= sourceBottomDist) ? mxConstants.DIRECTION_MASK_NORTH + : mxConstants.DIRECTION_MASK_SOUTH; + + horPref[1] = mxUtils.reversePortConstraints(horPref[0]); + vertPref[1] = mxUtils.reversePortConstraints(vertPref[0]); + + var preferredHorizDist = sourceLeftDist >= sourceRightDist ? sourceLeftDist + : sourceRightDist; + var preferredVertDist = sourceTopDist >= sourceBottomDist ? sourceTopDist + : sourceBottomDist; + + var prefOrdering = [ [0, 0] , [0, 0] ]; + var preferredOrderSet = false; + + // If the preferred port isn't available, switch it + for (var i = 0; i < 2; i++) + { + if (dir[i] != 0x0) + { + continue; + } + + if ((horPref[i] & portConstraint[i]) == 0) + { + horPref[i] = mxUtils.reversePortConstraints(horPref[i]); + } + + if ((vertPref[i] & portConstraint[i]) == 0) + { + vertPref[i] = mxUtils + .reversePortConstraints(vertPref[i]); + } + + prefOrdering[i][0] = vertPref[i]; + prefOrdering[i][1] = horPref[i]; + } + + if (preferredVertDist > scaledOrthBuffer * 2 + && preferredHorizDist > scaledOrthBuffer * 2) + { + // Possibility of two segment edge connection + if (((horPref[0] & portConstraint[0]) > 0) + && ((vertPref[1] & portConstraint[1]) > 0)) + { + prefOrdering[0][0] = horPref[0]; + prefOrdering[0][1] = vertPref[0]; + prefOrdering[1][0] = vertPref[1]; + prefOrdering[1][1] = horPref[1]; + preferredOrderSet = true; + } + else if (((vertPref[0] & portConstraint[0]) > 0) + && ((horPref[1] & portConstraint[1]) > 0)) + { + prefOrdering[0][0] = vertPref[0]; + prefOrdering[0][1] = horPref[0]; + prefOrdering[1][0] = horPref[1]; + prefOrdering[1][1] = vertPref[1]; + preferredOrderSet = true; + } + } + if (preferredVertDist > scaledOrthBuffer * 2 && !preferredOrderSet) + { + prefOrdering[0][0] = vertPref[0]; + prefOrdering[0][1] = horPref[0]; + prefOrdering[1][0] = vertPref[1]; + prefOrdering[1][1] = horPref[1]; + preferredOrderSet = true; + + } + if (preferredHorizDist > scaledOrthBuffer * 2 && !preferredOrderSet) + { + prefOrdering[0][0] = horPref[0]; + prefOrdering[0][1] = vertPref[0]; + prefOrdering[1][0] = horPref[1]; + prefOrdering[1][1] = vertPref[1]; + preferredOrderSet = true; + } + + // The source and target prefs are now an ordered list of + // the preferred port selections + // It the list can contain gaps, compact it + + for (var i = 0; i < 2; i++) + { + if (dir[i] != 0x0) + { + continue; + } + + if ((prefOrdering[i][0] & portConstraint[i]) == 0) + { + prefOrdering[i][0] = prefOrdering[i][1]; + } + + dirPref[i] = prefOrdering[i][0] & portConstraint[i]; + dirPref[i] |= (prefOrdering[i][1] & portConstraint[i]) << 8; + dirPref[i] |= (prefOrdering[1 - i][i] & portConstraint[i]) << 16; + dirPref[i] |= (prefOrdering[1 - i][1 - i] & portConstraint[i]) << 24; + + if ((dirPref[i] & 0xF) == 0) + { + dirPref[i] = dirPref[i] << 8; + } + if ((dirPref[i] & 0xF00) == 0) + { + dirPref[i] = (dirPref[i] & 0xF) | dirPref[i] >> 8; + } + if ((dirPref[i] & 0xF0000) == 0) + { + dirPref[i] = (dirPref[i] & 0xFFFF) + | ((dirPref[i] & 0xF000000) >> 8); + } + + dir[i] = dirPref[i] & 0xF; + + if (portConstraint[i] == mxConstants.DIRECTION_MASK_WEST + || portConstraint[i] == mxConstants.DIRECTION_MASK_NORTH + || portConstraint[i] == mxConstants.DIRECTION_MASK_EAST + || portConstraint[i] == mxConstants.DIRECTION_MASK_SOUTH) + { + dir[i] = portConstraint[i]; + } + } + + //============================================================== + // End of source and target direction determination + + var sourceIndex = dir[0] == mxConstants.DIRECTION_MASK_EAST ? 3 + : dir[0]; + var targetIndex = dir[1] == mxConstants.DIRECTION_MASK_EAST ? 3 + : dir[1]; + + sourceIndex -= quad; + targetIndex -= quad; + + if (sourceIndex < 1) + { + sourceIndex += 4; + } + if (targetIndex < 1) + { + targetIndex += 4; + } + + var routePattern = mxEdgeStyle.routePatterns[sourceIndex - 1][targetIndex - 1]; + + mxEdgeStyle.wayPoints1[0][0] = geo[0][0]; + mxEdgeStyle.wayPoints1[0][1] = geo[0][1]; + + switch (dir[0]) + { + case mxConstants.DIRECTION_MASK_WEST: + mxEdgeStyle.wayPoints1[0][0] -= scaledOrthBuffer; + mxEdgeStyle.wayPoints1[0][1] += constraint[0][1] * geo[0][3]; + break; + case mxConstants.DIRECTION_MASK_SOUTH: + mxEdgeStyle.wayPoints1[0][0] += constraint[0][0] * geo[0][2]; + mxEdgeStyle.wayPoints1[0][1] += geo[0][3] + scaledOrthBuffer; + break; + case mxConstants.DIRECTION_MASK_EAST: + mxEdgeStyle.wayPoints1[0][0] += geo[0][2] + scaledOrthBuffer; + mxEdgeStyle.wayPoints1[0][1] += constraint[0][1] * geo[0][3]; + break; + case mxConstants.DIRECTION_MASK_NORTH: + mxEdgeStyle.wayPoints1[0][0] += constraint[0][0] * geo[0][2]; + mxEdgeStyle.wayPoints1[0][1] -= scaledOrthBuffer; + break; + } + + var currentIndex = 0; + + // Orientation, 0 horizontal, 1 vertical + var lastOrientation = (dir[0] & (mxConstants.DIRECTION_MASK_EAST | mxConstants.DIRECTION_MASK_WEST)) > 0 ? 0 + : 1; + var initialOrientation = lastOrientation; + var currentOrientation = 0; + + for (var i = 0; i < routePattern.length; i++) + { + var nextDirection = routePattern[i] & 0xF; + + // Rotate the index of this direction by the quad + // to get the real direction + var directionIndex = nextDirection == mxConstants.DIRECTION_MASK_EAST ? 3 + : nextDirection; + + directionIndex += quad; + + if (directionIndex > 4) + { + directionIndex -= 4; + } + + var direction = mxEdgeStyle.dirVectors[directionIndex - 1]; + + currentOrientation = (directionIndex % 2 > 0) ? 0 : 1; + // Only update the current index if the point moved + // in the direction of the current segment move, + // otherwise the same point is moved until there is + // a segment direction change + if (currentOrientation != lastOrientation) + { + currentIndex++; + // Copy the previous way point into the new one + // We can't base the new position on index - 1 + // because sometime elbows turn out not to exist, + // then we'd have to rewind. + mxEdgeStyle.wayPoints1[currentIndex][0] = mxEdgeStyle.wayPoints1[currentIndex - 1][0]; + mxEdgeStyle.wayPoints1[currentIndex][1] = mxEdgeStyle.wayPoints1[currentIndex - 1][1]; + } + + var tar = (routePattern[i] & mxEdgeStyle.TARGET_MASK) > 0; + var sou = (routePattern[i] & mxEdgeStyle.SOURCE_MASK) > 0; + var side = (routePattern[i] & mxEdgeStyle.SIDE_MASK) >> 5; + side = side << quad; + + if (side > 0xF) + { + side = side >> 4; + } + + var center = (routePattern[i] & mxEdgeStyle.CENTER_MASK) > 0; + + if ((sou || tar) && side < 9) + { + var limit = 0; + var souTar = sou ? 0 : 1; + + if (center && currentOrientation == 0) + { + limit = geo[souTar][0] + constraint[souTar][0] * geo[souTar][2]; + } + else if (center) + { + limit = geo[souTar][1] + constraint[souTar][1] * geo[souTar][3]; + } + else + { + limit = mxEdgeStyle.limits[souTar][side]; + } + + if (currentOrientation == 0) + { + var lastX = mxEdgeStyle.wayPoints1[currentIndex][0]; + var deltaX = (limit - lastX) * direction[0]; + + if (deltaX > 0) + { + mxEdgeStyle.wayPoints1[currentIndex][0] += direction[0] + * deltaX; + } + } + else + { + var lastY = mxEdgeStyle.wayPoints1[currentIndex][1]; + var deltaY = (limit - lastY) * direction[1]; + + if (deltaY > 0) + { + mxEdgeStyle.wayPoints1[currentIndex][1] += direction[1] + * deltaY; + } + } + } + + else if (center) + { + // Which center we're travelling to depend on the current direction + mxEdgeStyle.wayPoints1[currentIndex][0] += direction[0] + * Math.abs(mxEdgeStyle.vertexSeperations[directionIndex] / 2); + mxEdgeStyle.wayPoints1[currentIndex][1] += direction[1] + * Math.abs(mxEdgeStyle.vertexSeperations[directionIndex] / 2); + } + + if (currentIndex > 0 + && mxEdgeStyle.wayPoints1[currentIndex][currentOrientation] == mxEdgeStyle.wayPoints1[currentIndex - 1][currentOrientation]) + { + currentIndex--; + } + else + { + lastOrientation = currentOrientation; + } + } + + for (var i = 0; i <= currentIndex; i++) + { + if (i == currentIndex) + { + // Last point can cause last segment to be in + // same direction as jetty/approach. If so, + // check the number of points is consistent + // with the relative orientation of source and target + // jettys. Same orientation requires an even + // number of turns (points), different requires + // odd. + var targetOrientation = (dir[1] & (mxConstants.DIRECTION_MASK_EAST | mxConstants.DIRECTION_MASK_WEST)) > 0 ? 0 + : 1; + var sameOrient = targetOrientation == initialOrientation ? 0 : 1; + + // (currentIndex + 1) % 2 is 0 for even number of points, + // 1 for odd + if (sameOrient != (currentIndex + 1) % 2) + { + // The last point isn't required + break; + } + } + + result.push(new mxPoint(mxEdgeStyle.wayPoints1[i][0], mxEdgeStyle.wayPoints1[i][1])); + } + }, + + getRoutePattern: function(dir, quad, dx, dy) + { + var sourceIndex = dir[0] == mxConstants.DIRECTION_MASK_EAST ? 3 + : dir[0]; + var targetIndex = dir[1] == mxConstants.DIRECTION_MASK_EAST ? 3 + : dir[1]; + + sourceIndex -= quad; + targetIndex -= quad; + + if (sourceIndex < 1) + { + sourceIndex += 4; + } + if (targetIndex < 1) + { + targetIndex += 4; + } + + var result = routePatterns[sourceIndex - 1][targetIndex - 1]; + + if (dx == 0 || dy == 0) + { + if (inlineRoutePatterns[sourceIndex - 1][targetIndex - 1] != null) + { + result = inlineRoutePatterns[sourceIndex - 1][targetIndex - 1]; + } + } + + return result; + } +};
\ No newline at end of file diff --git a/src/js/view/mxGraph.js b/src/js/view/mxGraph.js new file mode 100644 index 0000000..7c90f9b --- /dev/null +++ b/src/js/view/mxGraph.js @@ -0,0 +1,11176 @@ +/** + * $Id: mxGraph.js,v 1.702 2012-12-13 15:07:34 gaudenz Exp $ + * Copyright (c) 2006-2010, JGraph Ltd + */ +/** + * Class: mxGraph + * + * Extends <mxEventSource> to implement a graph component for + * the browser. This is the main class of the package. To activate + * panning and connections use <setPanning> and <setConnectable>. + * For rubberband selection you must create a new instance of + * <mxRubberband>. The following listeners are added to + * <mouseListeners> by default: + * + * - <tooltipHandler>: <mxTooltipHandler> that displays tooltips + * - <panningHandler>: <mxPanningHandler> for panning and popup menus + * - <connectionHandler>: <mxConnectionHandler> for creating connections + * - <graphHandler>: <mxGraphHandler> for moving and cloning cells + * + * These listeners will be called in the above order if they are enabled. + * + * Background Images: + * + * To display a background image, set the image, image width and + * image height using <setBackgroundImage>. If one of the + * above values has changed then the <view>'s <mxGraphView.validate> + * should be invoked. + * + * Cell Images: + * + * To use images in cells, a shape must be specified in the default + * vertex style (or any named style). Possible shapes are + * <mxConstants.SHAPE_IMAGE> and <mxConstants.SHAPE_LABEL>. + * The code to change the shape used in the default vertex style, + * the following code is used: + * + * (code) + * var style = graph.getStylesheet().getDefaultVertexStyle(); + * style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_IMAGE; + * (end) + * + * For the default vertex style, the image to be displayed can be + * specified in a cell's style using the <mxConstants.STYLE_IMAGE> + * key and the image URL as a value, for example: + * + * (code) + * image=http://www.example.com/image.gif + * (end) + * + * For a named style, the the stylename must be the first element + * of the cell style: + * + * (code) + * stylename;image=http://www.example.com/image.gif + * (end) + * + * A cell style can have any number of key=value pairs added, divided + * by a semicolon as follows: + * + * (code) + * [stylename;|key=value;] + * (end) + * + * Labels: + * + * The cell labels are defined by <getLabel> which uses <convertValueToString> + * if <labelsVisible> is true. If a label must be rendered as HTML markup, then + * <isHtmlLabel> should return true for the respective cell. If all labels + * contain HTML markup, <htmlLabels> can be set to true. NOTE: Enabling HTML + * labels carries a possible security risk (see the section on security in + * the manual). + * + * If wrapping is needed for a label, then <isHtmlLabel> and <isWrapping> must + * return true for the cell whose label should be wrapped. See <isWrapping> for + * an example. + * + * If clipping is needed to keep the rendering of a HTML label inside the + * bounds of its vertex, then <isClipping> should return true for the + * respective cell. + * + * By default, edge labels are movable and vertex labels are fixed. This can be + * changed by setting <edgeLabelsMovable> and <vertexLabelsMovable>, or by + * overriding <isLabelMovable>. + * + * In-place Editing: + * + * In-place editing is started with a doubleclick or by typing F2. + * Programmatically, <edit> is used to check if the cell is editable + * (<isCellEditable>) and call <startEditingAtCell>, which invokes + * <mxCellEditor.startEditing>. The editor uses the value returned + * by <getEditingValue> as the editing value. + * + * After in-place editing, <labelChanged> is called, which invokes + * <mxGraphModel.setValue>, which in turn calls + * <mxGraphModel.valueForCellChanged> via <mxValueChange>. + * + * The event that triggers in-place editing is passed through to the + * <cellEditor>, which may take special actions depending on the type of the + * event or mouse location, and is also passed to <getEditingValue>. The event + * is then passed back to the event processing functions which can perform + * specific actions based on the trigger event. + * + * Tooltips: + * + * Tooltips are implemented by <getTooltip>, which calls <getTooltipForCell> + * if a cell is under the mousepointer. The default implementation checks if + * the cell has a getTooltip function and calls it if it exists. Hence, in order + * to provide custom tooltips, the cell must provide a getTooltip function, or + * one of the two above functions must be overridden. + * + * Typically, for custom cell tooltips, the latter function is overridden as + * follows: + * + * (code) + * graph.getTooltipForCell = function(cell) + * { + * var label = this.convertValueToString(cell); + * return 'Tooltip for '+label; + * } + * (end) + * + * When using a config file, the function is overridden in the mxGraph section + * using the following entry: + * + * (code) + * <add as="getTooltipForCell"><![CDATA[ + * function(cell) + * { + * var label = this.convertValueToString(cell); + * return 'Tooltip for '+label; + * } + * ]]></add> + * (end) + * + * "this" refers to the graph in the implementation, so for example to check if + * a cell is an edge, you use this.getModel().isEdge(cell) + * + * For replacing the default implementation of <getTooltipForCell> (rather than + * replacing the function on a specific instance), the following code should be + * used after loading the JavaScript files, but before creating a new mxGraph + * instance using <mxGraph>: + * + * (code) + * mxGraph.prototype.getTooltipForCell = function(cell) + * { + * var label = this.convertValueToString(cell); + * return 'Tooltip for '+label; + * } + * (end) + * + * Shapes & Styles: + * + * The implementation of new shapes is demonstrated in the examples. We'll assume + * that we have implemented a custom shape with the name BoxShape which we want + * to use for drawing vertices. To use this shape, it must first be registered in + * the cell renderer as follows: + * + * (code) + * graph.cellRenderer.registerShape('box', BoxShape); + * (end) + * + * The code registers the BoxShape constructor under the name box in the cell + * renderer of the graph. The shape can now be referenced using the shape-key in + * a style definition. (The cell renderer contains a set of additional shapes, + * namely one for each constant with a SHAPE-prefix in <mxConstants>.) + * + * Styles are a collection of key, value pairs and a stylesheet is a collection + * of named styles. The names are referenced by the cellstyle, which is stored + * in <mxCell.style> with the following format: [stylename;|key=value;]. The + * string is resolved to a collection of key, value pairs, where the keys are + * overridden with the values in the string. + * + * When introducing a new shape, the name under which the shape is registered + * must be used in the stylesheet. There are three ways of doing this: + * + * - By changing the default style, so that all vertices will use the new + * shape + * - By defining a new style, so that only vertices with the respective + * cellstyle will use the new shape + * - By using shape=box in the cellstyle's optional list of key, value pairs + * to be overridden + * + * In the first case, the code to fetch and modify the default style for + * vertices is as follows: + * + * (code) + * var style = graph.getStylesheet().getDefaultVertexStyle(); + * style[mxConstants.STYLE_SHAPE] = 'box'; + * (end) + * + * The code takes the default vertex style, which is used for all vertices that + * do not have a specific cellstyle, and modifies the value for the shape-key + * in-place to use the new BoxShape for drawing vertices. This is done by + * assigning the box value in the second line, which refers to the name of the + * BoxShape in the cell renderer. + * + * In the second case, a collection of key, value pairs is created and then + * added to the stylesheet under a new name. In order to distinguish the + * shapename and the stylename we'll use boxstyle for the stylename: + * + * (code) + * var style = new Object(); + * style[mxConstants.STYLE_SHAPE] = 'box'; + * style[mxConstants.STYLE_STROKECOLOR] = '#000000'; + * style[mxConstants.STYLE_FONTCOLOR] = '#000000'; + * graph.getStylesheet().putCellStyle('boxstyle', style); + * (end) + * + * The code adds a new style with the name boxstyle to the stylesheet. To use + * this style with a cell, it must be referenced from the cellstyle as follows: + * + * (code) + * var vertex = graph.insertVertex(parent, null, 'Hello, World!', 20, 20, 80, 20, + * 'boxstyle'); + * (end) + * + * To summarize, each new shape must be registered in the <mxCellRenderer> with + * a unique name. That name is then used as the value of the shape-key in a + * default or custom style. If there are multiple custom shapes, then there + * should be a separate style for each shape. + * + * Inheriting Styles: + * + * For fill-, stroke-, gradient- and indicatorColors special keywords can be + * used. The inherit keyword for one of these colors will inherit the color + * for the same key from the parent cell. The swimlane keyword does the same, + * but inherits from the nearest swimlane in the ancestor hierarchy. Finally, + * the indicated keyword will use the color of the indicator as the color for + * the given key. + * + * Scrollbars: + * + * The <containers> overflow CSS property defines if scrollbars are used to + * display the graph. For values of 'auto' or 'scroll', the scrollbars will + * be shown. Note that the <resizeContainer> flag is normally not used + * together with scrollbars, as it will resize the container to match the + * size of the graph after each change. + * + * Multiplicities and Validation: + * + * To control the possible connections in mxGraph, <getEdgeValidationError> is + * used. The default implementation of the function uses <multiplicities>, + * which is an array of <mxMultiplicity>. Using this class allows to establish + * simple multiplicities, which are enforced by the graph. + * + * The <mxMultiplicity> uses <mxCell.is> to determine for which terminals it + * applies. The default implementation of <mxCell.is> works with DOM nodes (XML + * nodes) and checks if the given type parameter matches the nodeName of the + * node (case insensitive). Optionally, an attributename and value can be + * specified which are also checked. + * + * <getEdgeValidationError> is called whenever the connectivity of an edge + * changes. It returns an empty string or an error message if the edge is + * invalid or null if the edge is valid. If the returned string is not empty + * then it is displayed as an error message. + * + * <mxMultiplicity> allows to specify the multiplicity between a terminal and + * its possible neighbors. For example, if any rectangle may only be connected + * to, say, a maximum of two circles you can add the following rule to + * <multiplicities>: + * + * (code) + * graph.multiplicities.push(new mxMultiplicity( + * true, 'rectangle', null, null, 0, 2, ['circle'], + * 'Only 2 targets allowed', + * 'Only shape targets allowed')); + * (end) + * + * This will display the first error message whenever a rectangle is connected + * to more than two circles and the second error message if a rectangle is + * connected to anything but a circle. + * + * For certain multiplicities, such as a minimum of 1 connection, which cannot + * be enforced at cell creation time (unless the cell is created together with + * the connection), mxGraph offers <validate> which checks all multiplicities + * for all cells and displays the respective error messages in an overlay icon + * on the cells. + * + * If a cell is collapsed and contains validation errors, a respective warning + * icon is attached to the collapsed cell. + * + * Auto-Layout: + * + * For automatic layout, the <getLayout> hook is provided in <mxLayoutManager>. + * It can be overridden to return a layout algorithm for the children of a + * given cell. + * + * Unconnected edges: + * + * The default values for all switches are designed to meet the requirements of + * general diagram drawing applications. A very typical set of settings to + * avoid edges that are not connected is the following: + * + * (code) + * graph.setAllowDanglingEdges(false); + * graph.setDisconnectOnMove(false); + * (end) + * + * Setting the <cloneInvalidEdges> switch to true is optional. This switch + * controls if edges are inserted after a copy, paste or clone-drag if they are + * invalid. For example, edges are invalid if copied or control-dragged without + * having selected the corresponding terminals and allowDanglingEdges is + * false, in which case the edges will not be cloned if the switch is false. + * + * Output: + * + * To produce an XML representation for a diagram, the following code can be + * used. + * + * (code) + * var enc = new mxCodec(mxUtils.createXmlDocument()); + * var node = enc.encode(graph.getModel()); + * (end) + * + * This will produce an XML node than can be handled using the DOM API or + * turned into a string representation using the following code: + * + * (code) + * var xml = mxUtils.getXml(node); + * (end) + * + * To obtain a formatted string, mxUtils.getPrettyXml can be used instead. + * + * This string can now be stored in a local persistent storage (for example + * using Google Gears) or it can be passed to a backend using mxUtils.post as + * follows. The url variable is the URL of the Java servlet, PHP page or HTTP + * handler, depending on the server. + * + * (code) + * var xmlString = encodeURIComponent(mxUtils.getXml(node)); + * mxUtils.post(url, 'xml='+xmlString, function(req) + * { + * // Process server response using req of type mxXmlRequest + * }); + * (end) + * + * Input: + * + * To load an XML representation of a diagram into an existing graph object + * mxUtils.load can be used as follows. The url variable is the URL of the Java + * servlet, PHP page or HTTP handler that produces the XML string. + * + * (code) + * var xmlDoc = mxUtils.load(url).getXml(); + * var node = xmlDoc.documentElement; + * var dec = new mxCodec(node.ownerDocument); + * dec.decode(node, graph.getModel()); + * (end) + * + * For creating a page that loads the client and a diagram using a single + * request please refer to the deployment examples in the backends. + * + * Functional dependencies: + * + * (see images/callgraph.png) + * + * Resources: + * + * resources/graph - Language resources for mxGraph + * + * Group: Events + * + * Event: mxEvent.ROOT + * + * Fires if the root in the model has changed. This event has no properties. + * + * Event: mxEvent.ALIGN_CELLS + * + * Fires between begin- and endUpdate in <alignCells>. The <code>cells</code> + * and <code>align</code> properties contain the respective arguments that were + * passed to <alignCells>. + * + * Event: mxEvent.FLIP_EDGE + * + * Fires between begin- and endUpdate in <flipEdge>. The <code>edge</code> + * property contains the edge passed to <flipEdge>. + * + * Event: mxEvent.ORDER_CELLS + * + * Fires between begin- and endUpdate in <orderCells>. The <code>cells</code> + * and <code>back</code> properties contain the respective arguments that were + * passed to <orderCells>. + * + * Event: mxEvent.CELLS_ORDERED + * + * Fires between begin- and endUpdate in <cellsOrdered>. The <code>cells</code> + * and <code>back</code> arguments contain the respective arguments that were + * passed to <cellsOrdered>. + * + * Event: mxEvent.GROUP_CELLS + * + * Fires between begin- and endUpdate in <groupCells>. The <code>group</code>, + * <code>cells</code> and <code>border</code> arguments contain the respective + * arguments that were passed to <groupCells>. + * + * Event: mxEvent.UNGROUP_CELLS + * + * Fires between begin- and endUpdate in <ungroupCells>. The <code>cells</code> + * property contains the array of cells that was passed to <ungroupCells>. + * + * Event: mxEvent.REMOVE_CELLS_FROM_PARENT + * + * Fires between begin- and endUpdate in <removeCellsFromParent>. The + * <code>cells</code> property contains the array of cells that was passed to + * <removeCellsFromParent>. + * + * Event: mxEvent.ADD_CELLS + * + * Fires between begin- and endUpdate in <addCells>. The <code>cells</code>, + * <code>parent</code>, <code>index</code>, <code>source</code> and + * <code>target</code> properties contain the respective arguments that were + * passed to <addCells>. + * + * Event: mxEvent.CELLS_ADDED + * + * Fires between begin- and endUpdate in <cellsAdded>. The <code>cells</code>, + * <code>parent</code>, <code>index</code>, <code>source</code>, + * <code>target</code> and <code>absolute</code> properties contain the + * respective arguments that were passed to <cellsAdded>. + * + * Event: mxEvent.REMOVE_CELLS + * + * Fires between begin- and endUpdate in <removeCells>. The <code>cells</code> + * and <code>includeEdges</code> arguments contain the respective arguments + * that were passed to <removeCells>. + * + * Event: mxEvent.CELLS_REMOVED + * + * Fires between begin- and endUpdate in <cellsRemoved>. The <code>cells</code> + * argument contains the array of cells that was removed. + * + * Event: mxEvent.SPLIT_EDGE + * + * Fires between begin- and endUpdate in <splitEdge>. The <code>edge</code> + * property contains the edge to be splitted, the <code>cells</code>, + * <code>newEdge</code>, <code>dx</code> and <code>dy</code> properties contain + * the respective arguments that were passed to <splitEdge>. + * + * Event: mxEvent.TOGGLE_CELLS + * + * Fires between begin- and endUpdate in <toggleCells>. The <code>show</code>, + * <code>cells</code> and <code>includeEdges</code> properties contain the + * respective arguments that were passed to <toggleCells>. + * + * Event: mxEvent.FOLD_CELLS + * + * Fires between begin- and endUpdate in <foldCells>. The + * <code>collapse</code>, <code>cells</code> and <code>recurse</code> + * properties contain the respective arguments that were passed to <foldCells>. + * + * Event: mxEvent.CELLS_FOLDED + * + * Fires between begin- and endUpdate in cellsFolded. The + * <code>collapse</code>, <code>cells</code> and <code>recurse</code> + * properties contain the respective arguments that were passed to + * <cellsFolded>. + * + * Event: mxEvent.UPDATE_CELL_SIZE + * + * Fires between begin- and endUpdate in <updateCellSize>. The + * <code>cell</code> and <code>ignoreChildren</code> properties contain the + * respective arguments that were passed to <updateCellSize>. + * + * Event: mxEvent.RESIZE_CELLS + * + * Fires between begin- and endUpdate in <resizeCells>. The <code>cells</code> + * and <code>bounds</code> properties contain the respective arguments that + * were passed to <resizeCells>. + * + * Event: mxEvent.CELLS_RESIZED + * + * Fires between begin- and endUpdate in <cellsResized>. The <code>cells</code> + * and <code>bounds</code> properties contain the respective arguments that + * were passed to <cellsResized>. + * + * Event: mxEvent.MOVE_CELLS + * + * Fires between begin- and endUpdate in <moveCells>. The <code>cells</code>, + * <code>dx</code>, <code>dy</code>, <code>clone</code>, <code>target</code> + * and <code>event</code> properties contain the respective arguments that + * were passed to <moveCells>. + * + * Event: mxEvent.CELLS_MOVED + * + * Fires between begin- and endUpdate in <cellsMoved>. The <code>cells</code>, + * <code>dx</code>, <code>dy</code> and <code>disconnect</code> properties + * contain the respective arguments that were passed to <cellsMoved>. + * + * Event: mxEvent.CONNECT_CELL + * + * Fires between begin- and endUpdate in <connectCell>. The <code>edge</code>, + * <code>terminal</code> and <code>source</code> properties contain the + * respective arguments that were passed to <connectCell>. + * + * Event: mxEvent.CELL_CONNECTED + * + * Fires between begin- and endUpdate in <cellConnected>. The + * <code>edge</code>, <code>terminal</code> and <code>source</code> properties + * contain the respective arguments that were passed to <cellConnected>. + * + * Event: mxEvent.REFRESH + * + * Fires after <refresh> was executed. This event has no properties. + * + * Event: mxEvent.CLICK + * + * Fires in <click> after a click event. The <code>event</code> property + * contains the original mouse event and <code>cell</code> property contains + * the cell under the mouse or null if the background was clicked. + * + * To handle a click event, use the following code: + * + * (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 (!evt.isConsumed()) + * { + * if (cell != null) + * { + * // Do something useful with cell and consume the event + * evt.consume(); + * } + * } + * }); + * (end) + * + * Event: mxEvent.DOUBLE_CLICK + * + * Fires in <dblClick> after a double click. The <code>event</code> property + * contains the original mouse event and the <code>cell</code> property + * contains the cell under the mouse or null if the background was clicked. + * + * Event: mxEvent.SIZE + * + * Fires after <sizeDidChange> was executed. The <code>bounds</code> property + * contains the new graph bounds. + * + * Event: mxEvent.START_EDITING + * + * Fires before the in-place editor starts in <startEditingAtCell>. The + * <code>cell</code> property contains the cell that is being edited and the + * <code>event</code> property contains the optional event argument that was + * passed to <startEditingAtCell>. + * + * Event: mxEvent.LABEL_CHANGED + * + * Fires between begin- and endUpdate in <cellLabelChanged>. The + * <code>cell</code> property contains the cell, the <code>value</code> + * property contains the new value for the cell and the optional + * <code>event</code> property contains the mouse event that started the edit. + * + * Event: mxEvent.ADD_OVERLAY + * + * Fires after an overlay is added in <addCellOverlay>. The <code>cell</code> + * property contains the cell and the <code>overlay</code> property contains + * the <mxCellOverlay> that was added. + * + * Event: mxEvent.REMOVE_OVERLAY + * + * Fires after an overlay is removed in <removeCellOverlay> and + * <removeCellOverlays>. The <code>cell</code> property contains the cell and + * the <code>overlay</code> property contains the <mxCellOverlay> that was + * removed. + * + * Constructor: mxGraph + * + * Constructs a new mxGraph in the specified container. Model is an optional + * mxGraphModel. If no model is provided, a new mxGraphModel instance is + * used as the model. The container must have a valid owner document prior + * to calling this function in Internet Explorer. RenderHint is a string to + * affect the display performance and rendering in IE, but not in SVG-based + * browsers. The parameter is mapped to <dialect>, which may + * be one of <mxConstants.DIALECT_SVG> for SVG-based browsers, + * <mxConstants.DIALECT_STRICTHTML> for fastest display mode, + * <mxConstants.DIALECT_PREFERHTML> for faster display mode, + * <mxConstants.DIALECT_MIXEDHTML> for fast and <mxConstants.DIALECT_VML> + * for exact display mode (slowest). The dialects are defined in mxConstants. + * The default values are DIALECT_SVG for SVG-based browsers and + * DIALECT_MIXED for IE. + * + * The possible values for the renderingHint parameter are explained below: + * + * fast - The parameter is based on the fact that the display performance is + * highly improved in IE if the VML is not contained within a VML group + * element. The lack of a group element only slightly affects the display while + * panning, but improves the performance by almost a factor of 2, while keeping + * the display sufficiently accurate. This also allows to render certain shapes as HTML + * if the display accuracy is not affected, which is implemented by + * <mxShape.isMixedModeHtml>. This is the default setting and is mapped to + * DIALECT_MIXEDHTML. + * faster - Same as fast, but more expensive shapes are avoided. This is + * controlled by <mxShape.preferModeHtml>. The default implementation will + * avoid gradients and rounded rectangles, but more significant shapes, such + * as rhombus, ellipse, actor and cylinder will be rendered accurately. This + * setting is mapped to DIALECT_PREFERHTML. + * fastest - Almost anything will be rendered in Html. This allows for + * rectangles, labels and images. This setting is mapped to + * DIALECT_STRICTHTML. + * exact - If accurate panning is required and if the diagram is small (up + * to 100 cells), then this value should be used. In this mode, a group is + * created that contains the VML. This allows for accurate panning and is + * mapped to DIALECT_VML. + * + * Example: + * + * To create a graph inside a DOM node with an id of graph: + * (code) + * var container = document.getElementById('graph'); + * var graph = new mxGraph(container); + * (end) + * + * Parameters: + * + * container - Optional DOM node that acts as a container for the graph. + * If this is null then the container can be initialized later using + * <init>. + * model - Optional <mxGraphModel> that constitutes the graph data. + * renderHint - Optional string that specifies the display accuracy and + * performance. Default is mxConstants.DIALECT_MIXEDHTML (for IE). + * stylesheet - Optional <mxStylesheet> to be used in the graph. + */ +function mxGraph(container, model, renderHint, stylesheet) +{ + // Initializes the variable in case the prototype has been + // modified to hold some listeners (which is possible because + // the createHandlers call is executed regardless of the + // arguments passed into the ctor). + this.mouseListeners = null; + + // Converts the renderHint into a dialect + this.renderHint = renderHint; + + if (mxClient.IS_SVG) + { + this.dialect = mxConstants.DIALECT_SVG; + } + else if (renderHint == mxConstants.RENDERING_HINT_EXACT && mxClient.IS_VML) + { + this.dialect = mxConstants.DIALECT_VML; + } + else if (renderHint == mxConstants.RENDERING_HINT_FASTEST) + { + this.dialect = mxConstants.DIALECT_STRICTHTML; + } + else if (renderHint == mxConstants.RENDERING_HINT_FASTER) + { + this.dialect = mxConstants.DIALECT_PREFERHTML; + } + else // default for VML + { + this.dialect = mxConstants.DIALECT_MIXEDHTML; + } + + // Initializes the main members that do not require a container + this.model = (model != null) ? model : new mxGraphModel(); + this.multiplicities = []; + this.imageBundles = []; + this.cellRenderer = this.createCellRenderer(); + this.setSelectionModel(this.createSelectionModel()); + this.setStylesheet((stylesheet != null) ? stylesheet : this.createStylesheet()); + this.view = this.createGraphView(); + + // Adds a graph model listener to update the view + this.graphModelChangeListener = mxUtils.bind(this, function(sender, evt) + { + this.graphModelChanged(evt.getProperty('edit').changes); + }); + + this.model.addListener(mxEvent.CHANGE, this.graphModelChangeListener); + + // Installs basic event handlers with disabled default settings. + this.createHandlers(); + + // Initializes the display if a container was specified + if (container != null) + { + this.init(container); + } + + this.view.revalidate(); +}; + +/** + * Installs the required language resources at class + * loading time. + */ +if (mxLoadResources) +{ + mxResources.add(mxClient.basePath+'/resources/graph'); +} + +/** + * Extends mxEventSource. + */ +mxGraph.prototype = new mxEventSource(); +mxGraph.prototype.constructor = mxGraph; + +/** + * Variable: EMPTY_ARRAY + * + * Immutable empty array instance. + */ +mxGraph.prototype.EMPTY_ARRAY = []; + +/** + * Group: Variables + */ + +/** + * Variable: mouseListeners + * + * Holds the mouse event listeners. See <fireMouseEvent>. + */ +mxGraph.prototype.mouseListeners = null; + +/** + * Variable: isMouseDown + * + * Holds the state of the mouse button. + */ +mxGraph.prototype.isMouseDown = false; + +/** + * Variable: model + * + * Holds the <mxGraphModel> that contains the cells to be displayed. + */ +mxGraph.prototype.model = null; + +/** + * Variable: view + * + * Holds the <mxGraphView> that caches the <mxCellStates> for the cells. + */ +mxGraph.prototype.view = null; + +/** + * Variable: stylesheet + * + * Holds the <mxStylesheet> that defines the appearance of the cells. + * + * + * Example: + * + * Use the following code to read a stylesheet into an existing graph. + * + * (code) + * var req = mxUtils.load('stylesheet.xml'); + * var root = req.getDocumentElement(); + * var dec = new mxCodec(root.ownerDocument); + * dec.decode(root, graph.stylesheet); + * (end) + */ +mxGraph.prototype.stylesheet = null; + +/** + * Variable: selectionModel + * + * Holds the <mxGraphSelectionModel> that models the current selection. + */ +mxGraph.prototype.selectionModel = null; + +/** + * Variable: cellEditor + * + * Holds the <mxCellEditor> that is used as the in-place editing. + */ +mxGraph.prototype.cellEditor = null; + +/** + * Variable: cellRenderer + * + * Holds the <mxCellRenderer> for rendering the cells in the graph. + */ +mxGraph.prototype.cellRenderer = null; + +/** + * Variable: multiplicities + * + * An array of <mxMultiplicities> describing the allowed + * connections in a graph. + */ +mxGraph.prototype.multiplicities = null; + +/** + * Variable: renderHint + * + * RenderHint as it was passed to the constructor. + */ +mxGraph.prototype.renderHint = null; + +/** + * Variable: dialect + * + * Dialect to be used for drawing the graph. Possible values are all + * constants in <mxConstants> with a DIALECT-prefix. + */ +mxGraph.prototype.dialect = null; + +/** + * Variable: gridSize + * + * Specifies the grid size. Default is 10. + */ +mxGraph.prototype.gridSize = 10; + +/** + * Variable: gridEnabled + * + * Specifies if the grid is enabled. This is used in <snap>. Default is + * true. + */ +mxGraph.prototype.gridEnabled = true; + +/** + * Variable: portsEnabled + * + * Specifies if ports are enabled. This is used in <cellConnected> to update + * the respective style. Default is true. + */ +mxGraph.prototype.portsEnabled = true; + +/** + * Variable: doubleTapEnabled + * + * Specifies if double taps on touch-based devices should be handled. Default + * is true. + */ +mxGraph.prototype.doubleTapEnabled = true; + +/** + * Variable: doubleTapTimeout + * + * Specifies the timeout for double taps. Default is 700 ms. + */ +mxGraph.prototype.doubleTapTimeout = 700; + +/** + * Variable: doubleTapTolerance + * + * Specifies the tolerance for double taps. Default is 25 pixels. + */ +mxGraph.prototype.doubleTapTolerance = 25; + +/** + * Variable: lastTouchX + * + * Holds the x-coordinate of the last touch event for double tap detection. + */ +mxGraph.prototype.lastTouchY = 0; + +/** + * Variable: lastTouchX + * + * Holds the y-coordinate of the last touch event for double tap detection. + */ +mxGraph.prototype.lastTouchY = 0; + +/** + * Variable: lastTouchTime + * + * Holds the time of the last touch event for double click detection. + */ +mxGraph.prototype.lastTouchTime = 0; + +/** + * Variable: gestureEnabled + * + * Specifies if the handleGesture method should be invoked. Default is true. This + * is an experimental feature for touch-based devices. + */ +mxGraph.prototype.gestureEnabled = true; + +/** + * Variable: tolerance + * + * Tolerance for a move to be handled as a single click. + * Default is 4 pixels. + */ +mxGraph.prototype.tolerance = 4; + +/** + * Variable: defaultOverlap + * + * Value returned by <getOverlap> if <isAllowOverlapParent> returns + * true for the given cell. <getOverlap> is used in <constrainChild> if + * <isConstrainChild> returns true. The value specifies the + * portion of the child which is allowed to overlap the parent. + */ +mxGraph.prototype.defaultOverlap = 0.5; + +/** + * Variable: defaultParent + * + * Specifies the default parent to be used to insert new cells. + * This is used in <getDefaultParent>. Default is null. + */ +mxGraph.prototype.defaultParent = null; + +/** + * Variable: alternateEdgeStyle + * + * Specifies the alternate edge style to be used if the main control point + * on an edge is being doubleclicked. Default is null. + */ +mxGraph.prototype.alternateEdgeStyle = null; + +/** + * Variable: backgroundImage + * + * Specifies the <mxImage> to be returned by <getBackgroundImage>. Default + * is null. + * + * Example: + * + * (code) + * var img = new mxImage('http://www.example.com/maps/examplemap.jpg', 1024, 768); + * graph.setBackgroundImage(img); + * graph.view.validate(); + * (end) + */ +mxGraph.prototype.backgroundImage = null; + +/** + * Variable: pageVisible + * + * Specifies if the background page should be visible. Default is false. + * Not yet implemented. + */ +mxGraph.prototype.pageVisible = false; + +/** + * Variable: pageBreaksVisible + * + * Specifies if a dashed line should be drawn between multiple pages. Default + * is false. If you change this value while a graph is being displayed then you + * should call <sizeDidChange> to force an update of the display. + */ +mxGraph.prototype.pageBreaksVisible = false; + +/** + * Variable: pageBreakColor + * + * Specifies the color for page breaks. Default is 'gray'. + */ +mxGraph.prototype.pageBreakColor = 'gray'; + +/** + * Variable: pageBreakDashed + * + * Specifies the page breaks should be dashed. Default is true. + */ +mxGraph.prototype.pageBreakDashed = true; + +/** + * Variable: minPageBreakDist + * + * Specifies the minimum distance for page breaks to be visible. Default is + * 20 (in pixels). + */ +mxGraph.prototype.minPageBreakDist = 20; + +/** + * Variable: preferPageSize + * + * Specifies if the graph size should be rounded to the next page number in + * <sizeDidChange>. This is only used if the graph container has scrollbars. + * Default is false. + */ +mxGraph.prototype.preferPageSize = false; + +/** + * Variable: pageFormat + * + * Specifies the page format for the background page. Default is + * <mxConstants.PAGE_FORMAT_A4_PORTRAIT>. This is used as the default in + * <mxPrintPreview> and for painting the background page if <pageVisible> is + * true and the pagebreaks if <pageBreaksVisible> is true. + */ +mxGraph.prototype.pageFormat = mxConstants.PAGE_FORMAT_A4_PORTRAIT; + +/** + * Variable: pageScale + * + * Specifies the scale of the background page. Default is 1.5. + * Not yet implemented. + */ +mxGraph.prototype.pageScale = 1.5; + +/** + * Variable: enabled + * + * Specifies the return value for <isEnabled>. Default is true. + */ +mxGraph.prototype.enabled = true; + +/** + * Variable: escapeEnabled + * + * Specifies if <mxKeyHandler> should invoke <escape> when the escape key + * is pressed. Default is true. + */ +mxGraph.prototype.escapeEnabled = true; + +/** + * Variable: invokesStopCellEditing + * + * If true, when editing is to be stopped by way of selection changing, + * data in diagram changing or other means stopCellEditing is invoked, and + * changes are saved. This is implemented in a focus handler in + * <mxCellEditor>. Default is true. + */ +mxGraph.prototype.invokesStopCellEditing = true; + +/** + * Variable: enterStopsCellEditing + * + * If true, pressing the enter key without pressing control or shift will stop + * editing and accept the new value. This is used in <mxCellEditor> to stop + * cell editing. Note: You can always use F2 and escape to stop editing. + * Default is false. + */ +mxGraph.prototype.enterStopsCellEditing = false; + +/** + * Variable: useScrollbarsForPanning + * + * Specifies if scrollbars should be used for panning in <panGraph> if + * any scrollbars are available. If scrollbars are enabled in CSS, but no + * scrollbars appear because the graph is smaller than the container size, + * then no panning occurs if this is true. Default is true. + */ +mxGraph.prototype.useScrollbarsForPanning = true; + +/** + * Variable: exportEnabled + * + * Specifies the return value for <canExportCell>. Default is true. + */ +mxGraph.prototype.exportEnabled = true; + +/** + * Variable: importEnabled + * + * Specifies the return value for <canImportCell>. Default is true. + */ +mxGraph.prototype.importEnabled = true; + +/** + * Variable: cellsLocked + * + * Specifies the return value for <isCellLocked>. Default is false. + */ +mxGraph.prototype.cellsLocked = false; + +/** + * Variable: cellsCloneable + * + * Specifies the return value for <isCellCloneable>. Default is true. + */ +mxGraph.prototype.cellsCloneable = true; + +/** + * Variable: foldingEnabled + * + * Specifies if folding (collapse and expand via an image icon in the graph + * should be enabled). Default is true. + */ +mxGraph.prototype.foldingEnabled = true; + +/** + * Variable: cellsEditable + * + * Specifies the return value for <isCellEditable>. Default is true. + */ +mxGraph.prototype.cellsEditable = true; + +/** + * Variable: cellsDeletable + * + * Specifies the return value for <isCellDeletable>. Default is true. + */ +mxGraph.prototype.cellsDeletable = true; + +/** + * Variable: cellsMovable + * + * Specifies the return value for <isCellMovable>. Default is true. + */ +mxGraph.prototype.cellsMovable = true; + +/** + * Variable: edgeLabelsMovable + * + * Specifies the return value for edges in <isLabelMovable>. Default is true. + */ +mxGraph.prototype.edgeLabelsMovable = true; + +/** + * Variable: vertexLabelsMovable + * + * Specifies the return value for vertices in <isLabelMovable>. Default is false. + */ +mxGraph.prototype.vertexLabelsMovable = false; + +/** + * Variable: dropEnabled + * + * Specifies the return value for <isDropEnabled>. Default is false. + */ +mxGraph.prototype.dropEnabled = false; + +/** + * Variable: splitEnabled + * + * Specifies if dropping onto edges should be enabled. Default is true. + */ +mxGraph.prototype.splitEnabled = true; + +/** + * Variable: cellsResizable + * + * Specifies the return value for <isCellResizable>. Default is true. + */ +mxGraph.prototype.cellsResizable = true; + +/** + * Variable: cellsBendable + * + * Specifies the return value for <isCellsBendable>. Default is true. + */ +mxGraph.prototype.cellsBendable = true; + +/** + * Variable: cellsSelectable + * + * Specifies the return value for <isCellSelectable>. Default is true. + */ +mxGraph.prototype.cellsSelectable = true; + +/** + * Variable: cellsDisconnectable + * + * Specifies the return value for <isCellDisconntable>. Default is true. + */ +mxGraph.prototype.cellsDisconnectable = true; + +/** + * Variable: autoSizeCells + * + * Specifies if the graph should automatically update the cell size after an + * edit. This is used in <isAutoSizeCell>. Default is false. + */ +mxGraph.prototype.autoSizeCells = false; + +/** + * Variable: autoScroll + * + * Specifies if the graph should automatically scroll if the mouse goes near + * the container edge while dragging. This is only taken into account if the + * container has scrollbars. Default is true. + * + * If you need this to work without scrollbars then set <ignoreScrollbars> to + * true. + */ +mxGraph.prototype.autoScroll = true; + +/** + * Variable: timerAutoScroll + * + * Specifies if timer-based autoscrolling should be used via mxPanningManager. + * Note that this disables the code in <scrollPointToVisible> and uses code in + * mxPanningManager instead. Note that <autoExtend> is disabled if this is + * true and that this should only be used with a scroll buffer or when + * scollbars are visible and scrollable in all directions. Default is false. + */ +mxGraph.prototype.timerAutoScroll = false; + +/** + * Variable: allowAutoPanning + * + * Specifies if panning via <panGraph> should be allowed to implement autoscroll + * if no scrollbars are available in <scrollPointToVisible>. Default is false. + */ +mxGraph.prototype.allowAutoPanning = false; + +/** + * Variable: ignoreScrollbars + * + * Specifies if the graph should automatically scroll regardless of the + * scrollbars. + */ +mxGraph.prototype.ignoreScrollbars = false; + +/** + * Variable: autoExtend + * + * Specifies if the size of the graph should be automatically extended if the + * mouse goes near the container edge while dragging. This is only taken into + * account if the container has scrollbars. Default is true. See <autoScroll>. + */ +mxGraph.prototype.autoExtend = true; + +/** + * Variable: maximumGraphBounds + * + * <mxRectangle> that specifies the area in which all cells in the diagram + * should be placed. Uses in <getMaximumGraphBounds>. Use a width or height of + * 0 if you only want to give a upper, left corner. + */ +mxGraph.prototype.maximumGraphBounds = null; + +/** + * Variable: minimumGraphSize + * + * <mxRectangle> that specifies the minimum size of the graph. This is ignored + * if the graph container has no scrollbars. Default is null. + */ +mxGraph.prototype.minimumGraphSize = null; + +/** + * Variable: minimumContainerSize + * + * <mxRectangle> that specifies the minimum size of the <container> if + * <resizeContainer> is true. + */ +mxGraph.prototype.minimumContainerSize = null; + +/** + * Variable: maximumContainerSize + * + * <mxRectangle> that specifies the maximum size of the container if + * <resizeContainer> is true. + */ +mxGraph.prototype.maximumContainerSize = null; + +/** + * Variable: resizeContainer + * + * Specifies if the container should be resized to the graph size when + * the graph size has changed. Default is false. + */ +mxGraph.prototype.resizeContainer = false; + +/** + * Variable: border + * + * Border to be added to the bottom and right side when the container is + * being resized after the graph has been changed. Default is 0. + */ +mxGraph.prototype.border = 0; + +/** + * Variable: ordered + * + * Specifies if the display should reflect the order of the cells in + * the model. Default is true. This has precendence over + * <keepEdgesInBackground> and <keepEdgesInForeground>. + */ +mxGraph.prototype.ordered = true; + +/** + * Variable: keepEdgesInForeground + * + * Specifies if edges should appear in the foreground regardless of their + * order in the model. This has precendence over <keepEdgeInBackground>, + * but not over <ordered>. Default is false. + */ +mxGraph.prototype.keepEdgesInForeground = false; + +/** + * Variable: keepEdgesInBackground + * + * Specifies if edges should appear in the background regardless of their + * order in the model. <ordered> and <keepEdgesInForeground> have + * precedence over this setting. Default is true. + */ +mxGraph.prototype.keepEdgesInBackground = true; + +/** + * Variable: allowNegativeCoordinates + * + * Specifies if negative coordinates for vertices are allowed. Default is true. + */ +mxGraph.prototype.allowNegativeCoordinates = true; + +/** + * Variable: constrainChildren + * + * Specifies the return value for <isConstrainChildren>. Default is + * true. + */ +mxGraph.prototype.constrainChildren = true; + +/** + * Variable: extendParents + * + * Specifies if a parent should contain the child bounds after a resize of + * the child. Default is true. + */ +mxGraph.prototype.extendParents = true; + +/** + * Variable: extendParentsOnAdd + * + * Specifies if parents should be extended according to the <extendParents> + * switch if cells are added. Default is true. + */ +mxGraph.prototype.extendParentsOnAdd = true; + +/** + * Variable: collapseToPreferredSize + * + * Specifies if the cell size should be changed to the preferred size when + * a cell is first collapsed. Default is true. + */ +mxGraph.prototype.collapseToPreferredSize = true; + +/** + * Variable: zoomFactor + * + * Specifies the factor used for <zoomIn> and <zoomOut>. Default is 1.2 + * (120%). + */ +mxGraph.prototype.zoomFactor = 1.2; + +/** + * Variable: keepSelectionVisibleOnZoom + * + * Specifies if the viewport should automatically contain the selection cells + * after a zoom operation. Default is false. + */ +mxGraph.prototype.keepSelectionVisibleOnZoom = false; + +/** + * Variable: centerZoom + * + * Specifies if the zoom operations should go into the center of the actual + * diagram rather than going from top, left. Default is true. + */ +mxGraph.prototype.centerZoom = true; + +/** + * Variable: resetViewOnRootChange + * + * Specifies if the scale and translate should be reset if the root changes in + * the model. Default is true. + */ +mxGraph.prototype.resetViewOnRootChange = true; + +/** + * Variable: resetEdgesOnResize + * + * Specifies if edge control points should be reset after the resize of a + * connected cell. Default is false. + */ +mxGraph.prototype.resetEdgesOnResize = false; + +/** + * Variable: resetEdgesOnMove + * + * Specifies if edge control points should be reset after the move of a + * connected cell. Default is false. + */ +mxGraph.prototype.resetEdgesOnMove = false; + +/** + * Variable: resetEdgesOnConnect + * + * Specifies if edge control points should be reset after the the edge has been + * reconnected. Default is true. + */ +mxGraph.prototype.resetEdgesOnConnect = true; + +/** + * Variable: allowLoops + * + * Specifies if loops (aka self-references) are allowed. Default is false. + */ +mxGraph.prototype.allowLoops = false; + +/** + * Variable: defaultLoopStyle + * + * <mxEdgeStyle> to be used for loops. This is a fallback for loops if the + * <mxConstants.STYLE_LOOP> is undefined. Default is <mxEdgeStyle.Loop>. + */ +mxGraph.prototype.defaultLoopStyle = mxEdgeStyle.Loop; + +/** + * Variable: multigraph + * + * Specifies if multiple edges in the same direction between the same pair of + * vertices are allowed. Default is true. + */ +mxGraph.prototype.multigraph = true; + +/** + * Variable: connectableEdges + * + * Specifies if edges are connectable. Default is false. This overrides the + * connectable field in edges. + */ +mxGraph.prototype.connectableEdges = false; + +/** + * Variable: allowDanglingEdges + * + * Specifies if edges with disconnected terminals are allowed in the graph. + * Default is true. + */ +mxGraph.prototype.allowDanglingEdges = true; + +/** + * Variable: cloneInvalidEdges + * + * Specifies if edges that are cloned should be validated and only inserted + * if they are valid. Default is true. + */ +mxGraph.prototype.cloneInvalidEdges = false; + +/** + * Variable: disconnectOnMove + * + * Specifies if edges should be disconnected from their terminals when they + * are moved. Default is true. + */ +mxGraph.prototype.disconnectOnMove = true; + +/** + * Variable: labelsVisible + * + * Specifies if labels should be visible. This is used in <getLabel>. Default + * is true. + */ +mxGraph.prototype.labelsVisible = true; + +/** + * Variable: htmlLabels + * + * Specifies the return value for <isHtmlLabel>. Default is false. + */ +mxGraph.prototype.htmlLabels = false; + +/** + * Variable: swimlaneSelectionEnabled + * + * Specifies if swimlanes should be selectable via the content if the + * mouse is released. Default is true. + */ +mxGraph.prototype.swimlaneSelectionEnabled = true; + +/** + * Variable: swimlaneNesting + * + * Specifies if nesting of swimlanes is allowed. Default is true. + */ +mxGraph.prototype.swimlaneNesting = true; + +/** + * Variable: swimlaneIndicatorColorAttribute + * + * The attribute used to find the color for the indicator if the indicator + * color is set to 'swimlane'. Default is <mxConstants.STYLE_FILLCOLOR>. + */ +mxGraph.prototype.swimlaneIndicatorColorAttribute = mxConstants.STYLE_FILLCOLOR; + +/** + * Variable: imageBundles + * + * Holds the list of image bundles. + */ +mxGraph.prototype.imageBundles = null; + +/** + * Variable: minFitScale + * + * Specifies the minimum scale to be applied in <fit>. Default is 0.1. Set this + * to null to allow any value. + */ +mxGraph.prototype.minFitScale = 0.1; + +/** + * Variable: maxFitScale + * + * Specifies the maximum scale to be applied in <fit>. Default is 8. Set this + * to null to allow any value. + */ +mxGraph.prototype.maxFitScale = 8; + +/** + * Variable: panDx + * + * Current horizontal panning value. Default is 0. + */ +mxGraph.prototype.panDx = 0; + +/** + * Variable: panDy + * + * Current vertical panning value. Default is 0. + */ +mxGraph.prototype.panDy = 0; + +/** + * Variable: collapsedImage + * + * Specifies the <mxImage> to indicate a collapsed state. + * Default value is mxClient.imageBasePath + '/collapsed.gif' + */ +mxGraph.prototype.collapsedImage = new mxImage(mxClient.imageBasePath + '/collapsed.gif', 9, 9); + +/** + * Variable: expandedImage + * + * Specifies the <mxImage> to indicate a expanded state. + * Default value is mxClient.imageBasePath + '/expanded.gif' + */ +mxGraph.prototype.expandedImage = new mxImage(mxClient.imageBasePath + '/expanded.gif', 9, 9); + +/** + * Variable: warningImage + * + * Specifies the <mxImage> for the image to be used to display a warning + * overlay. See <setCellWarning>. Default value is mxClient.imageBasePath + + * '/warning'. The extension for the image depends on the platform. It is + * '.png' on the Mac and '.gif' on all other platforms. + */ +mxGraph.prototype.warningImage = new mxImage(mxClient.imageBasePath + '/warning'+ + ((mxClient.IS_MAC) ? '.png' : '.gif'), 16, 16); + +/** + * Variable: alreadyConnectedResource + * + * Specifies the resource key for the error message to be displayed in + * non-multigraphs when two vertices are already connected. If the resource + * for this key does not exist then the value is used as the error message. + * Default is 'alreadyConnected'. + */ +mxGraph.prototype.alreadyConnectedResource = (mxClient.language != 'none') ? 'alreadyConnected' : ''; + +/** + * Variable: containsValidationErrorsResource + * + * Specifies the resource key for the warning message to be displayed when + * a collapsed cell contains validation errors. If the resource for this + * key does not exist then the value is used as the warning message. + * Default is 'containsValidationErrors'. + */ +mxGraph.prototype.containsValidationErrorsResource = (mxClient.language != 'none') ? 'containsValidationErrors' : ''; + +/** + * Variable: collapseExpandResource + * + * Specifies the resource key for the tooltip on the collapse/expand icon. + * If the resource for this key does not exist then the value is used as + * the tooltip. Default is 'collapse-expand'. + */ +mxGraph.prototype.collapseExpandResource = (mxClient.language != 'none') ? 'collapse-expand' : ''; + +/** + * Function: init + * + * Initializes the <container> and creates the respective datastructures. + * + * Parameters: + * + * container - DOM node that will contain the graph display. + */ + mxGraph.prototype.init = function(container) + { + this.container = container; + + // Initializes the in-place editor + this.cellEditor = this.createCellEditor(); + + // Initializes the container using the view + this.view.init(); + + // Updates the size of the container for the current graph + this.sizeDidChange(); + + // Automatic deallocation of memory + if (mxClient.IS_IE) + { + mxEvent.addListener(window, 'unload', mxUtils.bind(this, function() + { + this.destroy(); + })); + + // Disable shift-click for text + mxEvent.addListener(container, 'selectstart', + mxUtils.bind(this, function() + { + return this.isEditing(); + }) + ); + } +}; + +/** + * Function: createHandlers + * + * Creates the tooltip-, panning-, connection- and graph-handler (in this + * order). This is called in the constructor before <init> is called. + */ +mxGraph.prototype.createHandlers = function(container) +{ + this.tooltipHandler = new mxTooltipHandler(this); + this.tooltipHandler.setEnabled(false); + this.panningHandler = new mxPanningHandler(this); + this.panningHandler.panningEnabled = false; + this.selectionCellsHandler = new mxSelectionCellsHandler(this); + this.connectionHandler = new mxConnectionHandler(this); + this.connectionHandler.setEnabled(false); + this.graphHandler = new mxGraphHandler(this); +}; + +/** + * Function: createSelectionModel + * + * Creates a new <mxGraphSelectionModel> to be used in this graph. + */ +mxGraph.prototype.createSelectionModel = function() +{ + return new mxGraphSelectionModel(this); +}; + +/** + * Function: createStylesheet + * + * Creates a new <mxGraphSelectionModel> to be used in this graph. + */ +mxGraph.prototype.createStylesheet = function() +{ + return new mxStylesheet(); +}; + +/** + * Function: createGraphView + * + * Creates a new <mxGraphView> to be used in this graph. + */ +mxGraph.prototype.createGraphView = function() +{ + return new mxGraphView(this); +}; + +/** + * Function: createCellRenderer + * + * Creates a new <mxCellRenderer> to be used in this graph. + */ +mxGraph.prototype.createCellRenderer = function() +{ + return new mxCellRenderer(); +}; + +/** + * Function: createCellEditor + * + * Creates a new <mxCellEditor> to be used in this graph. + */ +mxGraph.prototype.createCellEditor = function() +{ + return new mxCellEditor(this); +}; + +/** + * Function: getModel + * + * Returns the <mxGraphModel> that contains the cells. + */ +mxGraph.prototype.getModel = function() +{ + return this.model; +}; + +/** + * Function: getView + * + * Returns the <mxGraphView> that contains the <mxCellStates>. + */ +mxGraph.prototype.getView = function() +{ + return this.view; +}; + +/** + * Function: getStylesheet + * + * Returns the <mxStylesheet> that defines the style. + */ +mxGraph.prototype.getStylesheet = function() +{ + return this.stylesheet; +}; + +/** + * Function: setStylesheet + * + * Sets the <mxStylesheet> that defines the style. + */ +mxGraph.prototype.setStylesheet = function(stylesheet) +{ + this.stylesheet = stylesheet; +}; + +/** + * Function: getSelectionModel + * + * Returns the <mxGraphSelectionModel> that contains the selection. + */ +mxGraph.prototype.getSelectionModel = function() +{ + return this.selectionModel; +}; + +/** + * Function: setSelectionModel + * + * Sets the <mxSelectionModel> that contains the selection. + */ +mxGraph.prototype.setSelectionModel = function(selectionModel) +{ + this.selectionModel = selectionModel; +}; + +/** + * Function: getSelectionCellsForChanges + * + * Returns the cells to be selected for the given array of changes. + */ +mxGraph.prototype.getSelectionCellsForChanges = function(changes) +{ + var cells = []; + + for (var i = 0; i < changes.length; i++) + { + var change = changes[i]; + + if (change.constructor != mxRootChange) + { + var cell = null; + + if (change instanceof mxChildChange && change.previous == null) + { + cell = change.child; + } + else if (change.cell != null && change.cell instanceof mxCell) + { + cell = change.cell; + } + + if (cell != null && mxUtils.indexOf(cells, cell) < 0) + { + cells.push(cell); + } + } + } + + return this.getModel().getTopmostCells(cells); +}; + +/** + * Function: graphModelChanged + * + * Called when the graph model changes. Invokes <processChange> on each + * item of the given array to update the view accordingly. + * + * Parameters: + * + * changes - Array that contains the individual changes. + */ +mxGraph.prototype.graphModelChanged = function(changes) +{ + for (var i = 0; i < changes.length; i++) + { + this.processChange(changes[i]); + } + + this.removeSelectionCells(this.getRemovedCellsForChanges(changes)); + + this.view.validate(); + this.sizeDidChange(); +}; + +/** + * Function: getRemovedCellsForChanges + * + * Returns the cells that have been removed from the model. + */ +mxGraph.prototype.getRemovedCellsForChanges = function(changes) +{ + var result = []; + + for (var i = 0; i < changes.length; i++) + { + var change = changes[i]; + + // Resets the view settings, removes all cells and clears + // the selection if the root changes. + if (change instanceof mxRootChange) + { + break; + } + else if (change instanceof mxChildChange) + { + if (change.previous != null && change.parent == null) + { + result = result.concat(this.model.getDescendants(change.child)); + } + } + else if (change instanceof mxVisibleChange) + { + result = result.concat(this.model.getDescendants(change.cell)); + } + } + + return result; +}; + +/** + * Function: processChange + * + * Processes the given change and invalidates the respective cached data + * in <view>. This fires a <root> event if the root has changed in the + * model. + * + * Parameters: + * + * change - Object that represents the change on the model. + */ +mxGraph.prototype.processChange = function(change) +{ + // Resets the view settings, removes all cells and clears + // the selection if the root changes. + if (change instanceof mxRootChange) + { + this.clearSelection(); + this.removeStateForCell(change.previous); + + if (this.resetViewOnRootChange) + { + this.view.scale = 1; + this.view.translate.x = 0; + this.view.translate.y = 0; + } + + this.fireEvent(new mxEventObject(mxEvent.ROOT)); + } + + // Adds or removes a child to the view by online invaliding + // the minimal required portions of the cache, namely, the + // old and new parent and the child. + else if (change instanceof mxChildChange) + { + var newParent = this.model.getParent(change.child); + + if (newParent != null) + { + // Flags the cell for updating the order in the renderer + this.view.invalidate(change.child, true, false, change.previous != null); + } + else + { + this.removeStateForCell(change.child); + + // Handles special case of current root of view being removed + if (this.view.currentRoot == change.child) + { + this.home(); + } + } + + if (newParent != change.previous) + { + // Refreshes the collapse/expand icons on the parents + if (newParent != null) + { + this.view.invalidate(newParent, false, false); + } + + if (change.previous != null) + { + this.view.invalidate(change.previous, false, false); + } + } + } + + // Handles two special cases where the shape does not need to be + // recreated from scratch, it only need to be invalidated. + else if (change instanceof mxTerminalChange || + change instanceof mxGeometryChange) + { + this.view.invalidate(change.cell); + } + + // Handles two special cases where only the shape, but no + // descendants need to be recreated + else if (change instanceof mxValueChange) + { + this.view.invalidate(change.cell, false, false); + } + + // Requires a new mxShape in JavaScript + else if (change instanceof mxStyleChange) + { + this.view.invalidate(change.cell, true, true, false); + this.view.removeState(change.cell); + } + + // Removes the state from the cache by default + else if (change.cell != null && + change.cell instanceof mxCell) + { + this.removeStateForCell(change.cell); + } +}; + +/** + * Function: removeStateForCell + * + * Removes all cached information for the given cell and its descendants. + * This is called when a cell was removed from the model. + * + * Paramters: + * + * cell - <mxCell> that was removed from the model. + */ +mxGraph.prototype.removeStateForCell = function(cell) +{ + var childCount = this.model.getChildCount(cell); + + for (var i = 0; i < childCount; i++) + { + this.removeStateForCell(this.model.getChildAt(cell, i)); + } + + this.view.removeState(cell); +}; + +/** + * Group: Overlays + */ + +/** + * Function: addCellOverlay + * + * Adds an <mxCellOverlay> for the specified cell. This method fires an + * <addoverlay> event and returns the new <mxCellOverlay>. + * + * Parameters: + * + * cell - <mxCell> to add the overlay for. + * overlay - <mxCellOverlay> to be added for the cell. + */ +mxGraph.prototype.addCellOverlay = function(cell, overlay) +{ + if (cell.overlays == null) + { + cell.overlays = []; + } + + cell.overlays.push(overlay); + + var state = this.view.getState(cell); + + // Immediately updates the cell display if the state exists + if (state != null) + { + this.cellRenderer.redraw(state); + } + + this.fireEvent(new mxEventObject(mxEvent.ADD_OVERLAY, + 'cell', cell, 'overlay', overlay)); + + return overlay; +}; + +/** + * Function: getCellOverlays + * + * Returns the array of <mxCellOverlays> for the given cell or null, if + * no overlays are defined. + * + * Parameters: + * + * cell - <mxCell> whose overlays should be returned. + */ +mxGraph.prototype.getCellOverlays = function(cell) +{ + return cell.overlays; +}; + +/** + * Function: removeCellOverlay + * + * Removes and returns the given <mxCellOverlay> from the given cell. This + * method fires a <removeoverlay> event. If no overlay is given, then all + * overlays are removed using <removeOverlays>. + * + * Parameters: + * + * cell - <mxCell> whose overlay should be removed. + * overlay - Optional <mxCellOverlay> to be removed. + */ +mxGraph.prototype.removeCellOverlay = function(cell, overlay) +{ + if (overlay == null) + { + this.removeCellOverlays(cell); + } + else + { + var index = mxUtils.indexOf(cell.overlays, overlay); + + if (index >= 0) + { + cell.overlays.splice(index, 1); + + if (cell.overlays.length == 0) + { + cell.overlays = null; + } + + // Immediately updates the cell display if the state exists + var state = this.view.getState(cell); + + if (state != null) + { + this.cellRenderer.redraw(state); + } + + this.fireEvent(new mxEventObject(mxEvent.REMOVE_OVERLAY, + 'cell', cell, 'overlay', overlay)); + } + else + { + overlay = null; + } + } + + return overlay; +}; + +/** + * Function: removeCellOverlays + * + * Removes all <mxCellOverlays> from the given cell. This method + * fires a <removeoverlay> event for each <mxCellOverlay> and returns + * the array of <mxCellOverlays> that was removed from the cell. + * + * Parameters: + * + * cell - <mxCell> whose overlays should be removed + */ +mxGraph.prototype.removeCellOverlays = function(cell) +{ + var overlays = cell.overlays; + + if (overlays != null) + { + cell.overlays = null; + + // Immediately updates the cell display if the state exists + var state = this.view.getState(cell); + + if (state != null) + { + this.cellRenderer.redraw(state); + } + + for (var i = 0; i < overlays.length; i++) + { + this.fireEvent(new mxEventObject(mxEvent.REMOVE_OVERLAY, + 'cell', cell, 'overlay', overlays[i])); + } + } + + return overlays; +}; + +/** + * Function: clearCellOverlays + * + * Removes all <mxCellOverlays> in the graph for the given cell and all its + * descendants. If no cell is specified then all overlays are removed from + * the graph. This implementation uses <removeCellOverlays> to remove the + * overlays from the individual cells. + * + * Parameters: + * + * cell - Optional <mxCell> that represents the root of the subtree to + * remove the overlays from. Default is the root in the model. + */ +mxGraph.prototype.clearCellOverlays = function(cell) +{ + cell = (cell != null) ? cell : this.model.getRoot(); + this.removeCellOverlays(cell); + + // Recursively removes all overlays from the children + var childCount = this.model.getChildCount(cell); + + for (var i = 0; i < childCount; i++) + { + var child = this.model.getChildAt(cell, i); + this.clearCellOverlays(child); // recurse + } +}; + +/** + * Function: setCellWarning + * + * Creates an overlay for the given cell using the warning and image or + * <warningImage> and returns the new <mxCellOverlay>. The warning is + * displayed as a tooltip in a red font and may contain HTML markup. If + * the warning is null or a zero length string, then all overlays are + * removed from the cell. + * + * Example: + * + * (code) + * graph.setCellWarning(cell, '<b>Warning:</b>: Hello, World!'); + * (end) + * + * Parameters: + * + * cell - <mxCell> whose warning should be set. + * warning - String that represents the warning to be displayed. + * img - Optional <mxImage> to be used for the overlay. Default is + * <warningImage>. + * isSelect - Optional boolean indicating if a click on the overlay + * should select the corresponding cell. Default is false. + */ +mxGraph.prototype.setCellWarning = function(cell, warning, img, isSelect) +{ + if (warning != null && warning.length > 0) + { + img = (img != null) ? img : this.warningImage; + + // Creates the overlay with the image and warning + var overlay = new mxCellOverlay(img, + '<font color=red>'+warning+'</font>'); + + // Adds a handler for single mouseclicks to select the cell + if (isSelect) + { + overlay.addListener(mxEvent.CLICK, + mxUtils.bind(this, function(sender, evt) + { + if (this.isEnabled()) + { + this.setSelectionCell(cell); + } + }) + ); + } + + // Sets and returns the overlay in the graph + return this.addCellOverlay(cell, overlay); + } + else + { + this.removeCellOverlays(cell); + } + + return null; +}; + +/** + * Group: In-place editing + */ + +/** + * Function: startEditing + * + * Calls <startEditingAtCell> using the given cell or the first selection + * cell. + * + * Parameters: + * + * evt - Optional mouse event that triggered the editing. + */ +mxGraph.prototype.startEditing = function(evt) +{ + this.startEditingAtCell(null, evt); +}; + +/** + * Function: startEditingAtCell + * + * Fires a <startEditing> event and invokes <mxCellEditor.startEditing> + * on <editor>. + * + * Parameters: + * + * cell - <mxCell> to start the in-place editor for. + * evt - Optional mouse event that triggered the editing. + */ +mxGraph.prototype.startEditingAtCell = function(cell, evt) +{ + if (cell == null) + { + cell = this.getSelectionCell(); + + if (cell != null && !this.isCellEditable(cell)) + { + cell = null; + } + } + + if (cell != null) + { + this.fireEvent(new mxEventObject(mxEvent.START_EDITING, + 'cell', cell, 'event', evt)); + this.cellEditor.startEditing(cell, evt); + } +}; + +/** + * Function: getEditingValue + * + * Returns the initial value for in-place editing. This implementation + * returns <convertValueToString> for the given cell. If this function is + * overridden, then <mxGraphModel.valueForCellChanged> should take care + * of correctly storing the actual new value inside the user object. + * + * Parameters: + * + * cell - <mxCell> for which the initial editing value should be returned. + * evt - Optional mouse event that triggered the editor. + */ +mxGraph.prototype.getEditingValue = function(cell, evt) +{ + return this.convertValueToString(cell); +}; + +/** + * Function: stopEditing + * + * Stops the current editing. + * + * Parameters: + * + * cancel - Boolean that specifies if the current editing value + * should be stored. + */ +mxGraph.prototype.stopEditing = function(cancel) +{ + this.cellEditor.stopEditing(cancel); +}; + +/** + * Function: labelChanged + * + * Sets the label of the specified cell to the given value using + * <cellLabelChanged> and fires <mxEvent.LABEL_CHANGED> while the + * transaction is in progress. Returns the cell whose label was changed. + * + * Parameters: + * + * cell - <mxCell> whose label should be changed. + * value - New label to be assigned. + * evt - Optional event that triggered the change. + */ +mxGraph.prototype.labelChanged = function(cell, value, evt) +{ + this.model.beginUpdate(); + try + { + this.cellLabelChanged(cell, value, this.isAutoSizeCell(cell)); + this.fireEvent(new mxEventObject(mxEvent.LABEL_CHANGED, + 'cell', cell, 'value', value, 'event', evt)); + } + finally + { + this.model.endUpdate(); + } + + return cell; +}; + +/** + * Function: cellLabelChanged + * + * 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. + * + * (code) + * 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); + * }; + * (end) + * + * Parameters: + * + * cell - <mxCell> whose label should be changed. + * value - New label to be assigned. + * autoSize - Boolean that specifies if <cellSizeUpdated> should be called. + */ +mxGraph.prototype.cellLabelChanged = function(cell, value, autoSize) +{ + this.model.beginUpdate(); + try + { + this.model.setValue(cell, value); + + if (autoSize) + { + this.cellSizeUpdated(cell, false); + } + } + finally + { + this.model.endUpdate(); + } +}; + +/** + * Group: Event processing + */ + +/** + * Function: escape + * + * Processes an escape keystroke. + * + * Parameters: + * + * evt - Mouseevent that represents the keystroke. + */ +mxGraph.prototype.escape = function(evt) +{ + this.stopEditing(true); + this.connectionHandler.reset(); + this.graphHandler.reset(); + + // Cancels all cell-based editing + var cells = this.getSelectionCells(); + + for (var i = 0; i < cells.length; i++) + { + var state = this.view.getState(cells[i]); + + if (state != null && state.handler != null) + { + state.handler.reset(); + } + } +}; + +/** + * Function: click + * + * 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. + * + * Parameters: + * + * me - <mxMouseEvent> that represents the single click. + */ +mxGraph.prototype.click = function(me) +{ + var evt = me.getEvent(); + var cell = me.getCell(); + var mxe = new mxEventObject(mxEvent.CLICK, 'event', evt, 'cell', cell); + + if (me.isConsumed()) + { + mxe.consume(); + } + + this.fireEvent(mxe); + + // Handles the event if it has not been consumed + if (this.isEnabled() && !mxEvent.isConsumed(evt) && !mxe.isConsumed()) + { + if (cell != null) + { + this.selectCellForEvent(cell, evt); + } + else + { + var swimlane = null; + + if (this.isSwimlaneSelectionEnabled()) + { + // Gets the swimlane at the location (includes + // content area of swimlanes) + swimlane = this.getSwimlaneAt(me.getGraphX(), me.getGraphY()); + } + + // Selects the swimlane and consumes the event + if (swimlane != null) + { + this.selectCellForEvent(swimlane, evt); + } + + // Ignores the event if the control key is pressed + else if (!this.isToggleEvent(evt)) + { + this.clearSelection(); + } + } + } +}; + +/** + * Function: dblClick + * + * Processes a doubleclick on an optional cell and fires a <dblclick> + * event. The event is fired initially. If the graph is enabled and the + * event has not been consumed, then <edit> is called with the given + * cell. The event is ignored if no cell was specified. + * + * Example for overriding this method. + * + * (code) + * 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(); + * } + * } + * (end) + * + * Example listener for this event. + * + * (code) + * graph.addListener(mxEvent.DOUBLE_CLICK, function(sender, evt) + * { + * var cell = evt.getProperty('cell'); + * // do something with the cell... + * }); + * (end) + * + * Parameters: + * + * evt - Mouseevent that represents the doubleclick. + * cell - Optional <mxCell> under the mousepointer. + */ +mxGraph.prototype.dblClick = function(evt, cell) +{ + var mxe = new mxEventObject(mxEvent.DOUBLE_CLICK, 'event', evt, 'cell', cell); + this.fireEvent(mxe); + + // Handles the event if it has not been consumed + if (this.isEnabled() && !mxEvent.isConsumed(evt) && !mxe.isConsumed() && + cell != null && this.isCellEditable(cell)) + { + this.startEditingAtCell(cell, evt); + } +}; + +/** + * Function: scrollPointToVisible + * + * Scrolls the graph to the given point, extending the graph container if + * specified. + */ +mxGraph.prototype.scrollPointToVisible = function(x, y, extend, border) +{ + if (!this.timerAutoScroll && (this.ignoreScrollbars || mxUtils.hasScrollbars(this.container))) + { + var c = this.container; + border = (border != null) ? border : 20; + + if (x >= c.scrollLeft && y >= c.scrollTop && x <= c.scrollLeft + c.clientWidth && + y <= c.scrollTop + c.clientHeight) + { + var dx = c.scrollLeft + c.clientWidth - x; + + if (dx < border) + { + var old = c.scrollLeft; + c.scrollLeft += border - dx; + + // Automatically extends the canvas size to the bottom, right + // if the event is outside of the canvas and the edge of the + // canvas has been reached. Notes: Needs fix for IE. + if (extend && old == c.scrollLeft) + { + if (this.dialect == mxConstants.DIALECT_SVG) + { + var root = this.view.getDrawPane().ownerSVGElement; + var width = this.container.scrollWidth + border - dx; + + // Updates the clipping region. This is an expensive + // operation that should not be executed too often. + root.setAttribute('width', width); + } + else + { + var width = Math.max(c.clientWidth, c.scrollWidth) + border - dx; + var canvas = this.view.getCanvas(); + canvas.style.width = width + 'px'; + } + + c.scrollLeft += border - dx; + } + } + else + { + dx = x - c.scrollLeft; + + if (dx < border) + { + c.scrollLeft -= border - dx; + } + } + + var dy = c.scrollTop + c.clientHeight - y; + + if (dy < border) + { + var old = c.scrollTop; + c.scrollTop += border - dy; + + if (old == c.scrollTop && extend) + { + if (this.dialect == mxConstants.DIALECT_SVG) + { + var root = this.view.getDrawPane().ownerSVGElement; + var height = this.container.scrollHeight + border - dy; + + // Updates the clipping region. This is an expensive + // operation that should not be executed too often. + root.setAttribute('height', height); + } + else + { + var height = Math.max(c.clientHeight, c.scrollHeight) + border - dy; + var canvas = this.view.getCanvas(); + canvas.style.height = height + 'px'; + } + + c.scrollTop += border - dy; + } + } + else + { + dy = y - c.scrollTop; + + if (dy < border) + { + c.scrollTop -= border - dy; + } + } + } + } + else if (this.allowAutoPanning && !this.panningHandler.active) + { + if (this.panningManager == null) + { + this.panningManager = this.createPanningManager(); + } + + this.panningManager.panTo(x + this.panDx, y + this.panDy); + } +}; + + +/** + * Function: createPanningManager + * + * Creates and returns an <mxPanningManager>. + */ +mxGraph.prototype.createPanningManager = function() +{ + return new mxPanningManager(this); +}; + +/** + * Function: getBorderSizes + * + * 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. + */ +mxGraph.prototype.getBorderSizes = function() +{ + // Helper function to handle string values for border widths (approx) + function parseBorder(value) + { + var result = 0; + + if (value == 'thin') + { + result = 2; + } + else if (value == 'medium') + { + result = 4; + } + else if (value == 'thick') + { + result = 6; + } + else + { + result = parseInt(value); + } + + if (isNaN(result)) + { + result = 0; + } + + return result; + } + + var style = mxUtils.getCurrentStyle(this.container); + var result = new mxRectangle(); + result.x = parseBorder(style.borderLeftWidth) + parseInt(style.paddingLeft || 0); + result.y = parseBorder(style.borderTopWidth) + parseInt(style.paddingTop || 0); + result.width = parseBorder(style.borderRightWidth) + parseInt(style.paddingRight || 0); + result.height = parseBorder(style.borderBottomWidth) + parseInt(style.paddingBottom || 0); + + return result; +}; + + +/** + * Function: getPreferredPageSize + * + * Returns the preferred size of the background page if <preferPageSize> is true. + */ +mxGraph.prototype.getPreferredPageSize = function(bounds, width, height) +{ + var scale = this.view.scale; + var tr = this.view.translate; + var fmt = this.pageFormat; + var ps = scale * this.pageScale; + var page = new mxRectangle(0, 0, fmt.width * ps, fmt.height * ps); + + var hCount = (this.pageBreaksVisible) ? Math.ceil(width / page.width) : 1; + var vCount = (this.pageBreaksVisible) ? Math.ceil(height / page.height) : 1; + + return new mxRectangle(0, 0, hCount * page.width + 2 + tr.x / scale, vCount * page.height + 2 + tr.y / scale); +}; + +/** + * Function: sizeDidChange + * + * Called when the size of the graph has changed. This implementation fires + * a <size> event after updating the clipping region of the SVG element in + * SVG-bases browsers. + */ +mxGraph.prototype.sizeDidChange = function() +{ + var bounds = this.getGraphBounds(); + + if (this.container != null) + { + var border = this.getBorder(); + + var width = Math.max(0, bounds.x + bounds.width + 1 + border); + var height = Math.max(0, bounds.y + bounds.height + 1 + border); + + if (this.minimumContainerSize != null) + { + width = Math.max(width, this.minimumContainerSize.width); + height = Math.max(height, this.minimumContainerSize.height); + } + + if (this.resizeContainer) + { + this.doResizeContainer(width, height); + } + + if (this.preferPageSize || (!mxClient.IS_IE && this.pageVisible)) + { + var size = this.getPreferredPageSize(bounds, width, height); + + if (size != null) + { + width = size.width; + height = size.height; + } + } + + if (this.minimumGraphSize != null) + { + width = Math.max(width, this.minimumGraphSize.width * this.view.scale); + height = Math.max(height, this.minimumGraphSize.height * this.view.scale); + } + + width = Math.ceil(width - 1); + height = Math.ceil(height - 1); + + if (this.dialect == mxConstants.DIALECT_SVG) + { + var root = this.view.getDrawPane().ownerSVGElement; + + root.style.minWidth = Math.max(1, width) + 'px'; + root.style.minHeight = Math.max(1, height) + 'px'; + } + else + { + if (mxClient.IS_QUIRKS) + { + // Quirks mode has no minWidth/minHeight support + this.view.updateHtmlCanvasSize(Math.max(1, width), Math.max(1, height)); + } + else + { + this.view.canvas.style.minWidth = Math.max(1, width) + 'px'; + this.view.canvas.style.minHeight = Math.max(1, height) + 'px'; + } + } + + this.updatePageBreaks(this.pageBreaksVisible, width - 1, height - 1); + } + + this.fireEvent(new mxEventObject(mxEvent.SIZE, 'bounds', bounds)); +}; + +/** + * Function: doResizeContainer + * + * Resizes the container for the given graph width and height. + */ +mxGraph.prototype.doResizeContainer = function(width, height) +{ + // Fixes container size for different box models + if (mxClient.IS_IE) + { + if (mxClient.IS_QUIRKS) + { + var borders = this.getBorderSizes(); + + // max(2, ...) required for native IE8 in quirks mode + width += Math.max(2, borders.x + borders.width + 1); + height += Math.max(2, borders.y + borders.height + 1); + } + else if (document.documentMode >= 9) + { + width += 3; + height += 5; + } + else + { + width += 1; + height += 1; + } + } + else + { + height += 1; + } + + if (this.maximumContainerSize != null) + { + width = Math.min(this.maximumContainerSize.width, width); + height = Math.min(this.maximumContainerSize.height, height); + } + + this.container.style.width = Math.ceil(width) + 'px'; + this.container.style.height = Math.ceil(height) + 'px'; +}; + +/** + * Function: redrawPageBreaks + * + * Invokes from <sizeDidChange> to redraw the page breaks. + * + * Parameters: + * + * visible - Boolean that specifies if page breaks should be shown. + * width - Specifies the width of the container in pixels. + * height - Specifies the height of the container in pixels. + */ +mxGraph.prototype.updatePageBreaks = function(visible, width, height) +{ + var scale = this.view.scale; + var tr = this.view.translate; + var fmt = this.pageFormat; + var ps = scale * this.pageScale; + var bounds = new mxRectangle(scale * tr.x, scale * tr.y, + fmt.width * ps, fmt.height * ps); + + // Does not show page breaks if the scale is too small + visible = visible && Math.min(bounds.width, bounds.height) > this.minPageBreakDist; + + // Draws page breaks independent of translate. To ignore + // the translate set bounds.x/y = 0. Note that modulo + // in JavaScript has a bug, so use mxUtils instead. + bounds.x = mxUtils.mod(bounds.x, bounds.width); + bounds.y = mxUtils.mod(bounds.y, bounds.height); + + var horizontalCount = (visible) ? Math.ceil((width - bounds.x) / bounds.width) : 0; + var verticalCount = (visible) ? Math.ceil((height - bounds.y) / bounds.height) : 0; + var right = width; + var bottom = height; + + if (this.horizontalPageBreaks == null && horizontalCount > 0) + { + this.horizontalPageBreaks = []; + } + + if (this.horizontalPageBreaks != null) + { + for (var i = 0; i <= horizontalCount; i++) + { + var pts = [new mxPoint(bounds.x + i * bounds.width, 1), + new mxPoint(bounds.x + i * bounds.width, bottom)]; + + if (this.horizontalPageBreaks[i] != null) + { + this.horizontalPageBreaks[i].scale = 1; + this.horizontalPageBreaks[i].points = pts; + this.horizontalPageBreaks[i].redraw(); + } + else + { + var pageBreak = new mxPolyline(pts, this.pageBreakColor, this.scale); + pageBreak.dialect = this.dialect; + pageBreak.isDashed = this.pageBreakDashed; + pageBreak.scale = scale; + pageBreak.crisp = true; + pageBreak.init(this.view.backgroundPane); + pageBreak.redraw(); + + this.horizontalPageBreaks[i] = pageBreak; + } + } + + for (var i = horizontalCount; i < this.horizontalPageBreaks.length; i++) + { + this.horizontalPageBreaks[i].destroy(); + } + + this.horizontalPageBreaks.splice(horizontalCount, this.horizontalPageBreaks.length - horizontalCount); + } + + if (this.verticalPageBreaks == null && verticalCount > 0) + { + this.verticalPageBreaks = []; + } + + if (this.verticalPageBreaks != null) + { + for (var i = 0; i <= verticalCount; i++) + { + var pts = [new mxPoint(1, bounds.y + i * bounds.height), + new mxPoint(right, bounds.y + i * bounds.height)]; + + if (this.verticalPageBreaks[i] != null) + { + this.verticalPageBreaks[i].scale = 1; + this.verticalPageBreaks[i].points = pts; + this.verticalPageBreaks[i].redraw(); + } + else + { + var pageBreak = new mxPolyline(pts, this.pageBreakColor, scale); + pageBreak.dialect = this.dialect; + pageBreak.isDashed = this.pageBreakDashed; + pageBreak.scale = scale; + pageBreak.crisp = true; + pageBreak.init(this.view.backgroundPane); + pageBreak.redraw(); + + this.verticalPageBreaks[i] = pageBreak; + } + } + + for (var i = verticalCount; i < this.verticalPageBreaks.length; i++) + { + this.verticalPageBreaks[i].destroy(); + } + + this.verticalPageBreaks.splice(verticalCount, this.verticalPageBreaks.length - verticalCount); + } +}; + +/** + * Group: Cell styles + */ + +/** + * Function: getCellStyle + * + * Returns an array of key, value pairs representing the cell style for the + * given cell. If no string is defined in the model that specifies the + * style, then the default style for the cell is returned or <EMPTY_ARRAY>, + * if not style can be found. Note: You should try and get the cell state + * for the given cell and use the cached style in the state before using + * this method. + * + * Parameters: + * + * cell - <mxCell> whose style should be returned as an array. + */ +mxGraph.prototype.getCellStyle = function(cell) +{ + var stylename = this.model.getStyle(cell); + var style = null; + + // Gets the default style for the cell + if (this.model.isEdge(cell)) + { + style = this.stylesheet.getDefaultEdgeStyle(); + } + else + { + style = this.stylesheet.getDefaultVertexStyle(); + } + + // Resolves the stylename using the above as the default + if (stylename != null) + { + style = this.postProcessCellStyle(this.stylesheet.getCellStyle(stylename, style)); + } + + // Returns a non-null value if no style can be found + if (style == null) + { + style = mxGraph.prototype.EMPTY_ARRAY; + } + + return style; +}; + +/** + * Function: postProcessCellStyle + * + * Tries to resolve the value for the image style in the image bundles and + * turns short data URIs as defined in mxImageBundle to data URIs as + * defined in RFC 2397 of the IETF. + */ +mxGraph.prototype.postProcessCellStyle = function(style) +{ + if (style != null) + { + var key = style[mxConstants.STYLE_IMAGE]; + var image = this.getImageFromBundles(key); + + if (image != null) + { + style[mxConstants.STYLE_IMAGE] = image; + } + else + { + image = key; + } + + // Converts short data uris to normal data uris + if (image != null && image.substring(0, 11) == "data:image/") + { + var comma = image.indexOf(','); + + if (comma > 0) + { + image = image.substring(0, comma) + ";base64," + + image.substring(comma + 1); + } + + style[mxConstants.STYLE_IMAGE] = image; + } + } + + return style; +}; + +/** + * Function: setCellStyle + * + * Sets the style of the specified cells. If no cells are given, then the + * selection cells are changed. + * + * Parameters: + * + * style - String representing the new style of the cells. + * cells - Optional array of <mxCells> to set the style for. Default is the + * selection cells. + */ +mxGraph.prototype.setCellStyle = function(style, cells) +{ + cells = cells || this.getSelectionCells(); + + if (cells != null) + { + this.model.beginUpdate(); + try + { + for (var i = 0; i < cells.length; i++) + { + this.model.setStyle(cells[i], style); + } + } + finally + { + this.model.endUpdate(); + } + } +}; + +/** + * Function: toggleCellStyle + * + * Toggles the boolean value for the given key in the style of the + * given cell. If no cell is specified then the selection cell is + * used. + * + * Parameter: + * + * key - String representing the key for the boolean value to be toggled. + * defaultValue - Optional boolean default value if no value is defined. + * Default is false. + * cell - Optional <mxCell> whose style should be modified. Default is + * the selection cell. + */ +mxGraph.prototype.toggleCellStyle = function(key, defaultValue, cell) +{ + cell = cell || this.getSelectionCell(); + + this.toggleCellStyles(key, defaultValue, [cell]); +}; + +/** + * Function: toggleCellStyles + * + * Toggles the boolean value for the given key in the style of the given + * cells. If no cells are specified, then the selection cells are used. For + * example, this can be used to toggle <mxConstants.STYLE_ROUNDED> or any + * other style with a boolean value. + * + * Parameter: + * + * key - String representing the key for the boolean value to be toggled. + * defaultValue - Optional boolean default value if no value is defined. + * Default is false. + * cells - Optional array of <mxCells> whose styles should be modified. + * Default is the selection cells. + */ +mxGraph.prototype.toggleCellStyles = function(key, defaultValue, cells) +{ + defaultValue = (defaultValue != null) ? defaultValue : false; + cells = cells || this.getSelectionCells(); + + if (cells != null && cells.length > 0) + { + var state = this.view.getState(cells[0]); + var style = (state != null) ? state.style : this.getCellStyle(cells[0]); + + if (style != null) + { + var val = (mxUtils.getValue(style, key, defaultValue)) ? 0 : 1; + this.setCellStyles(key, val, cells); + } + } +}; + +/** + * Function: setCellStyles + * + * Sets the key to value in the styles of the given cells. This will modify + * the existing cell styles in-place and override any existing assignment + * for the given key. If no cells are specified, then the selection cells + * are changed. If no value is specified, then the respective key is + * removed from the styles. + * + * Parameters: + * + * key - String representing the key to be assigned. + * value - String representing the new value for the key. + * cells - Optional array of <mxCells> to change the style for. Default is + * the selection cells. + */ +mxGraph.prototype.setCellStyles = function(key, value, cells) +{ + cells = cells || this.getSelectionCells(); + mxUtils.setCellStyles(this.model, cells, key, value); +}; + +/** + * Function: toggleCellStyleFlags + * + * Toggles the given bit for the given key in the styles of the specified + * cells. + * + * Parameters: + * + * key - String representing the key to toggle the flag in. + * flag - Integer that represents the bit to be toggled. + * cells - Optional array of <mxCells> to change the style for. Default is + * the selection cells. + */ +mxGraph.prototype.toggleCellStyleFlags = function(key, flag, cells) +{ + this.setCellStyleFlags(key, flag, null, cells); +}; + +/** + * Function: setCellStyleFlags + * + * Sets or toggles the given bit for the given key in the styles of the + * specified cells. + * + * Parameters: + * + * key - String representing the key to toggle the flag in. + * flag - Integer that represents the bit to be toggled. + * value - Boolean value to be used or null if the value should be toggled. + * cells - Optional array of <mxCells> to change the style for. Default is + * the selection cells. + */ +mxGraph.prototype.setCellStyleFlags = function(key, flag, value, cells) +{ + cells = cells || this.getSelectionCells(); + + if (cells != null && cells.length > 0) + { + if (value == null) + { + var state = this.view.getState(cells[0]); + var style = (state != null) ? state.style : this.getCellStyle(cells[0]); + + if (style != null) + { + var current = parseInt(style[key] || 0); + value = !((current & flag) == flag); + } + } + + mxUtils.setCellStyleFlags(this.model, cells, key, flag, value); + } +}; + +/** + * Group: Cell alignment and orientation + */ + +/** + * Function: alignCells + * + * Aligns the given cells vertically or horizontally according to the given + * alignment using the optional parameter as the coordinate. + * + * Parameters: + * + * align - Specifies the alignment. Possible values are all constants in + * mxConstants with an ALIGN prefix. + * cells - Array of <mxCells> to be aligned. + * param - Optional coordinate for the alignment. + */ +mxGraph.prototype.alignCells = function(align, cells, param) +{ + if (cells == null) + { + cells = this.getSelectionCells(); + } + + if (cells != null && cells.length > 1) + { + // Finds the required coordinate for the alignment + if (param == null) + { + for (var i = 0; i < cells.length; i++) + { + var geo = this.getCellGeometry(cells[i]); + + if (geo != null && !this.model.isEdge(cells[i])) + { + if (param == null) + { + if (align == mxConstants.ALIGN_CENTER) + { + param = geo.x + geo.width / 2; + break; + } + else if (align == mxConstants.ALIGN_RIGHT) + { + param = geo.x + geo.width; + } + else if (align == mxConstants.ALIGN_TOP) + { + param = geo.y; + } + else if (align == mxConstants.ALIGN_MIDDLE) + { + param = geo.y + geo.height / 2; + break; + } + else if (align == mxConstants.ALIGN_BOTTOM) + { + param = geo.y + geo.height; + } + else + { + param = geo.x; + } + } + else + { + if (align == mxConstants.ALIGN_RIGHT) + { + param = Math.max(param, geo.x + geo.width); + } + else if (align == mxConstants.ALIGN_TOP) + { + param = Math.min(param, geo.y); + } + else if (align == mxConstants.ALIGN_BOTTOM) + { + param = Math.max(param, geo.y + geo.height); + } + else + { + param = Math.min(param, geo.x); + } + } + } + } + } + + // Aligns the cells to the coordinate + if (param != null) + { + this.model.beginUpdate(); + try + { + for (var i = 0; i < cells.length; i++) + { + var geo = this.getCellGeometry(cells[i]); + + if (geo != null && !this.model.isEdge(cells[i])) + { + geo = geo.clone(); + + if (align == mxConstants.ALIGN_CENTER) + { + geo.x = param - geo.width / 2; + } + else if (align == mxConstants.ALIGN_RIGHT) + { + geo.x = param - geo.width; + } + else if (align == mxConstants.ALIGN_TOP) + { + geo.y = param; + } + else if (align == mxConstants.ALIGN_MIDDLE) + { + geo.y = param - geo.height / 2; + } + else if (align == mxConstants.ALIGN_BOTTOM) + { + geo.y = param - geo.height; + } + else + { + geo.x = param; + } + + this.model.setGeometry(cells[i], geo); + } + } + + this.fireEvent(new mxEventObject(mxEvent.ALIGN_CELLS, + 'align', align, 'cells', cells)); + } + finally + { + this.model.endUpdate(); + } + } + } + + return cells; +}; + +/** + * Function: flipEdge + * + * 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. + * + * (code) + * graph.flipEdge = function(edge) + * { + * if (edge != null) + * { + * var state = this.view.getState(edge); + * var style = (state != null) ? state.style : this.getCellStyle(edge); + * + * if (style != null) + * { + * var elbow = mxUtils.getValue(style, mxConstants.STYLE_ELBOW, + * mxConstants.ELBOW_HORIZONTAL); + * var value = (elbow == mxConstants.ELBOW_HORIZONTAL) ? + * mxConstants.ELBOW_VERTICAL : mxConstants.ELBOW_HORIZONTAL; + * this.setCellStyles(mxConstants.STYLE_ELBOW, value, [edge]); + * } + * } + * }; + * (end) + * + * Parameters: + * + * edge - <mxCell> whose style should be changed. + */ +mxGraph.prototype.flipEdge = function(edge) +{ + if (edge != null && + this.alternateEdgeStyle != null) + { + this.model.beginUpdate(); + try + { + var style = this.model.getStyle(edge); + + if (style == null || style.length == 0) + { + this.model.setStyle(edge, this.alternateEdgeStyle); + } + else + { + this.model.setStyle(edge, null); + } + + // Removes all existing control points + this.resetEdge(edge); + this.fireEvent(new mxEventObject(mxEvent.FLIP_EDGE, 'edge', edge)); + } + finally + { + this.model.endUpdate(); + } + } + + return edge; +}; + +/** + * Function: addImageBundle + * + * Adds the specified <mxImageBundle>. + */ +mxGraph.prototype.addImageBundle = function(bundle) +{ + this.imageBundles.push(bundle); +}; + +/** + * Function: removeImageBundle + * + * Removes the specified <mxImageBundle>. + */ +mxGraph.prototype.removeImageBundle = function(bundle) +{ + var tmp = []; + + for (var i = 0; i < this.imageBundles.length; i++) + { + if (this.imageBundles[i] != bundle) + { + tmp.push(this.imageBundles[i]); + } + } + + this.imageBundles = tmp; +}; + +/** + * Function: getImageFromBundles + * + * Searches all <imageBundles> for the specified key and returns the value + * for the first match or null if the key is not found. + */ +mxGraph.prototype.getImageFromBundles = function(key) +{ + if (key != null) + { + for (var i = 0; i < this.imageBundles.length; i++) + { + var image = this.imageBundles[i].getImage(key); + + if (image != null) + { + return image; + } + } + } + + return null; +}; + +/** + * Group: Order + */ + +/** + * Function: orderCells + * + * Moves the given cells to the front or back. The change is carried out + * using <cellsOrdered>. This method fires <mxEvent.ORDER_CELLS> while the + * transaction is in progress. + * + * Parameters: + * + * back - Boolean that specifies if the cells should be moved to back. + * cells - Array of <mxCells> to move to the background. If null is + * specified then the selection cells are used. + */ + mxGraph.prototype.orderCells = function(back, cells) + { + if (cells == null) + { + cells = mxUtils.sortCells(this.getSelectionCells(), true); + } + + this.model.beginUpdate(); + try + { + this.cellsOrdered(cells, back); + this.fireEvent(new mxEventObject(mxEvent.ORDER_CELLS, + 'back', back, 'cells', cells)); + } + finally + { + this.model.endUpdate(); + } + + return cells; + }; + +/** + * Function: cellsOrdered + * + * Moves the given cells to the front or back. This method fires + * <mxEvent.CELLS_ORDERED> while the transaction is in progress. + * + * Parameters: + * + * cells - Array of <mxCells> whose order should be changed. + * back - Boolean that specifies if the cells should be moved to back. + */ + mxGraph.prototype.cellsOrdered = function(cells, back) + { + if (cells != null) + { + this.model.beginUpdate(); + try + { + for (var i = 0; i < cells.length; i++) + { + var parent = this.model.getParent(cells[i]); + + if (back) + { + this.model.add(parent, cells[i], i); + } + else + { + this.model.add(parent, cells[i], + this.model.getChildCount(parent) - 1); + } + } + + this.fireEvent(new mxEventObject(mxEvent.CELLS_ORDERED, + 'back', back, 'cells', cells)); + } + finally + { + this.model.endUpdate(); + } + } +}; + +/** + * Group: Grouping + */ + +/** + * Function: groupCells + * + * Adds the cells into the given group. The change is carried out using + * <cellsAdded>, <cellsMoved> and <cellsResized>. This method fires + * <mxEvent.GROUP_CELLS> while the transaction is in progress. Returns the + * new group. A group is only created if there is at least one entry in the + * given array of cells. + * + * Parameters: + * + * group - <mxCell> that represents the target group. If null is specified + * then a new group is created using <createGroupCell>. + * border - Optional integer that specifies the border between the child + * area and the group bounds. Default is 0. + * cells - Optional array of <mxCells> to be grouped. If null is specified + * then the selection cells are used. + */ +mxGraph.prototype.groupCells = function(group, border, cells) +{ + if (cells == null) + { + cells = mxUtils.sortCells(this.getSelectionCells(), true); + } + + cells = this.getCellsForGroup(cells); + + if (group == null) + { + group = this.createGroupCell(cells); + } + + var bounds = this.getBoundsForGroup(group, cells, border); + + if (cells.length > 0 && bounds != null) + { + // Uses parent of group or previous parent of first child + var parent = this.model.getParent(group); + + if (parent == null) + { + parent = this.model.getParent(cells[0]); + } + + this.model.beginUpdate(); + try + { + // Checks if the group has a geometry and + // creates one if one does not exist + if (this.getCellGeometry(group) == null) + { + this.model.setGeometry(group, new mxGeometry()); + } + + // Adds the children into the group and moves + var index = this.model.getChildCount(group); + this.cellsAdded(cells, group, index, null, null, false, false); + this.cellsMoved(cells, -bounds.x, -bounds.y, false, true); + + // Adds the group into the parent and resizes + index = this.model.getChildCount(parent); + this.cellsAdded([group], parent, index, null, null, false); + this.cellsResized([group], [bounds]); + + this.fireEvent(new mxEventObject(mxEvent.GROUP_CELLS, + 'group', group, 'border', border, 'cells', cells)); + } + finally + { + this.model.endUpdate(); + } + } + + return group; +}; + +/** + * Function: getCellsForGroup + * + * Returns the cells with the same parent as the first cell + * in the given array. + */ +mxGraph.prototype.getCellsForGroup = function(cells) +{ + var result = []; + + if (cells != null && cells.length > 0) + { + var parent = this.model.getParent(cells[0]); + result.push(cells[0]); + + // Filters selection cells with the same parent + for (var i = 1; i < cells.length; i++) + { + if (this.model.getParent(cells[i]) == parent) + { + result.push(cells[i]); + } + } + } + + return result; +}; + +/** + * Function: getBoundsForGroup + * + * Returns the bounds to be used for the given group and children. + */ +mxGraph.prototype.getBoundsForGroup = function(group, children, border) +{ + var result = this.getBoundingBoxFromGeometry(children); + + if (result != null) + { + if (this.isSwimlane(group)) + { + var size = this.getStartSize(group); + + result.x -= size.width; + result.y -= size.height; + result.width += size.width; + result.height += size.height; + } + + // Adds the border + result.x -= border; + result.y -= border; + result.width += 2 * border; + result.height += 2 * border; + } + + return result; +}; + +/** + * Function: createGroupCell + * + * Hook for creating the group cell to hold the given array of <mxCells> if + * no group cell was given to the <group> function. + * + * The following code can be used to set the style of new group cells. + * + * (code) + * var graphCreateGroupCell = graph.createGroupCell; + * graph.createGroupCell = function(cells) + * { + * var group = graphCreateGroupCell.apply(this, arguments); + * group.setStyle('group'); + * + * return group; + * }; + */ +mxGraph.prototype.createGroupCell = function(cells) +{ + var group = new mxCell(''); + group.setVertex(true); + group.setConnectable(false); + + return group; +}; + +/** + * Function: ungroupCells + * + * Ungroups the given cells by moving the children the children to their + * parents parent and removing the empty groups. Returns the children that + * have been removed from the groups. + * + * Parameters: + * + * cells - Array of cells to be ungrouped. If null is specified then the + * selection cells are used. + */ +mxGraph.prototype.ungroupCells = function(cells) +{ + var result = []; + + if (cells == null) + { + cells = this.getSelectionCells(); + + // Finds the cells with children + var tmp = []; + + for (var i = 0; i < cells.length; i++) + { + if (this.model.getChildCount(cells[i]) > 0) + { + tmp.push(cells[i]); + } + } + + cells = tmp; + } + + if (cells != null && cells.length > 0) + { + this.model.beginUpdate(); + try + { + for (var i = 0; i < cells.length; i++) + { + var children = this.model.getChildren(cells[i]); + + if (children != null && children.length > 0) + { + children = children.slice(); + var parent = this.model.getParent(cells[i]); + var index = this.model.getChildCount(parent); + + this.cellsAdded(children, parent, index, null, null, true); + result = result.concat(children); + } + } + + this.cellsRemoved(this.addAllEdges(cells)); + this.fireEvent(new mxEventObject(mxEvent.UNGROUP_CELLS, + 'cells', cells)); + } + finally + { + this.model.endUpdate(); + } + } + + return result; +}; + +/** + * Function: removeCellsFromParent + * + * Removes the specified cells from their parents and adds them to the + * default parent. Returns the cells that were removed from their parents. + * + * Parameters: + * + * cells - Array of <mxCells> to be removed from their parents. + */ +mxGraph.prototype.removeCellsFromParent = function(cells) +{ + if (cells == null) + { + cells = this.getSelectionCells(); + } + + this.model.beginUpdate(); + try + { + var parent = this.getDefaultParent(); + var index = this.model.getChildCount(parent); + + this.cellsAdded(cells, parent, index, null, null, true); + this.fireEvent(new mxEventObject(mxEvent.REMOVE_CELLS_FROM_PARENT, + 'cells', cells)); + } + finally + { + this.model.endUpdate(); + } + + return cells; +}; + +/** + * Function: updateGroupBounds + * + * Updates the bounds of the given array of groups so that it includes + * all child vertices. + * + * Parameters: + * + * cells - The groups whose bounds should be updated. + * border - Optional border to be added in the group. Default is 0. + * moveGroup - Optional boolean that allows the group to be moved. Default + * is false. + */ +mxGraph.prototype.updateGroupBounds = function(cells, border, moveGroup) +{ + if (cells == null) + { + cells = this.getSelectionCells(); + } + + border = (border != null) ? border : 0; + moveGroup = (moveGroup != null) ? moveGroup : false; + + this.model.beginUpdate(); + try + { + for (var i = 0; i < cells.length; i++) + { + var geo = this.getCellGeometry(cells[i]); + + if (geo != null) + { + var children = this.getChildCells(cells[i]); + + if (children != null && children.length > 0) + { + var childBounds = this.getBoundingBoxFromGeometry(children); + + if (childBounds.width > 0 && childBounds.height > 0) + { + var size = (this.isSwimlane(cells[i])) ? + this.getStartSize(cells[i]) : new mxRectangle(); + + geo = geo.clone(); + + if (moveGroup) + { + geo.x += childBounds.x - size.width - border; + geo.y += childBounds.y - size.height - border; + } + + geo.width = childBounds.width + size.width + 2 * border; + geo.height = childBounds.height + size.height + 2 * border; + + this.model.setGeometry(cells[i], geo); + this.moveCells(children, -childBounds.x + size.width + border, + -childBounds.y + size.height + border); + } + } + } + } + } + finally + { + this.model.endUpdate(); + } + + return cells; +}; + +/** + * Group: Cell cloning, insertion and removal + */ + +/** + * Function: cloneCells + * + * Returns the clones for the given cells. If the terminal of an edge is + * not in the given array, then the respective end is assigned a terminal + * point and the terminal is removed. + * + * Parameters: + * + * cells - Array of <mxCells> to be cloned. + * allowInvalidEdges - Optional boolean that specifies if invalid edges + * should be cloned. Default is true. + */ +mxGraph.prototype.cloneCells = function(cells, allowInvalidEdges) +{ + allowInvalidEdges = (allowInvalidEdges != null) ? allowInvalidEdges : true; + var clones = null; + + if (cells != null) + { + // Creates a hashtable for cell lookups + var hash = new Object(); + var tmp = []; + + for (var i = 0; i < cells.length; i++) + { + var id = mxCellPath.create(cells[i]); + hash[id] = cells[i]; + tmp.push(cells[i]); + } + + if (tmp.length > 0) + { + var scale = this.view.scale; + var trans = this.view.translate; + clones = this.model.cloneCells(cells, true); + + for (var i = 0; i < cells.length; i++) + { + if (!allowInvalidEdges && this.model.isEdge(clones[i]) && + this.getEdgeValidationError(clones[i], + this.model.getTerminal(clones[i], true), + this.model.getTerminal(clones[i], false)) != null) + { + clones[i] = null; + } + else + { + var g = this.model.getGeometry(clones[i]); + + if (g != null) + { + var state = this.view.getState(cells[i]); + var pstate = this.view.getState( + this.model.getParent(cells[i])); + + if (state != null && pstate != null) + { + var dx = pstate.origin.x; + var dy = pstate.origin.y; + + if (this.model.isEdge(clones[i])) + { + var pts = state.absolutePoints; + + // Checks if the source is cloned or sets the terminal point + var src = this.model.getTerminal(cells[i], true); + var srcId = mxCellPath.create(src); + + while (src != null && hash[srcId] == null) + { + src = this.model.getParent(src); + srcId = mxCellPath.create(src); + } + + if (src == null) + { + g.setTerminalPoint( + new mxPoint(pts[0].x / scale - trans.x, + pts[0].y / scale - trans.y), true); + } + + // Checks if the target is cloned or sets the terminal point + var trg = this.model.getTerminal(cells[i], false); + var trgId = mxCellPath.create(trg); + + while (trg != null && hash[trgId] == null) + { + trg = this.model.getParent(trg); + trgId = mxCellPath.create(trg); + } + + if (trg == null) + { + var n = pts.length - 1; + g.setTerminalPoint( + new mxPoint(pts[n].x / scale - trans.x, + pts[n].y / scale - trans.y), false); + } + + // Translates the control points + var points = g.points; + + if (points != null) + { + for (var j = 0; j < points.length; j++) + { + points[j].x += dx; + points[j].y += dy; + } + } + } + else + { + g.x += dx; + g.y += dy; + } + } + } + } + } + } + else + { + clones = []; + } + } + + return clones; +}; + +/** + * Function: insertVertex + * + * Adds a new vertex into the given parent <mxCell> using value as the user + * object and the given coordinates as the <mxGeometry> of the new vertex. + * 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: + * + * (code) + * var pt = graph.getPointForEvent(evt); + * var parent = graph.getDefaultParent(); + * graph.insertVertex(parent, null, + * 'Hello, World!', x, y, 220, 30); + * (end) + * + * For adding image cells, the style parameter can be assigned as + * + * (code) + * stylename;image=imageUrl + * (end) + * + * See <mxGraph> for more information on using images. + * + * Parameters: + * + * parent - <mxCell> that specifies the parent of the new vertex. + * id - Optional string that defines the Id of the new vertex. + * value - Object to be used as the user object. + * x - Integer that defines the x coordinate of the vertex. + * y - Integer that defines the y coordinate of the vertex. + * width - Integer that defines the width of the vertex. + * height - Integer that defines the height of the vertex. + * style - Optional string that defines the cell style. + * relative - Optional boolean that specifies if the geometry is relative. + * Default is false. + */ +mxGraph.prototype.insertVertex = function(parent, id, value, + x, y, width, height, style, relative) +{ + var vertex = this.createVertex(parent, id, value, x, y, width, height, style, relative); + + return this.addCell(vertex, parent); +}; + +/** + * Function: createVertex + * + * Hook method that creates the new vertex for <insertVertex>. + */ +mxGraph.prototype.createVertex = function(parent, id, value, + x, y, width, height, style, relative) +{ + // Creates the geometry for the vertex + var geometry = new mxGeometry(x, y, width, height); + geometry.relative = (relative != null) ? relative : false; + + // Creates the vertex + var vertex = new mxCell(value, geometry, style); + vertex.setId(id); + vertex.setVertex(true); + vertex.setConnectable(true); + + return vertex; +}; + +/** + * Function: insertEdge + * + * Adds a new edge into the given parent <mxCell> using value as the user + * object and the given source and target as the terminals of the new edge. + * The id and style are used for the respective properties of the new + * <mxCell>, which is returned. + * + * Parameters: + * + * parent - <mxCell> that specifies the parent of the new edge. + * id - Optional string that defines the Id of the new edge. + * value - JavaScript object to be used as the user object. + * source - <mxCell> that defines the source of the edge. + * target - <mxCell> that defines the target of the edge. + * style - Optional string that defines the cell style. + */ +mxGraph.prototype.insertEdge = function(parent, id, value, source, target, style) +{ + var edge = this.createEdge(parent, id, value, source, target, style); + + return this.addEdge(edge, parent, source, target); +}; + +/** + * Function: createEdge + * + * 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. + * + */ +mxGraph.prototype.createEdge = function(parent, id, value, source, target, style) +{ + // Creates the edge + var edge = new mxCell(value, new mxGeometry(), style); + edge.setId(id); + edge.setEdge(true); + edge.geometry.relative = true; + + return edge; +}; + +/** + * Function: addEdge + * + * Adds the edge to the parent and connects it to the given source and + * target terminals. This is a shortcut method. Returns the edge that was + * added. + * + * Parameters: + * + * edge - <mxCell> to be inserted into the given parent. + * parent - <mxCell> that represents the new parent. If no parent is + * given then the default parent is used. + * source - Optional <mxCell> that represents the source terminal. + * target - Optional <mxCell> that represents the target terminal. + * index - Optional index to insert the cells at. Default is to append. + */ +mxGraph.prototype.addEdge = function(edge, parent, source, target, index) +{ + return this.addCell(edge, parent, index, source, target); +}; + +/** + * Function: addCell + * + * Adds the cell to the parent and connects it to the given source and + * target terminals. This is a shortcut method. Returns the cell that was + * added. + * + * Parameters: + * + * cell - <mxCell> to be inserted into the given parent. + * parent - <mxCell> that represents the new parent. If no parent is + * given then the default parent is used. + * index - Optional index to insert the cells at. Default is to append. + * source - Optional <mxCell> that represents the source terminal. + * target - Optional <mxCell> that represents the target terminal. + */ +mxGraph.prototype.addCell = function(cell, parent, index, source, target) +{ + return this.addCells([cell], parent, index, source, target)[0]; +}; + +/** + * Function: addCells + * + * Adds the cells to the parent at the given index, connecting each cell to + * the optional source and target terminal. The change is carried out using + * <cellsAdded>. This method fires <mxEvent.ADD_CELLS> while the + * transaction is in progress. Returns the cells that were added. + * + * Parameters: + * + * cells - Array of <mxCells> to be inserted. + * parent - <mxCell> that represents the new parent. If no parent is + * given then the default parent is used. + * index - Optional index to insert the cells at. Default is to append. + * source - Optional source <mxCell> for all inserted cells. + * target - Optional target <mxCell> for all inserted cells. + */ +mxGraph.prototype.addCells = function(cells, parent, index, source, target) +{ + if (parent == null) + { + parent = this.getDefaultParent(); + } + + if (index == null) + { + index = this.model.getChildCount(parent); + } + + this.model.beginUpdate(); + try + { + this.cellsAdded(cells, parent, index, source, target, false, true); + this.fireEvent(new mxEventObject(mxEvent.ADD_CELLS, 'cells', cells, + 'parent', parent, 'index', index, 'source', source, 'target', target)); + } + finally + { + this.model.endUpdate(); + } + + return cells; +}; + +/** + * Function: cellsAdded + * + * Adds the specified cells to the given parent. This method fires + * <mxEvent.CELLS_ADDED> while the transaction is in progress. + */ +mxGraph.prototype.cellsAdded = function(cells, parent, index, source, target, absolute, constrain) +{ + if (cells != null && parent != null && index != null) + { + this.model.beginUpdate(); + try + { + var parentState = (absolute) ? this.view.getState(parent) : null; + var o1 = (parentState != null) ? parentState.origin : null; + var zero = new mxPoint(0, 0); + + for (var i = 0; i < cells.length; i++) + { + if (cells[i] == null) + { + index--; + } + else + { + var previous = this.model.getParent(cells[i]); + + // Keeps the cell at its absolute location + if (o1 != null && cells[i] != parent && parent != previous) + { + var oldState = this.view.getState(previous); + var o2 = (oldState != null) ? oldState.origin : zero; + var geo = this.model.getGeometry(cells[i]); + + if (geo != null) + { + var dx = o2.x - o1.x; + var dy = o2.y - o1.y; + + // FIXME: Cells should always be inserted first before any other edit + // to avoid forward references in sessions. + geo = geo.clone(); + geo.translate(dx, dy); + + if (!geo.relative && this.model.isVertex(cells[i]) && + !this.isAllowNegativeCoordinates()) + { + geo.x = Math.max(0, geo.x); + geo.y = Math.max(0, geo.y); + } + + this.model.setGeometry(cells[i], geo); + } + } + + // Decrements all following indices + // if cell is already in parent + if (parent == previous) + { + index--; + } + + this.model.add(parent, cells[i], index + i); + + // Extends the parent + if (this.isExtendParentsOnAdd() && this.isExtendParent(cells[i])) + { + this.extendParent(cells[i]); + } + + // Constrains the child + if (constrain == null || constrain) + { + this.constrainChild(cells[i]); + } + + // Sets the source terminal + if (source != null) + { + this.cellConnected(cells[i], source, true); + } + + // Sets the target terminal + if (target != null) + { + this.cellConnected(cells[i], target, false); + } + } + } + + this.fireEvent(new mxEventObject(mxEvent.CELLS_ADDED, 'cells', cells, + 'parent', parent, 'index', index, 'source', source, 'target', target, + 'absolute', absolute)); + } + finally + { + this.model.endUpdate(); + } + } +}; + +/** + * Function: removeCells + * + * Removes the given cells from the graph including all connected edges if + * includeEdges is true. The change is carried out using <cellsRemoved>. + * This method fires <mxEvent.REMOVE_CELLS> while the transaction is in + * progress. The removed cells are returned as an array. + * + * Parameters: + * + * cells - Array of <mxCells> to remove. If null is specified then the + * selection cells which are deletable are used. + * includeEdges - Optional boolean which specifies if all connected edges + * should be removed as well. Default is true. + */ +mxGraph.prototype.removeCells = function(cells, includeEdges) +{ + includeEdges = (includeEdges != null) ? includeEdges : true; + + if (cells == null) + { + cells = this.getDeletableCells(this.getSelectionCells()); + } + + // Adds all edges to the cells + if (includeEdges) + { + cells = this.getDeletableCells(this.addAllEdges(cells)); + } + + this.model.beginUpdate(); + try + { + this.cellsRemoved(cells); + this.fireEvent(new mxEventObject(mxEvent.REMOVE_CELLS, + 'cells', cells, 'includeEdges', includeEdges)); + } + finally + { + this.model.endUpdate(); + } + + return cells; +}; + +/** + * Function: cellsRemoved + * + * Removes the given cells from the model. This method fires + * <mxEvent.CELLS_REMOVED> while the transaction is in progress. + * + * Parameters: + * + * cells - Array of <mxCells> to remove. + */ +mxGraph.prototype.cellsRemoved = function(cells) +{ + if (cells != null && cells.length > 0) + { + var scale = this.view.scale; + var tr = this.view.translate; + + this.model.beginUpdate(); + try + { + // Creates hashtable for faster lookup + var hash = new Object(); + + for (var i = 0; i < cells.length; i++) + { + var id = mxCellPath.create(cells[i]); + hash[id] = cells[i]; + } + + for (var i = 0; i < cells.length; i++) + { + // Disconnects edges which are not in cells + var edges = this.getConnections(cells[i]); + + for (var j = 0; j < edges.length; j++) + { + var id = mxCellPath.create(edges[j]); + + if (hash[id] == null) + { + var geo = this.model.getGeometry(edges[j]); + + if (geo != null) + { + var state = this.view.getState(edges[j]); + + if (state != null) + { + geo = geo.clone(); + var source = state.getVisibleTerminal(true) == cells[i]; + var pts = state.absolutePoints; + var n = (source) ? 0 : pts.length - 1; + + geo.setTerminalPoint( + new mxPoint(pts[n].x / scale - tr.x, + pts[n].y / scale - tr.y), source); + this.model.setTerminal(edges[j], null, source); + this.model.setGeometry(edges[j], geo); + } + } + } + } + + this.model.remove(cells[i]); + } + + this.fireEvent(new mxEventObject(mxEvent.CELLS_REMOVED, + 'cells', cells)); + } + finally + { + this.model.endUpdate(); + } + } +}; + +/** + * Function: splitEdge + * + * Splits the given edge by adding the newEdge between the previous source + * and the given cell and reconnecting the source of the given edge to the + * given cell. This method fires <mxEvent.SPLIT_EDGE> while the transaction + * is in progress. Returns the new edge that was inserted. + * + * Parameters: + * + * edge - <mxCell> that represents the edge to be splitted. + * cells - <mxCells> that represents the cells to insert into the edge. + * newEdge - <mxCell> that represents the edge to be inserted. + * dx - Optional integer that specifies the vector to move the cells. + * dy - Optional integer that specifies the vector to move the cells. + */ +mxGraph.prototype.splitEdge = function(edge, cells, newEdge, dx, dy) +{ + dx = dx || 0; + dy = dy || 0; + + if (newEdge == null) + { + newEdge = this.cloneCells([edge])[0]; + } + + var parent = this.model.getParent(edge); + var source = this.model.getTerminal(edge, true); + + this.model.beginUpdate(); + try + { + this.cellsMoved(cells, dx, dy, false, false); + this.cellsAdded(cells, parent, this.model.getChildCount(parent), null, null, + true); + this.cellsAdded([newEdge], parent, this.model.getChildCount(parent), + source, cells[0], false); + this.cellConnected(edge, cells[0], true); + this.fireEvent(new mxEventObject(mxEvent.SPLIT_EDGE, 'edge', edge, + 'cells', cells, 'newEdge', newEdge, 'dx', dx, 'dy', dy)); + } + finally + { + this.model.endUpdate(); + } + + return newEdge; +}; + +/** + * Group: Cell visibility + */ + +/** + * Function: toggleCells + * + * Sets the visible state of the specified cells and all connected edges + * if includeEdges is true. The change is carried out using <cellsToggled>. + * This method fires <mxEvent.TOGGLE_CELLS> while the transaction is in + * progress. Returns the cells whose visible state was changed. + * + * Parameters: + * + * show - Boolean that specifies the visible state to be assigned. + * cells - Array of <mxCells> whose visible state should be changed. If + * null is specified then the selection cells are used. + * includeEdges - Optional boolean indicating if the visible state of all + * connected edges should be changed as well. Default is true. + */ +mxGraph.prototype.toggleCells = function(show, cells, includeEdges) +{ + if (cells == null) + { + cells = this.getSelectionCells(); + } + + // Adds all connected edges recursively + if (includeEdges) + { + cells = this.addAllEdges(cells); + } + + this.model.beginUpdate(); + try + { + this.cellsToggled(cells, show); + this.fireEvent(new mxEventObject(mxEvent.TOGGLE_CELLS, + 'show', show, 'cells', cells, 'includeEdges', includeEdges)); + } + finally + { + this.model.endUpdate(); + } + + return cells; +}; + +/** + * Function: cellsToggled + * + * Sets the visible state of the specified cells. + * + * Parameters: + * + * cells - Array of <mxCells> whose visible state should be changed. + * show - Boolean that specifies the visible state to be assigned. + */ +mxGraph.prototype.cellsToggled = function(cells, show) +{ + if (cells != null && cells.length > 0) + { + this.model.beginUpdate(); + try + { + for (var i = 0; i < cells.length; i++) + { + this.model.setVisible(cells[i], show); + } + } + finally + { + this.model.endUpdate(); + } + } +}; + +/** + * Group: Folding + */ + +/** + * Function: foldCells + * + * Sets the collapsed state of the specified cells and all descendants + * if recurse is true. The change is carried out using <cellsFolded>. + * This method fires <mxEvent.FOLD_CELLS> while the transaction is in + * progress. Returns the cells whose collapsed state was changed. + * + * Parameters: + * + * collapsed - Boolean indicating the collapsed state to be assigned. + * recurse - Optional boolean indicating if the collapsed state of all + * descendants should be set. Default is false. + * cells - Array of <mxCells> whose collapsed state should be set. If + * null is specified then the foldable selection cells are used. + * checkFoldable - Optional boolean indicating of isCellFoldable should be + * checked. Default is false. + */ +mxGraph.prototype.foldCells = function(collapse, recurse, cells, checkFoldable) +{ + recurse = (recurse != null) ? recurse : false; + + if (cells == null) + { + cells = this.getFoldableCells(this.getSelectionCells(), collapse); + } + + this.stopEditing(false); + + this.model.beginUpdate(); + try + { + this.cellsFolded(cells, collapse, recurse, checkFoldable); + this.fireEvent(new mxEventObject(mxEvent.FOLD_CELLS, + 'collapse', collapse, 'recurse', recurse, 'cells', cells)); + } + finally + { + this.model.endUpdate(); + } + + return cells; +}; + +/** + * Function: cellsFolded + * + * Sets the collapsed state of the specified cells. This method fires + * <mxEvent.CELLS_FOLDED> while the transaction is in progress. Returns the + * cells whose collapsed state was changed. + * + * Parameters: + * + * cells - Array of <mxCells> whose collapsed state should be set. + * collapsed - Boolean indicating the collapsed state to be assigned. + * recurse - Boolean indicating if the collapsed state of all descendants + * should be set. + * checkFoldable - Optional boolean indicating of isCellFoldable should be + * checked. Default is false. + */ +mxGraph.prototype.cellsFolded = function(cells, collapse, recurse, checkFoldable) +{ + if (cells != null && cells.length > 0) + { + this.model.beginUpdate(); + try + { + for (var i = 0; i < cells.length; i++) + { + if ((!checkFoldable || this.isCellFoldable(cells[i], collapse)) && + collapse != this.isCellCollapsed(cells[i])) + { + this.model.setCollapsed(cells[i], collapse); + this.swapBounds(cells[i], collapse); + + if (this.isExtendParent(cells[i])) + { + this.extendParent(cells[i]); + } + + if (recurse) + { + var children = this.model.getChildren(cells[i]); + this.foldCells(children, collapse, recurse); + } + } + } + + this.fireEvent(new mxEventObject(mxEvent.CELLS_FOLDED, + 'cells', cells, 'collapse', collapse, 'recurse', recurse)); + } + finally + { + this.model.endUpdate(); + } + } +}; + +/** + * Function: swapBounds + * + * Swaps the alternate and the actual bounds in the geometry of the given + * cell invoking <updateAlternateBounds> before carrying out the swap. + * + * Parameters: + * + * cell - <mxCell> for which the bounds should be swapped. + * willCollapse - Boolean indicating if the cell is going to be collapsed. + */ +mxGraph.prototype.swapBounds = function(cell, willCollapse) +{ + if (cell != null) + { + var geo = this.model.getGeometry(cell); + + if (geo != null) + { + geo = geo.clone(); + + this.updateAlternateBounds(cell, geo, willCollapse); + geo.swap(); + + this.model.setGeometry(cell, geo); + } + } +}; + +/** + * Function: updateAlternateBounds + * + * Updates or sets the alternate bounds in the given geometry for the given + * cell depending on whether the cell is going to be collapsed. If no + * alternate bounds are defined in the geometry and + * <collapseToPreferredSize> is true, then the preferred size is used for + * the alternate bounds. The top, left corner is always kept at the same + * location. + * + * Parameters: + * + * cell - <mxCell> for which the geometry is being udpated. + * g - <mxGeometry> for which the alternate bounds should be updated. + * willCollapse - Boolean indicating if the cell is going to be collapsed. + */ +mxGraph.prototype.updateAlternateBounds = function(cell, geo, willCollapse) +{ + if (cell != null && geo != null) + { + if (geo.alternateBounds == null) + { + var bounds = geo; + + if (this.collapseToPreferredSize) + { + var tmp = this.getPreferredSizeForCell(cell); + + if (tmp != null) + { + bounds = tmp; + var state = this.view.getState(cell); + var style = (state != null) ? state.style : this.getCellStyle(cell); + + var startSize = mxUtils.getValue(style, mxConstants.STYLE_STARTSIZE); + + if (startSize > 0) + { + bounds.height = Math.max(bounds.height, startSize); + } + } + } + + geo.alternateBounds = new mxRectangle( + geo.x, geo.y, bounds.width, bounds.height); + } + else + { + geo.alternateBounds.x = geo.x; + geo.alternateBounds.y = geo.y; + } + } +}; + +/** + * Function: addAllEdges + * + * Returns an array with the given cells and all edges that are connected + * to a cell or one of its descendants. + */ +mxGraph.prototype.addAllEdges = function(cells) +{ + var allCells = cells.slice(); // FIXME: Required? + allCells = allCells.concat(this.getAllEdges(cells)); + + return allCells; +}; + +/** + * Function: getAllEdges + * + * Returns all edges connected to the given cells or its descendants. + */ +mxGraph.prototype.getAllEdges = function(cells) +{ + var edges = []; + + if (cells != null) + { + for (var i = 0; i < cells.length; i++) + { + var edgeCount = this.model.getEdgeCount(cells[i]); + + for (var j = 0; j < edgeCount; j++) + { + edges.push(this.model.getEdgeAt(cells[i], j)); + } + + // Recurses + var children = this.model.getChildren(cells[i]); + edges = edges.concat(this.getAllEdges(children)); + } + } + + return edges; +}; + +/** + * Group: Cell sizing + */ + +/** + * Function: updateCellSize + * + * Updates the size of the given cell in the model using <cellSizeUpdated>. + * This method fires <mxEvent.UPDATE_CELL_SIZE> while the transaction is in + * progress. Returns the cell whose size was updated. + * + * Parameters: + * + * cell - <mxCell> whose size should be updated. + */ +mxGraph.prototype.updateCellSize = function(cell, ignoreChildren) +{ + ignoreChildren = (ignoreChildren != null) ? ignoreChildren : false; + + this.model.beginUpdate(); + try + { + this.cellSizeUpdated(cell, ignoreChildren); + this.fireEvent(new mxEventObject(mxEvent.UPDATE_CELL_SIZE, + 'cell', cell, 'ignoreChildren', ignoreChildren)); + } + finally + { + this.model.endUpdate(); + } + + return cell; +}; + +/** + * Function: cellSizeUpdated + * + * Updates the size of the given cell in the model using + * <getPreferredSizeForCell> to get the new size. + * + * Parameters: + * + * cell - <mxCell> for which the size should be changed. + */ +mxGraph.prototype.cellSizeUpdated = function(cell, ignoreChildren) +{ + if (cell != null) + { + this.model.beginUpdate(); + try + { + var size = this.getPreferredSizeForCell(cell); + var geo = this.model.getGeometry(cell); + + if (size != null && geo != null) + { + var collapsed = this.isCellCollapsed(cell); + geo = geo.clone(); + + if (this.isSwimlane(cell)) + { + var state = this.view.getState(cell); + var style = (state != null) ? state.style : this.getCellStyle(cell); + var cellStyle = this.model.getStyle(cell); + + if (cellStyle == null) + { + cellStyle = ''; + } + + if (mxUtils.getValue(style, mxConstants.STYLE_HORIZONTAL, true)) + { + cellStyle = mxUtils.setStyle(cellStyle, + mxConstants.STYLE_STARTSIZE, size.height + 8); + + if (collapsed) + { + geo.height = size.height + 8; + } + + geo.width = size.width; + } + else + { + cellStyle = mxUtils.setStyle(cellStyle, + mxConstants.STYLE_STARTSIZE, size.width + 8); + + if (collapsed) + { + geo.width = size.width + 8; + } + + geo.height = size.height; + } + + this.model.setStyle(cell, cellStyle); + } + else + { + geo.width = size.width; + geo.height = size.height; + } + + if (!ignoreChildren && !collapsed) + { + var bounds = this.view.getBounds(this.model.getChildren(cell)); + + if (bounds != null) + { + var tr = this.view.translate; + var scale = this.view.scale; + + var width = (bounds.x + bounds.width) / scale - geo.x - tr.x; + var height = (bounds.y + bounds.height) / scale - geo.y - tr.y; + + geo.width = Math.max(geo.width, width); + geo.height = Math.max(geo.height, height); + } + } + + this.cellsResized([cell], [geo]); + } + } + finally + { + this.model.endUpdate(); + } + } +}; + +/** + * Function: getPreferredSizeForCell + * + * Returns the preferred width and height of the given <mxCell> as an + * <mxRectangle>. + * + * Parameters: + * + * cell - <mxCell> for which the preferred size should be returned. + */ +mxGraph.prototype.getPreferredSizeForCell = function(cell) +{ + var result = null; + + if (cell != null) + { + var state = this.view.getState(cell); + var style = (state != null) ? state.style : this.getCellStyle(cell); + + if (style != null && !this.model.isEdge(cell)) + { + var fontSize = style[mxConstants.STYLE_FONTSIZE] || mxConstants.DEFAULT_FONTSIZE; + var dx = 0; + var dy = 0; + + // Adds dimension of image if shape is a label + if (this.getImage(state) != null || style[mxConstants.STYLE_IMAGE] != null) + { + if (style[mxConstants.STYLE_SHAPE] == mxConstants.SHAPE_LABEL) + { + if (style[mxConstants.STYLE_VERTICAL_ALIGN] == mxConstants.ALIGN_MIDDLE) + { + dx += parseFloat(style[mxConstants.STYLE_IMAGE_WIDTH]) || mxLabel.prototype.imageSize; + } + + if (style[mxConstants.STYLE_ALIGN] != mxConstants.ALIGN_CENTER) + { + dy += parseFloat(style[mxConstants.STYLE_IMAGE_HEIGHT]) || mxLabel.prototype.imageSize; + } + } + } + + // Adds spacings + dx += 2 * (style[mxConstants.STYLE_SPACING] || 0); + dx += style[mxConstants.STYLE_SPACING_LEFT] || 0; + dx += style[mxConstants.STYLE_SPACING_RIGHT] || 0; + + dy += 2 * (style[mxConstants.STYLE_SPACING] || 0); + dy += style[mxConstants.STYLE_SPACING_TOP] || 0; + dy += style[mxConstants.STYLE_SPACING_BOTTOM] || 0; + + // Add spacing for collapse/expand icon + // LATER: Check alignment and use constants + // for image spacing + var image = this.getFoldingImage(state); + + if (image != null) + { + dx += image.width + 8; + } + + // Adds space for label + var value = this.getLabel(cell); + + if (value != null && value.length > 0) + { + if (!this.isHtmlLabel(cell)) + { + value = value.replace(/\n/g, '<br>'); + } + + var size = mxUtils.getSizeForString(value, + fontSize, style[mxConstants.STYLE_FONTFAMILY]); + var width = size.width + dx; + var height = size.height + dy; + + if (!mxUtils.getValue(style, mxConstants.STYLE_HORIZONTAL, true)) + { + var tmp = height; + + height = width; + width = tmp; + } + + if (this.gridEnabled) + { + width = this.snap(width + this.gridSize / 2); + height = this.snap(height + this.gridSize / 2); + } + + result = new mxRectangle(0, 0, width, height); + } + else + { + var gs2 = 4 * this.gridSize; + result = new mxRectangle(0, 0, gs2, gs2); + } + } + } + + return result; +}; + +/** + * Function: handleGesture + * + * Invokes if a gesture event has been detected on a cell state. + * + * Parameters: + * + * state - <mxCellState> which was pinched. + * evt - Object that represents the gesture event. + */ +mxGraph.prototype.handleGesture = function(state, evt) +{ + if (Math.abs(1 - evt.scale) > 0.2) + { + var scale = this.view.scale; + var tr = this.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(this.snap(x / scale) - tr.x, + this.snap(y / scale) - tr.y, + this.snap(w / scale), this.snap(h / scale)); + this.resizeCell(state.cell, bounds); + } +}; + +/** + * Function: resizeCell + * + * Sets the bounds of the given cell using <resizeCells>. Returns the + * cell which was passed to the function. + * + * Parameters: + * + * cell - <mxCell> whose bounds should be changed. + * bounds - <mxRectangle> that represents the new bounds. + */ +mxGraph.prototype.resizeCell = function(cell, bounds) +{ + return this.resizeCells([cell], [bounds])[0]; +}; + +/** + * Function: resizeCells + * + * Sets the bounds of the given cells and fires a <mxEvent.RESIZE_CELLS> + * event while the transaction is in progress. Returns the cells which + * have been passed to the function. + * + * Parameters: + * + * cells - Array of <mxCells> whose bounds should be changed. + * bounds - Array of <mxRectangles> that represent the new bounds. + */ +mxGraph.prototype.resizeCells = function(cells, bounds) +{ + this.model.beginUpdate(); + try + { + this.cellsResized(cells, bounds); + this.fireEvent(new mxEventObject(mxEvent.RESIZE_CELLS, + 'cells', cells, 'bounds', bounds)); + } + finally + { + this.model.endUpdate(); + } + + return cells; +}; + +/** + * Function: cellsResized + * + * 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. + * + * Parameters: + * + * cells - Array of <mxCells> whose bounds should be changed. + * bounds - Array of <mxRectangles> that represent the new bounds. + */ +mxGraph.prototype.cellsResized = function(cells, bounds) +{ + if (cells != null && bounds != null && cells.length == bounds.length) + { + this.model.beginUpdate(); + try + { + for (var i = 0; i < cells.length; i++) + { + var tmp = bounds[i]; + var geo = this.model.getGeometry(cells[i]); + + if (geo != null && (geo.x != tmp.x || geo.y != tmp.y || + geo.width != tmp.width || geo.height != tmp.height)) + { + geo = geo.clone(); + + if (geo.relative) + { + var offset = geo.offset; + + if (offset != null) + { + offset.x += tmp.x - geo.x; + offset.y += tmp.y - geo.y; + } + } + else + { + geo.x = tmp.x; + geo.y = tmp.y; + } + + geo.width = tmp.width; + geo.height = tmp.height; + + if (!geo.relative && this.model.isVertex(cells[i]) && + !this.isAllowNegativeCoordinates()) + { + geo.x = Math.max(0, geo.x); + geo.y = Math.max(0, geo.y); + } + + this.model.setGeometry(cells[i], geo); + + if (this.isExtendParent(cells[i])) + { + this.extendParent(cells[i]); + } + } + } + + if (this.resetEdgesOnResize) + { + this.resetEdges(cells); + } + + this.fireEvent(new mxEventObject(mxEvent.CELLS_RESIZED, + 'cells', cells, 'bounds', bounds)); + } + finally + { + this.model.endUpdate(); + } + } +}; + +/** + * Function: extendParent + * + * Resizes the parents recursively so that they contain the complete area + * of the resized child cell. + * + * Parameters: + * + * cell - <mxCell> that has been resized. + */ +mxGraph.prototype.extendParent = function(cell) +{ + if (cell != null) + { + var parent = this.model.getParent(cell); + var p = this.model.getGeometry(parent); + + if (parent != null && p != null && !this.isCellCollapsed(parent)) + { + var geo = this.model.getGeometry(cell); + + if (geo != null && (p.width < geo.x + geo.width || + p.height < geo.y + geo.height)) + { + p = p.clone(); + + p.width = Math.max(p.width, geo.x + geo.width); + p.height = Math.max(p.height, geo.y + geo.height); + + this.cellsResized([parent], [p]); + } + } + } +}; + +/** + * Group: Cell moving + */ + +/** + * Function: importCells + * + * 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. + */ +mxGraph.prototype.importCells = function(cells, dx, dy, target, evt) +{ + return this.moveCells(cells, dx, dy, true, target, evt); +}; + +/** + * Function: moveCells + * + * 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. + * + * (code) + * graph.moveCells(graph.getChildCells(null, true, true), 10, 10); + * (end) + * + * Parameters: + * + * cells - Array of <mxCells> to be moved, cloned or added to the target. + * dx - Integer that specifies the x-coordinate of the vector. Default is 0. + * dy - Integer that specifies the y-coordinate of the vector. Default is 0. + * clone - Boolean indicating if the cells should be cloned. Default is false. + * target - <mxCell> that represents the new parent of the cells. + * evt - Mouseevent that triggered the invocation. + */ +mxGraph.prototype.moveCells = function(cells, dx, dy, clone, target, evt) +{ + dx = (dx != null) ? dx : 0; + dy = (dy != null) ? dy : 0; + clone = (clone != null) ? clone : false; + + if (cells != null && (dx != 0 || dy != 0 || clone || target != null)) + { + this.model.beginUpdate(); + try + { + if (clone) + { + cells = this.cloneCells(cells, this.isCloneInvalidEdges()); + + if (target == null) + { + target = this.getDefaultParent(); + } + } + + // FIXME: Cells should always be inserted first before any other edit + // to avoid forward references in sessions. + // Need to disable allowNegativeCoordinates if target not null to + // allow for temporary negative numbers until cellsAdded is called. + var previous = this.isAllowNegativeCoordinates(); + + if (target != null) + { + this.setAllowNegativeCoordinates(true); + } + + this.cellsMoved(cells, dx, dy, !clone && this.isDisconnectOnMove() + && this.isAllowDanglingEdges(), target == null); + + this.setAllowNegativeCoordinates(previous); + + if (target != null) + { + var index = this.model.getChildCount(target); + this.cellsAdded(cells, target, index, null, null, true); + } + + // Dispatches a move event + this.fireEvent(new mxEventObject(mxEvent.MOVE_CELLS, 'cells', cells, + 'dx', dx, 'dy', dy, 'clone', clone, 'target', target, 'event', evt)); + } + finally + { + this.model.endUpdate(); + } + } + + return cells; +}; + +/** + * Function: cellsMoved + * + * 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. + */ +mxGraph.prototype.cellsMoved = function(cells, dx, dy, disconnect, constrain) +{ + if (cells != null && (dx != 0 || dy != 0)) + { + this.model.beginUpdate(); + try + { + if (disconnect) + { + this.disconnectGraph(cells); + } + + for (var i = 0; i < cells.length; i++) + { + this.translateCell(cells[i], dx, dy); + + if (constrain) + { + this.constrainChild(cells[i]); + } + } + + if (this.resetEdgesOnMove) + { + this.resetEdges(cells); + } + + this.fireEvent(new mxEventObject(mxEvent.CELLS_MOVED, + 'cells', cells, 'dx', dy, 'dy', dy, 'disconnect', disconnect)); + } + finally + { + this.model.endUpdate(); + } + } +}; + +/** + * Function: translateCell + * + * Translates the geometry of the given cell and stores the new, + * translated geometry in the model as an atomic change. + */ +mxGraph.prototype.translateCell = function(cell, dx, dy) +{ + var geo = this.model.getGeometry(cell); + + if (geo != null) + { + geo = geo.clone(); + geo.translate(dx, dy); + + if (!geo.relative && this.model.isVertex(cell) && !this.isAllowNegativeCoordinates()) + { + geo.x = Math.max(0, geo.x); + geo.y = Math.max(0, geo.y); + } + + if (geo.relative && !this.model.isEdge(cell)) + { + if (geo.offset == null) + { + geo.offset = new mxPoint(dx, dy); + } + else + { + geo.offset.x += dx; + geo.offset.y += dy; + } + } + + this.model.setGeometry(cell, geo); + } +}; + +/** + * Function: getCellContainmentArea + * + * Returns the <mxRectangle> inside which a cell is to be kept. + * + * Parameters: + * + * cell - <mxCell> for which the area should be returned. + */ +mxGraph.prototype.getCellContainmentArea = function(cell) +{ + if (cell != null && !this.model.isEdge(cell)) + { + var parent = this.model.getParent(cell); + + if (parent == this.getDefaultParent() || parent == this.getCurrentRoot()) + { + return this.getMaximumGraphBounds(); + } + else if (parent != null && parent != this.getDefaultParent()) + { + var g = this.model.getGeometry(parent); + + if (g != null) + { + var x = 0; + var y = 0; + var w = g.width; + var h = g.height; + + if (this.isSwimlane(parent)) + { + var size = this.getStartSize(parent); + + x = size.width; + w -= size.width; + y = size.height; + h -= size.height; + } + + return new mxRectangle(x, y, w, h); + } + } + } + + return null; +}; + +/** + * Function: getMaximumGraphBounds + * + * Returns the bounds inside which the diagram should be kept as an + * <mxRectangle>. + */ +mxGraph.prototype.getMaximumGraphBounds = function() +{ + return this.maximumGraphBounds; +}; + +/** + * Function: constrainChild + * + * Keeps the given cell inside the bounds returned by + * <getCellContainmentArea> for its parent, according to the rules defined by + * <getOverlap> and <isConstrainChild>. This modifies the cell's geometry + * in-place and does not clone it. + * + * Parameters: + * + * cells - <mxCell> which should be constrained. + */ +mxGraph.prototype.constrainChild = function(cell) +{ + if (cell != null) + { + var geo = this.model.getGeometry(cell); + var area = (this.isConstrainChild(cell)) ? + this.getCellContainmentArea(cell) : + this.getMaximumGraphBounds(); + + if (geo != null && area != null) + { + // Keeps child within the content area of the parent + if (!geo.relative && (geo.x < area.x || geo.y < area.y || + area.width < geo.x + geo.width || area.height < geo.y + geo.height)) + { + var overlap = this.getOverlap(cell); + + if (area.width > 0) + { + geo.x = Math.min(geo.x, area.x + area.width - + (1 - overlap) * geo.width); + } + + if (area.height > 0) + { + geo.y = Math.min(geo.y, area.y + area.height - + (1 - overlap) * geo.height); + } + + geo.x = Math.max(geo.x, area.x - geo.width * overlap); + geo.y = Math.max(geo.y, area.y - geo.height * overlap); + } + } + } +}; + +/** + * Function: resetEdges + * + * Resets the control points of the edges that are connected to the given + * cells if not both ends of the edge are in the given cells array. + * + * Parameters: + * + * cells - Array of <mxCells> for which the connected edges should be + * reset. + */ +mxGraph.prototype.resetEdges = function(cells) +{ + if (cells != null) + { + // Prepares a hashtable for faster cell lookups + var hash = new Object(); + + for (var i = 0; i < cells.length; i++) + { + var id = mxCellPath.create(cells[i]); + hash[id] = cells[i]; + } + + this.model.beginUpdate(); + try + { + for (var i = 0; i < cells.length; i++) + { + var edges = this.model.getEdges(cells[i]); + + if (edges != null) + { + for (var j = 0; j < edges.length; j++) + { + var state = this.view.getState(edges[j]); + + var source = (state != null) ? state.getVisibleTerminal(true) : this.view.getVisibleTerminal(edges[j], true); + var target = (state != null) ? state.getVisibleTerminal(false) : this.view.getVisibleTerminal(edges[j], false); + + var sourceId = mxCellPath.create(source); + var targetId = mxCellPath.create(target); + + // Checks if one of the terminals is not in the given array + if (hash[sourceId] == null || hash[targetId] == null) + { + this.resetEdge(edges[j]); + } + } + } + + this.resetEdges(this.model.getChildren(cells[i])); + } + } + finally + { + this.model.endUpdate(); + } + } +}; + +/** + * Function: resetEdge + * + * Resets the control points of the given edge. + * + * Parameters: + * + * edge - <mxCell> whose points should be reset. + */ +mxGraph.prototype.resetEdge = function(edge) +{ + var geo = this.model.getGeometry(edge); + + // Resets the control points + if (geo != null && geo.points != null && geo.points.length > 0) + { + geo = geo.clone(); + geo.points = []; + this.model.setGeometry(edge, geo); + } + + return edge; +}; + +/** + * Group: Cell connecting and connection constraints + */ + +/** + * Function: getAllConnectionConstraints + * + * Returns an array of all <mxConnectionConstraints> for the given terminal. If + * the shape of the given terminal is a <mxStencilShape> then the constraints + * of the corresponding <mxStencil> are returned. + * + * Parameters: + * + * terminal - <mxCellState> that represents the terminal. + * source - Boolean that specifies if the terminal is the source or target. + */ +mxGraph.prototype.getAllConnectionConstraints = function(terminal, source) +{ + if (terminal != null && terminal.shape != null && + terminal.shape instanceof mxStencilShape) + { + if (terminal.shape.stencil != null) + { + return terminal.shape.stencil.constraints; + } + } + + return null; +}; + +/** + * Function: getConnectionConstraint + * + * Returns an <mxConnectionConstraint> that describes the given connection + * point. This result can then be passed to <getConnectionPoint>. + * + * Parameters: + * + * edge - <mxCellState> that represents the edge. + * terminal - <mxCellState> that represents the terminal. + * source - Boolean indicating if the terminal is the source or target. + */ +mxGraph.prototype.getConnectionConstraint = function(edge, terminal, source) +{ + var point = null; + var x = edge.style[(source) ? + mxConstants.STYLE_EXIT_X : + mxConstants.STYLE_ENTRY_X]; + + if (x != null) + { + var y = edge.style[(source) ? + mxConstants.STYLE_EXIT_Y : + mxConstants.STYLE_ENTRY_Y]; + + if (y != null) + { + point = new mxPoint(parseFloat(x), parseFloat(y)); + } + } + + var perimeter = false; + + if (point != null) + { + perimeter = mxUtils.getValue(edge.style, (source) ? mxConstants.STYLE_EXIT_PERIMETER : + mxConstants.STYLE_ENTRY_PERIMETER, true); + } + + return new mxConnectionConstraint(point, perimeter); +}; + +/** + * Function: setConnectionConstraint + * + * Sets the <mxConnectionConstraint> that describes the given connection point. + * If no constraint is given then nothing is changed. To remove an existing + * constraint from the given edge, use an empty constraint instead. + * + * Parameters: + * + * edge - <mxCell> that represents the edge. + * terminal - <mxCell> that represents the terminal. + * source - Boolean indicating if the terminal is the source or target. + * constraint - Optional <mxConnectionConstraint> to be used for this + * connection. + */ +mxGraph.prototype.setConnectionConstraint = function(edge, terminal, source, constraint) +{ + if (constraint != null) + { + this.model.beginUpdate(); + try + { + if (constraint == null || constraint.point == null) + { + this.setCellStyles((source) ? mxConstants.STYLE_EXIT_X : + mxConstants.STYLE_ENTRY_X, null, [edge]); + this.setCellStyles((source) ? mxConstants.STYLE_EXIT_Y : + mxConstants.STYLE_ENTRY_Y, null, [edge]); + this.setCellStyles((source) ? mxConstants.STYLE_EXIT_PERIMETER : + mxConstants.STYLE_ENTRY_PERIMETER, null, [edge]); + } + else if (constraint.point != null) + { + this.setCellStyles((source) ? mxConstants.STYLE_EXIT_X : + mxConstants.STYLE_ENTRY_X, constraint.point.x, [edge]); + this.setCellStyles((source) ? mxConstants.STYLE_EXIT_Y : + mxConstants.STYLE_ENTRY_Y, constraint.point.y, [edge]); + + // Only writes 0 since 1 is default + if (!constraint.perimeter) + { + this.setCellStyles((source) ? mxConstants.STYLE_EXIT_PERIMETER : + mxConstants.STYLE_ENTRY_PERIMETER, '0', [edge]); + } + else + { + this.setCellStyles((source) ? mxConstants.STYLE_EXIT_PERIMETER : + mxConstants.STYLE_ENTRY_PERIMETER, null, [edge]); + } + } + } + finally + { + this.model.endUpdate(); + } + } +}; + +/** + * Function: getConnectionPoint + * + * Returns the nearest point in the list of absolute points or the center + * of the opposite terminal. + * + * Parameters: + * + * vertex - <mxCellState> that represents the vertex. + * constraint - <mxConnectionConstraint> that represents the connection point + * constraint as returned by <getConnectionConstraint>. + */ +mxGraph.prototype.getConnectionPoint = function(vertex, constraint) +{ + var point = null; + + if (vertex != null) + { + var bounds = this.view.getPerimeterBounds(vertex); + var cx = new mxPoint(bounds.getCenterX(), bounds.getCenterY()); + + var direction = vertex.style[mxConstants.STYLE_DIRECTION]; + var r1 = 0; + + // Bounds need to be rotated by 90 degrees for further computation + if (direction != null) + { + if (direction == 'north') + { + r1 += 270; + } + else if (direction == 'west') + { + r1 += 180; + } + else if (direction == 'south') + { + r1 += 90; + } + + // Bounds need to be rotated by 90 degrees for further computation + if (direction == 'north' || direction == 'south') + { + bounds.x += bounds.width / 2 - bounds.height / 2; + bounds.y += bounds.height / 2 - bounds.width / 2; + var tmp = bounds.width; + bounds.width = bounds.height; + bounds.height = tmp; + } + } + + if (constraint.point != null) + { + var sx = 1; + var sy = 1; + var dx = 0; + var dy = 0; + + // LATER: Add flipping support for image shapes + if (vertex.shape instanceof mxStencilShape) + { + var flipH = vertex.style[mxConstants.STYLE_STENCIL_FLIPH]; + var flipV = vertex.style[mxConstants.STYLE_STENCIL_FLIPV]; + + if (direction == 'north' || direction == 'south') + { + var tmp = flipH; + flipH = flipV; + flipV = tmp; + } + + if (flipH) + { + sx = -1; + dx = -bounds.width; + } + + if (flipV) + { + sy = -1; + dy = -bounds.height ; + } + } + + point = new mxPoint(bounds.x + constraint.point.x * bounds.width * sx - dx, + bounds.y + constraint.point.y * bounds.height * sy - dy); + } + + // Rotation for direction before projection on perimeter + var r2 = vertex.style[mxConstants.STYLE_ROTATION] || 0; + + if (constraint.perimeter) + { + if (r1 != 0 && point != null) + { + // Only 90 degrees steps possible here so no trig needed + var cos = 0; + var sin = 0; + + if (r1 == 90) + { + sin = 1; + } + else if (r1 == 180) + { + cos = -1; + } + else if (r2 == 270) + { + sin = -1; + } + + point = mxUtils.getRotatedPoint(point, cos, sin, cx); + } + + if (point != null && constraint.perimeter) + { + point = this.view.getPerimeterPoint(vertex, point, false); + } + } + else + { + r2 += r1; + } + + // Generic rotation after projection on perimeter + if (r2 != 0 && point != null) + { + var rad = mxUtils.toRadians(r2); + var cos = Math.cos(rad); + var sin = Math.sin(rad); + + point = mxUtils.getRotatedPoint(point, cos, sin, cx); + } + } + + return point; +}; + +/** + * Function: connectCell + * + * Connects the specified end of the given edge to the given terminal + * using <cellConnected> and fires <mxEvent.CONNECT_CELL> while the + * transaction is in progress. Returns the updated edge. + * + * Parameters: + * + * edge - <mxCell> whose terminal should be updated. + * terminal - <mxCell> that represents the new terminal to be used. + * source - Boolean indicating if the new terminal is the source or target. + * constraint - Optional <mxConnectionConstraint> to be used for this + * connection. + */ +mxGraph.prototype.connectCell = function(edge, terminal, source, constraint) +{ + this.model.beginUpdate(); + try + { + var previous = this.model.getTerminal(edge, source); + this.cellConnected(edge, terminal, source, constraint); + this.fireEvent(new mxEventObject(mxEvent.CONNECT_CELL, + 'edge', edge, 'terminal', terminal, 'source', source, + 'previous', previous)); + } + finally + { + this.model.endUpdate(); + } + + return edge; +}; + +/** + * Function: cellConnected + * + * Sets the new terminal for the given edge and resets the edge points if + * <resetEdgesOnConnect> is true. This method fires + * <mxEvent.CELL_CONNECTED> while the transaction is in progress. + * + * Parameters: + * + * edge - <mxCell> whose terminal should be updated. + * terminal - <mxCell> that represents the new terminal to be used. + * source - Boolean indicating if the new terminal is the source or target. + * constraint - <mxConnectionConstraint> to be used for this connection. + */ +mxGraph.prototype.cellConnected = function(edge, terminal, source, constraint) +{ + if (edge != null) + { + this.model.beginUpdate(); + try + { + var previous = this.model.getTerminal(edge, source); + + // Updates the constraint + this.setConnectionConstraint(edge, terminal, source, constraint); + + // Checks if the new terminal is a port, uses the ID of the port in the + // style and the parent of the port as the actual terminal of the edge. + if (this.isPortsEnabled()) + { + var id = null; + + if (this.isPort(terminal)) + { + id = terminal.getId(); + terminal = this.getTerminalForPort(terminal, source); + } + + // Sets or resets all previous information for connecting to a child port + var key = (source) ? mxConstants.STYLE_SOURCE_PORT : + mxConstants.STYLE_TARGET_PORT; + this.setCellStyles(key, id, [edge]); + } + + this.model.setTerminal(edge, terminal, source); + + if (this.resetEdgesOnConnect) + { + this.resetEdge(edge); + } + + this.fireEvent(new mxEventObject(mxEvent.CELL_CONNECTED, + 'edge', edge, 'terminal', terminal, 'source', source, + 'previous', previous)); + } + finally + { + this.model.endUpdate(); + } + } +}; + +/** + * Function: disconnectGraph + * + * Disconnects the given edges from the terminals which are not in the + * given array. + * + * Parameters: + * + * cells - Array of <mxCells> to be disconnected. + */ +mxGraph.prototype.disconnectGraph = function(cells) +{ + if (cells != null) + { + this.model.beginUpdate(); + try + { + var scale = this.view.scale; + var tr = this.view.translate; + + // Prepares a hashtable for faster cell lookups + var hash = new Object(); + + for (var i = 0; i < cells.length; i++) + { + var id = mxCellPath.create(cells[i]); + hash[id] = cells[i]; + } + + for (var i = 0; i < cells.length; i++) + { + if (this.model.isEdge(cells[i])) + { + var geo = this.model.getGeometry(cells[i]); + + if (geo != null) + { + var state = this.view.getState(cells[i]); + var pstate = this.view.getState( + this.model.getParent(cells[i])); + + if (state != null && + pstate != null) + { + geo = geo.clone(); + + var dx = -pstate.origin.x; + var dy = -pstate.origin.y; + var pts = state.absolutePoints; + + var src = this.model.getTerminal(cells[i], true); + + if (src != null && this.isCellDisconnectable(cells[i], src, true)) + { + var srcId = mxCellPath.create(src); + + while (src != null && hash[srcId] == null) + { + src = this.model.getParent(src); + srcId = mxCellPath.create(src); + } + + if (src == null) + { + geo.setTerminalPoint( + new mxPoint(pts[0].x / scale - tr.x + dx, + pts[0].y / scale - tr.y + dy), true); + this.model.setTerminal(cells[i], null, true); + } + } + + var trg = this.model.getTerminal(cells[i], false); + + if (trg != null && this.isCellDisconnectable(cells[i], trg, false)) + { + var trgId = mxCellPath.create(trg); + + while (trg != null && hash[trgId] == null) + { + trg = this.model.getParent(trg); + trgId = mxCellPath.create(trg); + } + + if (trg == null) + { + var n = pts.length - 1; + geo.setTerminalPoint( + new mxPoint(pts[n].x / scale - tr.x + dx, + pts[n].y / scale - tr.y + dy), false); + this.model.setTerminal(cells[i], null, false); + } + } + + this.model.setGeometry(cells[i], geo); + } + } + } + } + } + finally + { + this.model.endUpdate(); + } + } +}; + +/** + * Group: Drilldown + */ + +/** + * Function: getCurrentRoot + * + * Returns the current root of the displayed cell hierarchy. This is a + * shortcut to <mxGraphView.currentRoot> in <view>. + */ + mxGraph.prototype.getCurrentRoot = function() + { + return this.view.currentRoot; + }; + + /** + * Function: getTranslateForRoot + * + * Returns the translation to be used if the given cell is the root cell as + * an <mxPoint>. This implementation returns null. + * + * Example: + * + * To keep the children at their absolute position while stepping into groups, + * this function can be overridden as follows. + * + * (code) + * var offset = new mxPoint(0, 0); + * + * while (cell != null) + * { + * var geo = this.model.getGeometry(cell); + * + * if (geo != null) + * { + * offset.x -= geo.x; + * offset.y -= geo.y; + * } + * + * cell = this.model.getParent(cell); + * } + * + * return offset; + * (end) + * + * Parameters: + * + * cell - <mxCell> that represents the root. + */ +mxGraph.prototype.getTranslateForRoot = function(cell) +{ + return null; +}; + +/** + * Function: isPort + * + * Returns true if the given cell is a "port", that is, when connecting to + * it, the cell returned by getTerminalForPort should be used as the + * terminal and the port should be referenced by the ID in either the + * mxConstants.STYLE_SOURCE_PORT or the or the + * mxConstants.STYLE_TARGET_PORT. Note that a port should not be movable. + * This implementation always returns false. + * + * A typical implementation is the following: + * + * (code) + * graph.isPort = function(cell) + * { + * var geo = this.getCellGeometry(cell); + * + * return (geo != null) ? geo.relative : false; + * }; + * (end) + * + * Parameters: + * + * cell - <mxCell> that represents the port. + */ +mxGraph.prototype.isPort = function(cell) +{ + return false; +}; + +/** + * Function: getTerminalForPort + * + * Returns the terminal to be used for a given port. This implementation + * always returns the parent cell. + * + * Parameters: + * + * cell - <mxCell> that represents the port. + * source - If the cell is the source or target port. + */ +mxGraph.prototype.getTerminalForPort = function(cell, source) +{ + return this.model.getParent(cell); +}; + +/** + * Function: getChildOffsetForCell + * + * Returns the offset to be used for the cells inside the given cell. The + * root and layer cells may be identified using <mxGraphModel.isRoot> and + * <mxGraphModel.isLayer>. For all other current roots, the + * <mxGraphView.currentRoot> field points to the respective cell, so that + * the following holds: cell == this.view.currentRoot. This implementation + * returns null. + * + * Parameters: + * + * cell - <mxCell> whose offset should be returned. + */ +mxGraph.prototype.getChildOffsetForCell = function(cell) +{ + return null; +}; + +/** + * Function: enterGroup + * + * Uses the given cell as the root of the displayed cell hierarchy. If no + * cell is specified then the selection cell is used. The cell is only used + * if <isValidRoot> returns true. + * + * Parameters: + * + * cell - Optional <mxCell> to be used as the new root. Default is the + * selection cell. + */ +mxGraph.prototype.enterGroup = function(cell) +{ + cell = cell || this.getSelectionCell(); + + if (cell != null && this.isValidRoot(cell)) + { + this.view.setCurrentRoot(cell); + this.clearSelection(); + } +}; + +/** + * Function: exitGroup + * + * Changes the current root to the next valid root in the displayed cell + * hierarchy. + */ +mxGraph.prototype.exitGroup = function() +{ + var root = this.model.getRoot(); + var current = this.getCurrentRoot(); + + if (current != null) + { + var next = this.model.getParent(current); + + // Finds the next valid root in the hierarchy + while (next != root && !this.isValidRoot(next) && + this.model.getParent(next) != root) + { + next = this.model.getParent(next); + } + + // Clears the current root if the new root is + // the model's root or one of the layers. + if (next == root || this.model.getParent(next) == root) + { + this.view.setCurrentRoot(null); + } + else + { + this.view.setCurrentRoot(next); + } + + var state = this.view.getState(current); + + // Selects the previous root in the graph + if (state != null) + { + this.setSelectionCell(current); + } + } +}; + +/** + * Function: home + * + * Uses the root of the model as the root of the displayed cell hierarchy + * and selects the previous root. + */ +mxGraph.prototype.home = function() +{ + var current = this.getCurrentRoot(); + + if (current != null) + { + this.view.setCurrentRoot(null); + var state = this.view.getState(current); + + if (state != null) + { + this.setSelectionCell(current); + } + } +}; + +/** + * Function: isValidRoot + * + * Returns true if the given cell is a valid root for the cell display + * hierarchy. This implementation returns true for all non-null values. + * + * Parameters: + * + * cell - <mxCell> which should be checked as a possible root. + */ +mxGraph.prototype.isValidRoot = function(cell) +{ + return (cell != null); +}; + +/** + * Group: Graph display + */ + +/** + * Function: getGraphBounds + * + * Returns the bounds of the visible graph. Shortcut to + * <mxGraphView.getGraphBounds>. See also: <getBoundingBoxFromGeometry>. + */ + mxGraph.prototype.getGraphBounds = function() + { + return this.view.getGraphBounds(); + }; + +/** + * Function: getCellBounds + * + * Returns the scaled, translated bounds for the given cell. See + * <mxGraphView.getBounds> for arrays. + * + * Parameters: + * + * cell - <mxCell> whose bounds should be returned. + * includeEdge - Optional boolean that specifies if the bounds of + * the connected edges should be included. Default is false. + * includeDescendants - Optional boolean that specifies if the bounds + * of all descendants should be included. Default is false. + */ +mxGraph.prototype.getCellBounds = function(cell, includeEdges, includeDescendants) +{ + var cells = [cell]; + + // Includes all connected edges + if (includeEdges) + { + cells = cells.concat(this.model.getEdges(cell)); + } + + var result = this.view.getBounds(cells); + + // Recursively includes the bounds of the children + if (includeDescendants) + { + var childCount = this.model.getChildCount(cell); + + for (var i = 0; i < childCount; i++) + { + var tmp = this.getCellBounds(this.model.getChildAt(cell, i), + includeEdges, true); + + if (result != null) + { + result.add(tmp); + } + else + { + result = tmp; + } + } + } + + return result; +}; + +/** + * Function: getBoundingBoxFromGeometry + * + * 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: + * + * (code) + * var cells = graph.getChildCells(graph.getDefaultParent(), true, true); + * var bounds = graph.getBoundingBoxFromGeometry(cells, true); + * (end) + * + * This can then be used to move cells to the origin: + * + * (code) + * if (bounds.x < 0 || bounds.y < 0) + * { + * graph.moveCells(cells, -Math.min(bounds.x, 0), -Math.min(bounds.y, 0)) + * } + * (end) + * + * Or to translate the graph view: + * + * (code) + * if (bounds.x < 0 || bounds.y < 0) + * { + * graph.view.setTranslate(-Math.min(bounds.x, 0), -Math.min(bounds.y, 0)); + * } + * (end) + * + * Parameters: + * + * cells - Array of <mxCells> whose bounds should be returned. + * includeEdges - Specifies if edge bounds should be included by computing + * the bounding box for all points its geometry. Default is false. + */ +mxGraph.prototype.getBoundingBoxFromGeometry = function(cells, includeEdges) +{ + includeEdges = (includeEdges != null) ? includeEdges : false; + var result = null; + + if (cells != null) + { + for (var i = 0; i < cells.length; i++) + { + if (includeEdges || this.model.isVertex(cells[i])) + { + // Computes the bounding box for the points in the geometry + var geo = this.getCellGeometry(cells[i]); + + if (geo != null) + { + var pts = geo.points; + + if (pts != null && pts.length > 0) + { + var tmp = new mxRectangle(pts[0].x, pts[0].y, 0, 0); + var addPoint = function(pt) + { + if (pt != null) + { + tmp.add(new mxRectangle(pt.x, pt.y, 0, 0)); + } + }; + + for (var j = 1; j < pts.length; j++) + { + addPoint(pts[j]); + } + + addPoint(geo.getTerminalPoint(true)); + addPoint(geo.getTerminalPoint(false)); + } + + if (result == null) + { + result = new mxRectangle(geo.x, geo.y, geo.width, geo.height); + } + else + { + result.add(geo); + } + } + } + } + } + + return result; +}; + +/** + * Function: refresh + * + * Clears all cell states or the states for the hierarchy starting at the + * given cell and validates the graph. This fires a refresh event as the + * last step. + * + * Parameters: + * + * cell - Optional <mxCell> for which the cell states should be cleared. + */ +mxGraph.prototype.refresh = function(cell) +{ + this.view.clear(cell, cell == null); + this.view.validate(); + this.sizeDidChange(); + this.fireEvent(new mxEventObject(mxEvent.REFRESH)); +}; + +/** + * Function: snap + * + * Snaps the given numeric value to the grid if <gridEnabled> is true. + * + * Parameters: + * + * value - Numeric value to be snapped to the grid. + */ +mxGraph.prototype.snap = function(value) +{ + if (this.gridEnabled) + { + value = Math.round(value / this.gridSize ) * this.gridSize; + } + + return value; +}; + +/** + * Function: panGraph + * + * Shifts the graph display by the given amount. This is used to preview + * panning operations, use <mxGraphView.setTranslate> to set a persistent + * translation of the view. Fires <mxEvent.PAN>. + * + * Parameters: + * + * dx - Amount to shift the graph along the x-axis. + * dy - Amount to shift the graph along the y-axis. + */ +mxGraph.prototype.panGraph = function(dx, dy) +{ + if (this.useScrollbarsForPanning && mxUtils.hasScrollbars(this.container)) + { + this.container.scrollLeft = -dx; + this.container.scrollTop = -dy; + } + else + { + var canvas = this.view.getCanvas(); + + if (this.dialect == mxConstants.DIALECT_SVG) + { + // Puts everything inside the container in a DIV so that it + // can be moved without changing the state of the container + if (dx == 0 && dy == 0) + { + // Workaround for ignored removeAttribute on SVG element in IE9 standards + if (mxClient.IS_IE) + { + canvas.setAttribute('transform', 'translate('+ dx + ',' + dy + ')'); + } + else + { + canvas.removeAttribute('transform'); + } + + if (this.shiftPreview1 != null) + { + var child = this.shiftPreview1.firstChild; + + while (child != null) + { + var next = child.nextSibling; + this.container.appendChild(child); + child = next; + } + + this.shiftPreview1.parentNode.removeChild(this.shiftPreview1); + this.shiftPreview1 = null; + + this.container.appendChild(canvas.parentNode); + + child = this.shiftPreview2.firstChild; + + while (child != null) + { + var next = child.nextSibling; + this.container.appendChild(child); + child = next; + } + + this.shiftPreview2.parentNode.removeChild(this.shiftPreview2); + this.shiftPreview2 = null; + } + } + else + { + canvas.setAttribute('transform', 'translate('+ dx + ',' + dy + ')'); + + if (this.shiftPreview1 == null) + { + // Needs two divs for stuff before and after the SVG element + this.shiftPreview1 = document.createElement('div'); + this.shiftPreview1.style.position = 'absolute'; + this.shiftPreview1.style.overflow = 'visible'; + + this.shiftPreview2 = document.createElement('div'); + this.shiftPreview2.style.position = 'absolute'; + this.shiftPreview2.style.overflow = 'visible'; + + var current = this.shiftPreview1; + var child = this.container.firstChild; + + while (child != null) + { + var next = child.nextSibling; + + // SVG element is moved via transform attribute + if (child != canvas.parentNode) + { + current.appendChild(child); + } + else + { + current = this.shiftPreview2; + } + + child = next; + } + + this.container.insertBefore(this.shiftPreview1, canvas.parentNode); + this.container.appendChild(this.shiftPreview2); + } + + this.shiftPreview1.style.left = dx + 'px'; + this.shiftPreview1.style.top = dy + 'px'; + this.shiftPreview2.style.left = dx + 'px'; + this.shiftPreview2.style.top = dy + 'px'; + } + } + else + { + canvas.style.left = dx + 'px'; + canvas.style.top = dy + 'px'; + } + + this.panDx = dx; + this.panDy = dy; + + this.fireEvent(new mxEventObject(mxEvent.PAN)); + } +}; + +/** + * Function: zoomIn + * + * Zooms into the graph by <zoomFactor>. + */ +mxGraph.prototype.zoomIn = function() +{ + this.zoom(this.zoomFactor); +}; + +/** + * Function: zoomOut + * + * Zooms out of the graph by <zoomFactor>. + */ +mxGraph.prototype.zoomOut = function() +{ + this.zoom(1 / this.zoomFactor); +}; + +/** + * Function: zoomActual + * + * Resets the zoom and panning in the view. + */ +mxGraph.prototype.zoomActual = function() +{ + if (this.view.scale == 1) + { + this.view.setTranslate(0, 0); + } + else + { + this.view.translate.x = 0; + this.view.translate.y = 0; + + this.view.setScale(1); + } +}; + +/** + * Function: zoomTo + * + * Zooms the graph to the given scale with an optional boolean center + * argument, which is passd to <zoom>. + */ +mxGraph.prototype.zoomTo = function(scale, center) +{ + this.zoom(scale / this.view.scale, center); +}; + +/** + * Function: zoom + * + * 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. + */ +mxGraph.prototype.zoom = function(factor, center) +{ + center = (center != null) ? center : this.centerZoom; + var scale = this.view.scale * factor; + var state = this.view.getState(this.getSelectionCell()); + + if (this.keepSelectionVisibleOnZoom && state != null) + { + var rect = new mxRectangle( + state.x * factor, + state.y * factor, + state.width * factor, + state.height * factor); + + // Refreshes the display only once if a + // scroll is carried out + this.view.scale = scale; + + if (!this.scrollRectToVisible(rect)) + { + this.view.revalidate(); + + // Forces an event to be fired but does not revalidate again + this.view.setScale(scale); + } + } + else if (center && !mxUtils.hasScrollbars(this.container)) + { + var dx = this.container.offsetWidth; + var dy = this.container.offsetHeight; + + if (factor > 1) + { + var f = (factor -1) / (scale * 2); + dx *= -f; + dy *= -f; + } + else + { + var f = (1/factor -1) / (this.view.scale * 2); + dx *= f; + dy *= f; + } + + this.view.scaleAndTranslate(scale, + this.view.translate.x + dx, + this.view.translate.y + dy); + } + else + { + this.view.setScale(scale); + + if (mxUtils.hasScrollbars(this.container)) + { + var dx = 0; + var dy = 0; + + if (center) + { + dx = this.container.offsetWidth * (factor - 1) / 2; + dy = this.container.offsetHeight * (factor - 1) / 2; + } + + this.container.scrollLeft = Math.round(this.container.scrollLeft * factor + dx); + this.container.scrollTop = Math.round(this.container.scrollTop * factor + dy); + } + } +}; + +/** + * Function: zoomToRect + * + * Zooms the graph to the specified rectangle. If the rectangle does not have same aspect + * ratio as the display container, it is increased in the smaller relative dimension only + * until the aspect match. The original rectangle is centralised within this expanded one. + * + * Note that the input rectangular must be un-scaled and un-translated. + * + * Parameters: + * + * rect - The un-scaled and un-translated rectangluar region that should be just visible + * after the operation + */ +mxGraph.prototype.zoomToRect = function(rect) +{ + var scaleX = this.container.clientWidth / rect.width; + var scaleY = this.container.clientHeight / rect.height; + var aspectFactor = scaleX / scaleY; + + // Remove any overlap of the rect outside the client area + rect.x = Math.max(0, rect.x); + rect.y = Math.max(0, rect.y); + var rectRight = Math.min(this.container.scrollWidth, rect.x + rect.width); + var rectBottom = Math.min(this.container.scrollHeight, rect.y + rect.height); + rect.width = rectRight - rect.x; + rect.height = rectBottom - rect.y; + + // The selection area has to be increased to the same aspect + // ratio as the container, centred around the centre point of the + // original rect passed in. + if (aspectFactor < 1.0) + { + // Height needs increasing + var newHeight = rect.height / aspectFactor; + var deltaHeightBuffer = (newHeight - rect.height) / 2.0; + rect.height = newHeight; + + // Assign up to half the buffer to the upper part of the rect, not crossing 0 + // put the rest on the bottom + var upperBuffer = Math.min(rect.y , deltaHeightBuffer); + rect.y = rect.y - upperBuffer; + + // Check if the bottom has extended too far + rectBottom = Math.min(this.container.scrollHeight, rect.y + rect.height); + rect.height = rectBottom - rect.y; + } + else + { + // Width needs increasing + var newWidth = rect.width * aspectFactor; + var deltaWidthBuffer = (newWidth - rect.width) / 2.0; + rect.width = newWidth; + + // Assign up to half the buffer to the upper part of the rect, not crossing 0 + // put the rest on the bottom + var leftBuffer = Math.min(rect.x , deltaWidthBuffer); + rect.x = rect.x - leftBuffer; + + // Check if the right hand side has extended too far + rectRight = Math.min(this.container.scrollWidth, rect.x + rect.width); + rect.width = rectRight - rect.x; + } + + var scale = this.container.clientWidth / rect.width; + + if (!mxUtils.hasScrollbars(this.container)) + { + this.view.scaleAndTranslate(scale, -rect.x, -rect.y); + } + else + { + this.view.setScale(scale); + this.container.scrollLeft = Math.round(rect.x * scale); + this.container.scrollTop = Math.round(rect.y * scale); + } +}; + +/** + * Function: fit + * + * 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. + * + * (code) + * graph.fit(); + * graph.view.rendering = true; + * graph.refresh(); + * (end) + * + * Parameters: + * + * border - Optional number that specifies the border. Default is 0. + * keepOrigin - Optional boolean that specifies if the translate should be + * changed. Default is false. + */ +mxGraph.prototype.fit = function(border, keepOrigin) +{ + if (this.container != null) + { + border = (border != null) ? border : 0; + keepOrigin = (keepOrigin != null) ? keepOrigin : false; + + var w1 = this.container.clientWidth; + var h1 = this.container.clientHeight; + + var bounds = this.view.getGraphBounds(); + + if (keepOrigin && bounds.x != null && bounds.y != null) + { + bounds.width += bounds.x; + bounds.height += bounds.y; + bounds.x = 0; + bounds.y = 0; + } + + var s = this.view.scale; + var w2 = bounds.width / s; + var h2 = bounds.height / s; + + // Fits to the size of the background image if required + if (this.backgroundImage != null) + { + w2 = Math.max(w2, this.backgroundImage.width - bounds.x / s); + h2 = Math.max(h2, this.backgroundImage.height - bounds.y / s); + } + + var b = (keepOrigin) ? border : 2 * border; + var s2 = Math.floor(Math.min(w1 / (w2 + b), h1 / (h2 + b)) * 100) / 100; + + if (this.minFitScale != null) + { + s2 = Math.max(s2, this.minFitScale); + } + + if (this.maxFitScale != null) + { + s2 = Math.min(s2, this.maxFitScale); + } + + if (!keepOrigin) + { + if (!mxUtils.hasScrollbars(this.container)) + { + var x0 = (bounds.x != null) ? Math.floor(this.view.translate.x - bounds.x / s + border + 1) : border; + var y0 = (bounds.y != null) ? Math.floor(this.view.translate.y - bounds.y / s + border + 1) : border; + + this.view.scaleAndTranslate(s2, x0, y0); + } + else + { + this.view.setScale(s2); + + if (bounds.x != null) + { + this.container.scrollLeft = Math.round(bounds.x / s) * s2 - border - + Math.max(0, (this.container.clientWidth - w2 * s2) / 2); + } + + if (bounds.y != null) + { + this.container.scrollTop = Math.round(bounds.y / s) * s2 - border - + Math.max(0, (this.container.clientHeight - h2 * s2) / 2); + } + } + } + else if (this.view.scale != s2) + { + this.view.setScale(s2); + } + } + + return this.view.scale; +}; + +/** + * Function: scrollCellToVisible + * + * Pans the graph so that it shows the given cell. Optionally the cell may + * be centered in the container. + * + * To center a given graph if the <container> has no scrollbars, use the following code. + * + * [code] + * var bounds = graph.getGraphBounds(); + * graph.view.setTranslate(-bounds.x - (bounds.width - container.clientWidth) / 2, + * -bounds.y - (bounds.height - container.clientHeight) / 2); + * [/code] + * + * Parameters: + * + * cell - <mxCell> to be made visible. + * center - Optional boolean flag. Default is false. + */ +mxGraph.prototype.scrollCellToVisible = function(cell, center) +{ + var x = -this.view.translate.x; + var y = -this.view.translate.y; + + var state = this.view.getState(cell); + + if (state != null) + { + var bounds = new mxRectangle(x + state.x, y + state.y, state.width, + state.height); + + if (center && this.container != null) + { + var w = this.container.clientWidth; + var h = this.container.clientHeight; + + bounds.x = bounds.getCenterX() - w / 2; + bounds.width = w; + bounds.y = bounds.getCenterY() - h / 2; + bounds.height = h; + } + + if (this.scrollRectToVisible(bounds)) + { + // Triggers an update via the view's event source + this.view.setTranslate(this.view.translate.x, this.view.translate.y); + } + } +}; + +/** + * Function: scrollRectToVisible + * + * Pans the graph so that it shows the given rectangle. + * + * Parameters: + * + * rect - <mxRectangle> to be made visible. + */ +mxGraph.prototype.scrollRectToVisible = function(rect) +{ + var isChanged = false; + + if (rect != null) + { + var w = this.container.offsetWidth; + var h = this.container.offsetHeight; + + var widthLimit = Math.min(w, rect.width); + var heightLimit = Math.min(h, rect.height); + + if (mxUtils.hasScrollbars(this.container)) + { + var c = this.container; + rect.x += this.view.translate.x; + rect.y += this.view.translate.y; + var dx = c.scrollLeft - rect.x; + var ddx = Math.max(dx - c.scrollLeft, 0); + + if (dx > 0) + { + c.scrollLeft -= dx + 2; + } + else + { + dx = rect.x + widthLimit - c.scrollLeft - c.clientWidth; + + if (dx > 0) + { + c.scrollLeft += dx + 2; + } + } + + var dy = c.scrollTop - rect.y; + var ddy = Math.max(0, dy - c.scrollTop); + + if (dy > 0) + { + c.scrollTop -= dy + 2; + } + else + { + dy = rect.y + heightLimit - c.scrollTop - c.clientHeight; + + if (dy > 0) + { + c.scrollTop += dy + 2; + } + } + + if (!this.useScrollbarsForPanning && (ddx != 0 || ddy != 0)) + { + this.view.setTranslate(ddx, ddy); + } + } + else + { + var x = -this.view.translate.x; + var y = -this.view.translate.y; + + var s = this.view.scale; + + if (rect.x + widthLimit > x + w) + { + this.view.translate.x -= (rect.x + widthLimit - w - x) / s; + isChanged = true; + } + + if (rect.y + heightLimit > y + h) + { + this.view.translate.y -= (rect.y + heightLimit - h - y) / s; + isChanged = true; + } + + if (rect.x < x) + { + this.view.translate.x += (x - rect.x) / s; + isChanged = true; + } + + if (rect.y < y) + { + this.view.translate.y += (y - rect.y) / s; + isChanged = true; + } + + if (isChanged) + { + this.view.refresh(); + + // Repaints selection marker (ticket 18) + if (this.selectionCellsHandler != null) + { + this.selectionCellsHandler.refresh(); + } + } + } + } + + return isChanged; +}; + +/** + * Function: getCellGeometry + * + * Returns the <mxGeometry> for the given cell. This implementation uses + * <mxGraphModel.getGeometry>. Subclasses can override this to implement + * specific geometries for cells in only one graph, that is, it can return + * geometries that depend on the current state of the view. + * + * Parameters: + * + * cell - <mxCell> whose geometry should be returned. + */ +mxGraph.prototype.getCellGeometry = function(cell) +{ + return this.model.getGeometry(cell); +}; + +/** + * Function: isCellVisible + * + * Returns true if the given cell is visible in this graph. This + * implementation uses <mxGraphModel.isVisible>. Subclassers can override + * this to implement specific visibility for cells in only one graph, that + * is, without affecting the visible state of the cell. + * + * When using dynamic filter expressions for cell visibility, then the + * graph should be revalidated after the filter expression has changed. + * + * Parameters: + * + * cell - <mxCell> whose visible state should be returned. + */ +mxGraph.prototype.isCellVisible = function(cell) +{ + return this.model.isVisible(cell); +}; + +/** + * Function: isCellCollapsed + * + * Returns true if the given cell is collapsed in this graph. This + * implementation uses <mxGraphModel.isCollapsed>. Subclassers can override + * this to implement specific collapsed states for cells in only one graph, + * that is, without affecting the collapsed state of the cell. + * + * When using dynamic filter expressions for the collapsed state, then the + * graph should be revalidated after the filter expression has changed. + * + * Parameters: + * + * cell - <mxCell> whose collapsed state should be returned. + */ +mxGraph.prototype.isCellCollapsed = function(cell) +{ + return this.model.isCollapsed(cell); +}; + +/** + * Function: isCellConnectable + * + * Returns true if the given cell is connectable in this graph. This + * implementation uses <mxGraphModel.isConnectable>. Subclassers can override + * this to implement specific connectable states for cells in only one graph, + * that is, without affecting the connectable state of the cell in the model. + * + * Parameters: + * + * cell - <mxCell> whose connectable state should be returned. + */ +mxGraph.prototype.isCellConnectable = function(cell) +{ + return this.model.isConnectable(cell); +}; + +/** + * Function: isOrthogonal + * + * Returns true if perimeter points should be computed such that the + * resulting edge has only horizontal or vertical segments. + * + * Parameters: + * + * edge - <mxCellState> that represents the edge. + */ +mxGraph.prototype.isOrthogonal = function(edge) +{ + var orthogonal = edge.style[mxConstants.STYLE_ORTHOGONAL]; + + if (orthogonal != null) + { + return orthogonal; + } + + var tmp = this.view.getEdgeStyle(edge); + + return tmp == mxEdgeStyle.SegmentConnector || + tmp == mxEdgeStyle.ElbowConnector || + tmp == mxEdgeStyle.SideToSide || + tmp == mxEdgeStyle.TopToBottom || + tmp == mxEdgeStyle.EntityRelation || + tmp == mxEdgeStyle.OrthConnector; +}; + +/** + * Function: isLoop + * + * Returns true if the given cell state is a loop. + * + * Parameters: + * + * state - <mxCellState> that represents a potential loop. + */ +mxGraph.prototype.isLoop = function(state) +{ + var src = state.getVisibleTerminalState(true); + var trg = state.getVisibleTerminalState(false); + + return (src != null && src == trg); +}; + +/** + * Function: isCloneEvent + * + * Returns true if the given event is a clone event. This implementation + * returns true if control is pressed. + */ +mxGraph.prototype.isCloneEvent = function(evt) +{ + return mxEvent.isControlDown(evt); +}; + +/** + * Function: isToggleEvent + * + * 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. + */ +mxGraph.prototype.isToggleEvent = function(evt) +{ + return (mxClient.IS_MAC) ? mxEvent.isMetaDown(evt) : mxEvent.isControlDown(evt); +}; + +/** + * Function: isGridEnabledEvent + * + * Returns true if the given mouse event should be aligned to the grid. + */ +mxGraph.prototype.isGridEnabledEvent = function(evt) +{ + return evt != null && !mxEvent.isAltDown(evt); +}; + +/** + * Function: isConstrainedEvent + * + * Returns true if the given mouse event should be aligned to the grid. + */ +mxGraph.prototype.isConstrainedEvent = function(evt) +{ + return mxEvent.isShiftDown(evt); +}; + +/** + * Function: isForceMarqueeEvent + * + * Returns true if the given event forces marquee selection. This implementation + * returns true if alt is pressed. + */ +mxGraph.prototype.isForceMarqueeEvent = function(evt) +{ + return mxEvent.isAltDown(evt); +}; + +/** + * Group: Validation + */ + +/** + * Function: validationAlert + * + * Displays the given validation error in a dialog. This implementation uses + * mxUtils.alert. + */ +mxGraph.prototype.validationAlert = function(message) +{ + mxUtils.alert(message); +}; + +/** + * Function: isEdgeValid + * + * Checks if the return value of <getEdgeValidationError> for the given + * arguments is null. + * + * Parameters: + * + * edge - <mxCell> that represents the edge to validate. + * source - <mxCell> that represents the source terminal. + * target - <mxCell> that represents the target terminal. + */ +mxGraph.prototype.isEdgeValid = function(edge, source, target) +{ + return this.getEdgeValidationError(edge, source, target) == null; +}; + +/** + * Function: getEdgeValidationError + * + * 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. + * + * (code) + * graph.getEdgeValidationError = function(edge, source, target) + * { + * if (source != null && target != null && + * this.model.getValue(source) != null && + * this.model.getValue(target) != null) + * { + * if (target is not valid for source) + * { + * return 'Invalid Target'; + * } + * } + * + * // "Supercall" + * return mxGraph.prototype.getEdgeValidationError.apply(this, arguments); + * } + * (end) + * + * Parameters: + * + * edge - <mxCell> that represents the edge to validate. + * source - <mxCell> that represents the source terminal. + * target - <mxCell> that represents the target terminal. + */ +mxGraph.prototype.getEdgeValidationError = function(edge, source, target) +{ + if (edge != null && !this.isAllowDanglingEdges() && (source == null || target == null)) + { + return ''; + } + + if (edge != null && this.model.getTerminal(edge, true) == null && + this.model.getTerminal(edge, false) == null) + { + return null; + } + + // Checks if we're dealing with a loop + if (!this.allowLoops && source == target && source != null) + { + return ''; + } + + // Checks if the connection is generally allowed + if (!this.isValidConnection(source, target)) + { + return ''; + } + + if (source != null && target != null) + { + var error = ''; + + // Checks if the cells are already connected + // and adds an error message if required + if (!this.multigraph) + { + var tmp = this.model.getEdgesBetween(source, target, true); + + // Checks if the source and target are not connected by another edge + if (tmp.length > 1 || (tmp.length == 1 && tmp[0] != edge)) + { + error += (mxResources.get(this.alreadyConnectedResource) || + this.alreadyConnectedResource)+'\n'; + } + } + + // Gets the number of outgoing edges from the source + // and the number of incoming edges from the target + // without counting the edge being currently changed. + var sourceOut = this.model.getDirectedEdgeCount(source, true, edge); + var targetIn = this.model.getDirectedEdgeCount(target, false, edge); + + // Checks the change against each multiplicity rule + if (this.multiplicities != null) + { + for (var i = 0; i < this.multiplicities.length; i++) + { + var err = this.multiplicities[i].check(this, edge, source, + target, sourceOut, targetIn); + + if (err != null) + { + error += err; + } + } + } + + // Validates the source and target terminals independently + var err = this.validateEdge(edge, source, target); + + if (err != null) + { + error += err; + } + + return (error.length > 0) ? error : null; + } + + return (this.allowDanglingEdges) ? null : ''; +}; + +/** + * Function: validateEdge + * + * Hook method for subclassers to return an error message for the given + * edge and terminals. This implementation returns null. + * + * Parameters: + * + * edge - <mxCell> that represents the edge to validate. + * source - <mxCell> that represents the source terminal. + * target - <mxCell> that represents the target terminal. + */ +mxGraph.prototype.validateEdge = function(edge, source, target) +{ + return null; +}; + +/** + * Function: validateGraph + * + * Validates the graph by validating each descendant of the given cell or + * the root of the model. Context is an object that contains the validation + * state for the complete validation run. The validation errors are + * attached to their cells using <setCellWarning>. This function returns true + * if no validation errors exist in the graph. + * + * Paramters: + * + * cell - Optional <mxCell> to start the validation recursion. Default is + * the graph root. + * context - Object that represents the global validation state. + */ +mxGraph.prototype.validateGraph = function(cell, context) +{ + cell = (cell != null) ? cell : this.model.getRoot(); + context = (context != null) ? context : new Object(); + + var isValid = true; + var childCount = this.model.getChildCount(cell); + + for (var i = 0; i < childCount; i++) + { + var tmp = this.model.getChildAt(cell, i); + var ctx = context; + + if (this.isValidRoot(tmp)) + { + ctx = new Object(); + } + + var warn = this.validateGraph(tmp, ctx); + + if (warn != null) + { + this.setCellWarning(tmp, warn.replace(/\n/g, '<br>')); + } + else + { + this.setCellWarning(tmp, null); + } + + isValid = isValid && warn == null; + } + + var warning = ''; + + // Adds error for invalid children if collapsed (children invisible) + if (this.isCellCollapsed(cell) && !isValid) + { + warning += (mxResources.get(this.containsValidationErrorsResource) || + this.containsValidationErrorsResource)+'\n'; + } + + // Checks edges and cells using the defined multiplicities + if (this.model.isEdge(cell)) + { + warning += this.getEdgeValidationError(cell, + this.model.getTerminal(cell, true), + this.model.getTerminal(cell, false)) || ''; + } + else + { + warning += this.getCellValidationError(cell) || ''; + } + + // Checks custom validation rules + var err = this.validateCell(cell, context); + + if (err != null) + { + warning += err; + } + + // Updates the display with the warning icons + // before any potential alerts are displayed. + // LATER: Move this into addCellOverlay. Redraw + // should check if overlay was added or removed. + if (this.model.getParent(cell) == null) + { + this.view.validate(); + } + + return (warning.length > 0 || !isValid) ? warning : null; +}; + +/** + * Function: getCellValidationError + * + * Checks all <multiplicities> that cannot be enforced while the graph is + * being modified, namely, all multiplicities that require a minimum of + * 1 edge. + * + * Parameters: + * + * cell - <mxCell> for which the multiplicities should be checked. + */ +mxGraph.prototype.getCellValidationError = function(cell) +{ + var outCount = this.model.getDirectedEdgeCount(cell, true); + var inCount = this.model.getDirectedEdgeCount(cell, false); + var value = this.model.getValue(cell); + var error = ''; + + if (this.multiplicities != null) + { + for (var i = 0; i < this.multiplicities.length; i++) + { + var rule = this.multiplicities[i]; + + if (rule.source && mxUtils.isNode(value, rule.type, + rule.attr, rule.value) && ((rule.max == 0 && outCount > 0) || + (rule.min == 1 && outCount == 0) || (rule.max == 1 && outCount > 1))) + { + error += rule.countError + '\n'; + } + else if (!rule.source && mxUtils.isNode(value, rule.type, + rule.attr, rule.value) && ((rule.max == 0 && inCount > 0) || + (rule.min == 1 && inCount == 0) || (rule.max == 1 && inCount > 1))) + { + error += rule.countError + '\n'; + } + } + } + + return (error.length > 0) ? error : null; +}; + +/** + * Function: validateCell + * + * Hook method for subclassers to return an error message for the given + * cell and validation context. This implementation returns null. Any HTML + * breaks will be converted to linefeeds in the calling method. + * + * Parameters: + * + * cell - <mxCell> that represents the cell to validate. + * context - Object that represents the global validation state. + */ +mxGraph.prototype.validateCell = function(cell, context) +{ + return null; +}; + +/** + * Group: Graph appearance + */ + +/** + * Function: getBackgroundImage + * + * Returns the <backgroundImage> as an <mxImage>. + */ +mxGraph.prototype.getBackgroundImage = function() +{ + return this.backgroundImage; +}; + +/** + * Function: setBackgroundImage + * + * Sets the new <backgroundImage>. + * + * Parameters: + * + * image - New <mxImage> to be used for the background. + */ +mxGraph.prototype.setBackgroundImage = function(image) +{ + this.backgroundImage = image; +}; + +/** + * Function: getFoldingImage + * + * Returns the <mxImage> used to display the collapsed state of + * the specified cell state. This returns null for all edges. + */ +mxGraph.prototype.getFoldingImage = function(state) +{ + if (state != null && this.foldingEnabled && !this.getModel().isEdge(state.cell)) + { + var tmp = this.isCellCollapsed(state.cell); + + if (this.isCellFoldable(state.cell, !tmp)) + { + return (tmp) ? this.collapsedImage : this.expandedImage; + } + } + + return null; +}; + +/** + * Function: convertValueToString + * + * Returns the textual representation for the given cell. This + * implementation returns the nodename or string-representation of the user + * object. + * + * Example: + * + * The following returns the label attribute from the cells user + * object if it is an XML node. + * + * (code) + * graph.convertValueToString = function(cell) + * { + * return cell.getAttribute('label'); + * } + * (end) + * + * See also: <cellLabelChanged>. + * + * Parameters: + * + * cell - <mxCell> whose textual representation should be returned. + */ +mxGraph.prototype.convertValueToString = function(cell) +{ + var value = this.model.getValue(cell); + + if (value != null) + { + if (mxUtils.isNode(value)) + { + return value.nodeName; + } + else if (typeof(value.toString) == 'function') + { + return value.toString(); + } + } + + return ''; +}; + +/** + * Function: getLabel + * + * 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 label to match the size of the cell, the following code + * can be used. + * + * (code) + * graph.getLabel = function(cell) + * { + * var label = mxGraph.prototype.getLabel.apply(this, arguments); + * + * if (label != null && this.model.isVertex(cell)) + * { + * var geo = this.getCellGeometry(cell); + * + * if (geo != null) + * { + * var max = parseInt(geo.width / 8); + * + * if (label.length > max) + * { + * label = label.substring(0, max)+'...'; + * } + * } + * } + * return mxUtils.htmlEntities(label); + * } + * (end) + * + * A resize listener is needed in the graph to force a repaint of the label + * after a resize. + * + * (code) + * 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]); + * } + * }); + * (end) + * + * Parameters: + * + * cell - <mxCell> whose label should be returned. + */ +mxGraph.prototype.getLabel = function(cell) +{ + var result = ''; + + if (this.labelsVisible && cell != null) + { + var state = this.view.getState(cell); + var style = (state != null) ? state.style : this.getCellStyle(cell); + + if (!mxUtils.getValue(style, mxConstants.STYLE_NOLABEL, false)) + { + result = this.convertValueToString(cell); + } + } + + return result; +}; + +/** + * Function: isHtmlLabel + * + * Returns true if the label must be rendered as HTML markup. The default + * implementation returns <htmlLabels>. + * + * Parameters: + * + * cell - <mxCell> whose label should be displayed as HTML markup. + */ +mxGraph.prototype.isHtmlLabel = function(cell) +{ + return this.isHtmlLabels(); +}; + +/** + * Function: isHtmlLabels + * + * Returns <htmlLabels>. + */ +mxGraph.prototype.isHtmlLabels = function() +{ + return this.htmlLabels; +}; + +/** + * Function: setHtmlLabels + * + * Sets <htmlLabels>. + */ +mxGraph.prototype.setHtmlLabels = function(value) +{ + this.htmlLabels = value; +}; + +/** + * Function: isWrapping + * + * This enables wrapping for HTML labels. + * + * Returns true if no white-space CSS style directive should be used for + * displaying the given cells label. This implementation returns true if + * <mxConstants.STYLE_WHITE_SPACE> in the style of the given cell is 'wrap'. + * + * This is used as a workaround for IE ignoring the white-space directive + * of child elements if the directive appears in a parent element. It + * should be overridden to return true if a white-space directive is used + * in the HTML markup that represents the given cells label. In order for + * HTML markup to work in labels, <isHtmlLabel> must also return true + * for the given cell. + * + * Example: + * + * (code) + * graph.getLabel = function(cell) + * { + * var tmp = mxGraph.prototype.getLabel.apply(this, arguments); // "supercall" + * + * if (this.model.isEdge(cell)) + * { + * tmp = '<div style="width: 150px; white-space:normal;">'+tmp+'</div>'; + * } + * + * return tmp; + * } + * + * graph.isWrapping = function(state) + * { + * return this.model.isEdge(state.cell); + * } + * (end) + * + * Makes sure no edge label is wider than 150 pixels, otherwise the content + * is wrapped. Note: No width must be specified for wrapped vertex labels as + * the vertex defines the width in its geometry. + * + * Parameters: + * + * state - <mxCell> whose label should be wrapped. + */ +mxGraph.prototype.isWrapping = function(cell) +{ + var state = this.view.getState(cell); + var style = (state != null) ? state.style : this.getCellStyle(cell); + + return (style != null) ? style[mxConstants.STYLE_WHITE_SPACE] == 'wrap' : false; +}; + +/** + * Function: isLabelClipped + * + * Returns true if the overflow portion of labels should be hidden. If this + * returns true then vertex labels will be clipped to the size of the vertices. + * This implementation returns true if <mxConstants.STYLE_OVERFLOW> in the + * style of the given cell is 'hidden'. + * + * Parameters: + * + * state - <mxCell> whose label should be clipped. + */ +mxGraph.prototype.isLabelClipped = function(cell) +{ + var state = this.view.getState(cell); + var style = (state != null) ? state.style : this.getCellStyle(cell); + + return (style != null) ? style[mxConstants.STYLE_OVERFLOW] == 'hidden' : false; +}; + +/** + * Function: getTooltip + * + * Returns the string or DOM node that represents the tooltip for the given + * state, node and coordinate pair. This implementation checks if the given + * node is a folding icon or overlay and returns the respective tooltip. If + * this does not result in a tooltip, the handler for the cell is retrieved + * from <selectionCellsHandler> and the optional getTooltipForNode method is + * called. If no special tooltip exists here then <getTooltipForCell> is used + * with the cell in the given state as the argument to return a tooltip for the + * given state. + * + * Parameters: + * + * state - <mxCellState> whose tooltip should be returned. + * node - DOM node that is currently under the mouse. + * x - X-coordinate of the mouse. + * y - Y-coordinate of the mouse. + */ +mxGraph.prototype.getTooltip = function(state, node, x, y) +{ + var tip = null; + + if (state != null) + { + // Checks if the mouse is over the folding icon + if (state.control != null && (node == state.control.node || + node.parentNode == state.control.node)) + { + tip = this.collapseExpandResource; + tip = mxResources.get(tip) || tip; + } + + if (tip == null && state.overlays != null) + { + state.overlays.visit(function(id, shape) + { + // LATER: Exit loop if tip is not null + if (tip == null && (node == shape.node || node.parentNode == shape.node)) + { + tip = shape.overlay.toString(); + } + }); + } + + if (tip == null) + { + var handler = this.selectionCellsHandler.getHandler(state.cell); + + if (handler != null && typeof(handler.getTooltipForNode) == 'function') + { + tip = handler.getTooltipForNode(node); + } + } + + if (tip == null) + { + tip = this.getTooltipForCell(state.cell); + } + } + + return tip; +}; + +/** + * Function: getTooltipForCell + * + * Returns the string or DOM node to be used as the tooltip for the given + * cell. This implementation uses the cells getTooltip function if it + * exists, or else it returns <convertValueToString> for the cell. + * + * Example: + * + * (code) + * graph.getTooltipForCell = function(cell) + * { + * return 'Hello, World!'; + * } + * (end) + * + * Replaces all tooltips with the string Hello, World! + * + * Parameters: + * + * cell - <mxCell> whose tooltip should be returned. + */ +mxGraph.prototype.getTooltipForCell = function(cell) +{ + var tip = null; + + if (cell != null && cell.getTooltip != null) + { + tip = cell.getTooltip(); + } + else + { + tip = this.convertValueToString(cell); + } + + return tip; +}; + +/** + * Function: getCursorForCell + * + * Returns the cursor value to be used for the CSS of the shape for the + * given cell. This implementation returns null. + * + * Parameters: + * + * cell - <mxCell> whose cursor should be returned. + */ +mxGraph.prototype.getCursorForCell = function(cell) +{ + return null; +}; + +/** + * Function: getStartSize + * + * Returns the start size of the given swimlane, that is, the width or + * height of the part that contains the title, depending on the + * horizontal style. The return value is an <mxRectangle> with either + * width or height set as appropriate. + * + * Parameters: + * + * swimlane - <mxCell> whose start size should be returned. + */ +mxGraph.prototype.getStartSize = function(swimlane) +{ + var result = new mxRectangle(); + var state = this.view.getState(swimlane); + var style = (state != null) ? state.style : this.getCellStyle(swimlane); + + if (style != null) + { + var size = parseInt(mxUtils.getValue(style, + mxConstants.STYLE_STARTSIZE, mxConstants.DEFAULT_STARTSIZE)); + + if (mxUtils.getValue(style, mxConstants.STYLE_HORIZONTAL, true)) + { + result.height = size; + } + else + { + result.width = size; + } + } + + return result; +}; + +/** + * Function: getImage + * + * Returns the image URL for the given cell state. This implementation + * returns the value stored under <mxConstants.STYLE_IMAGE> in the cell + * style. + * + * Parameters: + * + * state - <mxCellState> whose image URL should be returned. + */ +mxGraph.prototype.getImage = function(state) +{ + return (state != null && state.style != null) ? + state.style[mxConstants.STYLE_IMAGE] : null; +}; + +/** + * Function: getVerticalAlign + * + * Returns the vertical alignment for the given cell state. This + * implementation returns the value stored under + * <mxConstants.STYLE_VERTICAL_ALIGN> in the cell style. + * + * Parameters: + * + * state - <mxCellState> whose vertical alignment should be + * returned. + */ +mxGraph.prototype.getVerticalAlign = function(state) +{ + return (state != null && state.style != null) ? + (state.style[mxConstants.STYLE_VERTICAL_ALIGN] || + mxConstants.ALIGN_MIDDLE ): + null; +}; + +/** + * Function: getIndicatorColor + * + * Returns the indicator color for the given cell state. This + * implementation returns the value stored under + * <mxConstants.STYLE_INDICATOR_COLOR> in the cell style. + * + * Parameters: + * + * state - <mxCellState> whose indicator color should be + * returned. + */ +mxGraph.prototype.getIndicatorColor = function(state) +{ + return (state != null && state.style != null) ? + state.style[mxConstants.STYLE_INDICATOR_COLOR] : null; +}; + +/** + * Function: getIndicatorGradientColor + * + * Returns the indicator gradient color for the given cell state. This + * implementation returns the value stored under + * <mxConstants.STYLE_INDICATOR_GRADIENTCOLOR> in the cell style. + * + * Parameters: + * + * state - <mxCellState> whose indicator gradient color should be + * returned. + */ +mxGraph.prototype.getIndicatorGradientColor = function(state) +{ + return (state != null && state.style != null) ? + state.style[mxConstants.STYLE_INDICATOR_GRADIENTCOLOR] : null; +}; + +/** + * Function: getIndicatorShape + * + * Returns the indicator shape for the given cell state. This + * implementation returns the value stored under + * <mxConstants.STYLE_INDICATOR_SHAPE> in the cell style. + * + * Parameters: + * + * state - <mxCellState> whose indicator shape should be returned. + */ +mxGraph.prototype.getIndicatorShape = function(state) +{ + return (state != null && state.style != null) ? + state.style[mxConstants.STYLE_INDICATOR_SHAPE] : null; +}; + +/** + * Function: getIndicatorImage + * + * Returns the indicator image for the given cell state. This + * implementation returns the value stored under + * <mxConstants.STYLE_INDICATOR_IMAGE> in the cell style. + * + * Parameters: + * + * state - <mxCellState> whose indicator image should be returned. + */ +mxGraph.prototype.getIndicatorImage = function(state) +{ + return (state != null && state.style != null) ? + state.style[mxConstants.STYLE_INDICATOR_IMAGE] : null; +}; + +/** + * Function: getBorder + * + * Returns the value of <border>. + */ +mxGraph.prototype.getBorder = function() +{ + return this.border; +}; + +/** + * Function: setBorder + * + * Sets the value of <border>. + * + * Parameters: + * + * value - Positive integer that represents the border to be used. + */ +mxGraph.prototype.setBorder = function(value) +{ + this.border = value; +}; + +/** + * Function: isSwimlane + * + * Returns true if the given cell is a swimlane in the graph. A swimlane is + * a container cell with some specific behaviour. This implementation + * checks if the shape associated with the given cell is a <mxSwimlane>. + * + * Parameters: + * + * cell - <mxCell> to be checked. + */ +mxGraph.prototype.isSwimlane = function (cell) +{ + if (cell != null) + { + if (this.model.getParent(cell) != this.model.getRoot()) + { + var state = this.view.getState(cell); + var style = (state != null) ? state.style : this.getCellStyle(cell); + + if (style != null && !this.model.isEdge(cell)) + { + return style[mxConstants.STYLE_SHAPE] == + mxConstants.SHAPE_SWIMLANE; + } + } + } + + return false; +}; + +/** + * Group: Graph behaviour + */ + +/** + * Function: isResizeContainer + * + * Returns <resizeContainer>. + */ +mxGraph.prototype.isResizeContainer = function() +{ + return this.resizeContainer; +}; + +/** + * Function: setResizeContainer + * + * Sets <resizeContainer>. + * + * Parameters: + * + * value - Boolean indicating if the container should be resized. + */ +mxGraph.prototype.setResizeContainer = function(value) +{ + this.resizeContainer = value; +}; + +/** + * Function: isEnabled + * + * Returns true if the graph is <enabled>. + */ +mxGraph.prototype.isEnabled = function() +{ + return this.enabled; +}; + +/** + * Function: setEnabled + * + * Specifies if the graph should allow any interactions. This + * implementation updates <enabled>. + * + * Parameters: + * + * value - Boolean indicating if the graph should be enabled. + */ +mxGraph.prototype.setEnabled = function(value) +{ + this.enabled = value; +}; + +/** + * Function: isEscapeEnabled + * + * Returns <escapeEnabled>. + */ +mxGraph.prototype.isEscapeEnabled = function() +{ + return this.escapeEnabled; +}; + +/** + * Function: setEscapeEnabled + * + * Sets <escapeEnabled>. + * + * Parameters: + * + * enabled - Boolean indicating if escape should be enabled. + */ +mxGraph.prototype.setEscapeEnabled = function(value) +{ + this.escapeEnabled = value; +}; + +/** + * Function: isInvokesStopCellEditing + * + * Returns <invokesStopCellEditing>. + */ +mxGraph.prototype.isInvokesStopCellEditing = function() +{ + return this.invokesStopCellEditing; +}; + +/** + * Function: setInvokesStopCellEditing + * + * Sets <invokesStopCellEditing>. + */ +mxGraph.prototype.setInvokesStopCellEditing = function(value) +{ + this.invokesStopCellEditing = value; +}; + +/** + * Function: isEnterStopsCellEditing + * + * Returns <enterStopsCellEditing>. + */ +mxGraph.prototype.isEnterStopsCellEditing = function() +{ + return this.enterStopsCellEditing; +}; + +/** + * Function: setEnterStopsCellEditing + * + * Sets <enterStopsCellEditing>. + */ +mxGraph.prototype.setEnterStopsCellEditing = function(value) +{ + this.enterStopsCellEditing = value; +}; + +/** + * Function: isCellLocked + * + * Returns true if the given cell may not be moved, sized, bended, + * disconnected, edited or selected. This implementation returns true for + * all vertices with a relative geometry if <locked> is false. + * + * Parameters: + * + * cell - <mxCell> whose locked state should be returned. + */ +mxGraph.prototype.isCellLocked = function(cell) +{ + var geometry = this.model.getGeometry(cell); + + return this.isCellsLocked() || (geometry != null && + this.model.isVertex(cell) && geometry.relative); +}; + +/** + * Function: isCellsLocked + * + * Returns true if the given cell may not be moved, sized, bended, + * disconnected, edited or selected. This implementation returns true for + * all vertices with a relative geometry if <locked> is false. + * + * Parameters: + * + * cell - <mxCell> whose locked state should be returned. + */ +mxGraph.prototype.isCellsLocked = function() +{ + return this.cellsLocked; +}; + +/** + * Function: setLocked + * + * Sets if any cell may be moved, sized, bended, disconnected, edited or + * selected. + * + * Parameters: + * + * value - Boolean that defines the new value for <cellsLocked>. + */ +mxGraph.prototype.setCellsLocked = function(value) +{ + this.cellsLocked = value; +}; + +/** + * Function: getCloneableCells + * + * Returns the cells which may be exported in the given array of cells. + */ +mxGraph.prototype.getCloneableCells = function(cells) +{ + return this.model.filterCells(cells, mxUtils.bind(this, function(cell) + { + return this.isCellCloneable(cell); + })); +}; + +/** + * Function: isCellCloneable + * + * Returns true if the given cell is cloneable. This implementation returns + * <isCellsCloneable> for all cells unless a cell style specifies + * <mxConstants.STYLE_CLONEABLE> to be 0. + * + * Parameters: + * + * cell - Optional <mxCell> whose cloneable state should be returned. + */ +mxGraph.prototype.isCellCloneable = function(cell) +{ + var state = this.view.getState(cell); + var style = (state != null) ? state.style : this.getCellStyle(cell); + + return this.isCellsCloneable() && style[mxConstants.STYLE_CLONEABLE] != 0; +}; + +/** + * Function: isCellsCloneable + * + * Returns <cellsCloneable>, that is, if the graph allows cloning of cells + * by using control-drag. + */ +mxGraph.prototype.isCellsCloneable = function() +{ + return this.cellsCloneable; +}; + +/** + * Function: setCellsCloneable + * + * Specifies if the graph should allow cloning of cells by holding down the + * control key while cells are being moved. This implementation updates + * <cellsCloneable>. + * + * Parameters: + * + * value - Boolean indicating if the graph should be cloneable. + */ +mxGraph.prototype.setCellsCloneable = function(value) +{ + this.cellsCloneable = value; +}; + +/** + * Function: getExportableCells + * + * Returns the cells which may be exported in the given array of cells. + */ +mxGraph.prototype.getExportableCells = function(cells) +{ + return this.model.filterCells(cells, mxUtils.bind(this, function(cell) + { + return this.canExportCell(cell); + })); +}; + +/** + * Function: canExportCell + * + * Returns true if the given cell may be exported to the clipboard. This + * implementation returns <exportEnabled> for all cells. + * + * Parameters: + * + * cell - <mxCell> that represents the cell to be exported. + */ +mxGraph.prototype.canExportCell = function(cell) +{ + return this.exportEnabled; +}; + +/** + * Function: getImportableCells + * + * Returns the cells which may be imported in the given array of cells. + */ +mxGraph.prototype.getImportableCells = function(cells) +{ + return this.model.filterCells(cells, mxUtils.bind(this, function(cell) + { + return this.canImportCell(cell); + })); +}; + +/** + * Function: canImportCell + * + * Returns true if the given cell may be imported from the clipboard. + * This implementation returns <importEnabled> for all cells. + * + * Parameters: + * + * cell - <mxCell> that represents the cell to be imported. + */ +mxGraph.prototype.canImportCell = function(cell) +{ + return this.importEnabled; +}; + +/** + * Function: isCellSelectable + * + * 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. + * + * (code) + * mxGraph.prototype.isCellSelectable = function(cell) + * { + * var state = this.view.getState(cell); + * var style = (state != null) ? state.style : this.getCellStyle(cell); + * + * return this.isCellsSelectable() && !this.isCellLocked(cell) && style['selectable'] != 0; + * }; + * (end) + * + * You can then use the new style as shown in this example. + * + * (code) + * graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30, 'selectable=0'); + * (end) + * + * Parameters: + * + * cell - <mxCell> whose selectable state should be returned. + */ +mxGraph.prototype.isCellSelectable = function(cell) +{ + return this.isCellsSelectable(); +}; + +/** + * Function: isCellsSelectable + * + * Returns <cellsSelectable>. + */ +mxGraph.prototype.isCellsSelectable = function() +{ + return this.cellsSelectable; +}; + +/** + * Function: setCellsSelectable + * + * Sets <cellsSelectable>. + */ +mxGraph.prototype.setCellsSelectable = function(value) +{ + this.cellsSelectable = value; +}; + +/** + * Function: getDeletableCells + * + * Returns the cells which may be exported in the given array of cells. + */ +mxGraph.prototype.getDeletableCells = function(cells) +{ + return this.model.filterCells(cells, mxUtils.bind(this, function(cell) + { + return this.isCellDeletable(cell); + })); +}; + +/** + * Function: isCellDeletable + * + * Returns true if the given cell is moveable. This returns + * <cellsDeletable> for all given cells if a cells style does not specify + * <mxConstants.STYLE_DELETABLE> to be 0. + * + * Parameters: + * + * cell - <mxCell> whose deletable state should be returned. + */ +mxGraph.prototype.isCellDeletable = function(cell) +{ + var state = this.view.getState(cell); + var style = (state != null) ? state.style : this.getCellStyle(cell); + + return this.isCellsDeletable() && style[mxConstants.STYLE_DELETABLE] != 0; +}; + +/** + * Function: isCellsDeletable + * + * Returns <cellsDeletable>. + */ +mxGraph.prototype.isCellsDeletable = function() +{ + return this.cellsDeletable; +}; + +/** + * Function: setCellsDeletable + * + * Sets <cellsDeletable>. + * + * Parameters: + * + * value - Boolean indicating if the graph should allow deletion of cells. + */ +mxGraph.prototype.setCellsDeletable = function(value) +{ + this.cellsDeletable = value; +}; + +/** + * Function: isLabelMovable + * + * Returns true if the given edges's label is moveable. This returns + * <movable> for all given cells if <isLocked> does not return true + * for the given cell. + * + * Parameters: + * + * cell - <mxCell> whose label should be moved. + */ +mxGraph.prototype.isLabelMovable = function(cell) +{ + return !this.isCellLocked(cell) && + ((this.model.isEdge(cell) && this.edgeLabelsMovable) || + (this.model.isVertex(cell) && this.vertexLabelsMovable)); +}; + +/** + * Function: getMovableCells + * + * Returns the cells which are movable in the given array of cells. + */ +mxGraph.prototype.getMovableCells = function(cells) +{ + return this.model.filterCells(cells, mxUtils.bind(this, function(cell) + { + return this.isCellMovable(cell); + })); +}; + +/** + * Function: isCellMovable + * + * Returns true if the given cell is moveable. This returns <cellsMovable> + * for all given cells if <isCellLocked> does not return true for the given + * cell and its style does not specify <mxConstants.STYLE_MOVABLE> to be 0. + * + * Parameters: + * + * cell - <mxCell> whose movable state should be returned. + */ +mxGraph.prototype.isCellMovable = function(cell) +{ + var state = this.view.getState(cell); + var style = (state != null) ? state.style : this.getCellStyle(cell); + + return this.isCellsMovable() && !this.isCellLocked(cell) && style[mxConstants.STYLE_MOVABLE] != 0; +}; + +/** + * Function: isCellsMovable + * + * Returns <cellsMovable>. + */ +mxGraph.prototype.isCellsMovable = function() +{ + return this.cellsMovable; +}; + +/** + * Function: setCellsMovable + * + * Specifies if the graph should allow moving of cells. This implementation + * updates <cellsMsovable>. + * + * Parameters: + * + * value - Boolean indicating if the graph should allow moving of cells. + */ +mxGraph.prototype.setCellsMovable = function(value) +{ + this.cellsMovable = value; +}; + +/** + * Function: isGridEnabled + * + * Returns <gridEnabled> as a boolean. + */ +mxGraph.prototype.isGridEnabled = function() +{ + return this.gridEnabled; +}; + +/** + * Function: setGridEnabled + * + * Specifies if the grid should be enabled. + * + * Parameters: + * + * value - Boolean indicating if the grid should be enabled. + */ +mxGraph.prototype.setGridEnabled = function(value) +{ + this.gridEnabled = value; +}; + +/** + * Function: isPortsEnabled + * + * Returns <portsEnabled> as a boolean. + */ +mxGraph.prototype.isPortsEnabled = function() +{ + return this.portsEnabled; +}; + +/** + * Function: setPortsEnabled + * + * Specifies if the ports should be enabled. + * + * Parameters: + * + * value - Boolean indicating if the ports should be enabled. + */ +mxGraph.prototype.setPortsEnabled = function(value) +{ + this.portsEnabled = value; +}; + +/** + * Function: getGridSize + * + * Returns <gridSize>. + */ +mxGraph.prototype.getGridSize = function() +{ + return this.gridSize; +}; + +/** + * Function: setGridSize + * + * Sets <gridSize>. + */ +mxGraph.prototype.setGridSize = function(value) +{ + this.gridSize = value; +}; + +/** + * Function: getTolerance + * + * Returns <tolerance>. + */ +mxGraph.prototype.getTolerance = function() +{ + return this.tolerance; +}; + +/** + * Function: setTolerance + * + * Sets <tolerance>. + */ +mxGraph.prototype.setTolerance = function(value) +{ + this.tolerance = value; +}; + +/** + * Function: isVertexLabelsMovable + * + * Returns <vertexLabelsMovable>. + */ +mxGraph.prototype.isVertexLabelsMovable = function() +{ + return this.vertexLabelsMovable; +}; + +/** + * Function: setVertexLabelsMovable + * + * Sets <vertexLabelsMovable>. + */ +mxGraph.prototype.setVertexLabelsMovable = function(value) +{ + this.vertexLabelsMovable = value; +}; + +/** + * Function: isEdgeLabelsMovable + * + * Returns <edgeLabelsMovable>. + */ +mxGraph.prototype.isEdgeLabelsMovable = function() +{ + return this.edgeLabelsMovable; +}; + +/** + * Function: isEdgeLabelsMovable + * + * Sets <edgeLabelsMovable>. + */ +mxGraph.prototype.setEdgeLabelsMovable = function(value) +{ + this.edgeLabelsMovable = value; +}; + +/** + * Function: isSwimlaneNesting + * + * Returns <swimlaneNesting> as a boolean. + */ +mxGraph.prototype.isSwimlaneNesting = function() +{ + return this.swimlaneNesting; +}; + +/** + * Function: setSwimlaneNesting + * + * Specifies if swimlanes can be nested by drag and drop. This is only + * taken into account if dropEnabled is true. + * + * Parameters: + * + * value - Boolean indicating if swimlanes can be nested. + */ +mxGraph.prototype.setSwimlaneNesting = function(value) +{ + this.swimlaneNesting = value; +}; + +/** + * Function: isSwimlaneSelectionEnabled + * + * Returns <swimlaneSelectionEnabled> as a boolean. + */ +mxGraph.prototype.isSwimlaneSelectionEnabled = function() +{ + return this.swimlaneSelectionEnabled; +}; + +/** + * Function: setSwimlaneSelectionEnabled + * + * Specifies if swimlanes should be selected if the mouse is released + * over their content area. + * + * Parameters: + * + * value - Boolean indicating if swimlanes content areas + * should be selected when the mouse is released over them. + */ +mxGraph.prototype.setSwimlaneSelectionEnabled = function(value) +{ + this.swimlaneSelectionEnabled = value; +}; + +/** + * Function: isMultigraph + * + * Returns <multigraph> as a boolean. + */ +mxGraph.prototype.isMultigraph = function() +{ + return this.multigraph; +}; + +/** + * Function: setMultigraph + * + * Specifies if the graph should allow multiple connections between the + * same pair of vertices. + * + * Parameters: + * + * value - Boolean indicating if the graph allows multiple connections + * between the same pair of vertices. + */ +mxGraph.prototype.setMultigraph = function(value) +{ + this.multigraph = value; +}; + +/** + * Function: isAllowLoops + * + * Returns <allowLoops> as a boolean. + */ +mxGraph.prototype.isAllowLoops = function() +{ + return this.allowLoops; +}; + +/** + * Function: setAllowDanglingEdges + * + * Specifies if dangling edges are allowed, that is, if edges are allowed + * that do not have a source and/or target terminal defined. + * + * Parameters: + * + * value - Boolean indicating if dangling edges are allowed. + */ +mxGraph.prototype.setAllowDanglingEdges = function(value) +{ + this.allowDanglingEdges = value; +}; + +/** + * Function: isAllowDanglingEdges + * + * Returns <allowDanglingEdges> as a boolean. + */ +mxGraph.prototype.isAllowDanglingEdges = function() +{ + return this.allowDanglingEdges; +}; + +/** + * Function: setConnectableEdges + * + * Specifies if edges should be connectable. + * + * Parameters: + * + * value - Boolean indicating if edges should be connectable. + */ +mxGraph.prototype.setConnectableEdges = function(value) +{ + this.connectableEdges = value; +}; + +/** + * Function: isConnectableEdges + * + * Returns <connectableEdges> as a boolean. + */ +mxGraph.prototype.isConnectableEdges = function() +{ + return this.connectableEdges; +}; + +/** + * Function: setCloneInvalidEdges + * + * Specifies if edges should be inserted when cloned but not valid wrt. + * <getEdgeValidationError>. If false such edges will be silently ignored. + * + * Parameters: + * + * value - Boolean indicating if cloned invalid edges should be + * inserted into the graph or ignored. + */ +mxGraph.prototype.setCloneInvalidEdges = function(value) +{ + this.cloneInvalidEdges = value; +}; + +/** + * Function: isCloneInvalidEdges + * + * Returns <cloneInvalidEdges> as a boolean. + */ +mxGraph.prototype.isCloneInvalidEdges = function() +{ + return this.cloneInvalidEdges; +}; + +/** + * Function: setAllowLoops + * + * Specifies if loops are allowed. + * + * Parameters: + * + * value - Boolean indicating if loops are allowed. + */ +mxGraph.prototype.setAllowLoops = function(value) +{ + this.allowLoops = value; +}; + +/** + * Function: isDisconnectOnMove + * + * Returns <disconnectOnMove> as a boolean. + */ +mxGraph.prototype.isDisconnectOnMove = function() +{ + return this.disconnectOnMove; +}; + +/** + * Function: setDisconnectOnMove + * + * Specifies if edges should be disconnected when moved. (Note: Cloned + * edges are always disconnected.) + * + * Parameters: + * + * value - Boolean indicating if edges should be disconnected + * when moved. + */ +mxGraph.prototype.setDisconnectOnMove = function(value) +{ + this.disconnectOnMove = value; +}; + +/** + * Function: isDropEnabled + * + * Returns <dropEnabled> as a boolean. + */ +mxGraph.prototype.isDropEnabled = function() +{ + return this.dropEnabled; +}; + +/** + * Function: setDropEnabled + * + * Specifies if the graph should allow dropping of cells onto or into other + * cells. + * + * Parameters: + * + * dropEnabled - Boolean indicating if the graph should allow dropping + * of cells into other cells. + */ +mxGraph.prototype.setDropEnabled = function(value) +{ + this.dropEnabled = value; +}; + +/** + * Function: isSplitEnabled + * + * Returns <splitEnabled> as a boolean. + */ +mxGraph.prototype.isSplitEnabled = function() +{ + return this.splitEnabled; +}; + +/** + * Function: setSplitEnabled + * + * Specifies if the graph should allow dropping of cells onto or into other + * cells. + * + * Parameters: + * + * dropEnabled - Boolean indicating if the graph should allow dropping + * of cells into other cells. + */ +mxGraph.prototype.setSplitEnabled = function(value) +{ + this.splitEnabled = value; +}; + +/** + * Function: isCellResizable + * + * Returns true if the given cell is resizable. This returns + * <cellsResizable> for all given cells if <isCellLocked> does not return + * true for the given cell and its style does not specify + * <mxConstants.STYLE_RESIZABLE> to be 0. + * + * Parameters: + * + * cell - <mxCell> whose resizable state should be returned. + */ +mxGraph.prototype.isCellResizable = function(cell) +{ + var state = this.view.getState(cell); + var style = (state != null) ? state.style : this.getCellStyle(cell); + + return this.isCellsResizable() && !this.isCellLocked(cell) && style[mxConstants.STYLE_RESIZABLE] != 0; +}; + +/** + * Function: isCellsResizable + * + * Returns <cellsResizable>. + */ +mxGraph.prototype.isCellsResizable = function() +{ + return this.cellsResizable; +}; + +/** + * Function: setCellsResizable + * + * Specifies if the graph should allow resizing of cells. This + * implementation updates <cellsResizable>. + * + * Parameters: + * + * value - Boolean indicating if the graph should allow resizing of + * cells. + */ +mxGraph.prototype.setCellsResizable = function(value) +{ + this.cellsResizable = value; +}; + +/** + * Function: isTerminalPointMovable + * + * Returns true if the given terminal point is movable. This is independent + * from <isCellConnectable> and <isCellDisconnectable> and controls if terminal + * points can be moved in the graph if the edge is not connected. Note that it + * is required for this to return true to connect unconnected edges. This + * implementation returns true. + * + * Parameters: + * + * cell - <mxCell> whose terminal point should be moved. + * source - Boolean indicating if the source or target terminal should be moved. + */ +mxGraph.prototype.isTerminalPointMovable = function(cell, source) +{ + return true; +}; + +/** + * Function: isCellBendable + * + * Returns true if the given cell is bendable. This returns <cellsBendable> + * for all given cells if <isLocked> does not return true for the given + * cell and its style does not specify <mxConstants.STYLE_BENDABLE> to be 0. + * + * Parameters: + * + * cell - <mxCell> whose bendable state should be returned. + */ +mxGraph.prototype.isCellBendable = function(cell) +{ + var state = this.view.getState(cell); + var style = (state != null) ? state.style : this.getCellStyle(cell); + + return this.isCellsBendable() && !this.isCellLocked(cell) && style[mxConstants.STYLE_BENDABLE] != 0; +}; + +/** + * Function: isCellsBendable + * + * Returns <cellsBenadable>. + */ +mxGraph.prototype.isCellsBendable = function() +{ + return this.cellsBendable; +}; + +/** + * Function: setCellsBendable + * + * Specifies if the graph should allow bending of edges. This + * implementation updates <bendable>. + * + * Parameters: + * + * value - Boolean indicating if the graph should allow bending of + * edges. + */ +mxGraph.prototype.setCellsBendable = function(value) +{ + this.cellsBendable = value; +}; + +/** + * Function: isCellEditable + * + * Returns true if the given cell is editable. This returns <cellsEditable> for + * all given cells if <isCellLocked> does not return true for the given cell + * and its style does not specify <mxConstants.STYLE_EDITABLE> to be 0. + * + * Parameters: + * + * cell - <mxCell> whose editable state should be returned. + */ +mxGraph.prototype.isCellEditable = function(cell) +{ + var state = this.view.getState(cell); + var style = (state != null) ? state.style : this.getCellStyle(cell); + + return this.isCellsEditable() && !this.isCellLocked(cell) && style[mxConstants.STYLE_EDITABLE] != 0; +}; + +/** + * Function: isCellsEditable + * + * Returns <cellsEditable>. + */ +mxGraph.prototype.isCellsEditable = function() +{ + return this.cellsEditable; +}; + +/** + * Function: setCellsEditable + * + * Specifies if the graph should allow in-place editing for cell labels. + * This implementation updates <cellsEditable>. + * + * Parameters: + * + * value - Boolean indicating if the graph should allow in-place + * editing. + */ +mxGraph.prototype.setCellsEditable = function(value) +{ + this.cellsEditable = value; +}; + +/** + * Function: isCellDisconnectable + * + * Returns true if the given cell is disconnectable from the source or + * target terminal. This returns <isCellsDisconnectable> for all given + * cells if <isCellLocked> does not return true for the given cell. + * + * Parameters: + * + * cell - <mxCell> whose disconnectable state should be returned. + * terminal - <mxCell> that represents the source or target terminal. + * source - Boolean indicating if the source or target terminal is to be + * disconnected. + */ +mxGraph.prototype.isCellDisconnectable = function(cell, terminal, source) +{ + return this.isCellsDisconnectable() && !this.isCellLocked(cell); +}; + +/** + * Function: isCellsDisconnectable + * + * Returns <cellsDisconnectable>. + */ +mxGraph.prototype.isCellsDisconnectable = function() +{ + return this.cellsDisconnectable; +}; + +/** + * Function: setCellsDisconnectable + * + * Sets <cellsDisconnectable>. + */ +mxGraph.prototype.setCellsDisconnectable = function(value) +{ + this.cellsDisconnectable = value; +}; + +/** + * Function: isValidSource + * + * Returns true if the given cell is a valid source for new connections. + * This implementation returns true for all non-null values and is + * called by is called by <isValidConnection>. + * + * Parameters: + * + * cell - <mxCell> that represents a possible source or null. + */ +mxGraph.prototype.isValidSource = function(cell) +{ + return (cell == null && this.allowDanglingEdges) || + (cell != null && (!this.model.isEdge(cell) || + this.connectableEdges) && this.isCellConnectable(cell)); +}; + +/** + * Function: isValidTarget + * + * Returns <isValidSource> for the given cell. This is called by + * <isValidConnection>. + * + * Parameters: + * + * cell - <mxCell> that represents a possible target or null. + */ +mxGraph.prototype.isValidTarget = function(cell) +{ + return this.isValidSource(cell); +}; + +/** + * Function: isValidConnection + * + * Returns true if the given target cell is a valid target for source. + * This is a boolean implementation for not allowing connections between + * certain pairs of vertices and is called by <getEdgeValidationError>. + * This implementation returns true if <isValidSource> returns true for + * the source and <isValidTarget> returns true for the target. + * + * Parameters: + * + * source - <mxCell> that represents the source cell. + * target - <mxCell> that represents the target cell. + */ +mxGraph.prototype.isValidConnection = function(source, target) +{ + return this.isValidSource(source) && this.isValidTarget(target); +}; + +/** + * Function: setConnectable + * + * Specifies if the graph should allow new connections. This implementation + * updates <mxConnectionHandler.enabled> in <connectionHandler>. + * + * Parameters: + * + * connectable - Boolean indicating if new connections should be allowed. + */ +mxGraph.prototype.setConnectable = function(connectable) +{ + this.connectionHandler.setEnabled(connectable); +}; + +/** + * Function: isConnectable + * + * Returns true if the <connectionHandler> is enabled. + */ +mxGraph.prototype.isConnectable = function(connectable) +{ + return this.connectionHandler.isEnabled(); +}; + +/** + * Function: setTooltips + * + * Specifies if tooltips should be enabled. This implementation updates + * <mxTooltipHandler.enabled> in <tooltipHandler>. + * + * Parameters: + * + * enabled - Boolean indicating if tooltips should be enabled. + */ +mxGraph.prototype.setTooltips = function (enabled) +{ + this.tooltipHandler.setEnabled(enabled); +}; + +/** + * Function: setPanning + * + * Specifies if panning should be enabled. This implementation updates + * <mxPanningHandler.panningEnabled> in <panningHandler>. + * + * Parameters: + * + * enabled - Boolean indicating if panning should be enabled. + */ +mxGraph.prototype.setPanning = function(enabled) +{ + this.panningHandler.panningEnabled = enabled; +}; + +/** + * Function: isEditing + * + * Returns true if the given cell is currently being edited. + * If no cell is specified then this returns true if any + * cell is currently being edited. + * + * Parameters: + * + * cell - <mxCell> that should be checked. + */ +mxGraph.prototype.isEditing = function(cell) +{ + if (this.cellEditor != null) + { + var editingCell = this.cellEditor.getEditingCell(); + + return (cell == null) ? + editingCell != null : + cell == editingCell; + } + + return false; +}; + +/** + * Function: isAutoSizeCell + * + * Returns true if the size of the given cell should automatically be + * updated after a change of the label. This implementation returns + * <autoSizeCells> or checks if the cell style does specify + * <mxConstants.STYLE_AUTOSIZE> to be 1. + * + * Parameters: + * + * cell - <mxCell> that should be resized. + */ +mxGraph.prototype.isAutoSizeCell = function(cell) +{ + var state = this.view.getState(cell); + var style = (state != null) ? state.style : this.getCellStyle(cell); + + return this.isAutoSizeCells() || style[mxConstants.STYLE_AUTOSIZE] == 1; +}; + +/** + * Function: isAutoSizeCells + * + * Returns <autoSizeCells>. + */ +mxGraph.prototype.isAutoSizeCells = function() +{ + return this.autoSizeCells; +}; + +/** + * Function: setAutoSizeCells + * + * Specifies if cell sizes should be automatically updated after a label + * change. This implementation sets <autoSizeCells> to the given parameter. + * + * Parameters: + * + * value - Boolean indicating if cells should be resized + * automatically. + */ +mxGraph.prototype.setAutoSizeCells = function(value) +{ + this.autoSizeCells = value; +}; + +/** + * Function: isExtendParent + * + * Returns true if the parent of the given cell should be extended if the + * child has been resized so that it overlaps the parent. This + * implementation returns <isExtendParents> if the cell is not an edge. + * + * Parameters: + * + * cell - <mxCell> that has been resized. + */ +mxGraph.prototype.isExtendParent = function(cell) +{ + return !this.getModel().isEdge(cell) && this.isExtendParents(); +}; + +/** + * Function: isExtendParents + * + * Returns <extendParents>. + */ +mxGraph.prototype.isExtendParents = function() +{ + return this.extendParents; +}; + +/** + * Function: setExtendParents + * + * Sets <extendParents>. + * + * Parameters: + * + * value - New boolean value for <extendParents>. + */ +mxGraph.prototype.setExtendParents = function(value) +{ + this.extendParents = value; +}; + +/** + * Function: isExtendParentsOnAdd + * + * Returns <extendParentsOnAdd>. + */ +mxGraph.prototype.isExtendParentsOnAdd = function() +{ + return this.extendParentsOnAdd; +}; + +/** + * Function: setExtendParentsOnAdd + * + * Sets <extendParentsOnAdd>. + * + * Parameters: + * + * value - New boolean value for <extendParentsOnAdd>. + */ +mxGraph.prototype.setExtendParentsOnAdd = function(value) +{ + this.extendParentsOnAdd = value; +}; + +/** + * Function: isConstrainChild + * + * Returns true if the given cell should be kept inside the bounds of its + * parent according to the rules defined by <getOverlap> and + * <isAllowOverlapParent>. This implementation returns false for all children + * of edges and <isConstrainChildren> otherwise. + * + * Parameters: + * + * cell - <mxCell> that should be constrained. + */ +mxGraph.prototype.isConstrainChild = function(cell) +{ + return this.isConstrainChildren() && !this.getModel().isEdge(this.getModel().getParent(cell)); + +}; + +/** + * Function: isConstrainChildren + * + * Returns <constrainChildren>. + */ +mxGraph.prototype.isConstrainChildren = function() +{ + return this.constrainChildren; +}; + +/** + * Function: setConstrainChildren + * + * Sets <constrainChildren>. + */ +mxGraph.prototype.setConstrainChildren = function(value) +{ + this.constrainChildren = value; +}; + +/** + * Function: isConstrainChildren + * + * Returns <allowNegativeCoordinates>. + */ +mxGraph.prototype.isAllowNegativeCoordinates = function() +{ + return this.allowNegativeCoordinates; +}; + +/** + * Function: setConstrainChildren + * + * Sets <allowNegativeCoordinates>. + */ +mxGraph.prototype.setAllowNegativeCoordinates = function(value) +{ + this.allowNegativeCoordinates = value; +}; + +/** + * Function: getOverlap + * + * Returns a decimal number representing the amount of the width and height + * of the given cell that is allowed to overlap its parent. A value of 0 + * means all children must stay inside the parent, 1 means the child is + * allowed to be placed outside of the parent such that it touches one of + * the parents sides. If <isAllowOverlapParent> returns false for the given + * cell, then this method returns 0. + * + * Parameters: + * + * cell - <mxCell> for which the overlap ratio should be returned. + */ +mxGraph.prototype.getOverlap = function(cell) +{ + return (this.isAllowOverlapParent(cell)) ? this.defaultOverlap : 0; +}; + +/** + * Function: isAllowOverlapParent + * + * Returns true if the given cell is allowed to be placed outside of the + * parents area. + * + * Parameters: + * + * cell - <mxCell> that represents the child to be checked. + */ +mxGraph.prototype.isAllowOverlapParent = function(cell) +{ + return false; +}; + +/** + * Function: getFoldableCells + * + * Returns the cells which are movable in the given array of cells. + */ +mxGraph.prototype.getFoldableCells = function(cells, collapse) +{ + return this.model.filterCells(cells, mxUtils.bind(this, function(cell) + { + return this.isCellFoldable(cell, collapse); + })); +}; + +/** + * Function: isCellFoldable + * + * Returns true if the given cell is foldable. This implementation + * returns true if the cell has at least one child and its style + * does not specify <mxConstants.STYLE_FOLDABLE> to be 0. + * + * Parameters: + * + * cell - <mxCell> whose foldable state should be returned. + */ +mxGraph.prototype.isCellFoldable = function(cell, collapse) +{ + var state = this.view.getState(cell); + var style = (state != null) ? state.style : this.getCellStyle(cell); + + return this.model.getChildCount(cell) > 0 && style[mxConstants.STYLE_FOLDABLE] != 0; +}; + +/** + * Function: isValidDropTarget + * + * Returns true if the given cell is a valid drop target for the specified + * cells. If the given cell is an edge, then <isSplitDropTarget> is used, + * else <isParentDropTarget> is used to compute the return value. + * + * Parameters: + * + * cell - <mxCell> that represents the possible drop target. + * cells - <mxCells> that should be dropped into the target. + * evt - Mouseevent that triggered the invocation. + */ +mxGraph.prototype.isValidDropTarget = function(cell, cells, evt) +{ + return cell != null && ((this.isSplitEnabled() && + this.isSplitTarget(cell, cells, evt)) || (!this.model.isEdge(cell) && + (this.isSwimlane(cell) || (this.model.getChildCount(cell) > 0 && + !this.isCellCollapsed(cell))))); +}; + +/** + * Function: isSplitTarget + * + * Returns true if the given edge may be splitted into two edges with the + * given cell as a new terminal between the two. + * + * Parameters: + * + * target - <mxCell> that represents the edge to be splitted. + * cells - <mxCells> that should split the edge. + * evt - Mouseevent that triggered the invocation. + */ +mxGraph.prototype.isSplitTarget = function(target, cells, evt) +{ + if (this.model.isEdge(target) && cells != null && cells.length == 1 && + this.isCellConnectable(cells[0]) && this.getEdgeValidationError(target, + this.model.getTerminal(target, true), cells[0]) == null) + { + var src = this.model.getTerminal(target, true); + var trg = this.model.getTerminal(target, false); + + return (!this.model.isAncestor(cells[0], src) && + !this.model.isAncestor(cells[0], trg)); + } + + return false; +}; + +/** + * Function: getDropTarget + * + * Returns the given cell if it is a drop target for the given cells or the + * nearest ancestor that may be used as a drop target for the given cells. + * If the given array contains a swimlane and <swimlaneNesting> is false + * then this always returns null. If no cell is given, then the bottommost + * swimlane at the location of the given event is returned. + * + * This function should only be used if <isDropEnabled> returns true. + * + * Parameters: + * + * cells - Array of <mxCells> which are to be dropped onto the target. + * evt - Mouseevent for the drag and drop. + * cell - <mxCell> that is under the mousepointer. + */ +mxGraph.prototype.getDropTarget = function(cells, evt, cell) +{ + if (!this.isSwimlaneNesting()) + { + for (var i = 0; i < cells.length; i++) + { + if (this.isSwimlane(cells[i])) + { + return null; + } + } + } + + var pt = mxUtils.convertPoint(this.container, + mxEvent.getClientX(evt), mxEvent.getClientY(evt)); + pt.x -= this.panDx; + pt.y -= this.panDy; + var swimlane = this.getSwimlaneAt(pt.x, pt.y); + + if (cell == null) + { + cell = swimlane; + } + else if (swimlane != null) + { + // Checks if the cell is an ancestor of the swimlane + // under the mouse and uses the swimlane in that case + var tmp = this.model.getParent(swimlane); + + while (tmp != null && this.isSwimlane(tmp) && tmp != cell) + { + tmp = this.model.getParent(tmp); + } + + if (tmp == cell) + { + cell = swimlane; + } + } + + while (cell != null && !this.isValidDropTarget(cell, cells, evt) && + !this.model.isLayer(cell)) + { + cell = this.model.getParent(cell); + } + + return (!this.model.isLayer(cell) && mxUtils.indexOf(cells, cell) < 0) ? cell : null; +}; + +/** + * Group: Cell retrieval + */ + +/** + * Function: getDefaultParent + * + * 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). + */ +mxGraph.prototype.getDefaultParent = function() +{ + var parent = this.defaultParent; + + if (parent == null) + { + parent = this.getCurrentRoot(); + + if (parent == null) + { + var root = this.model.getRoot(); + parent = this.model.getChildAt(root, 0); + } + } + + return parent; +}; + +/** + * Function: setDefaultParent + * + * Sets the <defaultParent> to the given cell. Set this to null to return + * the first child of the root in getDefaultParent. + */ +mxGraph.prototype.setDefaultParent = function(cell) +{ + this.defaultParent = cell; +}; + +/** + * Function: getSwimlane + * + * Returns the nearest ancestor of the given cell which is a swimlane, or + * the given cell, if it is itself a swimlane. + * + * Parameters: + * + * cell - <mxCell> for which the ancestor swimlane should be returned. + */ +mxGraph.prototype.getSwimlane = function(cell) +{ + while (cell != null && !this.isSwimlane(cell)) + { + cell = this.model.getParent(cell); + } + + return cell; +}; + +/** + * Function: getSwimlaneAt + * + * Returns the bottom-most swimlane that intersects the given point (x, y) + * in the cell hierarchy that starts at the given parent. + * + * Parameters: + * + * x - X-coordinate of the location to be checked. + * y - Y-coordinate of the location to be checked. + * parent - <mxCell> that should be used as the root of the recursion. + * Default is <defaultParent>. + */ +mxGraph.prototype.getSwimlaneAt = function (x, y, parent) +{ + parent = parent || this.getDefaultParent(); + + if (parent != null) + { + var childCount = this.model.getChildCount(parent); + + for (var i = 0; i < childCount; i++) + { + var child = this.model.getChildAt(parent, i); + var result = this.getSwimlaneAt(x, y, child); + + if (result != null) + { + return result; + } + else if (this.isSwimlane(child)) + { + var state = this.view.getState(child); + + if (this.intersects(state, x, y)) + { + return child; + } + } + } + } + + return null; +}; + +/** + * Function: getCellAt + * + * Returns the bottom-most cell that intersects the given point (x, y) in + * the cell hierarchy starting at the given parent. This will also return + * swimlanes if the given location intersects the content area of the + * swimlane. If this is not desired, then the <hitsSwimlaneContent> may be + * used if the returned cell is a swimlane to determine if the location + * is inside the content area or on the actual title of the swimlane. + * + * Parameters: + * + * x - X-coordinate of the location to be checked. + * y - Y-coordinate of the location to be checked. + * parent - <mxCell> that should be used as the root of the recursion. + * Default is <defaultParent>. + * vertices - Optional boolean indicating if vertices should be returned. + * Default is true. + * edges - Optional boolean indicating if edges should be returned. Default + * is true. + */ +mxGraph.prototype.getCellAt = function(x, y, parent, vertices, edges) +{ + vertices = (vertices != null) ? vertices : true; + edges = (edges != null) ? edges : true; + parent = (parent != null) ? parent : this.getDefaultParent(); + + if (parent != null) + { + var childCount = this.model.getChildCount(parent); + + for (var i = childCount - 1; i >= 0; i--) + { + var cell = this.model.getChildAt(parent, i); + var result = this.getCellAt(x, y, cell, vertices, edges); + + if (result != null) + { + return result; + } + else if (this.isCellVisible(cell) && (edges && this.model.isEdge(cell) || + vertices && this.model.isVertex(cell))) + { + var state = this.view.getState(cell); + + if (this.intersects(state, x, y)) + { + return cell; + } + } + } + } + + return null; +}; + +/** + * Function: intersects + * + * Returns the bottom-most cell that intersects the given point (x, y) in + * the cell hierarchy that starts at the given parent. + * + * Parameters: + * + * state - <mxCellState> that represents the cell state. + * x - X-coordinate of the location to be checked. + * y - Y-coordinate of the location to be checked. + */ +mxGraph.prototype.intersects = function(state, x, y) +{ + if (state != null) + { + var pts = state.absolutePoints; + + if (pts != null) + { + var t2 = this.tolerance * this.tolerance; + + var pt = pts[0]; + + for (var i = 1; i<pts.length; i++) + { + var next = pts[i]; + var dist = mxUtils.ptSegDistSq( + pt.x, pt.y, next.x, next.y, x, y); + + if (dist <= t2) + { + return true; + } + + pt = next; + } + } + else if (mxUtils.contains(state, x, y)) + { + return true; + } + } + + return false; +}; + +/** + * Function: hitsSwimlaneContent + * + * Returns true if the given coordinate pair is inside the content + * are of the given swimlane. + * + * Parameters: + * + * swimlane - <mxCell> that specifies the swimlane. + * x - X-coordinate of the mouse event. + * y - Y-coordinate of the mouse event. + */ +mxGraph.prototype.hitsSwimlaneContent = function(swimlane, x, y) +{ + var state = this.getView().getState(swimlane); + var size = this.getStartSize(swimlane); + + if (state != null) + { + var scale = this.getView().getScale(); + x -= state.x; + y -= state.y; + + if (size.width > 0 && x > 0 && x > size.width * scale) + { + return true; + } + else if (size.height > 0 && y > 0 && y > size.height * scale) + { + return true; + } + } + + return false; +}; + +/** + * Function: getChildVertices + * + * Returns the visible child vertices of the given parent. + * + * Parameters: + * + * parent - <mxCell> whose children should be returned. + */ +mxGraph.prototype.getChildVertices = function(parent) +{ + return this.getChildCells(parent, true, false); +}; + +/** + * Function: getChildEdges + * + * Returns the visible child edges of the given parent. + * + * Parameters: + * + * parent - <mxCell> whose child vertices should be returned. + */ +mxGraph.prototype.getChildEdges = function(parent) +{ + return this.getChildCells(parent, false, true); +}; + +/** + * Function: getChildCells + * + * Returns the visible child vertices or edges in the given parent. If + * vertices and edges is false, then all children are returned. + * + * Parameters: + * + * parent - <mxCell> whose children should be returned. + * vertices - Optional boolean that specifies if child vertices should + * be returned. Default is false. + * edges - Optional boolean that specifies if child edges should + * be returned. Default is false. + */ +mxGraph.prototype.getChildCells = function(parent, vertices, edges) +{ + parent = (parent != null) ? parent : this.getDefaultParent(); + vertices = (vertices != null) ? vertices : false; + edges = (edges != null) ? edges : false; + + var cells = this.model.getChildCells(parent, vertices, edges); + var result = []; + + // Filters out the non-visible child cells + for (var i = 0; i < cells.length; i++) + { + if (this.isCellVisible(cells[i])) + { + result.push(cells[i]); + } + } + + return result; +}; + +/** + * Function: getConnections + * + * Returns all visible edges connected to the given cell without loops. + * + * Parameters: + * + * cell - <mxCell> whose connections should be returned. + * parent - Optional parent of the opposite end for a connection to be + * returned. + */ +mxGraph.prototype.getConnections = function(cell, parent) +{ + return this.getEdges(cell, parent, true, true, false); +}; + +/** + * Function: getIncomingEdges + * + * Returns the visible incoming edges for the given cell. If the optional + * parent argument is specified, then only child edges of the given parent + * are returned. + * + * Parameters: + * + * cell - <mxCell> whose incoming edges should be returned. + * parent - Optional parent of the opposite end for an edge to be + * returned. + */ +mxGraph.prototype.getIncomingEdges = function(cell, parent) +{ + return this.getEdges(cell, parent, true, false, false); +}; + +/** + * Function: getOutgoingEdges + * + * Returns the visible outgoing edges for the given cell. If the optional + * parent argument is specified, then only child edges of the given parent + * are returned. + * + * Parameters: + * + * cell - <mxCell> whose outgoing edges should be returned. + * parent - Optional parent of the opposite end for an edge to be + * returned. + */ +mxGraph.prototype.getOutgoingEdges = function(cell, parent) +{ + return this.getEdges(cell, parent, false, true, false); +}; + +/** + * Function: getEdges + * + * Returns the incoming and/or outgoing edges for the given cell. + * If the optional parent argument is specified, then only edges are returned + * where the opposite is in the given parent cell. If at least one of incoming + * or outgoing is true, then loops are ignored, if both are false, then all + * edges connected to the given cell are returned including loops. + * + * Parameters: + * + * cell - <mxCell> whose edges should be returned. + * parent - Optional parent of the opposite end for an edge to be + * returned. + * incoming - Optional boolean that specifies if incoming edges should + * be included in the result. Default is true. + * outgoing - Optional boolean that specifies if outgoing edges should + * be included in the result. Default is true. + * includeLoops - Optional boolean that specifies if loops should be + * included in the result. Default is true. + * recurse - Optional boolean the specifies if the parent specified only + * need be an ancestral parent, true, or the direct parent, false. + * Default is false + */ +mxGraph.prototype.getEdges = function(cell, parent, incoming, outgoing, includeLoops, recurse) +{ + incoming = (incoming != null) ? incoming : true; + outgoing = (outgoing != null) ? outgoing : true; + includeLoops = (includeLoops != null) ? includeLoops : true; + recurse = (recurse != null) ? recurse : false; + + var edges = []; + var isCollapsed = this.isCellCollapsed(cell); + var childCount = this.model.getChildCount(cell); + + for (var i = 0; i < childCount; i++) + { + var child = this.model.getChildAt(cell, i); + + if (isCollapsed || !this.isCellVisible(child)) + { + edges = edges.concat(this.model.getEdges(child, incoming, outgoing)); + } + } + + edges = edges.concat(this.model.getEdges(cell, incoming, outgoing)); + var result = []; + + for (var i = 0; i < edges.length; i++) + { + var state = this.view.getState(edges[i]); + + var source = (state != null) ? state.getVisibleTerminal(true) : this.view.getVisibleTerminal(edges[i], true); + var target = (state != null) ? state.getVisibleTerminal(false) : this.view.getVisibleTerminal(edges[i], false); + + if ((includeLoops && source == target) || ((source != target) && ((incoming && + target == cell && (parent == null || this.isValidAncestor(source, parent, recurse))) || + (outgoing && source == cell && (parent == null || + this.isValidAncestor(target, parent, recurse)))))) + { + result.push(edges[i]); + } + } + + return result; +}; + +/** + * Function: isValidAncestor + * + * Returns whether or not the specified parent is a valid + * ancestor of the specified cell, either direct or indirectly + * based on whether ancestor recursion is enabled. + * + * Parameters: + * + * cell - <mxCell> the possible child cell + * parent - <mxCell> the possible parent cell + * recurse - boolean whether or not to recurse the child ancestors + */ +mxGraph.prototype.isValidAncestor = function(cell, parent, recurse) +{ + return (recurse ? this.model.isAncestor(parent, cell) : this.model + .getParent(cell) == parent); +}; + +/** + * Function: getOpposites + * + * Returns all distinct visible opposite cells for the specified terminal + * on the given edges. + * + * Parameters: + * + * edges - Array of <mxCells> that contains the edges whose opposite + * terminals should be returned. + * terminal - Terminal that specifies the end whose opposite should be + * returned. + * source - Optional boolean that specifies if source terminals should be + * included in the result. Default is true. + * targets - Optional boolean that specifies if targer terminals should be + * included in the result. Default is true. + */ +mxGraph.prototype.getOpposites = function(edges, terminal, sources, targets) +{ + sources = (sources != null) ? sources : true; + targets = (targets != null) ? targets : true; + + var terminals = []; + + // Implements set semantic on the terminals array using a string + // representation of each cell in an associative array lookup + var hash = new Object(); + + if (edges != null) + { + for (var i = 0; i < edges.length; i++) + { + var state = this.view.getState(edges[i]); + + var source = (state != null) ? state.getVisibleTerminal(true) : this.view.getVisibleTerminal(edges[i], true); + var target = (state != null) ? state.getVisibleTerminal(false) : this.view.getVisibleTerminal(edges[i], false); + + // Checks if the terminal is the source of the edge and if the + // target should be stored in the result + if (source == terminal && target != null && + target != terminal && targets) + { + var id = mxCellPath.create(target); + + if (hash[id] == null) + { + hash[id] = target; + terminals.push(target); + } + } + + // Checks if the terminal is the taget of the edge and if the + // source should be stored in the result + else if (target == terminal && source != null && + source != terminal && sources) + { + var id = mxCellPath.create(source); + + if (hash[id] == null) + { + hash[id] = source; + terminals.push(source); + } + } + } + } + + return terminals; +}; + +/** + * Function: getEdgesBetween + * + * Returns the edges between the given source and target. This takes into + * account collapsed and invisible cells and returns the connected edges + * as displayed on the screen. + * + * Parameters: + * + * source - + * target - + * directed - + */ +mxGraph.prototype.getEdgesBetween = function(source, target, directed) +{ + directed = (directed != null) ? directed : false; + var edges = this.getEdges(source); + var result = []; + + // Checks if the edge is connected to the correct + // cell and returns the first match + for (var i = 0; i < edges.length; i++) + { + var state = this.view.getState(edges[i]); + + var src = (state != null) ? state.getVisibleTerminal(true) : this.view.getVisibleTerminal(edges[i], true); + var trg = (state != null) ? state.getVisibleTerminal(false) : this.view.getVisibleTerminal(edges[i], false); + + if ((src == source && trg == target) || (!directed && src == target && trg == source)) + { + result.push(edges[i]); + } + } + + return result; +}; + +/** + * Function: getPointForEvent + * + * Returns an <mxPoint> representing the given event in the unscaled, + * non-translated coordinate space of <container> and applies the grid. + * + * Parameters: + * + * evt - Mousevent that contains the mouse pointer location. + * addOffset - Optional boolean that specifies if the position should be + * offset by half of the <gridSize>. Default is true. + */ + mxGraph.prototype.getPointForEvent = function(evt, addOffset) + { + var p = mxUtils.convertPoint(this.container, + mxEvent.getClientX(evt), mxEvent.getClientY(evt)); + + var s = this.view.scale; + var tr = this.view.translate; + var off = (addOffset != false) ? this.gridSize / 2 : 0; + + p.x = this.snap(p.x / s - tr.x - off); + p.y = this.snap(p.y / s - tr.y - off); + + return p; + }; + +/** + * Function: getCells + * + * Returns the children of the given parent that are contained in the given + * rectangle (x, y, width, height). The result is added to the optional + * result array, which is returned from the function. If no result array + * is specified then a new array is created and returned. + * + * Parameters: + * + * x - X-coordinate of the rectangle. + * y - Y-coordinate of the rectangle. + * width - Width of the rectangle. + * height - Height of the rectangle. + * parent - <mxCell> whose children should be checked. Default is + * <defaultParent>. + * result - Optional array to store the result in. + */ +mxGraph.prototype.getCells = function(x, y, width, height, parent, result) +{ + result = (result != null) ? result : []; + + if (width > 0 || height > 0) + { + var right = x + width; + var bottom = y + height; + + parent = parent || this.getDefaultParent(); + + if (parent != null) + { + var childCount = this.model.getChildCount(parent); + + for (var i = 0; i < childCount; i++) + { + var cell = this.model.getChildAt(parent, i); + var state = this.view.getState(cell); + + if (this.isCellVisible(cell) && state != null) + { + if (state.x >= x && state.y >= y && + state.x + state.width <= right && + state.y + state.height <= bottom) + { + result.push(cell); + } + else + { + this.getCells(x, y, width, height, cell, result); + } + } + } + } + } + + return result; +}; + +/** + * Function: getCellsBeyond + * + * Returns the children of the given parent that are contained in the + * halfpane from the given point (x0, y0) rightwards and/or downwards + * depending on rightHalfpane and bottomHalfpane. + * + * Parameters: + * + * x0 - X-coordinate of the origin. + * y0 - Y-coordinate of the origin. + * parent - Optional <mxCell> whose children should be checked. Default is + * <defaultParent>. + * rightHalfpane - Boolean indicating if the cells in the right halfpane + * from the origin should be returned. + * bottomHalfpane - Boolean indicating if the cells in the bottom halfpane + * from the origin should be returned. + */ +mxGraph.prototype.getCellsBeyond = function(x0, y0, parent, rightHalfpane, bottomHalfpane) +{ + var result = []; + + if (rightHalfpane || bottomHalfpane) + { + if (parent == null) + { + parent = this.getDefaultParent(); + } + + if (parent != null) + { + var childCount = this.model.getChildCount(parent); + + for (var i = 0; i < childCount; i++) + { + var child = this.model.getChildAt(parent, i); + var state = this.view.getState(child); + + if (this.isCellVisible(child) && state != null) + { + if ((!rightHalfpane || + state.x >= x0) && + (!bottomHalfpane || + state.y >= y0)) + { + result.push(child); + } + } + } + } + } + + return result; +}; + +/** + * Function: findTreeRoots + * + * Returns all children in the given parent which do not have incoming + * edges. If the result is empty then the with the greatest difference + * between incoming and outgoing edges is returned. + * + * Parameters: + * + * parent - <mxCell> whose children should be checked. + * isolate - Optional boolean that specifies if edges should be ignored if + * the opposite end is not a child of the given parent cell. Default is + * false. + * invert - Optional boolean that specifies if outgoing or incoming edges + * should be counted for a tree root. If false then outgoing edges will be + * counted. Default is false. + */ +mxGraph.prototype.findTreeRoots = function(parent, isolate, invert) +{ + isolate = (isolate != null) ? isolate : false; + invert = (invert != null) ? invert : false; + var roots = []; + + if (parent != null) + { + var model = this.getModel(); + var childCount = model.getChildCount(parent); + var best = null; + var maxDiff = 0; + + for (var i=0; i<childCount; i++) + { + var cell = model.getChildAt(parent, i); + + if (this.model.isVertex(cell) && this.isCellVisible(cell)) + { + var conns = this.getConnections(cell, (isolate) ? parent : null); + var fanOut = 0; + var fanIn = 0; + + for (var j = 0; j < conns.length; j++) + { + var src = this.view.getVisibleTerminal(conns[j], true); + + if (src == cell) + { + fanOut++; + } + else + { + fanIn++; + } + } + + if ((invert && fanOut == 0 && fanIn > 0) || + (!invert && fanIn == 0 && fanOut > 0)) + { + roots.push(cell); + } + + var diff = (invert) ? fanIn - fanOut : fanOut - fanIn; + + if (diff > maxDiff) + { + maxDiff = diff; + best = cell; + } + } + } + + if (roots.length == 0 && best != null) + { + roots.push(best); + } + } + + return roots; +}; + +/** + * Function: traverse + * + * Traverses the (directed) graph invoking the given function for each + * visited vertex and edge. The function is invoked with the current vertex + * and the incoming edge as a parameter. This implementation makes sure + * each vertex is only visited once. The function may return false if the + * traversal should stop at the given vertex. + * + * Example: + * + * (code) + * mxLog.show(); + * var cell = graph.getSelectionCell(); + * graph.traverse(cell, false, function(vertex, edge) + * { + * mxLog.debug(graph.getLabel(vertex)); + * }); + * (end) + * + * Parameters: + * + * vertex - <mxCell> that represents the vertex where the traversal starts. + * directed - Optional boolean indicating if edges should only be traversed + * from source to target. Default is true. + * func - Visitor function that takes the current vertex and the incoming + * edge as arguments. The traversal stops if the function returns false. + * edge - Optional <mxCell> that represents the incoming edge. This is + * null for the first step of the traversal. + * visited - Optional array of cell paths for the visited cells. + */ +mxGraph.prototype.traverse = function(vertex, directed, func, edge, visited) +{ + if (func != null && vertex != null) + { + directed = (directed != null) ? directed : true; + visited = visited || []; + var id = mxCellPath.create(vertex); + + if (visited[id] == null) + { + visited[id] = vertex; + var result = func(vertex, edge); + + if (result == null || result) + { + var edgeCount = this.model.getEdgeCount(vertex); + + if (edgeCount > 0) + { + for (var i = 0; i < edgeCount; i++) + { + var e = this.model.getEdgeAt(vertex, i); + var isSource = this.model.getTerminal(e, true) == vertex; + + if (!directed || isSource) + { + var next = this.model.getTerminal(e, !isSource); + this.traverse(next, directed, func, e, visited); + } + } + } + } + } + } +}; + +/** + * Group: Selection + */ + +/** + * Function: isCellSelected + * + * Returns true if the given cell is selected. + * + * Parameters: + * + * cell - <mxCell> for which the selection state should be returned. + */ +mxGraph.prototype.isCellSelected = function(cell) +{ + return this.getSelectionModel().isSelected(cell); +}; + +/** + * Function: isSelectionEmpty + * + * Returns true if the selection is empty. + */ +mxGraph.prototype.isSelectionEmpty = function() +{ + return this.getSelectionModel().isEmpty(); +}; + +/** + * Function: clearSelection + * + * Clears the selection using <mxGraphSelectionModel.clear>. + */ +mxGraph.prototype.clearSelection = function() +{ + return this.getSelectionModel().clear(); +}; + +/** + * Function: getSelectionCount + * + * Returns the number of selected cells. + */ +mxGraph.prototype.getSelectionCount = function() +{ + return this.getSelectionModel().cells.length; +}; + +/** + * Function: getSelectionCell + * + * Returns the first cell from the array of selected <mxCells>. + */ +mxGraph.prototype.getSelectionCell = function() +{ + return this.getSelectionModel().cells[0]; +}; + +/** + * Function: getSelectionCells + * + * Returns the array of selected <mxCells>. + */ +mxGraph.prototype.getSelectionCells = function() +{ + return this.getSelectionModel().cells.slice(); +}; + +/** + * Function: setSelectionCell + * + * Sets the selection cell. + * + * Parameters: + * + * cell - <mxCell> to be selected. + */ +mxGraph.prototype.setSelectionCell = function(cell) +{ + this.getSelectionModel().setCell(cell); +}; + +/** + * Function: setSelectionCells + * + * Sets the selection cell. + * + * Parameters: + * + * cells - Array of <mxCells> to be selected. + */ +mxGraph.prototype.setSelectionCells = function(cells) +{ + this.getSelectionModel().setCells(cells); +}; + +/** + * Function: addSelectionCell + * + * Adds the given cell to the selection. + * + * Parameters: + * + * cell - <mxCell> to be add to the selection. + */ +mxGraph.prototype.addSelectionCell = function(cell) +{ + this.getSelectionModel().addCell(cell); +}; + +/** + * Function: addSelectionCells + * + * Adds the given cells to the selection. + * + * Parameters: + * + * cells - Array of <mxCells> to be added to the selection. + */ +mxGraph.prototype.addSelectionCells = function(cells) +{ + this.getSelectionModel().addCells(cells); +}; + +/** + * Function: removeSelectionCell + * + * Removes the given cell from the selection. + * + * Parameters: + * + * cell - <mxCell> to be removed from the selection. + */ +mxGraph.prototype.removeSelectionCell = function(cell) +{ + this.getSelectionModel().removeCell(cell); +}; + +/** + * Function: removeSelectionCells + * + * Removes the given cells from the selection. + * + * Parameters: + * + * cells - Array of <mxCells> to be removed from the selection. + */ +mxGraph.prototype.removeSelectionCells = function(cells) +{ + this.getSelectionModel().removeCells(cells); +}; + +/** + * Function: selectRegion + * + * Selects and returns the cells inside the given rectangle for the + * specified event. + * + * Parameters: + * + * rect - <mxRectangle> that represents the region to be selected. + * evt - Mouseevent that triggered the selection. + */ +mxGraph.prototype.selectRegion = function(rect, evt) +{ + var cells = this.getCells(rect.x, rect.y, rect.width, rect.height); + this.selectCellsForEvent(cells, evt); + + return cells; +}; + +/** + * Function: selectNextCell + * + * Selects the next cell. + */ +mxGraph.prototype.selectNextCell = function() +{ + this.selectCell(true); +}; + +/** + * Function: selectPreviousCell + * + * Selects the previous cell. + */ +mxGraph.prototype.selectPreviousCell = function() +{ + this.selectCell(); +}; + +/** + * Function: selectParentCell + * + * Selects the parent cell. + */ +mxGraph.prototype.selectParentCell = function() +{ + this.selectCell(false, true); +}; + +/** + * Function: selectChildCell + * + * Selects the first child cell. + */ +mxGraph.prototype.selectChildCell = function() +{ + this.selectCell(false, false, true); +}; + +/** + * Function: selectCell + * + * Selects the next, parent, first child or previous cell, if all arguments + * are false. + * + * Parameters: + * + * isNext - Boolean indicating if the next cell should be selected. + * isParent - Boolean indicating if the parent cell should be selected. + * isChild - Boolean indicating if the first child cell should be selected. + */ +mxGraph.prototype.selectCell = function(isNext, isParent, isChild) +{ + var sel = this.selectionModel; + var cell = (sel.cells.length > 0) ? sel.cells[0] : null; + + if (sel.cells.length > 1) + { + sel.clear(); + } + + var parent = (cell != null) ? + this.model.getParent(cell) : + this.getDefaultParent(); + + var childCount = this.model.getChildCount(parent); + + if (cell == null && childCount > 0) + { + var child = this.model.getChildAt(parent, 0); + this.setSelectionCell(child); + } + else if ((cell == null || isParent) && + this.view.getState(parent) != null && + this.model.getGeometry(parent) != null) + { + if (this.getCurrentRoot() != parent) + { + this.setSelectionCell(parent); + } + } + else if (cell != null && isChild) + { + var tmp = this.model.getChildCount(cell); + + if (tmp > 0) + { + var child = this.model.getChildAt(cell, 0); + this.setSelectionCell(child); + } + } + else if (childCount > 0) + { + var i = parent.getIndex(cell); + + if (isNext) + { + i++; + var child = this.model.getChildAt(parent, i % childCount); + this.setSelectionCell(child); + } + else + { + i--; + var index = (i < 0) ? childCount - 1 : i; + var child = this.model.getChildAt(parent, index); + this.setSelectionCell(child); + } + } +}; + +/** + * Function: selectAll + * + * Selects all children of the given parent cell or the children of the + * default parent if no parent is specified. To select leaf vertices and/or + * edges use <selectCells>. + * + * Parameters: + * + * parent - Optional <mxCell> whose children should be selected. + * Default is <defaultParent>. + */ +mxGraph.prototype.selectAll = function(parent) +{ + parent = parent || this.getDefaultParent(); + + var children = this.model.getChildren(parent); + + if (children != null) + { + this.setSelectionCells(children); + } +}; + +/** + * Function: selectVertices + * + * Select all vertices inside the given parent or the default parent. + */ +mxGraph.prototype.selectVertices = function(parent) +{ + this.selectCells(true, false, parent); +}; + +/** + * Function: selectVertices + * + * Select all vertices inside the given parent or the default parent. + */ +mxGraph.prototype.selectEdges = function(parent) +{ + this.selectCells(false, true, parent); +}; + +/** + * Function: selectCells + * + * Selects all vertices and/or edges depending on the given boolean + * arguments recursively, starting at the given parent or the default + * parent if no parent is specified. Use <selectAll> to select all cells. + * + * Parameters: + * + * vertices - Boolean indicating if vertices should be selected. + * edges - Boolean indicating if edges should be selected. + * parent - Optional <mxCell> that acts as the root of the recursion. + * Default is <defaultParent>. + */ +mxGraph.prototype.selectCells = function(vertices, edges, parent) +{ + parent = parent || this.getDefaultParent(); + + var filter = mxUtils.bind(this, function(cell) + { + return this.view.getState(cell) != null && + this.model.getChildCount(cell) == 0 && + ((this.model.isVertex(cell) && vertices) || + (this.model.isEdge(cell) && edges)); + }); + + var cells = this.model.filterDescendants(filter, parent); + this.setSelectionCells(cells); +}; + +/** + * Function: selectCellForEvent + * + * Selects the given cell by either adding it to the selection or + * replacing the selection depending on whether the given mouse event is a + * toggle event. + * + * Parameters: + * + * cell - <mxCell> to be selected. + * evt - Optional mouseevent that triggered the selection. + */ +mxGraph.prototype.selectCellForEvent = function(cell, evt) +{ + var isSelected = this.isCellSelected(cell); + + if (this.isToggleEvent(evt)) + { + if (isSelected) + { + this.removeSelectionCell(cell); + } + else + { + this.addSelectionCell(cell); + } + } + else if (!isSelected || this.getSelectionCount() != 1) + { + this.setSelectionCell(cell); + } +}; + +/** + * Function: selectCellsForEvent + * + * Selects the given cells by either adding them to the selection or + * replacing the selection depending on whether the given mouse event is a + * toggle event. + * + * Parameters: + * + * cells - Array of <mxCells> to be selected. + * evt - Optional mouseevent that triggered the selection. + */ +mxGraph.prototype.selectCellsForEvent = function(cells, evt) +{ + if (this.isToggleEvent(evt)) + { + this.addSelectionCells(cells); + } + else + { + this.setSelectionCells(cells); + } +}; + +/** + * Group: Selection state + */ + +/** + * Function: createHandler + * + * Creates a new handler for the given cell state. This implementation + * returns a new <mxEdgeHandler> of the corresponding cell is an edge, + * otherwise it returns an <mxVertexHandler>. + * + * Parameters: + * + * state - <mxCellState> whose handler should be created. + */ +mxGraph.prototype.createHandler = function(state) +{ + var result = null; + + if (state != null) + { + if (this.model.isEdge(state.cell)) + { + var style = this.view.getEdgeStyle(state); + + if (this.isLoop(state) || + style == mxEdgeStyle.ElbowConnector || + style == mxEdgeStyle.SideToSide || + style == mxEdgeStyle.TopToBottom) + { + result = new mxElbowEdgeHandler(state); + } + else if (style == mxEdgeStyle.SegmentConnector || + style == mxEdgeStyle.OrthConnector) + { + result = new mxEdgeSegmentHandler(state); + } + else + { + result = new mxEdgeHandler(state); + } + } + else + { + result = new mxVertexHandler(state); + } + } + + return result; +}; + +/** + * Group: Graph events + */ + +/** + * Function: addMouseListener + * + * Adds a listener to the graph event dispatch loop. The listener + * must implement the mouseDown, mouseMove and mouseUp methods + * as shown in the <mxMouseEvent> class. + * + * Parameters: + * + * listener - Listener to be added to the graph event listeners. + */ +mxGraph.prototype.addMouseListener = function(listener) +{ + if (this.mouseListeners == null) + { + this.mouseListeners = []; + } + + this.mouseListeners.push(listener); +}; + +/** + * Function: removeMouseListener + * + * Removes the specified graph listener. + * + * Parameters: + * + * listener - Listener to be removed from the graph event listeners. + */ +mxGraph.prototype.removeMouseListener = function(listener) +{ + if (this.mouseListeners != null) + { + for (var i = 0; i < this.mouseListeners.length; i++) + { + if (this.mouseListeners[i] == listener) + { + this.mouseListeners.splice(i, 1); + break; + } + } + } +}; + +/** + * Function: updateMouseEvent + * + * Sets the graphX and graphY properties if the given <mxMouseEvent> if + * required. + */ +mxGraph.prototype.updateMouseEvent = function(me) +{ + if (me.graphX == null || me.graphY == null) + { + var pt = mxUtils.convertPoint(this.container, me.getX(), me.getY()); + + me.graphX = pt.x - this.panDx; + me.graphY = pt.y - this.panDy; + } +}; + +/** + * Function: fireMouseEvent + * + * Dispatches the given event in the graph event dispatch loop. Possible + * event names are <mxEvent.MOUSE_DOWN>, <mxEvent.MOUSE_MOVE> and + * <mxEvent.MOUSE_UP>. All listeners are invoked for all events regardless + * of the consumed state of the event. + * + * Parameters: + * + * evtName - String that specifies the type of event to be dispatched. + * me - <mxMouseEvent> to be fired. + * sender - Optional sender argument. Default is this. + */ +mxGraph.prototype.fireMouseEvent = function(evtName, me, sender) +{ + if (sender == null) + { + sender = this; + } + + // Updates the graph coordinates in the event + this.updateMouseEvent(me); + + // Makes sure we have a uniform event-sequence across all + // browsers for a double click. Since evt.detail == 2 is only + // available on Firefox we use the fact that each mousedown + // must be followed by a mouseup, all out-of-sync downs + // will be dropped silently. + if (evtName == mxEvent.MOUSE_DOWN) + { + this.isMouseDown = true; + } + + // Detects and processes double taps for touch-based devices + // which do not have native double click events + if (mxClient.IS_TOUCH && this.doubleTapEnabled && evtName == mxEvent.MOUSE_DOWN) + { + var currentTime = new Date().getTime(); + + if (currentTime - this.lastTouchTime < this.doubleTapTimeout && + Math.abs(this.lastTouchX - me.getX()) < this.doubleTapTolerance && + Math.abs(this.lastTouchY - me.getY()) < this.doubleTapTolerance) + { + // FIXME: The actual editing should start on MOUSE_UP event but + // the detection of the double click should use the mouse_down event + // to make it consistent with behaviour in browser with mouse. + this.lastTouchTime = 0; + this.dblClick(me.getEvent(), me.getCell()); + + // Stop bubbling but do not consume to make sure the device + // can bring up the virtual keyboard for editing + me.getEvent().cancelBubble = true; + } + else + { + this.lastTouchX = me.getX(); + this.lastTouchY = me.getY(); + this.lastTouchTime = currentTime; + } + } + + // Workaround for IE9 standards mode ignoring tolerance for double clicks + var noDoubleClick = me.getEvent().detail/*clickCount*/ != 2; + + if (mxClient.IS_IE && document.compatMode == 'CSS1Compat') + { + if ((this.lastMouseX != null && Math.abs(this.lastMouseX - me.getX()) > this.doubleTapTolerance) || + (this.lastMouseY != null && Math.abs(this.lastMouseY - me.getY()) > this.doubleTapTolerance)) + { + noDoubleClick = true; + } + + if (evtName == mxEvent.MOUSE_UP) + { + this.lastMouseX = me.getX(); + this.lastMouseY = me.getY(); + } + } + + // Filters too many mouse ups when the mouse is down + if ((evtName != mxEvent.MOUSE_UP || this.isMouseDown) && noDoubleClick) + { + if (evtName == mxEvent.MOUSE_UP) + { + this.isMouseDown = false; + } + + if (!this.isEditing() && (mxClient.IS_OP || mxClient.IS_SF || mxClient.IS_GC || + (mxClient.IS_IE && mxClient.IS_SVG) || me.getEvent().target != this.container)) + { + if (evtName == mxEvent.MOUSE_MOVE && this.isMouseDown && this.autoScroll) + { + this.scrollPointToVisible(me.getGraphX(), me.getGraphY(), this.autoExtend); + } + + if (this.mouseListeners != null) + { + var args = [sender, me]; + + // Does not change returnValue in Opera + me.getEvent().returnValue = true; + + for (var i = 0; i < this.mouseListeners.length; i++) + { + var l = this.mouseListeners[i]; + + if (evtName == mxEvent.MOUSE_DOWN) + { + l.mouseDown.apply(l, args); + } + else if (evtName == mxEvent.MOUSE_MOVE) + { + l.mouseMove.apply(l, args); + } + else if (evtName == mxEvent.MOUSE_UP) + { + l.mouseUp.apply(l, args); + } + } + } + + // Invokes the click handler + if (evtName == mxEvent.MOUSE_UP) + { + this.click(me); + } + } + } + else if (evtName == mxEvent.MOUSE_UP) + { + this.isMouseDown = false; + } +}; + +/** + * Function: destroy + * + * Destroys the graph and all its resources. + */ +mxGraph.prototype.destroy = function() +{ + if (!this.destroyed) + { + this.destroyed = true; + + if (this.tooltipHandler != null) + { + this.tooltipHandler.destroy(); + } + + if (this.selectionCellsHandler != null) + { + this.selectionCellsHandler.destroy(); + } + + if (this.panningHandler != null) + { + this.panningHandler.destroy(); + } + + if (this.connectionHandler != null) + { + this.connectionHandler.destroy(); + } + + if (this.graphHandler != null) + { + this.graphHandler.destroy(); + } + + if (this.cellEditor != null) + { + this.cellEditor.destroy(); + } + + if (this.view != null) + { + this.view.destroy(); + } + + if (this.model != null && this.graphModelChangeListener != null) + { + this.model.removeListener(this.graphModelChangeListener); + this.graphModelChangeListener = null; + } + + this.container = null; + } +}; diff --git a/src/js/view/mxGraphSelectionModel.js b/src/js/view/mxGraphSelectionModel.js new file mode 100644 index 0000000..5cd16a8 --- /dev/null +++ b/src/js/view/mxGraphSelectionModel.js @@ -0,0 +1,435 @@ +/** + * $Id: mxGraphSelectionModel.js,v 1.14 2011-11-25 10:16:08 gaudenz Exp $ + * Copyright (c) 2006-2010, JGraph Ltd + */ +/** + * Class: mxGraphSelectionModel + * + * Implements the selection model for a graph. Here is a listener that handles + * all removed selection cells. + * + * (code) + * graph.getSelectionModel().addListener(mxEvent.CHANGE, function(sender, evt) + * { + * var cells = evt.getProperty('added'); + * + * for (var i = 0; i < cells.length; i++) + * { + * // Handle cells[i]... + * } + * }); + * (end) + * + * Event: mxEvent.UNDO + * + * Fires after the selection was changed in <changeSelection>. The + * <code>edit</code> property contains the <mxUndoableEdit> which contains the + * <mxSelectionChange>. + * + * Event: mxEvent.CHANGE + * + * Fires after the selection changes by executing an <mxSelectionChange>. The + * <code>added</code> and <code>removed</code> properties contain arrays of + * cells that have been added to or removed from the selection, respectively. + * + * Constructor: mxGraphSelectionModel + * + * Constructs a new graph selection model for the given <mxGraph>. + * + * Parameters: + * + * graph - Reference to the enclosing <mxGraph>. + */ +function mxGraphSelectionModel(graph) +{ + this.graph = graph; + this.cells = []; +}; + +/** + * Extends mxEventSource. + */ +mxGraphSelectionModel.prototype = new mxEventSource(); +mxGraphSelectionModel.prototype.constructor = mxGraphSelectionModel; + +/** + * Variable: doneResource + * + * Specifies the resource key for the status message after a long operation. + * If the resource for this key does not exist then the value is used as + * the status message. Default is 'done'. + */ +mxGraphSelectionModel.prototype.doneResource = (mxClient.language != 'none') ? 'done' : ''; + +/** + * Variable: updatingSelectionResource + * + * Specifies the resource key for the status message while the selection is + * being updated. If the resource for this key does not exist then the + * value is used as the status message. Default is 'updatingSelection'. + */ +mxGraphSelectionModel.prototype.updatingSelectionResource = (mxClient.language != 'none') ? 'updatingSelection' : ''; + +/** + * Variable: graph + * + * Reference to the enclosing <mxGraph>. + */ +mxGraphSelectionModel.prototype.graph = null; + +/** + * Variable: singleSelection + * + * Specifies if only one selected item at a time is allowed. + * Default is false. + */ +mxGraphSelectionModel.prototype.singleSelection = false; + +/** + * Function: isSingleSelection + * + * Returns <singleSelection> as a boolean. + */ +mxGraphSelectionModel.prototype.isSingleSelection = function() +{ + return this.singleSelection; +}; + +/** + * Function: setSingleSelection + * + * Sets the <singleSelection> flag. + * + * Parameters: + * + * singleSelection - Boolean that specifies the new value for + * <singleSelection>. + */ +mxGraphSelectionModel.prototype.setSingleSelection = function(singleSelection) +{ + this.singleSelection = singleSelection; +}; + +/** + * Function: isSelected + * + * Returns true if the given <mxCell> is selected. + */ +mxGraphSelectionModel.prototype.isSelected = function(cell) +{ + if (cell != null) + { + return mxUtils.indexOf(this.cells, cell) >= 0; + } + + return false; +}; + +/** + * Function: isEmpty + * + * Returns true if no cells are currently selected. + */ +mxGraphSelectionModel.prototype.isEmpty = function() +{ + return this.cells.length == 0; +}; + +/** + * Function: clear + * + * Clears the selection and fires a <change> event if the selection was not + * empty. + */ +mxGraphSelectionModel.prototype.clear = function() +{ + this.changeSelection(null, this.cells); +}; + +/** + * Function: setCell + * + * Selects the specified <mxCell> using <setCells>. + * + * Parameters: + * + * cell - <mxCell> to be selected. + */ +mxGraphSelectionModel.prototype.setCell = function(cell) +{ + if (cell != null) + { + this.setCells([cell]); + } +}; + +/** + * Function: setCells + * + * Selects the given array of <mxCells> and fires a <change> event. + * + * Parameters: + * + * cells - Array of <mxCells> to be selected. + */ +mxGraphSelectionModel.prototype.setCells = function(cells) +{ + if (cells != null) + { + if (this.singleSelection) + { + cells = [this.getFirstSelectableCell(cells)]; + } + + var tmp = []; + + for (var i = 0; i < cells.length; i++) + { + if (this.graph.isCellSelectable(cells[i])) + { + tmp.push(cells[i]); + } + } + + this.changeSelection(tmp, this.cells); + } +}; + +/** + * Function: getFirstSelectableCell + * + * Returns the first selectable cell in the given array of cells. + */ +mxGraphSelectionModel.prototype.getFirstSelectableCell = function(cells) +{ + if (cells != null) + { + for (var i = 0; i < cells.length; i++) + { + if (this.graph.isCellSelectable(cells[i])) + { + return cells[i]; + } + } + } + + return null; +}; + +/** + * Function: addCell + * + * Adds the given <mxCell> to the selection and fires a <select> event. + * + * Parameters: + * + * cell - <mxCell> to add to the selection. + */ +mxGraphSelectionModel.prototype.addCell = function(cell) +{ + if (cell != null) + { + this.addCells([cell]); + } +}; + +/** + * Function: addCells + * + * Adds the given array of <mxCells> to the selection and fires a <select> + * event. + * + * Parameters: + * + * cells - Array of <mxCells> to add to the selection. + */ +mxGraphSelectionModel.prototype.addCells = function(cells) +{ + if (cells != null) + { + var remove = null; + + if (this.singleSelection) + { + remove = this.cells; + cells = [this.getFirstSelectableCell(cells)]; + } + + var tmp = []; + + for (var i = 0; i < cells.length; i++) + { + if (!this.isSelected(cells[i]) && + this.graph.isCellSelectable(cells[i])) + { + tmp.push(cells[i]); + } + } + + this.changeSelection(tmp, remove); + } +}; + +/** + * Function: removeCell + * + * Removes the specified <mxCell> from the selection and fires a <select> + * event for the remaining cells. + * + * Parameters: + * + * cell - <mxCell> to remove from the selection. + */ +mxGraphSelectionModel.prototype.removeCell = function(cell) +{ + if (cell != null) + { + this.removeCells([cell]); + } +}; + +/** + * Function: removeCells + */ +mxGraphSelectionModel.prototype.removeCells = function(cells) +{ + if (cells != null) + { + var tmp = []; + + for (var i = 0; i < cells.length; i++) + { + if (this.isSelected(cells[i])) + { + tmp.push(cells[i]); + } + } + + this.changeSelection(null, tmp); + } +}; + +/** + * Function: changeSelection + * + * Inner callback to add the specified <mxCell> to the selection. No event + * is fired in this implementation. + * + * Paramters: + * + * cell - <mxCell> to add to the selection. + */ +mxGraphSelectionModel.prototype.changeSelection = function(added, removed) +{ + if ((added != null && + added.length > 0 && + added[0] != null) || + (removed != null && + removed.length > 0 && + removed[0] != null)) + { + var change = new mxSelectionChange(this, added, removed); + change.execute(); + var edit = new mxUndoableEdit(this, false); + edit.add(change); + this.fireEvent(new mxEventObject(mxEvent.UNDO, 'edit', edit)); + } +}; + +/** + * Function: cellAdded + * + * Inner callback to add the specified <mxCell> to the selection. No event + * is fired in this implementation. + * + * Paramters: + * + * cell - <mxCell> to add to the selection. + */ +mxGraphSelectionModel.prototype.cellAdded = function(cell) +{ + if (cell != null && + !this.isSelected(cell)) + { + this.cells.push(cell); + } +}; + +/** + * Function: cellRemoved + * + * Inner callback to remove the specified <mxCell> from the selection. No + * event is fired in this implementation. + * + * Parameters: + * + * cell - <mxCell> to remove from the selection. + */ +mxGraphSelectionModel.prototype.cellRemoved = function(cell) +{ + if (cell != null) + { + var index = mxUtils.indexOf(this.cells, cell); + + if (index >= 0) + { + this.cells.splice(index, 1); + } + } +}; + +/** + * Class: mxSelectionChange + * + * Action to change the current root in a view. + * + * Constructor: mxCurrentRootChange + * + * Constructs a change of the current root in the given view. + */ +function mxSelectionChange(selectionModel, added, removed) +{ + this.selectionModel = selectionModel; + this.added = (added != null) ? added.slice() : null; + this.removed = (removed != null) ? removed.slice() : null; +}; + +/** + * Function: execute + * + * Changes the current root of the view. + */ +mxSelectionChange.prototype.execute = function() +{ + var t0 = mxLog.enter('mxSelectionChange.execute'); + window.status = mxResources.get( + this.selectionModel.updatingSelectionResource) || + this.selectionModel.updatingSelectionResource; + + if (this.removed != null) + { + for (var i = 0; i < this.removed.length; i++) + { + this.selectionModel.cellRemoved(this.removed[i]); + } + } + + if (this.added != null) + { + for (var i = 0; i < this.added.length; i++) + { + this.selectionModel.cellAdded(this.added[i]); + } + } + + var tmp = this.added; + this.added = this.removed; + this.removed = tmp; + + window.status = mxResources.get(this.selectionModel.doneResource) || + this.selectionModel.doneResource; + mxLog.leave('mxSelectionChange.execute', t0); + + this.selectionModel.fireEvent(new mxEventObject(mxEvent.CHANGE, + 'added', this.added, 'removed', this.removed)); +}; diff --git a/src/js/view/mxGraphView.js b/src/js/view/mxGraphView.js new file mode 100644 index 0000000..0ef2dc8 --- /dev/null +++ b/src/js/view/mxGraphView.js @@ -0,0 +1,2545 @@ +/** + * $Id: mxGraphView.js,v 1.195 2012-11-20 09:06:07 gaudenz Exp $ + * Copyright (c) 2006-2010, JGraph Ltd + */ +/** + * Class: mxGraphView + * + * Extends <mxEventSource> to implement a view for a graph. This class is in + * charge of computing the absolute coordinates for the relative child + * geometries, the points for perimeters and edge styles and keeping them + * cached in <mxCellStates> for faster retrieval. The states are updated + * whenever the model or the view state (translate, scale) changes. The scale + * and translate are honoured in the bounds. + * + * Event: mxEvent.UNDO + * + * Fires after the root was changed in <setCurrentRoot>. The <code>edit</code> + * property contains the <mxUndoableEdit> which contains the + * <mxCurrentRootChange>. + * + * Event: mxEvent.SCALE_AND_TRANSLATE + * + * Fires after the scale and translate have been changed in <scaleAndTranslate>. + * The <code>scale</code>, <code>previousScale</code>, <code>translate</code> + * and <code>previousTranslate</code> properties contain the new and previous + * scale and translate, respectively. + * + * Event: mxEvent.SCALE + * + * Fires after the scale was changed in <setScale>. The <code>scale</code> and + * <code>previousScale</code> properties contain the new and previous scale. + * + * Event: mxEvent.TRANSLATE + * + * Fires after the translate was changed in <setTranslate>. The + * <code>translate</code> and <code>previousTranslate</code> properties contain + * the new and previous value for translate. + * + * Event: mxEvent.DOWN and mxEvent.UP + * + * Fire if the current root is changed by executing an <mxCurrentRootChange>. + * The event name depends on the location of the root in the cell hierarchy + * with respect to the current root. The <code>root</code> and + * <code>previous</code> properties contain the new and previous root, + * respectively. + * + * Constructor: mxGraphView + * + * Constructs a new view for the given <mxGraph>. + * + * Parameters: + * + * graph - Reference to the enclosing <mxGraph>. + */ +function mxGraphView(graph) +{ + this.graph = graph; + this.translate = new mxPoint(); + this.graphBounds = new mxRectangle(); + this.states = new mxDictionary(); +}; + +/** + * Extends mxEventSource. + */ +mxGraphView.prototype = new mxEventSource(); +mxGraphView.prototype.constructor = mxGraphView; + +/** + * + */ +mxGraphView.prototype.EMPTY_POINT = new mxPoint(); + +/** + * Variable: doneResource + * + * Specifies the resource key for the status message after a long operation. + * If the resource for this key does not exist then the value is used as + * the status message. Default is 'done'. + */ +mxGraphView.prototype.doneResource = (mxClient.language != 'none') ? 'done' : ''; + +/** + * Function: updatingDocumentResource + * + * Specifies the resource key for the status message while the document is + * being updated. If the resource for this key does not exist then the + * value is used as the status message. Default is 'updatingDocument'. + */ +mxGraphView.prototype.updatingDocumentResource = (mxClient.language != 'none') ? 'updatingDocument' : ''; + +/** + * Variable: allowEval + * + * Specifies if string values in cell styles should be evaluated using + * <mxUtils.eval>. This will only be used if the string values can't be mapped + * to objects using <mxStyleRegistry>. Default is false. NOTE: Enabling this + * switch carries a possible security risk (see the section on security in + * the manual). + */ +mxGraphView.prototype.allowEval = false; + +/** + * Variable: captureDocumentGesture + * + * Specifies if a gesture should be captured when it goes outside of the + * graph container. Default is true. + */ +mxGraphView.prototype.captureDocumentGesture = true; + +/** + * Variable: rendering + * + * Specifies if shapes should be created, updated and destroyed using the + * methods of <mxCellRenderer> in <graph>. Default is true. + */ +mxGraphView.prototype.rendering = true; + +/** + * Variable: graph + * + * Reference to the enclosing <mxGraph>. + */ +mxGraphView.prototype.graph = null; + +/** + * Variable: currentRoot + * + * <mxCell> that acts as the root of the displayed cell hierarchy. + */ +mxGraphView.prototype.currentRoot = null; + +/** + * Variable: graphBounds + * + * <mxRectangle> that caches the scales, translated bounds of the current view. + */ +mxGraphView.prototype.graphBounds = null; + +/** + * Variable: scale + * + * Specifies the scale. Default is 1 (100%). + */ +mxGraphView.prototype.scale = 1; + +/** + * Variable: translate + * + * <mxPoint> that specifies the current translation. Default is a new + * empty <mxPoint>. + */ +mxGraphView.prototype.translate = null; + +/** + * Variable: updateStyle + * + * Specifies if the style should be updated in each validation step. If this + * is false then the style is only updated if the state is created or if the + * style of the cell was changed. Default is false. + */ +mxGraphView.prototype.updateStyle = false; + +/** + * Function: getGraphBounds + * + * Returns <graphBounds>. + */ +mxGraphView.prototype.getGraphBounds = function() +{ + return this.graphBounds; +}; + +/** + * Function: setGraphBounds + * + * Sets <graphBounds>. + */ +mxGraphView.prototype.setGraphBounds = function(value) +{ + this.graphBounds = value; +}; + +/** + * Function: getBounds + * + * Returns the bounds (on the screen) for the given array of <mxCells>. + * + * Parameters: + * + * cells - Array of <mxCells> to return the bounds for. + */ +mxGraphView.prototype.getBounds = function(cells) +{ + var result = null; + + if (cells != null && cells.length > 0) + { + var model = this.graph.getModel(); + + for (var i = 0; i < cells.length; i++) + { + if (model.isVertex(cells[i]) || model.isEdge(cells[i])) + { + var state = this.getState(cells[i]); + + if (state != null) + { + if (result == null) + { + result = new mxRectangle(state.x, state.y, + state.width, state.height); + } + else + { + result.add(state); + } + } + } + } + } + + return result; +}; + +/** + * Function: setCurrentRoot + * + * Sets and returns the current root and fires an <undo> event before + * calling <mxGraph.sizeDidChange>. + * + * Parameters: + * + * root - <mxCell> that specifies the root of the displayed cell hierarchy. + */ +mxGraphView.prototype.setCurrentRoot = function(root) +{ + if (this.currentRoot != root) + { + var change = new mxCurrentRootChange(this, root); + change.execute(); + var edit = new mxUndoableEdit(this, false); + edit.add(change); + this.fireEvent(new mxEventObject(mxEvent.UNDO, 'edit', edit)); + this.graph.sizeDidChange(); + } + + return root; +}; + +/** + * Function: scaleAndTranslate + * + * Sets the scale and translation and fires a <scale> and <translate> event + * before calling <revalidate> followed by <mxGraph.sizeDidChange>. + * + * Parameters: + * + * scale - Decimal value that specifies the new scale (1 is 100%). + * dx - X-coordinate of the translation. + * dy - Y-coordinate of the translation. + */ +mxGraphView.prototype.scaleAndTranslate = function(scale, dx, dy) +{ + var previousScale = this.scale; + var previousTranslate = new mxPoint(this.translate.x, this.translate.y); + + if (this.scale != scale || this.translate.x != dx || this.translate.y != dy) + { + this.scale = scale; + + this.translate.x = dx; + this.translate.y = dy; + + if (this.isEventsEnabled()) + { + this.revalidate(); + this.graph.sizeDidChange(); + } + } + + this.fireEvent(new mxEventObject(mxEvent.SCALE_AND_TRANSLATE, + 'scale', scale, 'previousScale', previousScale, + 'translate', this.translate, 'previousTranslate', previousTranslate)); +}; + +/** + * Function: getScale + * + * Returns the <scale>. + */ +mxGraphView.prototype.getScale = function() +{ + return this.scale; +}; + +/** + * Function: setScale + * + * Sets the scale and fires a <scale> event before calling <revalidate> followed + * by <mxGraph.sizeDidChange>. + * + * Parameters: + * + * value - Decimal value that specifies the new scale (1 is 100%). + */ +mxGraphView.prototype.setScale = function(value) +{ + var previousScale = this.scale; + + if (this.scale != value) + { + this.scale = value; + + if (this.isEventsEnabled()) + { + this.revalidate(); + this.graph.sizeDidChange(); + } + } + + this.fireEvent(new mxEventObject(mxEvent.SCALE, + 'scale', value, 'previousScale', previousScale)); +}; + +/** + * Function: getTranslate + * + * Returns the <translate>. + */ +mxGraphView.prototype.getTranslate = function() +{ + return this.translate; +}; + +/** + * Function: setTranslate + * + * Sets the translation and fires a <translate> event before calling + * <revalidate> followed by <mxGraph.sizeDidChange>. The translation is the + * negative of the origin. + * + * Parameters: + * + * dx - X-coordinate of the translation. + * dy - Y-coordinate of the translation. + */ +mxGraphView.prototype.setTranslate = function(dx, dy) +{ + var previousTranslate = new mxPoint(this.translate.x, this.translate.y); + + if (this.translate.x != dx || this.translate.y != dy) + { + this.translate.x = dx; + this.translate.y = dy; + + if (this.isEventsEnabled()) + { + this.revalidate(); + this.graph.sizeDidChange(); + } + } + + this.fireEvent(new mxEventObject(mxEvent.TRANSLATE, + 'translate', this.translate, 'previousTranslate', previousTranslate)); +}; + +/** + * Function: refresh + * + * Clears the view if <currentRoot> is not null and revalidates. + */ +mxGraphView.prototype.refresh = function() +{ + if (this.currentRoot != null) + { + this.clear(); + } + + this.revalidate(); +}; + +/** + * Function: revalidate + * + * Revalidates the complete view with all cell states. + */ +mxGraphView.prototype.revalidate = function() +{ + this.invalidate(); + this.validate(); +}; + +/** + * Function: clear + * + * Removes the state of the given cell and all descendants if the given + * cell is not the current root. + * + * Parameters: + * + * cell - Optional <mxCell> for which the state should be removed. Default + * is the root of the model. + * force - Boolean indicating if the current root should be ignored for + * recursion. + */ +mxGraphView.prototype.clear = function(cell, force, recurse) +{ + var model = this.graph.getModel(); + cell = cell || model.getRoot(); + force = (force != null) ? force : false; + recurse = (recurse != null) ? recurse : true; + + this.removeState(cell); + + if (recurse && (force || cell != this.currentRoot)) + { + var childCount = model.getChildCount(cell); + + for (var i = 0; i < childCount; i++) + { + this.clear(model.getChildAt(cell, i), force); + } + } + else + { + this.invalidate(cell); + } +}; + +/** + * Function: invalidate + * + * Invalidates the state of the given cell, all its descendants and + * connected edges. + * + * Parameters: + * + * cell - Optional <mxCell> to be invalidated. Default is the root of the + * model. + */ +mxGraphView.prototype.invalidate = function(cell, recurse, includeEdges, orderChanged) +{ + var model = this.graph.getModel(); + cell = cell || model.getRoot(); + recurse = (recurse != null) ? recurse : true; + includeEdges = (includeEdges != null) ? includeEdges : true; + orderChanged = (orderChanged != null) ? orderChanged : false; + + var state = this.getState(cell); + + if (state != null) + { + state.invalid = true; + + if (orderChanged) + { + state.orderChanged = true; + } + } + + // Recursively invalidates all descendants + if (recurse) + { + var childCount = model.getChildCount(cell); + + for (var i = 0; i < childCount; i++) + { + var child = model.getChildAt(cell, i); + this.invalidate(child, recurse, includeEdges, orderChanged); + } + } + + // Propagates invalidation to all connected edges + if (includeEdges) + { + var edgeCount = model.getEdgeCount(cell); + + for (var i = 0; i < edgeCount; i++) + { + this.invalidate(model.getEdgeAt(cell, i), recurse, includeEdges); + } + } +}; + +/** + * Function: validate + * + * First validates all bounds and then validates all points recursively on + * all visible cells starting at the given cell. Finally the background + * is validated using <validateBackground>. + * + * Parameters: + * + * cell - Optional <mxCell> to be used as the root of the validation. + * Default is <currentRoot> or the root of the model. + */ +mxGraphView.prototype.validate = function(cell) +{ + var t0 = mxLog.enter('mxGraphView.validate'); + window.status = mxResources.get(this.updatingDocumentResource) || + this.updatingDocumentResource; + + cell = cell || ((this.currentRoot != null) ? + this.currentRoot : + this.graph.getModel().getRoot()); + this.validateBounds(null, cell); + var graphBounds = this.validatePoints(null, cell); + + if (graphBounds == null) + { + graphBounds = new mxRectangle(); + } + + this.setGraphBounds(graphBounds); + this.validateBackground(); + + window.status = mxResources.get(this.doneResource) || + this.doneResource; + mxLog.leave('mxGraphView.validate', t0); +}; + +/** + * Function: createBackgroundPageShape + * + * Creates and returns the shape used as the background page. + * + * Parameters: + * + * bounds - <mxRectangle> that represents the bounds of the shape. + */ +mxGraphView.prototype.createBackgroundPageShape = function(bounds) +{ + return new mxRectangleShape(bounds, 'white', 'black'); +}; + +/** + * Function: validateBackground + * + * Validates the background image. + */ +mxGraphView.prototype.validateBackground = function() +{ + var bg = this.graph.getBackgroundImage(); + + if (bg != null) + { + if (this.backgroundImage == null || this.backgroundImage.image != bg.src) + { + if (this.backgroundImage != null) + { + this.backgroundImage.destroy(); + } + + var bounds = new mxRectangle(0, 0, 1, 1); + + this.backgroundImage = new mxImageShape(bounds, bg.src); + this.backgroundImage.dialect = this.graph.dialect; + this.backgroundImage.init(this.backgroundPane); + this.backgroundImage.redraw(); + } + + this.redrawBackgroundImage(this.backgroundImage, bg); + } + else if (this.backgroundImage != null) + { + this.backgroundImage.destroy(); + this.backgroundImage = null; + } + + if (this.graph.pageVisible) + { + var bounds = this.getBackgroundPageBounds(); + + if (this.backgroundPageShape == null) + { + this.backgroundPageShape = this.createBackgroundPageShape(bounds); + this.backgroundPageShape.scale = this.scale; + this.backgroundPageShape.isShadow = true; + this.backgroundPageShape.dialect = this.graph.dialect; + this.backgroundPageShape.init(this.backgroundPane); + this.backgroundPageShape.redraw(); + + // Adds listener for double click handling on background + mxEvent.addListener(this.backgroundPageShape.node, 'dblclick', + mxUtils.bind(this, function(evt) + { + this.graph.dblClick(evt); + }) + ); + + var md = (mxClient.IS_TOUCH) ? 'touchstart' : 'mousedown'; + var mm = (mxClient.IS_TOUCH) ? 'touchmove' : 'mousemove'; + var mu = (mxClient.IS_TOUCH) ? 'touchend' : 'mouseup'; + + // Adds basic listeners for graph event dispatching outside of the + // container and finishing the handling of a single gesture + mxEvent.addListener(this.backgroundPageShape.node, md, + mxUtils.bind(this, function(evt) + { + this.graph.fireMouseEvent(mxEvent.MOUSE_DOWN, new mxMouseEvent(evt)); + }) + ); + mxEvent.addListener(this.backgroundPageShape.node, mm, + mxUtils.bind(this, function(evt) + { + // Hides the tooltip if mouse is outside container + if (this.graph.tooltipHandler != null && + this.graph.tooltipHandler.isHideOnHover()) + { + this.graph.tooltipHandler.hide(); + } + + if (this.graph.isMouseDown && + !mxEvent.isConsumed(evt)) + { + this.graph.fireMouseEvent(mxEvent.MOUSE_MOVE, + new mxMouseEvent(evt)); + } + }) + ); + mxEvent.addListener(this.backgroundPageShape.node, mu, + mxUtils.bind(this, function(evt) + { + this.graph.fireMouseEvent(mxEvent.MOUSE_UP, + new mxMouseEvent(evt)); + }) + ); + } + else + { + this.backgroundPageShape.scale = this.scale; + this.backgroundPageShape.bounds = bounds; + this.backgroundPageShape.redraw(); + } + } + else if (this.backgroundPageShape != null) + { + this.backgroundPageShape.destroy(); + this.backgroundPageShape = null; + } +}; + +/** + * Function: getBackgroundPageBounds + * + * Returns the bounds for the background page. + */ +mxGraphView.prototype.getBackgroundPageBounds = function() +{ + var fmt = this.graph.pageFormat; + var ps = this.scale * this.graph.pageScale; + var bounds = new mxRectangle(this.scale * this.translate.x, this.scale * this.translate.y, + fmt.width * ps, fmt.height * ps); + + return bounds; +}; + +/** + * Function: redrawBackgroundImage + * + * Updates the bounds and redraws the background image. + * + * Example: + * + * If the background image should not be scaled, this can be replaced with + * the following. + * + * (code) + * mxGraphView.prototype.redrawBackground = function(backgroundImage, bg) + * { + * backgroundImage.bounds.x = this.translate.x; + * backgroundImage.bounds.y = this.translate.y; + * backgroundImage.bounds.width = bg.width; + * backgroundImage.bounds.height = bg.height; + * + * backgroundImage.redraw(); + * }; + * (end) + * + * Parameters: + * + * backgroundImage - <mxImageShape> that represents the background image. + * bg - <mxImage> that specifies the image and its dimensions. + */ +mxGraphView.prototype.redrawBackgroundImage = function(backgroundImage, bg) +{ + backgroundImage.scale = this.scale; + backgroundImage.bounds.x = this.scale * this.translate.x; + backgroundImage.bounds.y = this.scale * this.translate.y; + backgroundImage.bounds.width = this.scale * bg.width; + backgroundImage.bounds.height = this.scale * bg.height; + + backgroundImage.redraw(); +}; + +/** + * Function: validateBounds + * + * Validates the bounds of the given parent's child using the given parent + * state as the origin for the child. The validation is carried out + * recursively for all non-collapsed descendants. + * + * Parameters: + * + * parentState - <mxCellState> for the given parent. + * cell - <mxCell> for which the bounds in the state should be updated. + */ +mxGraphView.prototype.validateBounds = function(parentState, cell) +{ + var model = this.graph.getModel(); + var state = this.getState(cell, true); + + if (state != null && state.invalid) + { + if (!this.graph.isCellVisible(cell)) + { + this.removeState(cell); + } + + // Updates the cell state's origin + else if (cell != this.currentRoot && parentState != null) + { + state.absoluteOffset.x = 0; + state.absoluteOffset.y = 0; + state.origin.x = parentState.origin.x; + state.origin.y = parentState.origin.y; + var geo = this.graph.getCellGeometry(cell); + + if (geo != null) + { + if (!model.isEdge(cell)) + { + var offset = geo.offset || this.EMPTY_POINT; + + if (geo.relative) + { + state.origin.x += geo.x * parentState.width / + this.scale + offset.x; + state.origin.y += geo.y * parentState.height / + this.scale + offset.y; + } + else + { + state.absoluteOffset.x = this.scale * offset.x; + state.absoluteOffset.y = this.scale * offset.y; + state.origin.x += geo.x; + state.origin.y += geo.y; + } + } + + // Updates cell state's bounds + state.x = this.scale * (this.translate.x + state.origin.x); + state.y = this.scale * (this.translate.y + state.origin.y); + state.width = this.scale * geo.width; + state.height = this.scale * geo.height; + + if (model.isVertex(cell)) + { + this.updateVertexLabelOffset(state); + } + } + } + + // Applies child offset to origin + var offset = this.graph.getChildOffsetForCell(cell); + + if (offset != null) + { + state.origin.x += offset.x; + state.origin.y += offset.y; + } + } + + // Recursively validates the child bounds + if (state != null && (!this.graph.isCellCollapsed(cell) || + cell == this.currentRoot)) + { + var childCount = model.getChildCount(cell); + + for (var i = 0; i < childCount; i++) + { + var child = model.getChildAt(cell, i); + this.validateBounds(state, child); + } + } +}; + +/** + * Function: updateVertexLabelOffset + * + * Updates the absoluteOffset of the given vertex cell state. This takes + * into account the label position styles. + * + * Parameters: + * + * state - <mxCellState> whose absolute offset should be updated. + */ +mxGraphView.prototype.updateVertexLabelOffset = function(state) +{ + var horizontal = mxUtils.getValue(state.style, + mxConstants.STYLE_LABEL_POSITION, + mxConstants.ALIGN_CENTER); + + if (horizontal == mxConstants.ALIGN_LEFT) + { + state.absoluteOffset.x -= state.width; + } + else if (horizontal == mxConstants.ALIGN_RIGHT) + { + state.absoluteOffset.x += state.width; + } + + var vertical = mxUtils.getValue(state.style, + mxConstants.STYLE_VERTICAL_LABEL_POSITION, + mxConstants.ALIGN_MIDDLE); + + if (vertical == mxConstants.ALIGN_TOP) + { + state.absoluteOffset.y -= state.height; + } + else if (vertical == mxConstants.ALIGN_BOTTOM) + { + state.absoluteOffset.y += state.height; + } +}; + +/** + * Function: validatePoints + * + * Validates the points for the state of the given cell recursively if the + * cell is not collapsed and returns the bounding box of all visited states + * as an <mxRectangle>. + * + * Parameters: + * + * parentState - <mxCellState> for the parent cell. + * cell - <mxCell> whose points in the state should be updated. + */ +mxGraphView.prototype.validatePoints = function(parentState, cell) +{ + var model = this.graph.getModel(); + var state = this.getState(cell); + var bbox = null; + + if (state != null) + { + if (state.invalid) + { + var geo = this.graph.getCellGeometry(cell); + + if (geo != null && model.isEdge(cell)) + { + // Updates the points on the source terminal if its an edge + var source = this.getState(this.getVisibleTerminal(cell, true)); + state.setVisibleTerminalState(source, true); + + if (source != null && model.isEdge(source.cell) && + !model.isAncestor(source.cell, cell)) + { + var tmp = this.getState(model.getParent(source.cell)); + this.validatePoints(tmp, source.cell); + } + + // Updates the points on the target terminal if its an edge + var target = this.getState(this.getVisibleTerminal(cell, false)); + state.setVisibleTerminalState(target, false); + + if (target != null && model.isEdge(target.cell) && + !model.isAncestor(target.cell, cell)) + { + var tmp = this.getState(model.getParent(target.cell)); + this.validatePoints(tmp, target.cell); + } + + this.updateFixedTerminalPoints(state, source, target); + this.updatePoints(state, geo.points, source, target); + this.updateFloatingTerminalPoints(state, source, target); + this.updateEdgeBounds(state); + this.updateEdgeLabelOffset(state); + } + else if (geo != null && geo.relative && parentState != null && + model.isEdge(parentState.cell)) + { + var origin = this.getPoint(parentState, geo); + + if (origin != null) + { + state.x = origin.x; + state.y = origin.y; + + origin.x = (origin.x / this.scale) - this.translate.x; + origin.y = (origin.y / this.scale) - this.translate.y; + state.origin = origin; + + this.childMoved(parentState, state); + } + } + + state.invalid = false; + + if (cell != this.currentRoot) + { + // NOTE: Label bounds currently ignored if rendering is false + this.graph.cellRenderer.redraw(state, false, this.isRendering()); + } + } + + if (model.isEdge(cell) || model.isVertex(cell)) + { + if (state.shape != null && state.shape.boundingBox != null) + { + bbox = state.shape.boundingBox.clone(); + } + + if (state.text != null && !this.graph.isLabelClipped(state.cell)) + { + // Adds label bounding box to graph bounds + if (state.text.boundingBox != null) + { + if (bbox != null) + { + bbox.add(state.text.boundingBox); + } + else + { + bbox = state.text.boundingBox.clone(); + } + } + } + } + } + + if (state != null && (!this.graph.isCellCollapsed(cell) || + cell == this.currentRoot)) + { + var childCount = model.getChildCount(cell); + + for (var i = 0; i < childCount; i++) + { + var child = model.getChildAt(cell, i); + var bounds = this.validatePoints(state, child); + + if (bounds != null) + { + if (bbox == null) + { + bbox = bounds; + } + else + { + bbox.add(bounds); + } + } + } + } + + return bbox; +}; + +/** + * Function: childMoved + * + * Invoked when a child state was moved as a result of late evaluation + * of its position. This is invoked for relative edge children whose + * position can only be determined after the points of the parent edge + * are updated in validatePoints, and validates the bounds of all + * descendants of the child using validateBounds. + * + * Parameters: + * + * parent - <mxCellState> that represents the parent state. + * child - <mxCellState> that represents the child state. + */ +mxGraphView.prototype.childMoved = function(parent, child) +{ + var cell = child.cell; + + // Children of relative edge children need to validate + // their bounds after their parent state was updated + if (!this.graph.isCellCollapsed(cell) || cell == this.currentRoot) + { + var model = this.graph.getModel(); + var childCount = model.getChildCount(cell); + + for (var i = 0; i < childCount; i++) + { + this.validateBounds(child, model.getChildAt(cell, i)); + } + } +}; + +/** + * Function: updateFixedTerminalPoints + * + * Sets the initial absolute terminal points in the given state before the edge + * style is computed. + * + * Parameters: + * + * edge - <mxCellState> whose initial terminal points should be updated. + * source - <mxCellState> which represents the source terminal. + * target - <mxCellState> which represents the target terminal. + */ +mxGraphView.prototype.updateFixedTerminalPoints = function(edge, source, target) +{ + this.updateFixedTerminalPoint(edge, source, true, + this.graph.getConnectionConstraint(edge, source, true)); + this.updateFixedTerminalPoint(edge, target, false, + this.graph.getConnectionConstraint(edge, target, false)); +}; + +/** + * Function: updateFixedTerminalPoint + * + * Sets the fixed source or target terminal point on the given edge. + * + * Parameters: + * + * edge - <mxCellState> whose terminal point should be updated. + * terminal - <mxCellState> which represents the actual terminal. + * source - Boolean that specifies if the terminal is the source. + * constraint - <mxConnectionConstraint> that specifies the connection. + */ +mxGraphView.prototype.updateFixedTerminalPoint = function(edge, terminal, source, constraint) +{ + var pt = null; + + if (constraint != null) + { + pt = this.graph.getConnectionPoint(terminal, constraint); + } + + if (pt == null && terminal == null) + { + var s = this.scale; + var tr = this.translate; + var orig = edge.origin; + var geo = this.graph.getCellGeometry(edge.cell); + pt = geo.getTerminalPoint(source); + + if (pt != null) + { + pt = new mxPoint(s * (tr.x + pt.x + orig.x), + s * (tr.y + pt.y + orig.y)); + } + } + + edge.setAbsoluteTerminalPoint(pt, source); +}; + +/** + * Function: updatePoints + * + * Updates the absolute points in the given state using the specified array + * of <mxPoints> as the relative points. + * + * Parameters: + * + * edge - <mxCellState> whose absolute points should be updated. + * points - Array of <mxPoints> that constitute the relative points. + * source - <mxCellState> that represents the source terminal. + * target - <mxCellState> that represents the target terminal. + */ +mxGraphView.prototype.updatePoints = function(edge, points, source, target) +{ + if (edge != null) + { + var pts = []; + pts.push(edge.absolutePoints[0]); + var edgeStyle = this.getEdgeStyle(edge, points, source, target); + + if (edgeStyle != null) + { + var src = this.getTerminalPort(edge, source, true); + var trg = this.getTerminalPort(edge, target, false); + + edgeStyle(edge, src, trg, points, pts); + } + else if (points != null) + { + for (var i = 0; i < points.length; i++) + { + if (points[i] != null) + { + var pt = mxUtils.clone(points[i]); + pts.push(this.transformControlPoint(edge, pt)); + } + } + } + + var tmp = edge.absolutePoints; + pts.push(tmp[tmp.length-1]); + + edge.absolutePoints = pts; + } +}; + +/** + * Function: transformControlPoint + * + * Transforms the given control point to an absolute point. + */ +mxGraphView.prototype.transformControlPoint = function(state, pt) +{ + var orig = state.origin; + + return new mxPoint(this.scale * (pt.x + this.translate.x + orig.x), + this.scale * (pt.y + this.translate.y + orig.y)); +}; + +/** + * Function: getEdgeStyle + * + * Returns the edge style function to be used to render the given edge + * state. + */ +mxGraphView.prototype.getEdgeStyle = function(edge, points, source, target) +{ + var edgeStyle = (source != null && source == target) ? + mxUtils.getValue(edge.style, mxConstants.STYLE_LOOP, + this.graph.defaultLoopStyle) : + (!mxUtils.getValue(edge.style, + mxConstants.STYLE_NOEDGESTYLE, false) ? + edge.style[mxConstants.STYLE_EDGE] : + null); + + // Converts string values to objects + if (typeof(edgeStyle) == "string") + { + var tmp = mxStyleRegistry.getValue(edgeStyle); + + if (tmp == null && this.isAllowEval()) + { + tmp = mxUtils.eval(edgeStyle); + } + + edgeStyle = tmp; + } + + if (typeof(edgeStyle) == "function") + { + return edgeStyle; + } + + return null; +}; + +/** + * Function: updateFloatingTerminalPoints + * + * Updates the terminal points in the given state after the edge style was + * computed for the edge. + * + * Parameters: + * + * state - <mxCellState> whose terminal points should be updated. + * source - <mxCellState> that represents the source terminal. + * target - <mxCellState> that represents the target terminal. + */ +mxGraphView.prototype.updateFloatingTerminalPoints = function(state, source, target) +{ + var pts = state.absolutePoints; + var p0 = pts[0]; + var pe = pts[pts.length - 1]; + + if (pe == null && target != null) + { + this.updateFloatingTerminalPoint(state, target, source, false); + } + + if (p0 == null && source != null) + { + this.updateFloatingTerminalPoint(state, source, target, true); + } +}; + +/** + * Function: updateFloatingTerminalPoint + * + * Updates the absolute terminal point in the given state for the given + * start and end state, where start is the source if source is true. + * + * Parameters: + * + * edge - <mxCellState> whose terminal point should be updated. + * start - <mxCellState> for the terminal on "this" side of the edge. + * end - <mxCellState> for the terminal on the other side of the edge. + * source - Boolean indicating if start is the source terminal state. + */ +mxGraphView.prototype.updateFloatingTerminalPoint = function(edge, start, end, source) +{ + start = this.getTerminalPort(edge, start, source); + var next = this.getNextPoint(edge, end, source); + + var alpha = mxUtils.toRadians(Number(start.style[mxConstants.STYLE_ROTATION] || '0')); + var center = new mxPoint(start.getCenterX(), start.getCenterY()); + + if (alpha != 0) + { + var cos = Math.cos(-alpha); + var sin = Math.sin(-alpha); + next = mxUtils.getRotatedPoint(next, cos, sin, center); + } + + var border = parseFloat(edge.style[mxConstants.STYLE_PERIMETER_SPACING] || 0); + border += parseFloat(edge.style[(source) ? + mxConstants.STYLE_SOURCE_PERIMETER_SPACING : + mxConstants.STYLE_TARGET_PERIMETER_SPACING] || 0); + var pt = this.getPerimeterPoint(start, next, this.graph.isOrthogonal(edge), border); + + if (alpha != 0) + { + var cos = Math.cos(alpha); + var sin = Math.sin(alpha); + pt = mxUtils.getRotatedPoint(pt, cos, sin, center); + } + + edge.setAbsoluteTerminalPoint(pt, source); +}; + +/** + * Function: getTerminalPort + * + * Returns an <mxCellState> that represents the source or target terminal or + * port for the given edge. + * + * Parameters: + * + * state - <mxCellState> that represents the state of the edge. + * terminal - <mxCellState> that represents the terminal. + * source - Boolean indicating if the given terminal is the source terminal. + */ +mxGraphView.prototype.getTerminalPort = function(state, terminal, source) +{ + var key = (source) ? mxConstants.STYLE_SOURCE_PORT : + mxConstants.STYLE_TARGET_PORT; + var id = mxUtils.getValue(state.style, key); + + if (id != null) + { + var tmp = this.getState(this.graph.getModel().getCell(id)); + + // Only uses ports where a cell state exists + if (tmp != null) + { + terminal = tmp; + } + } + + return terminal; +}; + +/** + * Function: getPerimeterPoint + * + * Returns an <mxPoint> that defines the location of the intersection point between + * the perimeter and the line between the center of the shape and the given point. + * + * Parameters: + * + * terminal - <mxCellState> for the source or target terminal. + * next - <mxPoint> that lies outside of the given terminal. + * orthogonal - Boolean that specifies if the orthogonal projection onto + * the perimeter should be returned. If this is false then the intersection + * of the perimeter and the line between the next and the center point is + * returned. + * border - Optional border between the perimeter and the shape. + */ +mxGraphView.prototype.getPerimeterPoint = function(terminal, next, orthogonal, border) +{ + var point = null; + + if (terminal != null) + { + var perimeter = this.getPerimeterFunction(terminal); + + if (perimeter != null && next != null) + { + var bounds = this.getPerimeterBounds(terminal, border); + + if (bounds.width > 0 || bounds.height > 0) + { + point = perimeter(bounds, terminal, next, orthogonal); + } + } + + if (point == null) + { + point = this.getPoint(terminal); + } + } + + return point; +}; + +/** + * Function: getRoutingCenterX + * + * Returns the x-coordinate of the center point for automatic routing. + */ +mxGraphView.prototype.getRoutingCenterX = function (state) +{ + var f = (state.style != null) ? parseFloat(state.style + [mxConstants.STYLE_ROUTING_CENTER_X]) || 0 : 0; + + return state.getCenterX() + f * state.width; +}; + +/** + * Function: getRoutingCenterY + * + * Returns the y-coordinate of the center point for automatic routing. + */ +mxGraphView.prototype.getRoutingCenterY = function (state) +{ + var f = (state.style != null) ? parseFloat(state.style + [mxConstants.STYLE_ROUTING_CENTER_Y]) || 0 : 0; + + return state.getCenterY() + f * state.height; +}; + +/** + * Function: getPerimeterBounds + * + * Returns the perimeter bounds for the given terminal, edge pair as an + * <mxRectangle>. + * + * If you have a model where each terminal has a relative child that should + * act as the graphical endpoint for a connection from/to the terminal, then + * this method can be replaced as follows: + * + * (code) + * var oldGetPerimeterBounds = mxGraphView.prototype.getPerimeterBounds; + * mxGraphView.prototype.getPerimeterBounds = function(terminal, edge, isSource) + * { + * var model = this.graph.getModel(); + * var childCount = model.getChildCount(terminal.cell); + * + * if (childCount > 0) + * { + * var child = model.getChildAt(terminal.cell, 0); + * var geo = model.getGeometry(child); + * + * if (geo != null && + * geo.relative) + * { + * var state = this.getState(child); + * + * if (state != null) + * { + * terminal = state; + * } + * } + * } + * + * return oldGetPerimeterBounds.apply(this, arguments); + * }; + * (end) + * + * Parameters: + * + * terminal - <mxCellState> that represents the terminal. + * border - Number that adds a border between the shape and the perimeter. + */ +mxGraphView.prototype.getPerimeterBounds = function(terminal, border) +{ + border = (border != null) ? border : 0; + + if (terminal != null) + { + border += parseFloat(terminal.style[mxConstants.STYLE_PERIMETER_SPACING] || 0); + } + + return terminal.getPerimeterBounds(border * this.scale); +}; + +/** + * Function: getPerimeterFunction + * + * Returns the perimeter function for the given state. + */ +mxGraphView.prototype.getPerimeterFunction = function(state) +{ + var perimeter = state.style[mxConstants.STYLE_PERIMETER]; + + // Converts string values to objects + if (typeof(perimeter) == "string") + { + var tmp = mxStyleRegistry.getValue(perimeter); + + if (tmp == null && this.isAllowEval()) + { + tmp = mxUtils.eval(perimeter); + } + + perimeter = tmp; + } + + if (typeof(perimeter) == "function") + { + return perimeter; + } + + return null; +}; + +/** + * Function: getNextPoint + * + * Returns the nearest point in the list of absolute points or the center + * of the opposite terminal. + * + * Parameters: + * + * edge - <mxCellState> that represents the edge. + * opposite - <mxCellState> that represents the opposite terminal. + * source - Boolean indicating if the next point for the source or target + * should be returned. + */ +mxGraphView.prototype.getNextPoint = function(edge, opposite, source) +{ + var pts = edge.absolutePoints; + var point = null; + + if (pts != null && (source || pts.length > 2 || opposite == null)) + { + var count = pts.length; + point = pts[(source) ? Math.min(1, count - 1) : Math.max(0, count - 2)]; + } + + if (point == null && opposite != null) + { + point = new mxPoint(opposite.getCenterX(), opposite.getCenterY()); + } + + return point; +}; + +/** + * Function: getVisibleTerminal + * + * Returns the nearest ancestor terminal that is visible. The edge appears + * to be connected to this terminal on the display. The result of this method + * is cached in <mxCellState.getVisibleTerminalState>. + * + * Parameters: + * + * edge - <mxCell> whose visible terminal should be returned. + * source - Boolean that specifies if the source or target terminal + * should be returned. + */ +mxGraphView.prototype.getVisibleTerminal = function(edge, source) +{ + var model = this.graph.getModel(); + var result = model.getTerminal(edge, source); + var best = result; + + while (result != null && result != this.currentRoot) + { + if (!this.graph.isCellVisible(best) || this.graph.isCellCollapsed(result)) + { + best = result; + } + + result = model.getParent(result); + } + + // Checks if the result is not a layer + if (model.getParent(best) == model.getRoot()) + { + best = null; + } + + return best; +}; + +/** + * Function: updateEdgeBounds + * + * Updates the given state using the bounding box of the absolute points. + * Also updates <mxCellState.terminalDistance>, <mxCellState.length> and + * <mxCellState.segments>. + * + * Parameters: + * + * state - <mxCellState> whose bounds should be updated. + */ +mxGraphView.prototype.updateEdgeBounds = function(state) +{ + var points = state.absolutePoints; + state.length = 0; + + if (points != null && points.length > 0) + { + var p0 = points[0]; + var pe = points[points.length - 1]; + + if (p0 == null || pe == null) + { + // Drops the edge state if the edge is not the root + if (state.cell != this.currentRoot) + { + // Note: This condition normally occurs if a connected edge has a + // null-terminal, ie. edge.source == null or edge.target == null, + // and no corresponding terminal point defined, which happens for + // example if the terminal-id was not resolved at cell decoding time. + this.clear(state.cell, true); + } + } + else + { + if (p0.x != pe.x || p0.y != pe.y) + { + var dx = pe.x - p0.x; + var dy = pe.y - p0.y; + state.terminalDistance = Math.sqrt(dx * dx + dy * dy); + } + else + { + state.terminalDistance = 0; + } + + var length = 0; + var segments = []; + var pt = p0; + + if (pt != null) + { + var minX = pt.x; + var minY = pt.y; + var maxX = minX; + var maxY = minY; + + for (var i = 1; i < points.length; i++) + { + var tmp = points[i]; + + if (tmp != null) + { + var dx = pt.x - tmp.x; + var dy = pt.y - tmp.y; + + var segment = Math.sqrt(dx * dx + dy * dy); + segments.push(segment); + length += segment; + + pt = tmp; + + minX = Math.min(pt.x, minX); + minY = Math.min(pt.y, minY); + maxX = Math.max(pt.x, maxX); + maxY = Math.max(pt.y, maxY); + } + } + + state.length = length; + state.segments = segments; + + var markerSize = 1; // TODO: include marker size + + state.x = minX; + state.y = minY; + state.width = Math.max(markerSize, maxX - minX); + state.height = Math.max(markerSize, maxY - minY); + } + } + } +}; + +/** + * Function: getPoint + * + * Returns the absolute point on the edge for the given relative + * <mxGeometry> as an <mxPoint>. The edge is represented by the given + * <mxCellState>. + * + * Parameters: + * + * state - <mxCellState> that represents the state of the parent edge. + * geometry - <mxGeometry> that represents the relative location. + */ +mxGraphView.prototype.getPoint = function(state, geometry) +{ + var x = state.getCenterX(); + var y = state.getCenterY(); + + if (state.segments != null && (geometry == null || geometry.relative)) + { + var gx = (geometry != null) ? geometry.x / 2 : 0; + var pointCount = state.absolutePoints.length; + var dist = (gx + 0.5) * state.length; + var segment = state.segments[0]; + var length = 0; + var index = 1; + + while (dist > length + segment && index < pointCount-1) + { + length += segment; + segment = state.segments[index++]; + } + + var factor = (segment == 0) ? 0 : (dist - length) / segment; + var p0 = state.absolutePoints[index-1]; + var pe = state.absolutePoints[index]; + + if (p0 != null && pe != null) + { + var gy = 0; + var offsetX = 0; + var offsetY = 0; + + if (geometry != null) + { + gy = geometry.y; + var offset = geometry.offset; + + if (offset != null) + { + offsetX = offset.x; + offsetY = offset.y; + } + } + + var dx = pe.x - p0.x; + var dy = pe.y - p0.y; + var nx = (segment == 0) ? 0 : dy / segment; + var ny = (segment == 0) ? 0 : dx / segment; + + x = p0.x + dx * factor + (nx * gy + offsetX) * this.scale; + y = p0.y + dy * factor - (ny * gy - offsetY) * this.scale; + } + } + else if (geometry != null) + { + var offset = geometry.offset; + + if (offset != null) + { + x += offset.x; + y += offset.y; + } + } + + return new mxPoint(x, y); +}; + +/** + * Function: getRelativePoint + * + * Gets the relative point that describes the given, absolute label + * position for the given edge state. + * + * Parameters: + * + * state - <mxCellState> that represents the state of the parent edge. + * x - Specifies the x-coordinate of the absolute label location. + * y - Specifies the y-coordinate of the absolute label location. + */ +mxGraphView.prototype.getRelativePoint = function(edgeState, x, y) +{ + var model = this.graph.getModel(); + var geometry = model.getGeometry(edgeState.cell); + + if (geometry != null) + { + var pointCount = edgeState.absolutePoints.length; + + if (geometry.relative && pointCount > 1) + { + var totalLength = edgeState.length; + var segments = edgeState.segments; + + // Works which line segment the point of the label is closest to + var p0 = edgeState.absolutePoints[0]; + var pe = edgeState.absolutePoints[1]; + var minDist = mxUtils.ptSegDistSq(p0.x, p0.y, pe.x, pe.y, x, y); + + var index = 0; + var tmp = 0; + var length = 0; + + for (var i = 2; i < pointCount; i++) + { + tmp += segments[i - 2]; + pe = edgeState.absolutePoints[i]; + var dist = mxUtils.ptSegDistSq(p0.x, p0.y, pe.x, pe.y, x, y); + + if (dist <= minDist) + { + minDist = dist; + index = i - 1; + length = tmp; + } + + p0 = pe; + } + + var seg = segments[index]; + p0 = edgeState.absolutePoints[index]; + pe = edgeState.absolutePoints[index + 1]; + + var x2 = p0.x; + var y2 = p0.y; + + var x1 = pe.x; + var y1 = pe.y; + + var px = x; + var py = y; + + var xSegment = x2 - x1; + var ySegment = y2 - y1; + + px -= x1; + py -= y1; + var projlenSq = 0; + + px = xSegment - px; + py = ySegment - py; + var dotprod = px * xSegment + py * ySegment; + + if (dotprod <= 0.0) + { + projlenSq = 0; + } + else + { + projlenSq = dotprod * dotprod + / (xSegment * xSegment + ySegment * ySegment); + } + + var projlen = Math.sqrt(projlenSq); + + if (projlen > seg) + { + projlen = seg; + } + + var yDistance = Math.sqrt(mxUtils.ptSegDistSq(p0.x, p0.y, pe + .x, pe.y, x, y)); + var direction = mxUtils.relativeCcw(p0.x, p0.y, pe.x, pe.y, x, y); + + if (direction == -1) + { + yDistance = -yDistance; + } + + // Constructs the relative point for the label + return new mxPoint(((totalLength / 2 - length - projlen) / totalLength) * -2, + yDistance / this.scale); + } + } + + return new mxPoint(); +}; + +/** + * Function: updateEdgeLabelOffset + * + * Updates <mxCellState.absoluteOffset> for the given state. The absolute + * offset is normally used for the position of the edge label. Is is + * calculated from the geometry as an absolute offset from the center + * between the two endpoints if the geometry is absolute, or as the + * relative distance between the center along the line and the absolute + * orthogonal distance if the geometry is relative. + * + * Parameters: + * + * state - <mxCellState> whose absolute offset should be updated. + */ +mxGraphView.prototype.updateEdgeLabelOffset = function(state) +{ + var points = state.absolutePoints; + + state.absoluteOffset.x = state.getCenterX(); + state.absoluteOffset.y = state.getCenterY(); + + if (points != null && points.length > 0 && state.segments != null) + { + var geometry = this.graph.getCellGeometry(state.cell); + + if (geometry.relative) + { + var offset = this.getPoint(state, geometry); + + if (offset != null) + { + state.absoluteOffset = offset; + } + } + else + { + var p0 = points[0]; + var pe = points[points.length - 1]; + + if (p0 != null && pe != null) + { + var dx = pe.x - p0.x; + var dy = pe.y - p0.y; + var x0 = 0; + var y0 = 0; + + var off = geometry.offset; + + if (off != null) + { + x0 = off.x; + y0 = off.y; + } + + var x = p0.x + dx / 2 + x0 * this.scale; + var y = p0.y + dy / 2 + y0 * this.scale; + + state.absoluteOffset.x = x; + state.absoluteOffset.y = y; + } + } + } +}; + +/** + * Function: getState + * + * Returns the <mxCellState> for the given cell. If create is true, then + * the state is created if it does not yet exist. + * + * Parameters: + * + * cell - <mxCell> for which the <mxCellState> should be returned. + * create - Optional boolean indicating if a new state should be created + * if it does not yet exist. Default is false. + */ +mxGraphView.prototype.getState = function(cell, create) +{ + create = create || false; + var state = null; + + if (cell != null) + { + state = this.states.get(cell); + + if (this.graph.isCellVisible(cell)) + { + if (state == null && create && this.graph.isCellVisible(cell)) + { + state = this.createState(cell); + this.states.put(cell, state); + } + else if (create && state != null && this.updateStyle) + { + state.style = this.graph.getCellStyle(cell); + } + } + } + + return state; +}; + +/** + * Function: isRendering + * + * Returns <rendering>. + */ +mxGraphView.prototype.isRendering = function() +{ + return this.rendering; +}; + +/** + * Function: setRendering + * + * Sets <rendering>. + */ +mxGraphView.prototype.setRendering = function(value) +{ + this.rendering = value; +}; + +/** + * Function: isAllowEval + * + * Returns <allowEval>. + */ +mxGraphView.prototype.isAllowEval = function() +{ + return this.allowEval; +}; + +/** + * Function: setAllowEval + * + * Sets <allowEval>. + */ +mxGraphView.prototype.setAllowEval = function(value) +{ + this.allowEval = value; +}; + +/** + * Function: getStates + * + * Returns <states>. + */ +mxGraphView.prototype.getStates = function() +{ + return this.states; +}; + +/** + * Function: setStates + * + * Sets <states>. + */ +mxGraphView.prototype.setStates = function(value) +{ + this.states = value; +}; + +/** + * Function: getCellStates + * + * Returns the <mxCellStates> for the given array of <mxCells>. The array + * contains all states that are not null, that is, the returned array may + * have less elements than the given array. If no argument is given, then + * this returns <states>. + */ +mxGraphView.prototype.getCellStates = function(cells) +{ + if (cells == null) + { + return this.states; + } + else + { + var result = []; + + for (var i = 0; i < cells.length; i++) + { + var state = this.getState(cells[i]); + + if (state != null) + { + result.push(state); + } + } + + return result; + } +}; + +/** + * Function: removeState + * + * Removes and returns the <mxCellState> for the given cell. + * + * Parameters: + * + * cell - <mxCell> for which the <mxCellState> should be removed. + */ +mxGraphView.prototype.removeState = function(cell) +{ + var state = null; + + if (cell != null) + { + state = this.states.remove(cell); + + if (state != null) + { + this.graph.cellRenderer.destroy(state); + state.destroy(); + } + } + + return state; +}; + +/** + * Function: createState + * + * Creates and returns an <mxCellState> for the given cell and initializes + * it using <mxCellRenderer.initialize>. + * + * Parameters: + * + * cell - <mxCell> for which a new <mxCellState> should be created. + */ +mxGraphView.prototype.createState = function(cell) +{ + var style = this.graph.getCellStyle(cell); + var state = new mxCellState(this, cell, style); + this.graph.cellRenderer.initialize(state, this.isRendering()); + + return state; +}; + +/** + * Function: getCanvas + * + * Returns the DOM node that contains the background-, draw- and + * overlaypane. + */ +mxGraphView.prototype.getCanvas = function() +{ + return this.canvas; +}; + +/** + * Function: getBackgroundPane + * + * Returns the DOM node that represents the background layer. + */ +mxGraphView.prototype.getBackgroundPane = function() +{ + return this.backgroundPane; +}; + +/** + * Function: getDrawPane + * + * Returns the DOM node that represents the main drawing layer. + */ +mxGraphView.prototype.getDrawPane = function() +{ + return this.drawPane; +}; + +/** + * Function: getOverlayPane + * + * Returns the DOM node that represents the topmost drawing layer. + */ +mxGraphView.prototype.getOverlayPane = function() +{ + return this.overlayPane; +}; + +/** + * Function: isContainerEvent + * + * Returns true if the event origin is one of the drawing panes or + * containers of the view. + */ +mxGraphView.prototype.isContainerEvent = function(evt) +{ + var source = mxEvent.getSource(evt); + + return (source == this.graph.container || + source.parentNode == this.backgroundPane || + (source.parentNode != null && + source.parentNode.parentNode == this.backgroundPane) || + source == this.canvas.parentNode || + source == this.canvas || + source == this.backgroundPane || + source == this.drawPane || + source == this.overlayPane); +}; + +/** + * Function: isScrollEvent + * + * Returns true if the event origin is one of the scrollbars of the + * container in IE. Such events are ignored. + */ + mxGraphView.prototype.isScrollEvent = function(evt) +{ + var offset = mxUtils.getOffset(this.graph.container); + var pt = new mxPoint(evt.clientX - offset.x, evt.clientY - offset.y); + + var outWidth = this.graph.container.offsetWidth; + var inWidth = this.graph.container.clientWidth; + + if (outWidth > inWidth && pt.x > inWidth + 2 && pt.x <= outWidth) + { + return true; + } + + var outHeight = this.graph.container.offsetHeight; + var inHeight = this.graph.container.clientHeight; + + if (outHeight > inHeight && pt.y > inHeight + 2 && pt.y <= outHeight) + { + return true; + } + + return false; +}; + +/** + * Function: init + * + * Initializes the graph event dispatch loop for the specified container + * and invokes <create> to create the required DOM nodes for the display. + */ +mxGraphView.prototype.init = function() +{ + this.installListeners(); + + // Creates the DOM nodes for the respective display dialect + var graph = this.graph; + + if (graph.dialect == mxConstants.DIALECT_SVG) + { + this.createSvg(); + } + else if (graph.dialect == mxConstants.DIALECT_VML) + { + this.createVml(); + } + else + { + this.createHtml(); + } +}; + +/** + * Function: installListeners + * + * Installs the required listeners in the container. + */ +mxGraphView.prototype.installListeners = function() +{ + var graph = this.graph; + var container = graph.container; + + if (container != null) + { + var md = (mxClient.IS_TOUCH) ? 'touchstart' : 'mousedown'; + var mm = (mxClient.IS_TOUCH) ? 'touchmove' : 'mousemove'; + var mu = (mxClient.IS_TOUCH) ? 'touchend' : 'mouseup'; + + // Adds basic listeners for graph event dispatching + mxEvent.addListener(container, md, + mxUtils.bind(this, function(evt) + { + // Workaround for touch-based device not transferring + // the focus while editing with virtual keyboard + if (mxClient.IS_TOUCH && graph.isEditing()) + { + graph.stopEditing(!graph.isInvokesStopCellEditing()); + } + + // Condition to avoid scrollbar events starting a rubberband + // selection + if (this.isContainerEvent(evt) && ((!mxClient.IS_IE && + !mxClient.IS_GC && !mxClient.IS_OP && !mxClient.IS_SF) || + !this.isScrollEvent(evt))) + { + graph.fireMouseEvent(mxEvent.MOUSE_DOWN, + new mxMouseEvent(evt)); + } + }) + ); + mxEvent.addListener(container, mm, + mxUtils.bind(this, function(evt) + { + if (this.isContainerEvent(evt)) + { + graph.fireMouseEvent(mxEvent.MOUSE_MOVE, + new mxMouseEvent(evt)); + } + }) + ); + mxEvent.addListener(container, mu, + mxUtils.bind(this, function(evt) + { + if (this.isContainerEvent(evt)) + { + graph.fireMouseEvent(mxEvent.MOUSE_UP, + new mxMouseEvent(evt)); + } + }) + ); + + // Adds listener for double click handling on background + mxEvent.addListener(container, 'dblclick', + mxUtils.bind(this, function(evt) + { + graph.dblClick(evt); + }) + ); + + // Workaround for touch events which started on some DOM node + // on top of the container, in which case the cells under the + // mouse for the move and up events are not detected. + var getState = function(evt) + { + var state = null; + + // Workaround for touch events which started on some DOM node + // on top of the container, in which case the cells under the + // mouse for the move and up events are not detected. + if (mxClient.IS_TOUCH) + { + var x = mxEvent.getClientX(evt); + var y = mxEvent.getClientY(evt); + + // Dispatches the drop event to the graph which + // consumes and executes the source function + var pt = mxUtils.convertPoint(container, x, y); + state = graph.view.getState(graph.getCellAt(pt.x, pt.y)); + } + + return state; + }; + + // Adds basic listeners for graph event dispatching outside of the + // container and finishing the handling of a single gesture + // Implemented via graph event dispatch loop to avoid duplicate events + // in Firefox and Chrome + graph.addMouseListener( + { + mouseDown: function(sender, me) + { + graph.panningHandler.hideMenu(); + }, + mouseMove: function() { }, + mouseUp: function() { } + }); + mxEvent.addListener(document, mm, + mxUtils.bind(this, function(evt) + { + // Hides the tooltip if mouse is outside container + if (graph.tooltipHandler != null && + graph.tooltipHandler.isHideOnHover()) + { + graph.tooltipHandler.hide(); + } + + if (this.captureDocumentGesture && graph.isMouseDown && + !mxEvent.isConsumed(evt)) + { + graph.fireMouseEvent(mxEvent.MOUSE_MOVE, + new mxMouseEvent(evt, getState(evt))); + } + }) + ); + mxEvent.addListener(document, mu, + mxUtils.bind(this, function(evt) + { + if (this.captureDocumentGesture) + { + graph.fireMouseEvent(mxEvent.MOUSE_UP, + new mxMouseEvent(evt)); + } + }) + ); + } +}; + +/** + * Function: create + * + * Creates the DOM nodes for the HTML display. + */ +mxGraphView.prototype.createHtml = function() +{ + var container = this.graph.container; + + if (container != null) + { + this.canvas = this.createHtmlPane('100%', '100%'); + + // Uses minimal size for inner DIVs on Canvas. This is required + // for correct event processing in IE. If we have an overlapping + // DIV then the events on the cells are only fired for labels. + this.backgroundPane = this.createHtmlPane('1px', '1px'); + this.drawPane = this.createHtmlPane('1px', '1px'); + this.overlayPane = this.createHtmlPane('1px', '1px'); + + this.canvas.appendChild(this.backgroundPane); + this.canvas.appendChild(this.drawPane); + this.canvas.appendChild(this.overlayPane); + + container.appendChild(this.canvas); + + // Implements minWidth/minHeight in quirks mode + if (mxClient.IS_QUIRKS) + { + var onResize = mxUtils.bind(this, function(evt) + { + var bounds = this.getGraphBounds(); + var width = bounds.x + bounds.width + this.graph.border; + var height = bounds.y + bounds.height + this.graph.border; + + this.updateHtmlCanvasSize(width, height); + }); + + mxEvent.addListener(window, 'resize', onResize); + } + } +}; + +/** + * Function: updateHtmlCanvasSize + * + * Updates the size of the HTML canvas. + */ +mxGraphView.prototype.updateHtmlCanvasSize = function(width, height) +{ + if (this.graph.container != null) + { + var ow = this.graph.container.offsetWidth; + var oh = this.graph.container.offsetHeight; + + if (ow < width) + { + this.canvas.style.width = width + 'px'; + } + else + { + this.canvas.style.width = '100%'; + } + + if (oh < height) + { + this.canvas.style.height = height + 'px'; + } + else + { + this.canvas.style.height = '100%'; + } + } +}; + +/** + * Function: createHtmlPane + * + * Creates and returns a drawing pane in HTML (DIV). + */ +mxGraphView.prototype.createHtmlPane = function(width, height) +{ + var pane = document.createElement('DIV'); + + if (width != null && height != null) + { + pane.style.position = 'absolute'; + pane.style.left = '0px'; + pane.style.top = '0px'; + + pane.style.width = width; + pane.style.height = height; + } + else + { + pane.style.position = 'relative'; + } + + return pane; +}; + +/** + * Function: create + * + * Creates the DOM nodes for the VML display. + */ +mxGraphView.prototype.createVml = function() +{ + var container = this.graph.container; + + if (container != null) + { + var width = container.offsetWidth; + var height = container.offsetHeight; + this.canvas = this.createVmlPane(width, height); + + this.backgroundPane = this.createVmlPane(width, height); + this.drawPane = this.createVmlPane(width, height); + this.overlayPane = this.createVmlPane(width, height); + + this.canvas.appendChild(this.backgroundPane); + this.canvas.appendChild(this.drawPane); + this.canvas.appendChild(this.overlayPane); + + container.appendChild(this.canvas); + } +}; + +/** + * Function: createVmlPane + * + * Creates a drawing pane in VML (group). + */ +mxGraphView.prototype.createVmlPane = function(width, height) +{ + var pane = document.createElement('v:group'); + + // At this point the width and height are potentially + // uninitialized. That's OK. + pane.style.position = 'absolute'; + pane.style.left = '0px'; + pane.style.top = '0px'; + + pane.style.width = width+'px'; + pane.style.height = height+'px'; + + pane.setAttribute('coordsize', width+','+height); + pane.setAttribute('coordorigin', '0,0'); + + return pane; +}; + +/** + * Function: create + * + * Creates and returns the DOM nodes for the SVG display. + */ +mxGraphView.prototype.createSvg = function() +{ + var container = this.graph.container; + this.canvas = document.createElementNS(mxConstants.NS_SVG, 'g'); + + // For background image + this.backgroundPane = document.createElementNS(mxConstants.NS_SVG, 'g'); + this.canvas.appendChild(this.backgroundPane); + + // Adds two layers (background is early feature) + this.drawPane = document.createElementNS(mxConstants.NS_SVG, 'g'); + this.canvas.appendChild(this.drawPane); + + this.overlayPane = document.createElementNS(mxConstants.NS_SVG, 'g'); + this.canvas.appendChild(this.overlayPane); + + var root = document.createElementNS(mxConstants.NS_SVG, 'svg'); + root.style.width = '100%'; + root.style.height = '100%'; + + if (mxClient.IS_IE) + { + root.style.marginBottom = '-4px'; + } + + root.appendChild(this.canvas); + + if (container != null) + { + container.appendChild(root); + + // Workaround for offset of container + var style = mxUtils.getCurrentStyle(container); + + if (style.position == 'static') + { + container.style.position = 'relative'; + } + } +}; + +/** + * Function: destroy + * + * Destroys the view and all its resources. + */ +mxGraphView.prototype.destroy = function() +{ + var root = (this.canvas != null) ? this.canvas.ownerSVGElement : null; + + if (root == null) + { + root = this.canvas; + } + + if (root != null && root.parentNode != null) + { + this.clear(this.currentRoot, true); + mxEvent.removeAllListeners(document); + mxEvent.release(this.graph.container); + root.parentNode.removeChild(root); + + this.canvas = null; + this.backgroundPane = null; + this.drawPane = null; + this.overlayPane = null; + } +}; + +/** + * Class: mxCurrentRootChange + * + * Action to change the current root in a view. + * + * Constructor: mxCurrentRootChange + * + * Constructs a change of the current root in the given view. + */ +function mxCurrentRootChange(view, root) +{ + this.view = view; + this.root = root; + this.previous = root; + this.isUp = root == null; + + if (!this.isUp) + { + var tmp = this.view.currentRoot; + var model = this.view.graph.getModel(); + + while (tmp != null) + { + if (tmp == root) + { + this.isUp = true; + break; + } + + tmp = model.getParent(tmp); + } + } +}; + +/** + * Function: execute + * + * Changes the current root of the view. + */ +mxCurrentRootChange.prototype.execute = function() +{ + var tmp = this.view.currentRoot; + this.view.currentRoot = this.previous; + this.previous = tmp; + + var translate = this.view.graph.getTranslateForRoot(this.view.currentRoot); + + if (translate != null) + { + this.view.translate = new mxPoint(-translate.x, -translate.y); + } + + var name = (this.isUp) ? mxEvent.UP : mxEvent.DOWN; + this.view.fireEvent(new mxEventObject(name, + 'root', this.view.currentRoot, 'previous', this.previous)); + + if (this.isUp) + { + this.view.clear(this.view.currentRoot, true); + this.view.validate(); + } + else + { + this.view.refresh(); + } + + this.isUp = !this.isUp; +}; diff --git a/src/js/view/mxLayoutManager.js b/src/js/view/mxLayoutManager.js new file mode 100644 index 0000000..ee8ec65 --- /dev/null +++ b/src/js/view/mxLayoutManager.js @@ -0,0 +1,375 @@ +/** + * $Id: mxLayoutManager.js,v 1.21 2012-01-04 10:01:16 gaudenz Exp $ + * Copyright (c) 2006-2010, JGraph Ltd + */ +/** + * Class: mxLayoutManager + * + * Implements a layout manager that updates the layout for a given transaction. + * + * Example: + * + * (code) + * var layoutMgr = new mxLayoutManager(graph); + * layoutMgr.getLayout = function(cell) + * { + * return layout; + * }; + * (end) + * + * Event: mxEvent.LAYOUT_CELLS + * + * Fires between begin- and endUpdate after all cells have been layouted in + * <layoutCells>. The <code>cells</code> property contains all cells that have + * been passed to <layoutCells>. + * + * Constructor: mxLayoutManager + * + * Constructs a new automatic layout for the given graph. + * + * Arguments: + * + * graph - Reference to the enclosing graph. + */ +function mxLayoutManager(graph) +{ + // Executes the layout before the changes are dispatched + this.undoHandler = mxUtils.bind(this, function(sender, evt) + { + if (this.isEnabled()) + { + this.beforeUndo(evt.getProperty('edit')); + } + }); + + // Notifies the layout of a move operation inside a parent + this.moveHandler = mxUtils.bind(this, function(sender, evt) + { + if (this.isEnabled()) + { + this.cellsMoved(evt.getProperty('cells'), evt.getProperty('event')); + } + }); + + this.setGraph(graph); +}; + +/** + * Extends mxEventSource. + */ +mxLayoutManager.prototype = new mxEventSource(); +mxLayoutManager.prototype.constructor = mxLayoutManager; + +/** + * Variable: graph + * + * Reference to the enclosing <mxGraph>. + */ +mxLayoutManager.prototype.graph = null; + +/** + * Variable: bubbling + * + * Specifies if the layout should bubble along + * the cell hierarchy. Default is true. + */ +mxLayoutManager.prototype.bubbling = true; + +/** + * Variable: enabled + * + * Specifies if event handling is enabled. Default is true. + */ +mxLayoutManager.prototype.enabled = true; + +/** + * Variable: updateHandler + * + * Holds the function that handles the endUpdate event. + */ +mxLayoutManager.prototype.updateHandler = null; + +/** + * Variable: moveHandler + * + * Holds the function that handles the move event. + */ +mxLayoutManager.prototype.moveHandler = null; + +/** + * Function: isEnabled + * + * Returns true if events are handled. This implementation + * returns <enabled>. + */ +mxLayoutManager.prototype.isEnabled = function() +{ + return this.enabled; +}; + +/** + * Function: setEnabled + * + * Enables or disables event handling. This implementation + * updates <enabled>. + * + * Parameters: + * + * enabled - Boolean that specifies the new enabled state. + */ +mxLayoutManager.prototype.setEnabled = function(enabled) +{ + this.enabled = enabled; +}; + +/** + * Function: isBubbling + * + * Returns true if a layout should bubble, that is, if the parent layout + * should be executed whenever a cell layout (layout of the children of + * a cell) has been executed. This implementation returns <bubbling>. + */ +mxLayoutManager.prototype.isBubbling = function() +{ + return this.bubbling; +}; + +/** + * Function: setBubbling + * + * Sets <bubbling>. + */ +mxLayoutManager.prototype.setBubbling = function(value) +{ + this.bubbling = value; +}; + +/** + * Function: getGraph + * + * Returns the graph that this layout operates on. + */ +mxLayoutManager.prototype.getGraph = function() +{ + return this.graph; +}; + +/** + * Function: setGraph + * + * Sets the graph that the layouts operate on. + */ +mxLayoutManager.prototype.setGraph = function(graph) +{ + if (this.graph != null) + { + var model = this.graph.getModel(); + model.removeListener(this.undoHandler); + this.graph.removeListener(this.moveHandler); + } + + this.graph = graph; + + if (this.graph != null) + { + var model = this.graph.getModel(); + model.addListener(mxEvent.BEFORE_UNDO, this.undoHandler); + this.graph.addListener(mxEvent.MOVE_CELLS, this.moveHandler); + } +}; + +/** + * Function: getLayout + * + * Returns the layout to be executed for the given graph and parent. + */ +mxLayoutManager.prototype.getLayout = function(parent) +{ + return null; +}; + +/** + * Function: beforeUndo + * + * Called from the undoHandler. + * + * Parameters: + * + * cell - Array of <mxCells> that have been moved. + * evt - Mouse event that represents the mousedown. + */ +mxLayoutManager.prototype.beforeUndo = function(undoableEdit) +{ + var cells = this.getCellsForChanges(undoableEdit.changes); + var model = this.getGraph().getModel(); + + // Adds all parent ancestors + if (this.isBubbling()) + { + var tmp = model.getParents(cells); + + while (tmp.length > 0) + { + cells = cells.concat(tmp); + tmp = model.getParents(tmp); + } + } + + this.layoutCells(mxUtils.sortCells(cells, false)); +}; + +/** + * Function: cellsMoved + * + * Called from the moveHandler. + * + * Parameters: + * + * cell - Array of <mxCells> that have been moved. + * evt - Mouse event that represents the mousedown. + */ +mxLayoutManager.prototype.cellsMoved = function(cells, evt) +{ + if (cells != null && + evt != null) + { + var point = mxUtils.convertPoint(this.getGraph().container, + mxEvent.getClientX(evt), mxEvent.getClientY(evt)); + var model = this.getGraph().getModel(); + + // Checks if a layout exists to take care of the moving + for (var i = 0; i < cells.length; i++) + { + var layout = this.getLayout(model.getParent(cells[i])); + + if (layout != null) + { + layout.moveCell(cells[i], point.x, point.y); + } + } + } +}; + +/** + * Function: getCellsForEdit + * + * Returns the cells to be layouted for the given sequence of changes. + */ +mxLayoutManager.prototype.getCellsForChanges = function(changes) +{ + var result = []; + var hash = new Object(); + + for (var i = 0; i < changes.length; i++) + { + var change = changes[i]; + + if (change instanceof mxRootChange) + { + return []; + } + else + { + var cells = this.getCellsForChange(change); + + for (var j = 0; j < cells.length; j++) + { + if (cells[j] != null) + { + var id = mxCellPath.create(cells[j]); + + if (hash[id] == null) + { + hash[id] = cells[j]; + result.push(cells[j]); + } + } + } + } + } + + return result; +}; + +/** + * Function: getCellsForChange + * + * Executes all layouts which have been scheduled during the + * changes. + */ +mxLayoutManager.prototype.getCellsForChange = function(change) +{ + var model = this.getGraph().getModel(); + + if (change instanceof mxChildChange) + { + return [change.child, change.previous, model.getParent(change.child)]; + } + else if (change instanceof mxTerminalChange || + change instanceof mxGeometryChange) + { + return [change.cell, model.getParent(change.cell)]; + } + + return []; +}; + +/** + * Function: layoutCells + * + * Executes all layouts which have been scheduled during the + * changes. + */ +mxLayoutManager.prototype.layoutCells = function(cells) +{ + if (cells.length > 0) + { + // Invokes the layouts while removing duplicates + var model = this.getGraph().getModel(); + + model.beginUpdate(); + try + { + var last = null; + + for (var i = 0; i < cells.length; i++) + { + if (cells[i] != model.getRoot() && + cells[i] != last) + { + last = cells[i]; + this.executeLayout(this.getLayout(last), last); + } + } + + this.fireEvent(new mxEventObject(mxEvent.LAYOUT_CELLS, 'cells', cells)); + } + finally + { + model.endUpdate(); + } + } +}; + +/** + * Function: executeLayout + * + * Executes the given layout on the given parent. + */ +mxLayoutManager.prototype.executeLayout = function(layout, parent) +{ + if (layout != null && parent != null) + { + layout.execute(parent); + } +}; + +/** + * Function: destroy + * + * Removes all handlers from the <graph> and deletes the reference to it. + */ +mxLayoutManager.prototype.destroy = function() +{ + this.setGraph(null); +}; diff --git a/src/js/view/mxMultiplicity.js b/src/js/view/mxMultiplicity.js new file mode 100644 index 0000000..c927d3f --- /dev/null +++ b/src/js/view/mxMultiplicity.js @@ -0,0 +1,257 @@ +/** + * $Id: mxMultiplicity.js,v 1.24 2010-11-03 14:52:40 gaudenz Exp $ + * Copyright (c) 2006-2010, JGraph Ltd + */ +/** + * Class: mxMultiplicity + * + * Defines invalid connections along with the error messages that they produce. + * To add or remove rules on a graph, you must add/remove instances of this + * class to <mxGraph.multiplicities>. + * + * Example: + * + * (code) + * graph.multiplicities.push(new mxMultiplicity( + * true, 'rectangle', null, null, 0, 2, ['circle'], + * 'Only 2 targets allowed', + * 'Only circle targets allowed')); + * (end) + * + * Defines a rule where each rectangle must be connected to no more than 2 + * circles and no other types of targets are allowed. + * + * Constructor: mxMultiplicity + * + * Instantiate class mxMultiplicity in order to describe allowed + * connections in a graph. Not all constraints can be enforced while + * editing, some must be checked at validation time. The <countError> and + * <typeError> are treated as resource keys in <mxResources>. + * + * Parameters: + * + * source - Boolean indicating if this rule applies to the source or target + * terminal. + * type - Type of the source or target terminal that this rule applies to. + * See <type> for more information. + * attr - Optional attribute name to match the source or target terminal. + * value - Optional attribute value to match the source or target terminal. + * min - Minimum number of edges for this rule. Default is 1. + * max - Maximum number of edges for this rule. n means infinite. Default + * is n. + * validNeighbors - Array of types of the opposite terminal for which this + * rule applies. + * countError - Error to be displayed for invalid number of edges. + * typeError - Error to be displayed for invalid opposite terminals. + * validNeighborsAllowed - Optional boolean indicating if the array of + * opposite types should be valid or invalid. + */ +function mxMultiplicity(source, type, attr, value, min, max, + validNeighbors, countError, typeError, validNeighborsAllowed) +{ + this.source = source; + this.type = type; + this.attr = attr; + this.value = value; + this.min = (min != null) ? min : 0; + this.max = (max != null) ? max : 'n'; + this.validNeighbors = validNeighbors; + this.countError = mxResources.get(countError) || countError; + this.typeError = mxResources.get(typeError) || typeError; + this.validNeighborsAllowed = (validNeighborsAllowed != null) ? + validNeighborsAllowed : true; +}; + +/** + * Variable: type + * + * Defines the type of the source or target terminal. The type is a string + * passed to <mxUtils.isNode> together with the source or target vertex + * value as the first argument. + */ +mxMultiplicity.prototype.type = null; + +/** + * Variable: attr + * + * Optional string that specifies the attributename to be passed to + * <mxUtils.isNode> to check if the rule applies to a cell. + */ +mxMultiplicity.prototype.attr = null; + +/** + * Variable: value + * + * Optional string that specifies the value of the attribute to be passed + * to <mxUtils.isNode> to check if the rule applies to a cell. + */ +mxMultiplicity.prototype.value = null; + +/** + * Variable: source + * + * Boolean that specifies if the rule is applied to the source or target + * terminal of an edge. + */ +mxMultiplicity.prototype.source = null; + +/** + * Variable: min + * + * Defines the minimum number of connections for which this rule applies. + * Default is 0. + */ +mxMultiplicity.prototype.min = null; + +/** + * Variable: max + * + * Defines the maximum number of connections for which this rule applies. + * A value of 'n' means unlimited times. Default is 'n'. + */ +mxMultiplicity.prototype.max = null; + +/** + * Variable: validNeighbors + * + * Holds an array of strings that specify the type of neighbor for which + * this rule applies. The strings are used in <mxCell.is> on the opposite + * terminal to check if the rule applies to the connection. + */ +mxMultiplicity.prototype.validNeighbors = null; + +/** + * Variable: validNeighborsAllowed + * + * Boolean indicating if the list of validNeighbors are those that are allowed + * for this rule or those that are not allowed for this rule. + */ +mxMultiplicity.prototype.validNeighborsAllowed = true; + +/** + * Variable: countError + * + * Holds the localized error message to be displayed if the number of + * connections for which the rule applies is smaller than <min> or greater + * than <max>. + */ +mxMultiplicity.prototype.countError = null; + +/** + * Variable: typeError + * + * Holds the localized error message to be displayed if the type of the + * neighbor for a connection does not match the rule. + */ +mxMultiplicity.prototype.typeError = null; + +/** + * Function: check + * + * Checks the multiplicity for the given arguments and returns the error + * for the given connection or null if the multiplicity does not apply. + * + * Parameters: + * + * graph - Reference to the enclosing <mxGraph> instance. + * edge - <mxCell> that represents the edge to validate. + * source - <mxCell> that represents the source terminal. + * target - <mxCell> that represents the target terminal. + * sourceOut - Number of outgoing edges from the source terminal. + * targetIn - Number of incoming edges for the target terminal. + */ +mxMultiplicity.prototype.check = function(graph, edge, source, target, sourceOut, targetIn) +{ + var error = ''; + + if ((this.source && this.checkTerminal(graph, source, edge)) || + (!this.source && this.checkTerminal(graph, target, edge))) + { + if (this.countError != null && + ((this.source && (this.max == 0 || (sourceOut >= this.max))) || + (!this.source && (this.max == 0 || (targetIn >= this.max))))) + { + error += this.countError + '\n'; + } + + if (this.validNeighbors != null && this.typeError != null && this.validNeighbors.length > 0) + { + var isValid = this.checkNeighbors(graph, edge, source, target); + + if (!isValid) + { + error += this.typeError + '\n'; + } + } + } + + return (error.length > 0) ? error : null; +}; + +/** + * Function: checkNeighbors + * + * Checks if there are any valid neighbours in <validNeighbors>. This is only + * called if <validNeighbors> is a non-empty array. + */ +mxMultiplicity.prototype.checkNeighbors = function(graph, edge, source, target) +{ + var sourceValue = graph.model.getValue(source); + var targetValue = graph.model.getValue(target); + var isValid = !this.validNeighborsAllowed; + var valid = this.validNeighbors; + + for (var j = 0; j < valid.length; j++) + { + if (this.source && + this.checkType(graph, targetValue, valid[j])) + { + isValid = this.validNeighborsAllowed; + break; + } + else if (!this.source && + this.checkType(graph, sourceValue, valid[j])) + { + isValid = this.validNeighborsAllowed; + break; + } + } + + return isValid; +}; + +/** + * Function: checkTerminal + * + * Checks the given terminal cell and returns true if this rule applies. The + * given cell is the source or target of the given edge, depending on + * <source>. This implementation uses <checkType> on the terminal's value. + */ +mxMultiplicity.prototype.checkTerminal = function(graph, terminal, edge) +{ + var value = graph.model.getValue(terminal); + + return this.checkType(graph, value, this.type, this.attr, this.value); +}; + +/** + * Function: checkType + * + * Checks the type of the given value. + */ +mxMultiplicity.prototype.checkType = function(graph, value, type, attr, attrValue) +{ + if (value != null) + { + if (!isNaN(value.nodeType)) // Checks if value is a DOM node + { + return mxUtils.isNode(value, type, attr, attrValue); + } + else + { + return value == type; + } + } + + return false; +}; diff --git a/src/js/view/mxOutline.js b/src/js/view/mxOutline.js new file mode 100644 index 0000000..a0d6fd3 --- /dev/null +++ b/src/js/view/mxOutline.js @@ -0,0 +1,649 @@ +/** + * $Id: mxOutline.js,v 1.81 2012-06-20 14:13:37 gaudenz Exp $ + * Copyright (c) 2006-2010, JGraph Ltd + */ +/** + * Class: mxOutline + * + * Implements an outline (aka overview) for a graph. Set <updateOnPan> to true + * to enable updates while the source graph is panning. + * + * Example: + * + * (code) + * var outline = new mxOutline(graph, div); + * (end) + * + * If the selection border in the outline appears behind the contents of the + * graph, then you can use the following code. (This may happen when using a + * transparent container for the outline in IE.) + * + * (code) + * mxOutline.prototype.graphRenderHint = mxConstants.RENDERING_HINT_EXACT; + * (end) + * + * To move the graph to the top, left corner the following code can be used. + * + * (code) + * var scale = graph.view.scale; + * var bounds = graph.getGraphBounds(); + * graph.view.setTranslate(-bounds.x / scale, -bounds.y / scale); + * (end) + * + * To toggle the suspended mode, the following can be used. + * + * (code) + * outline.suspended = !outln.suspended; + * if (!outline.suspended) + * { + * outline.update(true); + * } + * (end) + * + * Constructor: mxOutline + * + * Constructs a new outline for the specified graph inside the given + * container. + * + * Parameters: + * + * source - <mxGraph> to create the outline for. + * container - DOM node that will contain the outline. + */ +function mxOutline(source, container) +{ + this.source = source; + + if (container != null) + { + this.init(container); + } +}; + +/** + * Function: source + * + * Reference to the source <mxGraph>. + */ +mxOutline.prototype.source = null; + +/** + * Function: outline + * + * Reference to the outline <mxGraph>. + */ +mxOutline.prototype.outline = null; + +/** + * Function: graphRenderHint + * + * Renderhint to be used for the outline graph. Default is faster. + */ +mxOutline.prototype.graphRenderHint = mxConstants.RENDERING_HINT_FASTER; + +/** + * Variable: enabled + * + * Specifies if events are handled. Default is true. + */ +mxOutline.prototype.enabled = true; + +/** + * Variable: showViewport + * + * Specifies a viewport rectangle should be shown. Default is true. + */ +mxOutline.prototype.showViewport = true; + +/** + * Variable: border + * + * Border to be added at the bottom and right. Default is 10. + */ +mxOutline.prototype.border = 10; + +/** + * Variable: enabled + * + * Specifies the size of the sizer handler. Default is 8. + */ +mxOutline.prototype.sizerSize = 8; + +/** + * Variable: updateOnPan + * + * Specifies if <update> should be called for <mxEvent.PAN> in the source + * graph. Default is false. + */ +mxOutline.prototype.updateOnPan = false; + +/** + * Variable: sizerImage + * + * Optional <mxImage> to be used for the sizer. Default is null. + */ +mxOutline.prototype.sizerImage = null; + +/** + * Variable: suspended + * + * Optional boolean flag to suspend updates. Default is false. This flag will + * also suspend repaints of the outline. To toggle this switch, use the + * following code. + * + * (code) + * nav.suspended = !nav.suspended; + * + * if (!nav.suspended) + * { + * nav.update(true); + * } + * (end) + */ +mxOutline.prototype.suspended = false; + +/** + * Function: init + * + * Initializes the outline inside the given container. + */ +mxOutline.prototype.init = function(container) +{ + this.outline = new mxGraph(container, this.source.getModel(), this.graphRenderHint, this.source.getStylesheet()); + this.outline.foldingEnabled = false; + this.outline.autoScroll = false; + + // Do not repaint when suspended + var outlineGraphModelChanged = this.outline.graphModelChanged; + this.outline.graphModelChanged = mxUtils.bind(this, function(changes) + { + if (!this.suspended && this.outline != null) + { + outlineGraphModelChanged.apply(this.outline, arguments); + } + }); + + // Enables faster painting in SVG + if (mxClient.IS_SVG) + { + var node = this.outline.getView().getCanvas().parentNode; + node.setAttribute('shape-rendering', 'optimizeSpeed'); + node.setAttribute('image-rendering', 'optimizeSpeed'); + } + + // Hides cursors and labels + this.outline.labelsVisible = false; + this.outline.setEnabled(false); + + this.updateHandler = mxUtils.bind(this, function(sender, evt) + { + if (!this.suspended && !this.active) + { + this.update(); + } + }); + + // Updates the scale of the outline after a change of the main graph + this.source.getModel().addListener(mxEvent.CHANGE, this.updateHandler); + this.outline.addMouseListener(this); + + // Adds listeners to keep the outline in sync with the source graph + var view = this.source.getView(); + view.addListener(mxEvent.SCALE, this.updateHandler); + view.addListener(mxEvent.TRANSLATE, this.updateHandler); + view.addListener(mxEvent.SCALE_AND_TRANSLATE, this.updateHandler); + view.addListener(mxEvent.DOWN, this.updateHandler); + view.addListener(mxEvent.UP, this.updateHandler); + + // Updates blue rectangle on scroll + mxEvent.addListener(this.source.container, 'scroll', this.updateHandler); + + this.panHandler = mxUtils.bind(this, function(sender) + { + if (this.updateOnPan) + { + this.updateHandler.apply(this, arguments); + } + }); + this.source.addListener(mxEvent.PAN, this.panHandler); + + // Refreshes the graph in the outline after a refresh of the main graph + this.refreshHandler = mxUtils.bind(this, function(sender) + { + this.outline.setStylesheet(this.source.getStylesheet()); + this.outline.refresh(); + }); + this.source.addListener(mxEvent.REFRESH, this.refreshHandler); + + // Creates the blue rectangle for the viewport + this.bounds = new mxRectangle(0, 0, 0, 0); + this.selectionBorder = new mxRectangleShape(this.bounds, null, + mxConstants.OUTLINE_COLOR, mxConstants.OUTLINE_STROKEWIDTH); + this.selectionBorder.dialect = + (this.outline.dialect != mxConstants.DIALECT_SVG) ? + mxConstants.DIALECT_VML : mxConstants.DIALECT_SVG; + this.selectionBorder.crisp = true; + this.selectionBorder.init(this.outline.getView().getOverlayPane()); + mxEvent.redirectMouseEvents(this.selectionBorder.node, this.outline); + this.selectionBorder.node.style.background = ''; + + // Creates a small blue rectangle for sizing (sizer handle) + this.sizer = this.createSizer(); + this.sizer.init(this.outline.getView().getOverlayPane()); + + if (this.enabled) + { + this.sizer.node.style.cursor = 'pointer'; + } + + // Redirects all events from the sizerhandle to the outline + mxEvent.addListener(this.sizer.node, (mxClient.IS_TOUCH) ? 'touchstart' : 'mousedown', + mxUtils.bind(this, function(evt) + { + this.outline.fireMouseEvent(mxEvent.MOUSE_DOWN, new mxMouseEvent(evt)); + }) + ); + + this.selectionBorder.node.style.display = (this.showViewport) ? '' : 'none'; + this.sizer.node.style.display = this.selectionBorder.node.style.display; + this.selectionBorder.node.style.cursor = 'move'; + + this.update(false); +}; + +/** + * Function: isEnabled + * + * Returns true if events are handled. This implementation + * returns <enabled>. + */ +mxOutline.prototype.isEnabled = function() +{ + return this.enabled; +}; + +/** + * Function: setEnabled + * + * Enables or disables event handling. This implementation + * updates <enabled>. + * + * Parameters: + * + * value - Boolean that specifies the new enabled state. + */ +mxOutline.prototype.setEnabled = function(value) +{ + this.enabled = value; +}; + +/** + * Function: setZoomEnabled + * + * Enables or disables the zoom handling by showing or hiding the respective + * handle. + * + * Parameters: + * + * value - Boolean that specifies the new enabled state. + */ +mxOutline.prototype.setZoomEnabled = function(value) +{ + this.sizer.node.style.visibility = (value) ? 'visible' : 'hidden'; +}; + +/** + * Function: refresh + * + * Invokes <update> and revalidate the outline. This method is deprecated. + */ +mxOutline.prototype.refresh = function() +{ + this.update(true); +}; + +/** + * Function: createSizer + * + * Creates the shape used as the sizer. + */ +mxOutline.prototype.createSizer = function() +{ + if (this.sizerImage != null) + { + var sizer = new mxImageShape(new mxRectangle(0, 0, this.sizerImage.width, this.sizerImage.height), this.sizerImage.src); + sizer.dialect = this.outline.dialect; + + return sizer; + } + else + { + var sizer = new mxRectangleShape(new mxRectangle(0, 0, this.sizerSize, this.sizerSize), + mxConstants.OUTLINE_HANDLE_FILLCOLOR, mxConstants.OUTLINE_HANDLE_STROKECOLOR); + sizer.dialect = this.outline.dialect; + sizer.crisp = true; + + return sizer; + } +}; + +/** + * Function: getSourceContainerSize + * + * Returns the size of the source container. + */ +mxOutline.prototype.getSourceContainerSize = function() +{ + return new mxRectangle(0, 0, this.source.container.scrollWidth, this.source.container.scrollHeight); +}; + +/** + * Function: getOutlineOffset + * + * Returns the offset for drawing the outline graph. + */ +mxOutline.prototype.getOutlineOffset = function(scale) +{ + return null; +}; + +/** + * Function: update + * + * Updates the outline. + */ +mxOutline.prototype.update = function(revalidate) +{ + if (this.source != null) + { + var sourceScale = this.source.view.scale; + var scaledGraphBounds = this.source.getGraphBounds(); + var unscaledGraphBounds = new mxRectangle(scaledGraphBounds.x / sourceScale + this.source.panDx, + scaledGraphBounds.y / sourceScale + this.source.panDy, scaledGraphBounds.width / sourceScale, + scaledGraphBounds.height / sourceScale); + + var unscaledFinderBounds = new mxRectangle(0, 0, + this.source.container.clientWidth / sourceScale, + this.source.container.clientHeight / sourceScale); + + var union = unscaledGraphBounds.clone(); + union.add(unscaledFinderBounds); + + // Zooms to the scrollable area if that is bigger than the graph + var size = this.getSourceContainerSize(); + var completeWidth = Math.max(size.width / sourceScale, union.width); + var completeHeight = Math.max(size.height / sourceScale, union.height); + + var availableWidth = Math.max(0, this.outline.container.clientWidth - this.border); + var availableHeight = Math.max(0, this.outline.container.clientHeight - this.border); + + var outlineScale = Math.min(availableWidth / completeWidth, availableHeight / completeHeight); + var scale = outlineScale; + + if (scale > 0) + { + if (this.outline.getView().scale != scale) + { + this.outline.getView().scale = scale; + revalidate = true; + } + + var navView = this.outline.getView(); + + if (navView.currentRoot != this.source.getView().currentRoot) + { + navView.setCurrentRoot(this.source.getView().currentRoot); + } + + var t = this.source.view.translate; + var tx = t.x + this.source.panDx; + var ty = t.y + this.source.panDy; + + var off = this.getOutlineOffset(scale); + + if (off != null) + { + tx += off.x; + ty += off.y; + } + + if (unscaledGraphBounds.x < 0) + { + tx = tx - unscaledGraphBounds.x; + } + if (unscaledGraphBounds.y < 0) + { + ty = ty - unscaledGraphBounds.y; + } + + if (navView.translate.x != tx || navView.translate.y != ty) + { + navView.translate.x = tx; + navView.translate.y = ty; + revalidate = true; + } + + // Prepares local variables for computations + var t2 = navView.translate; + scale = this.source.getView().scale; + var scale2 = scale / navView.scale; + var scale3 = 1.0 / navView.scale; + var container = this.source.container; + + // Updates the bounds of the viewrect in the navigation + this.bounds = new mxRectangle( + (t2.x - t.x - this.source.panDx) / scale3, + (t2.y - t.y - this.source.panDy) / scale3, + (container.clientWidth / scale2), + (container.clientHeight / scale2)); + + // Adds the scrollbar offset to the finder + this.bounds.x += this.source.container.scrollLeft * navView.scale / scale; + this.bounds.y += this.source.container.scrollTop * navView.scale / scale; + + var b = this.selectionBorder.bounds; + + if (b.x != this.bounds.x || b.y != this.bounds.y || b.width != this.bounds.width || b.height != this.bounds.height) + { + this.selectionBorder.bounds = this.bounds; + this.selectionBorder.redraw(); + } + + // Updates the bounds of the zoom handle at the bottom right + var b = this.sizer.bounds; + var b2 = new mxRectangle(this.bounds.x + this.bounds.width - b.width / 2, + this.bounds.y + this.bounds.height - b.height / 2, b.width, b.height); + + if (b.x != b2.x || b.y != b2.y || b.width != b2.width || b.height != b2.height) + { + this.sizer.bounds = b2; + + // Avoids update of visibility in redraw for VML + if (this.sizer.node.style.visibility != 'hidden') + { + this.sizer.redraw(); + } + } + + if (revalidate) + { + this.outline.view.revalidate(); + } + } + } +}; + +/** + * Function: mouseDown + * + * Handles the event by starting a translation or zoom. + */ +mxOutline.prototype.mouseDown = function(sender, me) +{ + if (this.enabled && this.showViewport) + { + this.zoom = me.isSource(this.sizer); + this.startX = me.getX(); + this.startY = me.getY(); + this.active = true; + + if (this.source.useScrollbarsForPanning && + mxUtils.hasScrollbars(this.source.container)) + { + this.dx0 = this.source.container.scrollLeft; + this.dy0 = this.source.container.scrollTop; + } + else + { + this.dx0 = 0; + this.dy0 = 0; + } + } + + me.consume(); +}; + +/** + * Function: mouseMove + * + * Handles the event by previewing the viewrect in <graph> and updating the + * rectangle that represents the viewrect in the outline. + */ +mxOutline.prototype.mouseMove = function(sender, me) +{ + if (this.active) + { + this.selectionBorder.node.style.display = (this.showViewport) ? '' : 'none'; + this.sizer.node.style.display = this.selectionBorder.node.style.display; + + var dx = me.getX() - this.startX; + var dy = me.getY() - this.startY; + var bounds = null; + + if (!this.zoom) + { + // Previews the panning on the source graph + var scale = this.outline.getView().scale; + bounds = new mxRectangle(this.bounds.x + dx, + this.bounds.y + dy, this.bounds.width, this.bounds.height); + this.selectionBorder.bounds = bounds; + this.selectionBorder.redraw(); + dx /= scale; + dx *= this.source.getView().scale; + dy /= scale; + dy *= this.source.getView().scale; + this.source.panGraph(-dx - this.dx0, -dy - this.dy0); + } + else + { + // Does *not* preview zooming on the source graph + var container = this.source.container; + var viewRatio = container.clientWidth / container.clientHeight; + dy = dx / viewRatio; + bounds = new mxRectangle(this.bounds.x, + this.bounds.y, + Math.max(1, this.bounds.width + dx), + Math.max(1, this.bounds.height + dy)); + this.selectionBorder.bounds = bounds; + this.selectionBorder.redraw(); + } + + // Updates the zoom handle + var b = this.sizer.bounds; + this.sizer.bounds = new mxRectangle( + bounds.x + bounds.width - b.width / 2, + bounds.y + bounds.height - b.height / 2, + b.width, b.height); + + // Avoids update of visibility in redraw for VML + if (this.sizer.node.style.visibility != 'hidden') + { + this.sizer.redraw(); + } + + me.consume(); + } +}; + +/** + * Function: mouseUp + * + * Handles the event by applying the translation or zoom to <graph>. + */ +mxOutline.prototype.mouseUp = function(sender, me) +{ + if (this.active) + { + var dx = me.getX() - this.startX; + var dy = me.getY() - this.startY; + + if (Math.abs(dx) > 0 || Math.abs(dy) > 0) + { + if (!this.zoom) + { + // Applies the new translation if the source + // has no scrollbars + if (!this.source.useScrollbarsForPanning || + !mxUtils.hasScrollbars(this.source.container)) + { + this.source.panGraph(0, 0); + dx /= this.outline.getView().scale; + dy /= this.outline.getView().scale; + var t = this.source.getView().translate; + this.source.getView().setTranslate(t.x - dx, t.y - dy); + } + } + else + { + // Applies the new zoom + var w = this.selectionBorder.bounds.width; + var scale = this.source.getView().scale; + this.source.zoomTo(scale - (dx * scale) / w, false); + } + + this.update(); + me.consume(); + } + + // Resets the state of the handler + this.index = null; + this.active = false; + } +}; + +/** + * Function: destroy + * + * Destroy this outline and removes all listeners from <source>. + */ +mxOutline.prototype.destroy = function() +{ + if (this.source != null) + { + this.source.removeListener(this.panHandler); + this.source.removeListener(this.refreshHandler); + this.source.getModel().removeListener(this.updateHandler); + this.source.getView().removeListener(this.updateHandler); + mxEvent.addListener(this.source.container, 'scroll', this.updateHandler); + this.source = null; + } + + if (this.outline != null) + { + this.outline.removeMouseListener(this); + this.outline.destroy(); + this.outline = null; + } + + if (this.selectionBorder != null) + { + this.selectionBorder.destroy(); + this.selectionBorder = null; + } + + if (this.sizer != null) + { + this.sizer.destroy(); + this.sizer = null; + } +}; diff --git a/src/js/view/mxPerimeter.js b/src/js/view/mxPerimeter.js new file mode 100644 index 0000000..7aaa187 --- /dev/null +++ b/src/js/view/mxPerimeter.js @@ -0,0 +1,484 @@ +/** + * $Id: mxPerimeter.js,v 1.28 2012-01-11 09:06:56 gaudenz Exp $ + * Copyright (c) 2006-2010, JGraph Ltd + */ +var mxPerimeter = +{ + /** + * Class: mxPerimeter + * + * Provides various perimeter functions to be used in a style + * as the value of <mxConstants.STYLE_PERIMETER>. Perimeters for + * rectangle, circle, rhombus and triangle are available. + * + * Example: + * + * (code) + * <add as="perimeter">mxPerimeter.RightAngleRectanglePerimeter</add> + * (end) + * + * Or programmatically: + * + * (code) + * style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter; + * (end) + * + * When adding new perimeter functions, it is recommended to use the + * mxPerimeter-namespace as follows: + * + * (code) + * mxPerimeter.CustomPerimeter = function (bounds, vertex, next, orthogonal) + * { + * var x = 0; // Calculate x-coordinate + * var y = 0; // Calculate y-coordainte + * + * return new mxPoint(x, y); + * } + * (end) + * + * The new perimeter should then be registered in the <mxStyleRegistry> as follows: + * (code) + * mxStyleRegistry.putValue('customPerimeter', mxPerimeter.CustomPerimeter); + * (end) + * + * The custom perimeter above can now be used in a specific vertex as follows: + * + * (code) + * model.setStyle(vertex, 'perimeter=customPerimeter'); + * (end) + * + * Note that the key of the <mxStyleRegistry> entry for the function should + * be used in string values, unless <mxGraphView.allowEval> is true, in + * which case you can also use mxPerimeter.CustomPerimeter for the value in + * the cell style above. + * + * Or it can be used for all vertices in the graph as follows: + * + * (code) + * var style = graph.getStylesheet().getDefaultVertexStyle(); + * style[mxConstants.STYLE_PERIMETER] = mxPerimeter.CustomPerimeter; + * (end) + * + * Note that the object can be used directly when programmatically setting + * the value, but the key in the <mxStyleRegistry> should be used when + * setting the value via a key, value pair in a cell style. + * + * The parameters are explained in <RectanglePerimeter>. + * + * Function: RectanglePerimeter + * + * Describes a rectangular perimeter for the given bounds. + * + * Parameters: + * + * bounds - <mxRectangle> that represents the absolute bounds of the + * vertex. + * vertex - <mxCellState> that represents the vertex. + * next - <mxPoint> that represents the nearest neighbour point on the + * given edge. + * orthogonal - Boolean that specifies if the orthogonal projection onto + * the perimeter should be returned. If this is false then the intersection + * of the perimeter and the line between the next and the center point is + * returned. + */ + RectanglePerimeter: function (bounds, vertex, next, orthogonal) + { + var cx = bounds.getCenterX(); + var cy = bounds.getCenterY(); + var dx = next.x - cx; + var dy = next.y - cy; + var alpha = Math.atan2(dy, dx); + var p = new mxPoint(0, 0); + var pi = Math.PI; + var pi2 = Math.PI/2; + var beta = pi2 - alpha; + var t = Math.atan2(bounds.height, bounds.width); + + if (alpha < -pi + t || alpha > pi - t) + { + // Left edge + p.x = bounds.x; + p.y = cy - bounds.width * Math.tan(alpha) / 2; + } + else if (alpha < -t) + { + // Top Edge + p.y = bounds.y; + p.x = cx - bounds.height * Math.tan(beta) / 2; + } + else if (alpha < t) + { + // Right Edge + p.x = bounds.x + bounds.width; + p.y = cy + bounds.width * Math.tan(alpha) / 2; + } + else + { + // Bottom Edge + p.y = bounds.y + bounds.height; + p.x = cx + bounds.height * Math.tan(beta) / 2; + } + + if (orthogonal) + { + if (next.x >= bounds.x && + next.x <= bounds.x + bounds.width) + { + p.x = next.x; + } + else if (next.y >= bounds.y && + next.y <= bounds.y + bounds.height) + { + p.y = next.y; + } + if (next.x < bounds.x) + { + p.x = bounds.x; + } + else if (next.x > bounds.x + bounds.width) + { + p.x = bounds.x + bounds.width; + } + if (next.y < bounds.y) + { + p.y = bounds.y; + } + else if (next.y > bounds.y + bounds.height) + { + p.y = bounds.y + bounds.height; + } + } + + return p; + }, + + /** + * Function: EllipsePerimeter + * + * Describes an elliptic perimeter. See <RectanglePerimeter> + * for a description of the parameters. + */ + EllipsePerimeter: function (bounds, vertex, next, orthogonal) + { + var x = bounds.x; + var y = bounds.y; + var a = bounds.width / 2; + var b = bounds.height / 2; + var cx = x + a; + var cy = y + b; + var px = next.x; + var py = next.y; + + // Calculates straight line equation through + // point and ellipse center y = d * x + h + var dx = parseInt(px - cx); + var dy = parseInt(py - cy); + + if (dx == 0 && dy != 0) + { + return new mxPoint(cx, cy + b * dy / Math.abs(dy)); + } + else if (dx == 0 && dy == 0) + { + return new mxPoint(px, py); + } + + if (orthogonal) + { + if (py >= y && py <= y + bounds.height) + { + var ty = py - cy; + var tx = Math.sqrt(a*a*(1-(ty*ty)/(b*b))) || 0; + + if (px <= x) + { + tx = -tx; + } + + return new mxPoint(cx+tx, py); + } + + if (px >= x && px <= x + bounds.width) + { + var tx = px - cx; + var ty = Math.sqrt(b*b*(1-(tx*tx)/(a*a))) || 0; + + if (py <= y) + { + ty = -ty; + } + + return new mxPoint(px, cy+ty); + } + } + + // Calculates intersection + var d = dy / dx; + var h = cy - d * cx; + var e = a * a * d * d + b * b; + var f = -2 * cx * e; + var g = a * a * d * d * cx * cx + + b * b * cx * cx - + a * a * b * b; + var det = Math.sqrt(f * f - 4 * e * g); + + // Two solutions (perimeter points) + var xout1 = (-f + det) / (2 * e); + var xout2 = (-f - det) / (2 * e); + var yout1 = d * xout1 + h; + var yout2 = d * xout2 + h; + var dist1 = Math.sqrt(Math.pow((xout1 - px), 2) + + Math.pow((yout1 - py), 2)); + var dist2 = Math.sqrt(Math.pow((xout2 - px), 2) + + Math.pow((yout2 - py), 2)); + + // Correct solution + var xout = 0; + var yout = 0; + + if (dist1 < dist2) + { + xout = xout1; + yout = yout1; + } + else + { + xout = xout2; + yout = yout2; + } + + return new mxPoint(xout, yout); + }, + + /** + * Function: RhombusPerimeter + * + * Describes a rhombus (aka diamond) perimeter. See <RectanglePerimeter> + * for a description of the parameters. + */ + RhombusPerimeter: function (bounds, vertex, next, orthogonal) + { + var x = bounds.x; + var y = bounds.y; + var w = bounds.width; + var h = bounds.height; + + var cx = x + w / 2; + var cy = y + h / 2; + + var px = next.x; + var py = next.y; + + // Special case for intersecting the diamond's corners + if (cx == px) + { + if (cy > py) + { + return new mxPoint(cx, y); // top + } + else + { + return new mxPoint(cx, y + h); // bottom + } + } + else if (cy == py) + { + if (cx > px) + { + return new mxPoint(x, cy); // left + } + else + { + return new mxPoint(x + w, cy); // right + } + } + + var tx = cx; + var ty = cy; + + if (orthogonal) + { + if (px >= x && px <= x + w) + { + tx = px; + } + else if (py >= y && py <= y + h) + { + ty = py; + } + } + + // In which quadrant will the intersection be? + // set the slope and offset of the border line accordingly + if (px < cx) + { + if (py < cy) + { + return mxUtils.intersection(px, py, tx, ty, cx, y, x, cy); + } + else + { + return mxUtils.intersection(px, py, tx, ty, cx, y + h, x, cy); + } + } + else if (py < cy) + { + return mxUtils.intersection(px, py, tx, ty, cx, y, x + w, cy); + } + else + { + return mxUtils.intersection(px, py, tx, ty, cx, y + h, x + w, cy); + } + }, + + /** + * Function: TrianglePerimeter + * + * Describes a triangle perimeter. See <RectanglePerimeter> + * for a description of the parameters. + */ + TrianglePerimeter: function (bounds, vertex, next, orthogonal) + { + var direction = (vertex != null) ? + vertex.style[mxConstants.STYLE_DIRECTION] : null; + var vertical = direction == mxConstants.DIRECTION_NORTH || + direction == mxConstants.DIRECTION_SOUTH; + + var x = bounds.x; + var y = bounds.y; + var w = bounds.width; + var h = bounds.height; + + var cx = x + w / 2; + var cy = y + h / 2; + + var start = new mxPoint(x, y); + var corner = new mxPoint(x + w, cy); + var end = new mxPoint(x, y + h); + + if (direction == mxConstants.DIRECTION_NORTH) + { + start = end; + corner = new mxPoint(cx, y); + end = new mxPoint(x + w, y + h); + } + else if (direction == mxConstants.DIRECTION_SOUTH) + { + corner = new mxPoint(cx, y + h); + end = new mxPoint(x + w, y); + } + else if (direction == mxConstants.DIRECTION_WEST) + { + start = new mxPoint(x + w, y); + corner = new mxPoint(x, cy); + end = new mxPoint(x + w, y + h); + } + + var dx = next.x - cx; + var dy = next.y - cy; + + var alpha = (vertical) ? Math.atan2(dx, dy) : Math.atan2(dy, dx); + var t = (vertical) ? Math.atan2(w, h) : Math.atan2(h, w); + + var base = false; + + if (direction == mxConstants.DIRECTION_NORTH || + direction == mxConstants.DIRECTION_WEST) + { + base = alpha > -t && alpha < t; + } + else + { + base = alpha < -Math.PI + t || alpha > Math.PI - t; + } + + var result = null; + + if (base) + { + if (orthogonal && ((vertical && next.x >= start.x && next.x <= end.x) || + (!vertical && next.y >= start.y && next.y <= end.y))) + { + if (vertical) + { + result = new mxPoint(next.x, start.y); + } + else + { + result = new mxPoint(start.x, next.y); + } + } + else + { + if (direction == mxConstants.DIRECTION_NORTH) + { + result = new mxPoint(x + w / 2 + h * Math.tan(alpha) / 2, + y + h); + } + else if (direction == mxConstants.DIRECTION_SOUTH) + { + result = new mxPoint(x + w / 2 - h * Math.tan(alpha) / 2, + y); + } + else if (direction == mxConstants.DIRECTION_WEST) + { + result = new mxPoint(x + w, y + h / 2 + + w * Math.tan(alpha) / 2); + } + else + { + result = new mxPoint(x, y + h / 2 - + w * Math.tan(alpha) / 2); + } + } + } + else + { + if (orthogonal) + { + var pt = new mxPoint(cx, cy); + + if (next.y >= y && next.y <= y + h) + { + pt.x = (vertical) ? cx : ( + (direction == mxConstants.DIRECTION_WEST) ? + x + w : x); + pt.y = next.y; + } + else if (next.x >= x && next.x <= x + w) + { + pt.x = next.x; + pt.y = (!vertical) ? cy : ( + (direction == mxConstants.DIRECTION_NORTH) ? + y + h : y); + } + + // Compute angle + dx = next.x - pt.x; + dy = next.y - pt.y; + + cx = pt.x; + cy = pt.y; + } + + if ((vertical && next.x <= x + w / 2) || + (!vertical && next.y <= y + h / 2)) + { + result = mxUtils.intersection(next.x, next.y, cx, cy, + start.x, start.y, corner.x, corner.y); + } + else + { + result = mxUtils.intersection(next.x, next.y, cx, cy, + corner.x, corner.y, end.x, end.y); + } + } + + if (result == null) + { + result = new mxPoint(cx, cy); + } + + return result; + } +}; diff --git a/src/js/view/mxPrintPreview.js b/src/js/view/mxPrintPreview.js new file mode 100644 index 0000000..24a65e6 --- /dev/null +++ b/src/js/view/mxPrintPreview.js @@ -0,0 +1,801 @@ +/** + * $Id: mxPrintPreview.js,v 1.61 2012-05-15 14:12:40 gaudenz Exp $ + * Copyright (c) 2006-2010, JGraph Ltd + */ +/** + * Class: mxPrintPreview + * + * Implements printing of a diagram across multiple pages. The following opens + * a print preview for an existing graph: + * + * (code) + * var preview = new mxPrintPreview(graph); + * preview.open(); + * (end) + * + * Use <mxUtils.getScaleForPageCount> as follows in order to print the graph + * across a given number of pages: + * + * (code) + * var pageCount = mxUtils.prompt('Enter page count', '1'); + * + * if (pageCount != null) + * { + * var scale = mxUtils.getScaleForPageCount(pageCount, graph); + * var preview = new mxPrintPreview(graph, scale); + * preview.open(); + * } + * (end) + * + * Headers: + * + * Apart from setting the title argument in the mxPrintPreview constructor you + * can override <renderPage> as follows to add a header to any page: + * + * (code) + * var oldRenderPage = mxPrintPreview.prototype.renderPage; + * mxPrintPreview.prototype.renderPage = function(w, h, dx, dy, scale, pageNumber) + * { + * var div = oldRenderPage.apply(this, arguments); + * + * var header = document.createElement('div'); + * header.style.position = 'absolute'; + * header.style.top = '0px'; + * header.style.width = '100%'; + * header.style.textAlign = 'right'; + * mxUtils.write(header, 'Your header here - Page ' + pageNumber + ' / ' + this.pageCount); + * div.firstChild.appendChild(header); + * + * return div; + * }; + * (end) + * + * Page Format: + * + * For landscape printing, use <mxConstants.PAGE_FORMAT_A4_LANDSCAPE> as + * the pageFormat in <mxUtils.getScaleForPageCount> and <mxPrintPreview>. + * Keep in mind that one can not set the defaults for the print dialog + * of the operating system from JavaScript so the user must manually choose + * a page format that matches this setting. + * + * You can try passing the following CSS directive to <open> to set the + * page format in the print dialog to landscape. However, this CSS + * directive seems to be ignored in most major browsers, including IE. + * + * (code) + * @page { + * size: landscape; + * } + * (end) + * + * Note that the print preview behaves differently in IE when used from the + * filesystem or via HTTP so printing should always be tested via HTTP. + * + * If you are using a DOCTYPE in the source page you can override <getDoctype> + * and provide the same DOCTYPE for the print preview if required. Here is + * an example for IE8 standards mode. + * + * (code) + * var preview = new mxPrintPreview(graph); + * preview.getDoctype = function() + * { + * return '<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=5,IE=8" ><![endif]-->'; + * }; + * preview.open(); + * (end) + * + * Constructor: mxPrintPreview + * + * Constructs a new print preview for the given parameters. + * + * Parameters: + * + * graph - <mxGraph> to be previewed. + * scale - Optional scale of the output. Default is 1 / <mxGraph.pageScale>. + * border - Border in pixels along each side of every page. Note that the + * actual print function in the browser will add another border for + * printing. + * pageFormat - <mxRectangle> that specifies the page format (in pixels). + * This should match the page format of the printer. Default uses the + * <mxGraph.pageFormat> of the given graph. + * x0 - Optional left offset of the output. Default is 0. + * y0 - Optional top offset of the output. Default is 0. + * borderColor - Optional color of the page border. Default is no border. + * Note that a border is sometimes useful to highlight the printed page + * border in the print preview of the browser. + * title - Optional string that is used for the window title. Default + * is 'Printer-friendly version'. + * pageSelector - Optional boolean that specifies if the page selector + * should appear in the window with the print preview. Default is true. + */ +function mxPrintPreview(graph, scale, pageFormat, border, x0, y0, borderColor, title, pageSelector) +{ + this.graph = graph; + this.scale = (scale != null) ? scale : 1 / graph.pageScale; + this.border = (border != null) ? border : 0; + this.pageFormat = (pageFormat != null) ? pageFormat : graph.pageFormat; + this.title = (title != null) ? title : 'Printer-friendly version'; + this.x0 = (x0 != null) ? x0 : 0; + this.y0 = (y0 != null) ? y0 : 0; + this.borderColor = borderColor; + this.pageSelector = (pageSelector != null) ? pageSelector : true; +}; + +/** + * Variable: graph + * + * Reference to the <mxGraph> that should be previewed. + */ +mxPrintPreview.prototype.graph = null; + +/** + * Variable: pageFormat + * + * Holds the <mxRectangle> that defines the page format. + */ +mxPrintPreview.prototype.pageFormat = null; + +/** + * Variable: scale + * + * Holds the scale of the print preview. + */ +mxPrintPreview.prototype.scale = null; + +/** + * Variable: border + * + * The border inset around each side of every page in the preview. This is set + * to 0 if autoOrigin is false. + */ +mxPrintPreview.prototype.border = 0; + +/** +/** + * Variable: x0 + * + * Holds the horizontal offset of the output. + */ +mxPrintPreview.prototype.x0 = 0; + +/** + * Variable: y0 + * + * Holds the vertical offset of the output. + */ +mxPrintPreview.prototype.y0 = 0; + +/** + * Variable: autoOrigin + * + * Specifies if the origin should be automatically computed based on the top, + * left corner of the actual diagram contents. If this is set to false then the + * values for <x0> and <y0> will be overridden in <open>. Default is true. + */ +mxPrintPreview.prototype.autoOrigin = true; + +/** + * Variable: printOverlays + * + * Specifies if overlays should be printed. Default is false. + */ +mxPrintPreview.prototype.printOverlays = false; + +/** + * Variable: borderColor + * + * Holds the color value for the page border. + */ +mxPrintPreview.prototype.borderColor = null; + +/** + * Variable: title + * + * Holds the title of the preview window. + */ +mxPrintPreview.prototype.title = null; + +/** + * Variable: pageSelector + * + * Boolean that specifies if the page selector should be + * displayed. Default is true. + */ +mxPrintPreview.prototype.pageSelector = null; + +/** + * Variable: wnd + * + * Reference to the preview window. + */ +mxPrintPreview.prototype.wnd = null; + +/** + * Variable: pageCount + * + * Holds the actual number of pages in the preview. + */ +mxPrintPreview.prototype.pageCount = 0; + +/** + * Function: getWindow + * + * Returns <wnd>. + */ +mxPrintPreview.prototype.getWindow = function() +{ + return this.wnd; +}; + +/** + * Function: getDocType + * + * Returns the string that should go before the HTML tag in the print preview + * page. This implementation returns an empty string. + */ +mxPrintPreview.prototype.getDoctype = function() +{ + return ''; +}; + +/** + * Function: open + * + * Shows the print preview window. The window is created here if it does + * not exist. + * + * Parameters: + * + * css - Optional CSS string to be used in the new page's head section. + */ +mxPrintPreview.prototype.open = function(css) +{ + // Closing the window while the page is being rendered may cause an + // exception in IE. This and any other exceptions are simply ignored. + var previousInitializeOverlay = this.graph.cellRenderer.initializeOverlay; + var div = null; + + try + { + // Temporarily overrides the method to redirect rendering of overlays + // to the draw pane so that they are visible in the printout + if (this.printOverlays) + { + this.graph.cellRenderer.initializeOverlay = function(state, overlay) + { + overlay.init(state.view.getDrawPane()); + }; + } + + if (this.wnd == null) + { + this.wnd = window.open(); + var doc = this.wnd.document; + var dt = this.getDoctype(); + + if (dt != null && dt.length > 0) + { + doc.writeln(dt); + } + + doc.writeln('<html>'); + doc.writeln('<head>'); + this.writeHead(doc, css); + doc.writeln('</head>'); + doc.writeln('<body class="mxPage">'); + + // Adds all required stylesheets and namespaces + mxClient.link('stylesheet', mxClient.basePath + '/css/common.css', doc); + + if (mxClient.IS_IE && document.documentMode != 9) + { + doc.namespaces.add('v', 'urn:schemas-microsoft-com:vml'); + doc.namespaces.add('o', 'urn:schemas-microsoft-com:office:office'); + var ss = doc.createStyleSheet(); + ss.cssText = 'v\\:*{behavior:url(#default#VML)}o\\:*{behavior:url(#default#VML)}'; + mxClient.link('stylesheet', mxClient.basePath + '/css/explorer.css', doc); + } + + // Computes the horizontal and vertical page count + var bounds = this.graph.getGraphBounds().clone(); + var currentScale = this.graph.getView().getScale(); + var sc = currentScale / this.scale; + var tr = this.graph.getView().getTranslate(); + + // Uses the absolute origin with no offset for all printing + if (!this.autoOrigin) + { + this.x0 = -tr.x * this.scale; + this.y0 = -tr.y * this.scale; + bounds.width += bounds.x; + bounds.height += bounds.y; + bounds.x = 0; + bounds.y = 0; + this.border = 0; + } + + // Compute the unscaled, untranslated bounds to find + // the number of vertical and horizontal pages + bounds.width /= sc; + bounds.height /= sc; + + // Store the available page area + var availableWidth = this.pageFormat.width - (this.border * 2); + var availableHeight = this.pageFormat.height - (this.border * 2); + + var hpages = Math.max(1, Math.ceil((bounds.width + this.x0) / availableWidth)); + var vpages = Math.max(1, Math.ceil((bounds.height + this.y0) / availableHeight)); + this.pageCount = hpages * vpages; + + var writePageSelector = mxUtils.bind(this, function() + { + if (this.pageSelector && (vpages > 1 || hpages > 1)) + { + var table = this.createPageSelector(vpages, hpages); + doc.body.appendChild(table); + + // Workaround for position: fixed which isn't working in IE + if (mxClient.IS_IE) + { + table.style.position = 'absolute'; + + var update = function() + { + table.style.top = (doc.body.scrollTop + 10) + 'px'; + }; + + mxEvent.addListener(this.wnd, 'scroll', function(evt) + { + update(); + }); + + mxEvent.addListener(this.wnd, 'resize', function(evt) + { + update(); + }); + } + } + }); + + // Stores pages for later retrieval + var pages = null; + + // Workaround for aspect of image shapes updated asynchronously + // in VML so we need to fetch the markup of the DIV containing + // the image after the udpate of the style of the DOM node. + // LATER: Allow document for display markup to be customized. + if (mxClient.IS_IE && document.documentMode != 9) + { + pages = []; + + // Overrides asynchronous loading of images for fetching HTML markup + var waitCounter = 0; + var isDone = false; + + var mxImageShapeScheduleUpdateAspect = mxImageShape.prototype.scheduleUpdateAspect; + var mxImageShapeUpdateAspect = mxImageShape.prototype.updateAspect; + + var writePages = function() + { + if (isDone && waitCounter == 0) + { + // Restores previous implementations + mxImageShape.prototype.scheduleUpdateAspect = mxImageShapeScheduleUpdateAspect; + mxImageShape.prototype.updateAspect = mxImageShapeUpdateAspect; + + var markup = ''; + + for (var i = 0; i < pages.length; i++) + { + markup += pages[i].outerHTML; + pages[i].parentNode.removeChild(pages[i]); + + if (i < pages.length - 1) + { + markup += '<hr/>'; + } + } + + doc.body.innerHTML = markup; + writePageSelector(); + } + }; + + // Overrides functions to implement wait counter + mxImageShape.prototype.scheduleUpdateAspect = function() + { + waitCounter++; + mxImageShapeScheduleUpdateAspect.apply(this, arguments); + }; + + // Overrides functions to implement wait counter + mxImageShape.prototype.updateAspect = function() + { + mxImageShapeUpdateAspect.apply(this, arguments); + waitCounter--; + writePages(); + }; + } + + // Appends each page to the page output for printing, making + // sure there will be a page break after each page (ie. div) + for (var i = 0; i < vpages; i++) + { + var dy = i * availableHeight / this.scale - this.y0 / this.scale + + (bounds.y - tr.y * currentScale) / currentScale; + + for (var j = 0; j < hpages; j++) + { + if (this.wnd == null) + { + return null; + } + + var dx = j * availableWidth / this.scale - this.x0 / this.scale + + (bounds.x - tr.x * currentScale) / currentScale; + var pageNum = i * hpages + j + 1; + + div = this.renderPage(this.pageFormat.width, this.pageFormat.height, + -dx, -dy, this.scale, pageNum); + + // Gives the page a unique ID for later accessing the page + div.setAttribute('id', 'mxPage-'+pageNum); + + // Border of the DIV (aka page) inside the document + if (this.borderColor != null) + { + div.style.borderColor = this.borderColor; + div.style.borderStyle = 'solid'; + div.style.borderWidth = '1px'; + } + + // Needs to be assigned directly because IE doesn't support + // child selectors, eg. body > div { background: white; } + div.style.background = 'white'; + + if (i < vpages - 1 || j < hpages - 1) + { + div.style.pageBreakAfter = 'always'; + } + + // NOTE: We are dealing with cross-window DOM here, which + // is a problem in IE, so we copy the HTML markup instead. + // The underlying problem is that the graph display markup + // creation (in mxShape, mxGraphView) is hardwired to using + // document.createElement and hence we must use document + // to create the complete page and then copy it over to the + // new window.document. This can be fixed later by using the + // ownerDocument of the container in mxShape and mxGraphView. + if (mxClient.IS_IE) + { + // For some obscure reason, removing the DIV from the + // parent before fetching its outerHTML has missing + // fillcolor properties and fill children, so the div + // must be removed afterwards to keep the fillcolors. + // For delayed output we remote the DIV from the + // original document when we write out all pages. + doc.writeln(div.outerHTML); + + if (pages != null) + { + pages.push(div); + } + else + { + div.parentNode.removeChild(div); + } + } + else + { + div.parentNode.removeChild(div); + doc.body.appendChild(div); + } + + if (i < vpages - 1 || j < hpages - 1) + { + var hr = doc.createElement('hr'); + hr.className = 'mxPageBreak'; + doc.body.appendChild(hr); + } + } + } + + doc.writeln('</body>'); + doc.writeln('</html>'); + doc.close(); + + // Marks the printing complete for async handling + if (pages != null) + { + isDone = true; + writePages(); + } + else + { + writePageSelector(); + } + + // Removes all event handlers in the print output + mxEvent.release(doc.body); + } + + this.wnd.focus(); + } + catch (e) + { + // Removes the DIV from the document in case of an error + if (div != null && div.parentNode != null) + { + div.parentNode.removeChild(div); + } + } + finally + { + this.graph.cellRenderer.initializeOverlay = previousInitializeOverlay; + } + + return this.wnd; +}; + +/** + * Function: writeHead + * + * Writes the HEAD section into the given document, without the opening + * and closing HEAD tags. + */ +mxPrintPreview.prototype.writeHead = function(doc, css) +{ + if (this.title != null) + { + doc.writeln('<title>' + this.title + '</title>'); + } + + // Makes sure no horizontal rulers are printed + doc.writeln('<style type="text/css">'); + doc.writeln('@media print {'); + doc.writeln(' table.mxPageSelector { display: none; }'); + doc.writeln(' hr.mxPageBreak { display: none; }'); + doc.writeln('}'); + doc.writeln('@media screen {'); + + // NOTE: position: fixed is not supported in IE, so the page selector + // position (absolute) needs to be updated in IE (see below) + doc.writeln(' table.mxPageSelector { position: fixed; right: 10px; top: 10px;' + + 'font-family: Arial; font-size:10pt; border: solid 1px darkgray;' + + 'background: white; border-collapse:collapse; }'); + doc.writeln(' table.mxPageSelector td { border: solid 1px gray; padding:4px; }'); + doc.writeln(' body.mxPage { background: gray; }'); + doc.writeln('}'); + + if (css != null) + { + doc.writeln(css); + } + + doc.writeln('</style>'); +}; + +/** + * Function: createPageSelector + * + * Creates the page selector table. + */ +mxPrintPreview.prototype.createPageSelector = function(vpages, hpages) +{ + var doc = this.wnd.document; + var table = doc.createElement('table'); + table.className = 'mxPageSelector'; + table.setAttribute('border', '0'); + + var tbody = doc.createElement('tbody'); + + for (var i = 0; i < vpages; i++) + { + var row = doc.createElement('tr'); + + for (var j = 0; j < hpages; j++) + { + var pageNum = i * hpages + j + 1; + var cell = doc.createElement('td'); + + // Needs anchor for all browers to work without JavaScript + // LATER: Does not work in Firefox because the generated document + // has the URL of the opening document, the anchor is appended + // to that URL and the full URL is loaded on click. + if (!mxClient.IS_NS || mxClient.IS_SF || mxClient.IS_GC) + { + var a = doc.createElement('a'); + a.setAttribute('href', '#mxPage-' + pageNum); + mxUtils.write(a, pageNum, doc); + cell.appendChild(a); + } + else + { + mxUtils.write(cell, pageNum, doc); + } + + row.appendChild(cell); + } + + tbody.appendChild(row); + } + + table.appendChild(tbody); + + return table; +}; + +/** + * Function: renderPage + * + * Creates a DIV that prints a single page of the given + * graph using the given scale and returns the DIV that + * represents the page. + * + * Parameters: + * + * w - Width of the page in pixels. + * h - Height of the page in pixels. + * dx - Horizontal translation for the diagram. + * dy - Vertical translation for the diagram. + * scale - Scale for the diagram. + * pageNumber - Number of the page to be rendered. + */ +mxPrintPreview.prototype.renderPage = function(w, h, dx, dy, scale, pageNumber) +{ + var div = document.createElement('div'); + + try + { + div.style.width = w + 'px'; + div.style.height = h + 'px'; + div.style.overflow = 'hidden'; + div.style.pageBreakInside = 'avoid'; + + var innerDiv = document.createElement('div'); + innerDiv.style.top = this.border + 'px'; + innerDiv.style.left = this.border + 'px'; + innerDiv.style.width = (w - 2 * this.border) + 'px'; + innerDiv.style.height = (h - 2 * this.border) + 'px'; + innerDiv.style.overflow = 'hidden'; + + if (this.graph.dialect == mxConstants.DIALECT_VML) + { + innerDiv.style.position = 'absolute'; + } + + div.appendChild(innerDiv); + document.body.appendChild(div); + var view = this.graph.getView(); + + var previousContainer = this.graph.container; + this.graph.container = innerDiv; + + var canvas = view.getCanvas(); + var backgroundPane = view.getBackgroundPane(); + var drawPane = view.getDrawPane(); + var overlayPane = view.getOverlayPane(); + + if (this.graph.dialect == mxConstants.DIALECT_SVG) + { + view.createSvg(); + } + else if (this.graph.dialect == mxConstants.DIALECT_VML) + { + view.createVml(); + } + else + { + view.createHtml(); + } + + // Disables events on the view + var eventsEnabled = view.isEventsEnabled(); + view.setEventsEnabled(false); + + // Disables the graph to avoid cursors + var graphEnabled = this.graph.isEnabled(); + this.graph.setEnabled(false); + + // Resets the translation + var translate = view.getTranslate(); + view.translate = new mxPoint(dx, dy); + + var temp = null; + + try + { + // Creates the temporary cell states in the view and + // draws them onto the temporary DOM nodes in the view + var model = this.graph.getModel(); + var cells = [model.getRoot()]; + temp = new mxTemporaryCellStates(view, scale, cells); + } + finally + { + // Removes overlay pane with selection handles + // controls and icons from the print output + if (mxClient.IS_IE) + { + view.overlayPane.innerHTML = ''; + } + else + { + // Removes everything but the SVG node + var tmp = innerDiv.firstChild; + + while (tmp != null) + { + var next = tmp.nextSibling; + var name = tmp.nodeName.toLowerCase(); + + // Note: Width and heigh are required in FF 11 + if (name == 'svg') + { + tmp.setAttribute('width', parseInt(innerDiv.style.width)); + tmp.setAttribute('height', parseInt(innerDiv.style.height)); + } + // Tries to fetch all text labels and only text labels + else if (tmp.style.cursor != 'default' && name != 'table') + { + tmp.parentNode.removeChild(tmp); + } + + tmp = next; + } + } + + // Completely removes the overlay pane to remove more handles + view.overlayPane.parentNode.removeChild(view.overlayPane); + + // Restores the state of the view + this.graph.setEnabled(graphEnabled); + this.graph.container = previousContainer; + view.canvas = canvas; + view.backgroundPane = backgroundPane; + view.drawPane = drawPane; + view.overlayPane = overlayPane; + view.translate = translate; + temp.destroy(); + view.setEventsEnabled(eventsEnabled); + } + } + catch (e) + { + div.parentNode.removeChild(div); + div = null; + + throw e; + } + + return div; +}; + +/** + * Function: print + * + * Opens the print preview and shows the print dialog. + */ +mxPrintPreview.prototype.print = function() +{ + var wnd = this.open(); + + if (wnd != null) + { + wnd.print(); + } +}; + +/** + * Function: close + * + * Closes the print preview window. + */ +mxPrintPreview.prototype.close = function() +{ + if (this.wnd != null) + { + this.wnd.close(); + this.wnd = null; + } +}; diff --git a/src/js/view/mxSpaceManager.js b/src/js/view/mxSpaceManager.js new file mode 100644 index 0000000..2a2dd11 --- /dev/null +++ b/src/js/view/mxSpaceManager.js @@ -0,0 +1,460 @@ +/** + * $Id: mxSpaceManager.js,v 1.9 2010-01-02 09:45:15 gaudenz Exp $ + * Copyright (c) 2006-2010, JGraph Ltd + */ +/** + * Class: mxSpaceManager + * + * In charge of moving cells after a resize. + * + * Constructor: mxSpaceManager + * + * Constructs a new automatic layout for the given graph. + * + * Arguments: + * + * graph - Reference to the enclosing graph. + */ +function mxSpaceManager(graph, shiftRightwards, shiftDownwards, extendParents) +{ + this.resizeHandler = mxUtils.bind(this, function(sender, evt) + { + if (this.isEnabled()) + { + this.cellsResized(evt.getProperty('cells')); + } + }); + + this.foldHandler = mxUtils.bind(this, function(sender, evt) + { + if (this.isEnabled()) + { + this.cellsResized(evt.getProperty('cells')); + } + }); + + this.shiftRightwards = (shiftRightwards != null) ? shiftRightwards : true; + this.shiftDownwards = (shiftDownwards != null) ? shiftDownwards : true; + this.extendParents = (extendParents != null) ? extendParents : true; + this.setGraph(graph); +}; + +/** + * Extends mxEventSource. + */ +mxSpaceManager.prototype = new mxEventSource(); +mxSpaceManager.prototype.constructor = mxSpaceManager; + +/** + * Variable: graph + * + * Reference to the enclosing <mxGraph>. + */ +mxSpaceManager.prototype.graph = null; + +/** + * Variable: enabled + * + * Specifies if event handling is enabled. Default is true. + */ +mxSpaceManager.prototype.enabled = true; + +/** + * Variable: shiftRightwards + * + * Specifies if event handling is enabled. Default is true. + */ +mxSpaceManager.prototype.shiftRightwards = true; + +/** + * Variable: shiftDownwards + * + * Specifies if event handling is enabled. Default is true. + */ +mxSpaceManager.prototype.shiftDownwards = true; + +/** + * Variable: extendParents + * + * Specifies if event handling is enabled. Default is true. + */ +mxSpaceManager.prototype.extendParents = true; + +/** + * Variable: resizeHandler + * + * Holds the function that handles the move event. + */ +mxSpaceManager.prototype.resizeHandler = null; + +/** + * Variable: foldHandler + * + * Holds the function that handles the fold event. + */ +mxSpaceManager.prototype.foldHandler = null; + +/** + * Function: isCellIgnored + * + * Sets the graph that the layouts operate on. + */ +mxSpaceManager.prototype.isCellIgnored = function(cell) +{ + return !this.getGraph().getModel().isVertex(cell); +}; + +/** + * Function: isCellShiftable + * + * Sets the graph that the layouts operate on. + */ +mxSpaceManager.prototype.isCellShiftable = function(cell) +{ + return this.getGraph().getModel().isVertex(cell) && + this.getGraph().isCellMovable(cell); +}; + +/** + * Function: isEnabled + * + * Returns true if events are handled. This implementation + * returns <enabled>. + */ +mxSpaceManager.prototype.isEnabled = function() +{ + return this.enabled; +}; + +/** + * Function: setEnabled + * + * Enables or disables event handling. This implementation + * updates <enabled>. + * + * Parameters: + * + * enabled - Boolean that specifies the new enabled state. + */ +mxSpaceManager.prototype.setEnabled = function(value) +{ + this.enabled = value; +}; + +/** + * Function: isShiftRightwards + * + * Returns true if events are handled. This implementation + * returns <enabled>. + */ +mxSpaceManager.prototype.isShiftRightwards = function() +{ + return this.shiftRightwards; +}; + +/** + * Function: setShiftRightwards + * + * Enables or disables event handling. This implementation + * updates <enabled>. + * + * Parameters: + * + * enabled - Boolean that specifies the new enabled state. + */ +mxSpaceManager.prototype.setShiftRightwards = function(value) +{ + this.shiftRightwards = value; +}; + +/** + * Function: isShiftDownwards + * + * Returns true if events are handled. This implementation + * returns <enabled>. + */ +mxSpaceManager.prototype.isShiftDownwards = function() +{ + return this.shiftDownwards; +}; + +/** + * Function: setShiftDownwards + * + * Enables or disables event handling. This implementation + * updates <enabled>. + * + * Parameters: + * + * enabled - Boolean that specifies the new enabled state. + */ +mxSpaceManager.prototype.setShiftDownwards = function(value) +{ + this.shiftDownwards = value; +}; + +/** + * Function: isExtendParents + * + * Returns true if events are handled. This implementation + * returns <enabled>. + */ +mxSpaceManager.prototype.isExtendParents = function() +{ + return this.extendParents; +}; + +/** + * Function: setShiftDownwards + * + * Enables or disables event handling. This implementation + * updates <enabled>. + * + * Parameters: + * + * enabled - Boolean that specifies the new enabled state. + */ +mxSpaceManager.prototype.setExtendParents = function(value) +{ + this.extendParents = value; +}; + +/** + * Function: getGraph + * + * Returns the graph that this layout operates on. + */ +mxSpaceManager.prototype.getGraph = function() +{ + return this.graph; +}; + +/** + * Function: setGraph + * + * Sets the graph that the layouts operate on. + */ +mxSpaceManager.prototype.setGraph = function(graph) +{ + if (this.graph != null) + { + this.graph.removeListener(this.resizeHandler); + this.graph.removeListener(this.foldHandler); + } + + this.graph = graph; + + if (this.graph != null) + { + this.graph.addListener(mxEvent.RESIZE_CELLS, this.resizeHandler); + this.graph.addListener(mxEvent.FOLD_CELLS, this.foldHandler); + } +}; + +/** + * Function: cellsResized + * + * Called from <moveCellsIntoParent> to invoke the <move> hook in the + * automatic layout of each modified cell's parent. The event is used to + * define the x- and y-coordinates passed to the move function. + * + * Parameters: + * + * cell - Array of <mxCells> that have been resized. + */ +mxSpaceManager.prototype.cellsResized = function(cells) +{ + if (cells != null) + { + var model = this.graph.getModel(); + + // Raising the update level should not be required + // since only one call is made below + model.beginUpdate(); + try + { + for (var i = 0; i < cells.length; i++) + { + if (!this.isCellIgnored(cells[i])) + { + this.cellResized(cells[i]); + break; + } + } + } + finally + { + model.endUpdate(); + } + } +}; + +/** + * Function: cellResized + * + * Called from <moveCellsIntoParent> to invoke the <move> hook in the + * automatic layout of each modified cell's parent. The event is used to + * define the x- and y-coordinates passed to the move function. + * + * Parameters: + * + * cell - <mxCell> that has been resized. + */ +mxSpaceManager.prototype.cellResized = function(cell) +{ + var graph = this.getGraph(); + var view = graph.getView(); + var model = graph.getModel(); + + var state = view.getState(cell); + var pstate = view.getState(model.getParent(cell)); + + if (state != null && + pstate != null) + { + var cells = this.getCellsToShift(state); + var geo = model.getGeometry(cell); + + if (cells != null && + geo != null) + { + var tr = view.translate; + var scale = view.scale; + + var x0 = state.x - pstate.origin.x - tr.x * scale; + var y0 = state.y - pstate.origin.y - tr.y * scale; + var right = state.x + state.width; + var bottom = state.y + state.height; + + var dx = state.width - geo.width * scale + x0 - geo.x * scale; + var dy = state.height - geo.height * scale + y0 - geo.y * scale; + + var fx = 1 - geo.width * scale / state.width; + var fy = 1 - geo.height * scale / state.height; + + model.beginUpdate(); + try + { + for (var i = 0; i < cells.length; i++) + { + if (cells[i] != cell && + this.isCellShiftable(cells[i])) + { + this.shiftCell(cells[i], dx, dy, x0, y0, right, bottom, fx, fy, + this.isExtendParents() && + graph.isExtendParent(cells[i])); + } + } + } + finally + { + model.endUpdate(); + } + } + } +}; + +/** + * Function: shiftCell + * + * Called from <moveCellsIntoParent> to invoke the <move> hook in the + * automatic layout of each modified cell's parent. The event is used to + * define the x- and y-coordinates passed to the move function. + * + * Parameters: + * + * cell - Array of <mxCells> that have been moved. + * evt - Mouse event that represents the mousedown. + */ +mxSpaceManager.prototype.shiftCell = function(cell, dx, dy, Ox0, y0, right, + bottom, fx, fy, extendParent) +{ + var graph = this.getGraph(); + var state = graph.getView().getState(cell); + + if (state != null) + { + var model = graph.getModel(); + var geo = model.getGeometry(cell); + + if (geo != null) + { + model.beginUpdate(); + try + { + if (this.isShiftRightwards()) + { + if (state.x >= right) + { + geo = geo.clone(); + geo.translate(-dx, 0); + } + else + { + var tmpDx = Math.max(0, state.x - x0); + geo = geo.clone(); + geo.translate(-fx * tmpDx, 0); + } + } + + if (this.isShiftDownwards()) + { + if (state.y >= bottom) + { + geo = geo.clone(); + geo.translate(0, -dy); + } + else + { + var tmpDy = Math.max(0, state.y - y0); + geo = geo.clone(); + geo.translate(0, -fy * tmpDy); + } + } + + if (geo != model.getGeometry(cell)) + { + model.setGeometry(cell, geo); + + // Parent size might need to be updated if this + // is seen as part of the resize + if (extendParent) + { + graph.extendParent(cell); + } + } + } + finally + { + model.endUpdate(); + } + } + } +}; + +/** + * Function: getCellsToShift + * + * Returns the cells to shift after a resize of the + * specified <mxCellState>. + */ +mxSpaceManager.prototype.getCellsToShift = function(state) +{ + var graph = this.getGraph(); + var parent = graph.getModel().getParent(state.cell); + var down = this.isShiftDownwards(); + var right = this.isShiftRightwards(); + + return graph.getCellsBeyond(state.x + ((down) ? 0 : state.width), + state.y + ((down && right) ? 0 : state.height), parent, right, down); +}; + +/** + * Function: destroy + * + * Removes all handlers from the <graph> and deletes the reference to it. + */ +mxSpaceManager.prototype.destroy = function() +{ + this.setGraph(null); +}; diff --git a/src/js/view/mxStyleRegistry.js b/src/js/view/mxStyleRegistry.js new file mode 100644 index 0000000..6ad878d --- /dev/null +++ b/src/js/view/mxStyleRegistry.js @@ -0,0 +1,70 @@ +/** + * $Id: mxStyleRegistry.js,v 1.10 2011-04-27 10:15:39 gaudenz Exp $ + * Copyright (c) 2006-2010, JGraph Ltd + */ +var mxStyleRegistry = +{ + /** + * Class: mxStyleRegistry + * + * Singleton class that acts as a global converter from string to object values + * in a style. This is currently only used to perimeters and edge styles. + * + * Variable: values + * + * Maps from strings to objects. + */ + values: [], + + /** + * Function: putValue + * + * Puts the given object into the registry under the given name. + */ + putValue: function(name, obj) + { + mxStyleRegistry.values[name] = obj; + }, + + /** + * Function: getValue + * + * Returns the value associated with the given name. + */ + getValue: function(name) + { + return mxStyleRegistry.values[name]; + }, + + /** + * Function: getName + * + * Returns the name for the given value. + */ + getName: function(value) + { + for (var key in mxStyleRegistry.values) + { + if (mxStyleRegistry.values[key] == value) + { + return key; + } + } + + return null; + } + +}; + +mxStyleRegistry.putValue(mxConstants.EDGESTYLE_ELBOW, mxEdgeStyle.ElbowConnector); +mxStyleRegistry.putValue(mxConstants.EDGESTYLE_ENTITY_RELATION, mxEdgeStyle.EntityRelation); +mxStyleRegistry.putValue(mxConstants.EDGESTYLE_LOOP, mxEdgeStyle.Loop); +mxStyleRegistry.putValue(mxConstants.EDGESTYLE_SIDETOSIDE, mxEdgeStyle.SideToSide); +mxStyleRegistry.putValue(mxConstants.EDGESTYLE_TOPTOBOTTOM, mxEdgeStyle.TopToBottom); +mxStyleRegistry.putValue(mxConstants.EDGESTYLE_ORTHOGONAL, mxEdgeStyle.OrthConnector); +mxStyleRegistry.putValue(mxConstants.EDGESTYLE_SEGMENT, mxEdgeStyle.SegmentConnector); + +mxStyleRegistry.putValue(mxConstants.PERIMETER_ELLIPSE, mxPerimeter.EllipsePerimeter); +mxStyleRegistry.putValue(mxConstants.PERIMETER_RECTANGLE, mxPerimeter.RectanglePerimeter); +mxStyleRegistry.putValue(mxConstants.PERIMETER_RHOMBUS, mxPerimeter.RhombusPerimeter); +mxStyleRegistry.putValue(mxConstants.PERIMETER_TRIANGLE, mxPerimeter.TrianglePerimeter); diff --git a/src/js/view/mxStylesheet.js b/src/js/view/mxStylesheet.js new file mode 100644 index 0000000..82a520e --- /dev/null +++ b/src/js/view/mxStylesheet.js @@ -0,0 +1,266 @@ +/** + * $Id: mxStylesheet.js,v 1.35 2010-03-26 10:24:58 gaudenz Exp $ + * Copyright (c) 2006-2010, JGraph Ltd + */ +/** + * Class: mxStylesheet + * + * Defines the appearance of the cells in a graph. See <putCellStyle> for an + * example of creating a new cell style. It is recommended to use objects, not + * arrays for holding cell styles. Existing styles can be cloned using + * <mxUtils.clone> and turned into a string for debugging using + * <mxUtils.toString>. + * + * Default Styles: + * + * The stylesheet contains two built-in styles, which are used if no style is + * defined for a cell: + * + * defaultVertex - Default style for vertices + * defaultEdge - Default style for edges + * + * Example: + * + * (code) + * var vertexStyle = stylesheet.getDefaultVertexStyle(); + * vertexStyle[mxConstants.ROUNDED] = true; + * var edgeStyle = stylesheet.getDefaultEdgeStyle(); + * edgeStyle[mxConstants.STYLE_EDGE] = mxEdgeStyle.EntityRelation; + * (end) + * + * Modifies the built-in default styles. + * + * To avoid the default style for a cell, add a leading semicolon + * to the style definition, eg. + * + * (code) + * ;shadow=1 + * (end) + * + * Removing keys: + * + * For removing a key in a cell style of the form [stylename;|key=value;] the + * special value none can be used, eg. highlight;fillColor=none + * + * See also the helper methods in mxUtils to modify strings of this format, + * namely <mxUtils.setStyle>, <mxUtils.indexOfStylename>, + * <mxUtils.addStylename>, <mxUtils.removeStylename>, + * <mxUtils.removeAllStylenames> and <mxUtils.setStyleFlag>. + * + * Constructor: mxStylesheet + * + * Constructs a new stylesheet and assigns default styles. + */ +function mxStylesheet() +{ + this.styles = new Object(); + + this.putDefaultVertexStyle(this.createDefaultVertexStyle()); + this.putDefaultEdgeStyle(this.createDefaultEdgeStyle()); +}; + +/** + * Function: styles + * + * Maps from names to cell styles. Each cell style is a map of key, + * value pairs. + */ +mxStylesheet.prototype.styles; + +/** + * Function: createDefaultVertexStyle + * + * Creates and returns the default vertex style. + */ +mxStylesheet.prototype.createDefaultVertexStyle = function() +{ + var style = new Object(); + + style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_RECTANGLE; + style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter; + style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE; + style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER; + style[mxConstants.STYLE_FILLCOLOR] = '#C3D9FF'; + style[mxConstants.STYLE_STROKECOLOR] = '#6482B9'; + style[mxConstants.STYLE_FONTCOLOR] = '#774400'; + + return style; +}; + +/** + * Function: createDefaultEdgeStyle + * + * Creates and returns the default edge style. + */ +mxStylesheet.prototype.createDefaultEdgeStyle = function() +{ + var style = new Object(); + + style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_CONNECTOR; + style[mxConstants.STYLE_ENDARROW] = mxConstants.ARROW_CLASSIC; + style[mxConstants.STYLE_VERTICAL_ALIGN] = mxConstants.ALIGN_MIDDLE; + style[mxConstants.STYLE_ALIGN] = mxConstants.ALIGN_CENTER; + style[mxConstants.STYLE_STROKECOLOR] = '#6482B9'; + style[mxConstants.STYLE_FONTCOLOR] = '#446299'; + + return style; +}; + +/** + * Function: putDefaultVertexStyle + * + * Sets the default style for vertices using defaultVertex as the + * stylename. + * + * Parameters: + * style - Key, value pairs that define the style. + */ +mxStylesheet.prototype.putDefaultVertexStyle = function(style) +{ + this.putCellStyle('defaultVertex', style); +}; + +/** + * Function: putDefaultEdgeStyle + * + * Sets the default style for edges using defaultEdge as the stylename. + */ +mxStylesheet.prototype.putDefaultEdgeStyle = function(style) +{ + this.putCellStyle('defaultEdge', style); +}; + +/** + * Function: getDefaultVertexStyle + * + * Returns the default style for vertices. + */ +mxStylesheet.prototype.getDefaultVertexStyle = function() +{ + return this.styles['defaultVertex']; +}; + +/** + * Function: getDefaultEdgeStyle + * + * Sets the default style for edges. + */ +mxStylesheet.prototype.getDefaultEdgeStyle = function() +{ + return this.styles['defaultEdge']; +}; + +/** + * Function: putCellStyle + * + * Stores the given map of key, value pairs under the given name in + * <styles>. + * + * Example: + * + * The following example adds a new style called 'rounded' into an + * existing stylesheet: + * + * (code) + * var style = new Object(); + * style[mxConstants.STYLE_SHAPE] = mxConstants.SHAPE_RECTANGLE; + * style[mxConstants.STYLE_PERIMETER] = mxPerimeter.RectanglePerimeter; + * style[mxConstants.STYLE_ROUNDED] = true; + * graph.getStylesheet().putCellStyle('rounded', style); + * (end) + * + * In the above example, the new style is an object. The possible keys of + * the object are all the constants in <mxConstants> that start with STYLE + * and the values are either JavaScript objects, such as + * <mxPerimeter.RightAngleRectanglePerimeter> (which is in fact a function) + * or expressions, such as true. Note that not all keys will be + * interpreted by all shapes (eg. the line shape ignores the fill color). + * The final call to this method associates the style with a name in the + * stylesheet. The style is used in a cell with the following code: + * + * (code) + * model.setStyle(cell, 'rounded'); + * (end) + * + * Parameters: + * + * name - Name for the style to be stored. + * style - Key, value pairs that define the style. + */ +mxStylesheet.prototype.putCellStyle = function(name, style) +{ + this.styles[name] = style; +}; + +/** + * Function: getCellStyle + * + * Returns the cell style for the specified stylename or the given + * defaultStyle if no style can be found for the given stylename. + * + * Parameters: + * + * name - String of the form [(stylename|key=value);] that represents the + * style. + * defaultStyle - Default style to be returned if no style can be found. + */ +mxStylesheet.prototype.getCellStyle = function(name, defaultStyle) +{ + var style = defaultStyle; + + if (name != null && name.length > 0) + { + var pairs = name.split(';'); + + if (style != null && + name.charAt(0) != ';') + { + style = mxUtils.clone(style); + } + else + { + style = new Object(); + } + + // Parses each key, value pair into the existing style + for (var i = 0; i < pairs.length; i++) + { + var tmp = pairs[i]; + var pos = tmp.indexOf('='); + + if (pos >= 0) + { + var key = tmp.substring(0, pos); + var value = tmp.substring(pos + 1); + + if (value == mxConstants.NONE) + { + delete style[key]; + } + else if (mxUtils.isNumeric(value)) + { + style[key] = parseFloat(value); + } + else + { + style[key] = value; + } + } + else + { + // Merges the entries from a named style + var tmpStyle = this.styles[tmp]; + + if (tmpStyle != null) + { + for (var key in tmpStyle) + { + style[key] = tmpStyle[key]; + } + } + } + } + } + + return style; +}; diff --git a/src/js/view/mxSwimlaneManager.js b/src/js/view/mxSwimlaneManager.js new file mode 100644 index 0000000..fe40613 --- /dev/null +++ b/src/js/view/mxSwimlaneManager.js @@ -0,0 +1,449 @@ +/** + * $Id: mxSwimlaneManager.js,v 1.17 2011-01-14 15:21:10 gaudenz Exp $ + * Copyright (c) 2006-2010, JGraph Ltd + */ +/** + * Class: mxSwimlaneManager + * + * Manager for swimlanes and nested swimlanes that sets the size of newly added + * swimlanes to that of their siblings, and propagates changes to the size of a + * swimlane to its siblings, if <siblings> is true, and its ancestors, if + * <bubbling> is true. + * + * Constructor: mxSwimlaneManager + * + * Constructs a new swimlane manager for the given graph. + * + * Arguments: + * + * graph - Reference to the enclosing graph. + */ +function mxSwimlaneManager(graph, horizontal, addEnabled, resizeEnabled) +{ + this.horizontal = (horizontal != null) ? horizontal : true; + this.addEnabled = (addEnabled != null) ? addEnabled : true; + this.resizeEnabled = (resizeEnabled != null) ? resizeEnabled : true; + + this.addHandler = mxUtils.bind(this, function(sender, evt) + { + if (this.isEnabled() && this.isAddEnabled()) + { + this.cellsAdded(evt.getProperty('cells')); + } + }); + + this.resizeHandler = mxUtils.bind(this, function(sender, evt) + { + if (this.isEnabled() && this.isResizeEnabled()) + { + this.cellsResized(evt.getProperty('cells')); + } + }); + + this.setGraph(graph); +}; + +/** + * Extends mxEventSource. + */ +mxSwimlaneManager.prototype = new mxEventSource(); +mxSwimlaneManager.prototype.constructor = mxSwimlaneManager; + +/** + * Variable: graph + * + * Reference to the enclosing <mxGraph>. + */ +mxSwimlaneManager.prototype.graph = null; + +/** + * Variable: enabled + * + * Specifies if event handling is enabled. Default is true. + */ +mxSwimlaneManager.prototype.enabled = true; + +/** + * Variable: horizontal + * + * Specifies the orientation of the swimlanes. Default is true. + */ +mxSwimlaneManager.prototype.horizontal = true; + +/** + * Variable: addEnabled + * + * Specifies if newly added cells should be resized to match the size of their + * existing siblings. Default is true. + */ +mxSwimlaneManager.prototype.addEnabled = true; + +/** + * Variable: resizeEnabled + * + * Specifies if resizing of swimlanes should be handled. Default is true. + */ +mxSwimlaneManager.prototype.resizeEnabled = true; + +/** + * Variable: moveHandler + * + * Holds the function that handles the move event. + */ +mxSwimlaneManager.prototype.addHandler = null; + +/** + * Variable: moveHandler + * + * Holds the function that handles the move event. + */ +mxSwimlaneManager.prototype.resizeHandler = null; + +/** + * Function: isEnabled + * + * Returns true if events are handled. This implementation + * returns <enabled>. + */ +mxSwimlaneManager.prototype.isEnabled = function() +{ + return this.enabled; +}; + +/** + * Function: setEnabled + * + * Enables or disables event handling. This implementation + * updates <enabled>. + * + * Parameters: + * + * enabled - Boolean that specifies the new enabled state. + */ +mxSwimlaneManager.prototype.setEnabled = function(value) +{ + this.enabled = value; +}; + +/** + * Function: isHorizontal + * + * Returns <horizontal>. + */ +mxSwimlaneManager.prototype.isHorizontal = function() +{ + return this.horizontal; +}; + +/** + * Function: setHorizontal + * + * Sets <horizontal>. + */ +mxSwimlaneManager.prototype.setHorizontal = function(value) +{ + this.horizontal = value; +}; + +/** + * Function: isAddEnabled + * + * Returns <addEnabled>. + */ +mxSwimlaneManager.prototype.isAddEnabled = function() +{ + return this.addEnabled; +}; + +/** + * Function: setAddEnabled + * + * Sets <addEnabled>. + */ +mxSwimlaneManager.prototype.setAddEnabled = function(value) +{ + this.addEnabled = value; +}; + +/** + * Function: isResizeEnabled + * + * Returns <resizeEnabled>. + */ +mxSwimlaneManager.prototype.isResizeEnabled = function() +{ + return this.resizeEnabled; +}; + +/** + * Function: setResizeEnabled + * + * Sets <resizeEnabled>. + */ +mxSwimlaneManager.prototype.setResizeEnabled = function(value) +{ + this.resizeEnabled = value; +}; + +/** + * Function: getGraph + * + * Returns the graph that this manager operates on. + */ +mxSwimlaneManager.prototype.getGraph = function() +{ + return this.graph; +}; + +/** + * Function: setGraph + * + * Sets the graph that the manager operates on. + */ +mxSwimlaneManager.prototype.setGraph = function(graph) +{ + if (this.graph != null) + { + this.graph.removeListener(this.addHandler); + this.graph.removeListener(this.resizeHandler); + } + + this.graph = graph; + + if (this.graph != null) + { + this.graph.addListener(mxEvent.ADD_CELLS, this.addHandler); + this.graph.addListener(mxEvent.CELLS_RESIZED, this.resizeHandler); + } +}; + +/** + * Function: isSwimlaneIgnored + * + * Returns true if the given swimlane should be ignored. + */ +mxSwimlaneManager.prototype.isSwimlaneIgnored = function(swimlane) +{ + return !this.getGraph().isSwimlane(swimlane); +}; + +/** + * Function: isCellHorizontal + * + * Returns true if the given cell is horizontal. If the given cell is not a + * swimlane, then the global orientation is returned. + */ +mxSwimlaneManager.prototype.isCellHorizontal = function(cell) +{ + if (this.graph.isSwimlane(cell)) + { + var state = this.graph.view.getState(cell); + var style = (state != null) ? state.style : this.graph.getCellStyle(cell); + + return mxUtils.getValue(style, mxConstants.STYLE_HORIZONTAL, 1) == 1; + } + + return !this.isHorizontal(); +}; + +/** + * Function: cellsAdded + * + * Called if any cells have been added. + * + * Parameters: + * + * cell - Array of <mxCells> that have been added. + */ +mxSwimlaneManager.prototype.cellsAdded = function(cells) +{ + if (cells != null) + { + var model = this.getGraph().getModel(); + + model.beginUpdate(); + try + { + for (var i = 0; i < cells.length; i++) + { + if (!this.isSwimlaneIgnored(cells[i])) + { + this.swimlaneAdded(cells[i]); + } + } + } + finally + { + model.endUpdate(); + } + } +}; + +/** + * Function: swimlaneAdded + * + * Updates the size of the given swimlane to match that of any existing + * siblings swimlanes. + * + * Parameters: + * + * swimlane - <mxCell> that represents the new swimlane. + */ +mxSwimlaneManager.prototype.swimlaneAdded = function(swimlane) +{ + var model = this.getGraph().getModel(); + var parent = model.getParent(swimlane); + var childCount = model.getChildCount(parent); + var geo = null; + + // Finds the first valid sibling swimlane as reference + for (var i = 0; i < childCount; i++) + { + var child = model.getChildAt(parent, i); + + if (child != swimlane && !this.isSwimlaneIgnored(child)) + { + geo = model.getGeometry(child); + + if (geo != null) + { + break; + } + } + } + + // Applies the size of the refernece to the newly added swimlane + if (geo != null) + { + this.resizeSwimlane(swimlane, geo.width, geo.height); + } +}; + +/** + * Function: cellsResized + * + * Called if any cells have been resizes. Calls <swimlaneResized> for all + * swimlanes where <isSwimlaneIgnored> returns false. + * + * Parameters: + * + * cells - Array of <mxCells> whose size was changed. + */ +mxSwimlaneManager.prototype.cellsResized = function(cells) +{ + if (cells != null) + { + var model = this.getGraph().getModel(); + + model.beginUpdate(); + try + { + // Finds the top-level swimlanes and adds offsets + for (var i = 0; i < cells.length; i++) + { + if (!this.isSwimlaneIgnored(cells[i])) + { + var geo = model.getGeometry(cells[i]); + + if (geo != null) + { + var size = new mxRectangle(0, 0, geo.width, geo.height); + var top = cells[i]; + var current = top; + + while (current != null) + { + top = current; + current = model.getParent(current); + var tmp = (this.graph.isSwimlane(current)) ? + this.graph.getStartSize(current) : + new mxRectangle(); + size.width += tmp.width; + size.height += tmp.height; + } + + this.resizeSwimlane(top, size.width, size.height); + } + } + } + } + finally + { + model.endUpdate(); + } + } +}; + +/** + * Function: resizeSwimlane + * + * Called from <cellsResized> for all swimlanes that are not ignored to update + * the size of the siblings and the size of the parent swimlanes, recursively, + * if <bubbling> is true. + * + * Parameters: + * + * swimlane - <mxCell> whose size has changed. + */ +mxSwimlaneManager.prototype.resizeSwimlane = function(swimlane, w, h) +{ + var model = this.getGraph().getModel(); + + model.beginUpdate(); + try + { + if (!this.isSwimlaneIgnored(swimlane)) + { + var geo = model.getGeometry(swimlane); + + if (geo != null) + { + var horizontal = this.isCellHorizontal(swimlane); + + if ((horizontal && geo.height != h) || (!horizontal && geo.width != w)) + { + geo = geo.clone(); + + if (horizontal) + { + geo.height = h; + } + else + { + geo.width = w; + } + + model.setGeometry(swimlane, geo); + } + } + } + + var tmp = (this.graph.isSwimlane(swimlane)) ? + this.graph.getStartSize(swimlane) : + new mxRectangle(); + w -= tmp.width; + h -= tmp.height; + + var childCount = model.getChildCount(swimlane); + + for (var i = 0; i < childCount; i++) + { + var child = model.getChildAt(swimlane, i); + this.resizeSwimlane(child, w, h); + } + } + finally + { + model.endUpdate(); + } +}; + +/** + * Function: destroy + * + * Removes all handlers from the <graph> and deletes the reference to it. + */ +mxSwimlaneManager.prototype.destroy = function() +{ + this.setGraph(null); +}; diff --git a/src/js/view/mxTemporaryCellStates.js b/src/js/view/mxTemporaryCellStates.js new file mode 100644 index 0000000..ce8232c --- /dev/null +++ b/src/js/view/mxTemporaryCellStates.js @@ -0,0 +1,105 @@ +/** + * $Id: mxTemporaryCellStates.js,v 1.10 2010-04-20 14:43:12 gaudenz Exp $ + * Copyright (c) 2006-2010, JGraph Ltd + */ +/** + * Class: mxTemporaryCellStates + * + * Extends <mxPoint> to implement a 2-dimensional rectangle with double + * precision coordinates. + * + * Constructor: mxRectangle + * + * Constructs a new rectangle for the optional parameters. If no parameters + * are given then the respective default values are used. + */ +function mxTemporaryCellStates(view, scale, cells) +{ + this.view = view; + scale = (scale != null) ? scale : 1; + + // Stores the previous state + this.oldBounds = view.getGraphBounds(); + this.oldStates = view.getStates(); + this.oldScale = view.getScale(); + + // Creates space for new states + view.setStates(new mxDictionary()); + view.setScale(scale); + + if (cells != null) + { + // Creates virtual parent state for validation + var state = view.createState(new mxCell()); + + // Validates the vertices and edges without adding them to + // the model so that the original cells are not modified + for (var i = 0; i < cells.length; i++) + { + view.validateBounds(state, cells[i]); + } + + var bbox = null; + + for (var i = 0; i < cells.length; i++) + { + var bounds = view.validatePoints(state, cells[i]); + + if (bbox == null) + { + bbox = bounds; + } + else + { + bbox.add(bounds); + } + } + + if (bbox == null) + { + bbox = new mxRectangle(); + } + + view.setGraphBounds(bbox); + } +}; + +/** + * Variable: view + * + * Holds the width of the rectangle. Default is 0. + */ +mxTemporaryCellStates.prototype.view = null; + +/** + * Variable: oldStates + * + * Holds the height of the rectangle. Default is 0. + */ +mxTemporaryCellStates.prototype.oldStates = null; + +/** + * Variable: oldBounds + * + * Holds the height of the rectangle. Default is 0. + */ +mxTemporaryCellStates.prototype.oldBounds = null; + +/** + * Variable: oldScale + * + * Holds the height of the rectangle. Default is 0. + */ +mxTemporaryCellStates.prototype.oldScale = null; + +/** + * Function: destroy + * + * Returns the top, left corner as a new <mxPoint>. + */ +mxTemporaryCellStates.prototype.destroy = function() +{ + this.view.setScale(this.oldScale); + this.view.setStates(this.oldStates); + this.view.setGraphBounds(this.oldBounds); +}; |