mxMorphing.js 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249
  1. /**
  2. * Copyright (c) 2006-2015, JGraph Ltd
  3. * Copyright (c) 2006-2015, Gaudenz Alder
  4. */
  5. /**
  6. *
  7. * Class: mxMorphing
  8. *
  9. * Implements animation for morphing cells. Here is an example of
  10. * using this class for animating the result of a layout algorithm:
  11. *
  12. * (code)
  13. * graph.getModel().beginUpdate();
  14. * try
  15. * {
  16. * var circleLayout = new mxCircleLayout(graph);
  17. * circleLayout.execute(graph.getDefaultParent());
  18. * }
  19. * finally
  20. * {
  21. * var morph = new mxMorphing(graph);
  22. * morph.addListener(mxEvent.DONE, function()
  23. * {
  24. * graph.getModel().endUpdate();
  25. * });
  26. *
  27. * morph.startAnimation();
  28. * }
  29. * (end)
  30. *
  31. * Constructor: mxMorphing
  32. *
  33. * Constructs an animation.
  34. *
  35. * Parameters:
  36. *
  37. * graph - Reference to the enclosing <mxGraph>.
  38. * steps - Optional number of steps in the morphing animation. Default is 6.
  39. * ease - Optional easing constant for the animation. Default is 1.5.
  40. * delay - Optional delay between the animation steps. Passed to <mxAnimation>.
  41. */
  42. function mxMorphing(graph, steps, ease, delay)
  43. {
  44. mxAnimation.call(this, delay);
  45. this.graph = graph;
  46. this.steps = (steps != null) ? steps : 6;
  47. this.ease = (ease != null) ? ease : 1.5;
  48. };
  49. /**
  50. * Extends mxEventSource.
  51. */
  52. mxMorphing.prototype = new mxAnimation();
  53. mxMorphing.prototype.constructor = mxMorphing;
  54. /**
  55. * Variable: graph
  56. *
  57. * Specifies the delay between the animation steps. Defaul is 30ms.
  58. */
  59. mxMorphing.prototype.graph = null;
  60. /**
  61. * Variable: steps
  62. *
  63. * Specifies the maximum number of steps for the morphing.
  64. */
  65. mxMorphing.prototype.steps = null;
  66. /**
  67. * Variable: step
  68. *
  69. * Contains the current step.
  70. */
  71. mxMorphing.prototype.step = 0;
  72. /**
  73. * Variable: ease
  74. *
  75. * Ease-off for movement towards the given vector. Larger values are
  76. * slower and smoother. Default is 4.
  77. */
  78. mxMorphing.prototype.ease = null;
  79. /**
  80. * Variable: cells
  81. *
  82. * Optional array of cells to be animated. If this is not specified
  83. * then all cells are checked and animated if they have been moved
  84. * in the current transaction.
  85. */
  86. mxMorphing.prototype.cells = null;
  87. /**
  88. * Function: updateAnimation
  89. *
  90. * Animation step.
  91. */
  92. mxMorphing.prototype.updateAnimation = function()
  93. {
  94. mxAnimation.prototype.updateAnimation.apply(this, arguments);
  95. var move = new mxCellStatePreview(this.graph);
  96. if (this.cells != null)
  97. {
  98. // Animates the given cells individually without recursion
  99. for (var i = 0; i < this.cells.length; i++)
  100. {
  101. this.animateCell(this.cells[i], move, false);
  102. }
  103. }
  104. else
  105. {
  106. // Animates all changed cells by using recursion to find
  107. // the changed cells but not for the animation itself
  108. this.animateCell(this.graph.getModel().getRoot(), move, true);
  109. }
  110. this.show(move);
  111. if (move.isEmpty() || this.step++ >= this.steps)
  112. {
  113. this.stopAnimation();
  114. }
  115. };
  116. /**
  117. * Function: show
  118. *
  119. * Shows the changes in the given <mxCellStatePreview>.
  120. */
  121. mxMorphing.prototype.show = function(move)
  122. {
  123. move.show();
  124. };
  125. /**
  126. * Function: animateCell
  127. *
  128. * Animates the given cell state using <mxCellStatePreview.moveState>.
  129. */
  130. mxMorphing.prototype.animateCell = function(cell, move, recurse)
  131. {
  132. var state = this.graph.getView().getState(cell);
  133. var delta = null;
  134. if (state != null)
  135. {
  136. // Moves the animated state from where it will be after the model
  137. // change by subtracting the given delta vector from that location
  138. delta = this.getDelta(state);
  139. if (this.graph.getModel().isVertex(cell) && (delta.x != 0 || delta.y != 0))
  140. {
  141. var translate = this.graph.view.getTranslate();
  142. var scale = this.graph.view.getScale();
  143. delta.x += translate.x * scale;
  144. delta.y += translate.y * scale;
  145. move.moveState(state, -delta.x / this.ease, -delta.y / this.ease);
  146. }
  147. }
  148. if (recurse && !this.stopRecursion(state, delta))
  149. {
  150. var childCount = this.graph.getModel().getChildCount(cell);
  151. for (var i = 0; i < childCount; i++)
  152. {
  153. this.animateCell(this.graph.getModel().getChildAt(cell, i), move, recurse);
  154. }
  155. }
  156. };
  157. /**
  158. * Function: stopRecursion
  159. *
  160. * Returns true if the animation should not recursively find more
  161. * deltas for children if the given parent state has been animated.
  162. */
  163. mxMorphing.prototype.stopRecursion = function(state, delta)
  164. {
  165. return delta != null && (delta.x != 0 || delta.y != 0);
  166. };
  167. /**
  168. * Function: getDelta
  169. *
  170. * Returns the vector between the current rendered state and the future
  171. * location of the state after the display will be updated.
  172. */
  173. mxMorphing.prototype.getDelta = function(state)
  174. {
  175. var origin = this.getOriginForCell(state.cell);
  176. var translate = this.graph.getView().getTranslate();
  177. var scale = this.graph.getView().getScale();
  178. var x = state.x / scale - translate.x;
  179. var y = state.y / scale - translate.y;
  180. return new mxPoint((origin.x - x) * scale, (origin.y - y) * scale);
  181. };
  182. /**
  183. * Function: getOriginForCell
  184. *
  185. * Returns the top, left corner of the given cell. TODO: Improve performance
  186. * by using caching inside this method as the result per cell never changes
  187. * during the lifecycle of this object.
  188. */
  189. mxMorphing.prototype.getOriginForCell = function(cell)
  190. {
  191. var result = null;
  192. if (cell != null)
  193. {
  194. var parent = this.graph.getModel().getParent(cell);
  195. var geo = this.graph.getCellGeometry(cell);
  196. result = this.getOriginForCell(parent);
  197. // TODO: Handle offsets
  198. if (geo != null)
  199. {
  200. if (geo.relative)
  201. {
  202. var pgeo = this.graph.getCellGeometry(parent);
  203. if (pgeo != null)
  204. {
  205. result.x += geo.x * pgeo.width;
  206. result.y += geo.y * pgeo.height;
  207. }
  208. }
  209. else
  210. {
  211. result.x += geo.x;
  212. result.y += geo.y;
  213. }
  214. }
  215. }
  216. if (result == null)
  217. {
  218. var t = this.graph.view.getTranslate();
  219. result = new mxPoint(-t.x, -t.y);
  220. }
  221. return result;
  222. };