summaryrefslogtreecommitdiff
path: root/src/js/util/mxEffects.js
diff options
context:
space:
mode:
Diffstat (limited to 'src/js/util/mxEffects.js')
-rw-r--r--src/js/util/mxEffects.js214
1 files changed, 214 insertions, 0 deletions
diff --git a/src/js/util/mxEffects.js b/src/js/util/mxEffects.js
new file mode 100644
index 0000000..89d6a71
--- /dev/null
+++ b/src/js/util/mxEffects.js
@@ -0,0 +1,214 @@
+/**
+ * $Id: mxEffects.js,v 1.6 2012-01-04 10:01:16 gaudenz Exp $
+ * Copyright (c) 2006-2010, JGraph Ltd
+ */
+var mxEffects =
+{
+
+ /**
+ * Class: mxEffects
+ *
+ * Provides animation effects.
+ */
+
+ /**
+ * Function: animateChanges
+ *
+ * Asynchronous animated move operation. See also: <mxMorphing>.
+ *
+ * Example:
+ *
+ * (code)
+ * graph.model.addListener(mxEvent.CHANGE, function(sender, evt)
+ * {
+ * var changes = evt.getProperty('edit').changes;
+ *
+ * if (changes.length < 10)
+ * {
+ * mxEffects.animateChanges(graph, changes);
+ * }
+ * });
+ * (end)
+ *
+ * Parameters:
+ *
+ * graph - <mxGraph> that received the changes.
+ * changes - Array of changes to be animated.
+ * done - Optional function argument that is invoked after the
+ * last step of the animation.
+ */
+ animateChanges: function(graph, changes, done)
+ {
+ var maxStep = 10;
+ var step = 0;
+
+ var animate = function()
+ {
+ var isRequired = false;
+
+ for (var i = 0; i < changes.length; i++)
+ {
+ var change = changes[i];
+
+ if (change instanceof mxGeometryChange ||
+ change instanceof mxTerminalChange ||
+ change instanceof mxValueChange ||
+ change instanceof mxChildChange ||
+ change instanceof mxStyleChange)
+ {
+ var state = graph.getView().getState(change.cell || change.child, false);
+
+ if (state != null)
+ {
+ isRequired = true;
+
+ if (change.constructor != mxGeometryChange || graph.model.isEdge(change.cell))
+ {
+ mxUtils.setOpacity(state.shape.node, 100 * step / maxStep);
+ }
+ else
+ {
+ var scale = graph.getView().scale;
+
+ var dx = (change.geometry.x - change.previous.x) * scale;
+ var dy = (change.geometry.y - change.previous.y) * scale;
+
+ var sx = (change.geometry.width - change.previous.width) * scale;
+ var sy = (change.geometry.height - change.previous.height) * scale;
+
+ if (step == 0)
+ {
+ state.x -= dx;
+ state.y -= dy;
+ state.width -= sx;
+ state.height -= sy;
+ }
+ else
+ {
+ state.x += dx / maxStep;
+ state.y += dy / maxStep;
+ state.width += sx / maxStep;
+ state.height += sy / maxStep;
+ }
+
+ graph.cellRenderer.redraw(state);
+
+ // Fades all connected edges and children
+ mxEffects.cascadeOpacity(graph, change.cell, 100 * step / maxStep);
+ }
+ }
+ }
+ }
+
+ // Workaround to force a repaint in AppleWebKit
+ mxUtils.repaintGraph(graph, new mxPoint(1, 1));
+
+ if (step < maxStep && isRequired)
+ {
+ step++;
+ window.setTimeout(animate, delay);
+ }
+ else if (done != null)
+ {
+ done();
+ }
+ };
+
+ var delay = 30;
+ animate();
+ },
+
+ /**
+ * Function: cascadeOpacity
+ *
+ * Sets the opacity on the given cell and its descendants.
+ *
+ * Parameters:
+ *
+ * graph - <mxGraph> that contains the cells.
+ * cell - <mxCell> to set the opacity for.
+ * opacity - New value for the opacity in %.
+ */
+ cascadeOpacity: function(graph, cell, opacity)
+ {
+ // Fades all children
+ var childCount = graph.model.getChildCount(cell);
+
+ for (var i=0; i<childCount; i++)
+ {
+ var child = graph.model.getChildAt(cell, i);
+ var childState = graph.getView().getState(child);
+
+ if (childState != null)
+ {
+ mxUtils.setOpacity(childState.shape.node, opacity);
+ mxEffects.cascadeOpacity(graph, child, opacity);
+ }
+ }
+
+ // Fades all connected edges
+ var edges = graph.model.getEdges(cell);
+
+ if (edges != null)
+ {
+ for (var i=0; i<edges.length; i++)
+ {
+ var edgeState = graph.getView().getState(edges[i]);
+
+ if (edgeState != null)
+ {
+ mxUtils.setOpacity(edgeState.shape.node, opacity);
+ }
+ }
+ }
+ },
+
+ /**
+ * Function: fadeOut
+ *
+ * Asynchronous fade-out operation.
+ */
+ fadeOut: function(node, from, remove, step, delay, isEnabled)
+ {
+ step = step || 40;
+ delay = delay || 30;
+
+ var opacity = from || 100;
+
+ mxUtils.setOpacity(node, opacity);
+
+ if (isEnabled || isEnabled == null)
+ {
+ var f = function()
+ {
+ opacity = Math.max(opacity-step, 0);
+ mxUtils.setOpacity(node, opacity);
+
+ if (opacity > 0)
+ {
+ window.setTimeout(f, delay);
+ }
+ else
+ {
+ node.style.visibility = 'hidden';
+
+ if (remove && node.parentNode)
+ {
+ node.parentNode.removeChild(node);
+ }
+ }
+ };
+ window.setTimeout(f, delay);
+ }
+ else
+ {
+ node.style.visibility = 'hidden';
+
+ if (remove && node.parentNode)
+ {
+ node.parentNode.removeChild(node);
+ }
+ }
+ }
+
+};