/**

* $Id: mxGraphView.js,v 1.13 2013/02/12 10:20:41 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: optimizeVmlReflows

*

* Specifies if the <canvas> should be hidden while rendering in IE8 standards

* mode and quirks mode. This will significantly improve rendering performance.

* Default is true.

*/

mxGraphView.prototype.optimizeVmlReflows = 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;

// Improves IE rendering speed by minimizing reflows

var prevDisplay = null;

if (this.optimizeVmlReflows && this.canvas != null && this.textDiv == null &&

(document.documentMode == 8 || mxClient.IS_QUIRKS))

{

prevDisplay = this.canvas.style.display;

this.canvas.style.display = 'none';

// Creates temporary DIV used for text measuring in mxText.updateBoundingBox

var div = document.createElement('div');

div.style.position = 'absolute';

div.style.whiteSpace = 'nowrap';

div.style.visibility = 'hidden';

div.style.display = (mxClient.IS_QUIRKS) ? 'inline' : 'inline-block';

div.style.zoom = '1';

document.body.appendChild(div);

this.textDiv = div;

}

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();

if (prevDisplay != null)

{

this.canvas.style.display = prevDisplay;

document.body.removeChild(this.textDiv);

this.textDiv = null;

}

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

})

);

// Adds basic listeners for graph event dispatching outside of the

// container and finishing the handling of a single gesture

mxEvent.addGestureListeners(this.backgroundPageShape.node,

mxUtils.bind(this, function(evt)

{

this.graph.fireMouseEvent(mxEvent.MOUSE_DOWN, new mxMouseEvent(evt));

}),

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

}

}),

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

{

// Rotates relative child cells

if (geo.relative)

{

var alpha = mxUtils.toRadians(parentState.style[mxConstants.STYLE_ROTATION] || '0');

if (alpha != 0)

{

var cos = Math.cos(alpha);

var sin = Math.sin(alpha);

// Uses translate or parent origin as offset

var ct = new mxPoint(state.getCenterX(), state.getCenterY());

var cx = new mxPoint(parentState.getCenterX(), parentState.getCenterY());

var pt = mxUtils.getRotatedPoint(ct, cos, sin, cx);

state.x = pt.x - state.width / 2;

state.y = pt.y - state.height / 2;

}

}

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

}

}

}

}