<!-- saved from url=(0026)http://www.naturaldocs.org -->
<divid=Content><divclass="CClass"><divclass=CTopicid=MainTopic><h1class=CTitle><aname="mxMorphing"></a>mxMorphing</h1><divclass=CBody><p>Implements animation for morphing cells. Here is an example of using this class for animating the result of a layout algorithm:</p><blockquote><preclass="prettyprint">graph.getModel().beginUpdate();
try
{
var circleLayout = new mxCircleLayout(graph);
circleLayout.execute(graph.getDefaultParent());
}
finally
{
var morph = new mxMorphing(graph);
morph.addListener(mxEvent.DONE, function()
{
graph.getModel().endUpdate();
});
morph.startAnimation();
}</pre></blockquote><!--START_ND_SUMMARY--><divclass=Summary><divclass=STitle>Summary</div><divclass=SBorder><tableborder=0cellspacing=0cellpadding=0class=STable><trclass="SMain"><tdclass=SEntry><ahref="#mxMorphing">mxMorphing</a></td><tdclass=SDescription>Implements animation for morphing cells. </td></tr><trclass="SGroup SIndent1"><tdclass=SEntry><ahref="#mxMorphing.Functions">Functions</a></td><tdclass=SDescription></td></tr><trclass="SFunction SIndent2 SMarked"><tdclass=SEntry><ahref="#mxMorphing.mxMorphing"id=link1onMouseOver="ShowTip(event, 'tt1', 'link1')"onMouseOut="HideTip('tt1')">mxMorphing</a></td><tdclass=SDescription>Constructs an animation.</td></tr><trclass="SGroup SIndent1"><tdclass=SEntry><ahref="#mxMorphing.Variables">Variables</a></td><tdclass=SDescription></td></tr><trclass="SVariable SIndent2 SMarked"><tdclass=SEntry><ahref="#mxMorphing.graph"id=link2onMouseOver="ShowTip(event, 'tt2', 'link2')"onMouseOut="HideTip('tt2')">graph</a></td><tdclass=SDescription>Specifies the delay between the animation steps. </td></tr><trclass="SVariable SIndent2"><tdclass=SEntry><ahref="#mxMorphing.steps"id=link3onMouseOver="ShowTip(event, 'tt3', 'link3')"onMouseOut="HideTip('tt3')">steps</a></td><tdclass=SDescription>Specifies the maximum number of steps for the morphing.</td></tr><trclass="SVariable SIndent2 SMarked"><tdclass=SEntry><ahref="#mxMorphing.step"id=link4onMouseOver="ShowTip(event, 'tt4', 'link4')"onMouseOut="HideTip('tt4')">step</a></td><tdclass=SDescription>Contains the current step.</td></tr><trclass="SVariable SIndent2"><tdclass=SEntry><ahref="#mxMorphing.ease"id=link5onMouseOver="ShowTip(event, 'tt5', 'link5')"onMouseOut="HideTip('tt5')">ease</a></td><tdclass=SDescription>Ease-off for movement towards the given vector. </td></tr><trclass="SVariable SIndent2 SMarked"><tdclass=SEntry><ahref="#mxMorphing.cells"id=link6onMouseOver="ShowTip(event, 'tt6', 'link6')"onMouseOut="HideTip('tt6')">cells</a></td><tdclass=SDescription>Optional array of cells to be animated. </td></tr><trclass="SGroup SIndent1"><tdclass=SEntry><ahref="#mxMorphing.Functions">Functions</a></td><tdclass=SDescription></td></tr><trclass="SFunction SIndent2 SMarked"><tdclass=SEntry><ahref="#mxMorphing.updateAnimation"id=link7onMouseOver="ShowTip(event, 'tt7', 'link7')"onMouseOut="HideTip('tt7')">updateAnimation</a></td><tdclass=SDescription>Animation step.</td></tr><trclass="SFunction SIndent2"><tdclass=SEntry><ahref="#mxMorphing.show"id=link8onMouseOver="ShowTip(event, 'tt8', 'link8')"onMouseOut="HideTip('tt8')">show</a></td><tdclass=SDescription>Shows the changes in the given <ahref="../view/mxCellStatePreview-js.html#mxCellStatePreview"class=LClassid=link9onMouseOver="ShowTip(event, 'tt9', 'link9')"onMouseOut="HideTip('tt9')">mxCellStatePreview</a>.</td></tr><trclass="SFunction SIndent2 SMarked"><tdclass=SEntry><ahref="#mxMorphing.animateCell"id=link10onMouseOver="ShowTip(event, 'tt10', 'link10')"onMouseOut="HideTip('tt10')">animateCell</a></td><tdclass=SDescription>Animates the given cell state using <ahref="../view/mxCellStatePreview-js.html#mxCellStatePreview.moveState"class=LFunctionid=link11onMouseOver="ShowTip(event, 'tt11', 'link11')"onMouseOut="HideTip('tt11')">mxCellStatePreview.moveState</a>.</td></tr><trclass="SFunction SIndent2"><tdclass=SEntry><ahref="#mxMorphing.stopRecursion"id=link12onMouseOver="ShowTip(event, 'tt12', 'link12')"onMouseOut="HideTip('tt12')">stopRecursion</a></td><tdclass=SDescription>Returns true if the animation should not recursively find more deltas for children if the given parent state has been animated.</td></tr><trclass="SFunction SIndent2 SMarked"><tdclass=SEntry><ahref="#mxMorphing.getDelta"id=link13onMouseOver="ShowTip(event, 'tt13', 'link13')"onMouseOut="HideTip('tt13')">getDelta</a></td><tdclass=SDescription>Returns the vector between the current rendered state and the future location of the state after the display will be updated.</td></tr><trclass="SFunction SIndent2"><tdclass
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxMorphing.mxMorphing"></a>mxMorphing</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass="PBeforeParameters prettyprint "nowrap>function mxMorphing(</td><tdclass="PParameter prettyprint "nowrap>graph,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>steps,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>ease,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>delay</td><tdclass="PAfterParameters prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Constructs an animation.</p><h4class=CHeading>Parameters</h4><tableborder=0cellspacing=0cellpadding=0class=CDescriptionList><tr><tdclass=CDLEntry>graph</td><tdclass=CDLDescription>Reference to the enclosing <ahref="../view/mxGraph-js.html#mxGraph"class=LClassid=link15onMouseOver="ShowTip(event, 'tt15', 'link15')"onMouseOut="HideTip('tt15')">mxGraph</a>.</td></tr><tr><tdclass=CDLEntry>steps</td><tdclass=CDLDescription>Optional number of steps in the morphing animation. Default is 6.</td></tr><tr><tdclass=CDLEntry>ease</td><tdclass=CDLDescription>Optional easing constant for the animation. Default is 1.5.</td></tr><tr><tdclass=CDLEntry>delay</td><tdclass=CDLDescription>Optional delay between the animation steps. Passed to <ahref="mxAnimation-js.html#mxAnimation"class=LClassid=link16onMouseOver="ShowTip(event, 'tt16', 'link16')"onMouseOut="HideTip('tt16')">mxAnimation</a>.</td></tr></table></div></div></div>
<divclass="CVariable"><divclass=CTopic><h3class=CTitle><aname="mxMorphing.graph"></a>graph</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxMorphing.prototype.graph</td></tr></table></blockquote><p>Specifies the delay between the animation steps. Defaul is 30ms.</p></div></div></div>
<divclass="CVariable"><divclass=CTopic><h3class=CTitle><aname="mxMorphing.steps"></a>steps</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxMorphing.prototype.steps</td></tr></table></blockquote><p>Specifies the maximum number of steps for the morphing.</p></div></div></div>
<divclass="CVariable"><divclass=CTopic><h3class=CTitle><aname="mxMorphing.step"></a>step</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxMorphing.prototype.step</td></tr></table></blockquote><p>Contains the current step.</p></div></div></div>
<divclass="CVariable"><divclass=CTopic><h3class=CTitle><aname="mxMorphing.ease"></a>ease</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxMorphing.prototype.ease</td></tr></table></blockquote><p>Ease-off for movement towards the given vector. Larger values are slower and smoother. Default is 4.</p></div></div></div>
<divclass="CVariable"><divclass=CTopic><h3class=CTitle><aname="mxMorphing.cells"></a>cells</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxMorphing.prototype.cells</td></tr></table></blockquote><p>Optional array of cells to be animated. If this is not specified then all cells are checked and animated if they have been moved in the current transaction.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxMorphing.show"></a>show</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass="PBeforeParameters prettyprint "nowrap>mxMorphing.prototype.show = function(</td><tdclass="PParameter prettyprint "nowrap>move</td><tdclass="PAfterParameters prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Shows the changes in the given <ahref="../view/mxCellStatePreview-js.html#mxCellStatePreview"class=LClassid=link17onMouseOver="ShowTip(event, 'tt9', 'link17')"onMouseOut="HideTip('tt9')">mxCellStatePreview</a>.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxMorphing.stopRecursion"></a>stopRecursion</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass="PBeforeParameters prettyprint "nowrap>mxMorphing.prototype.stopRecursion = function(</td><tdclass="PParameter prettyprint "nowrap>state,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>delta</td><tdclass="PAfterParameters prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Returns true if the animation should not recursively find more deltas for children if the given parent state has been animated.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxMorphing.getDelta"></a>getDelta</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass="PBeforeParameters prettyprint "nowrap>mxMorphing.prototype.getDelta = function(</td><tdclass="PParameter prettyprint "nowrap>state</td><tdclass="PAfterParameters prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Returns the vector between the current rendered state and the future location of the state after the display will be updated.</p></div></div></div>
<divclass="CFunction"><divclass=CTopic><h3class=CTitle><aname="mxMorphing.getOriginForCell"></a>getOriginForCell</h3><divclass=CBody><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass="PBeforeParameters prettyprint "nowrap>mxMorphing.prototype.getOriginForCell = function(</td><tdclass="PParameter prettyprint "nowrap>cell</td><tdclass="PAfterParameters prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote><p>Returns the top, left corner of the given cell. TODO: Improve performance by using caching inside this method as the result per cell never changes during the lifecycle of this object.</p></div></div></div>
<divclass=CToolTipid="tt1"><divclass=CFunction><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass="PBeforeParameters prettyprint "nowrap>function mxMorphing(</td><tdclass="PParameter prettyprint "nowrap>graph,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>steps,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>ease,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>delay</td><tdclass="PAfterParameters prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote>Constructs an animation.</div></div><divclass=CToolTipid="tt2"><divclass=CVariable><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxMorphing.prototype.graph</td></tr></table></blockquote>Specifies the delay between the animation steps. </div></div><divclass=CToolTipid="tt3"><divclass=CVariable><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxMorphing.prototype.steps</td></tr></table></blockquote>Specifies the maximum number of steps for the morphing.</div></div><divclass=CToolTipid="tt4"><divclass=CVariable><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxMorphing.prototype.step</td></tr></table></blockquote>Contains the current step.</div></div><divclass=CToolTipid="tt5"><divclass=CVariable><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxMorphing.prototype.ease</td></tr></table></blockquote>Ease-off for movement towards the given vector. </div></div><divclass=CToolTipid="tt6"><divclass=CVariable><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxMorphing.prototype.cells</td></tr></table></blockquote>Optional array of cells to be animated. </div></div><divclass=CToolTipid="tt7"><divclass=CFunction><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><tdclass="prettyprint">mxMorphing.prototype.updateAnimation = function()</td></tr></table></blockquote>Animation step.</div></div><divclass=CToolTipid="tt8"><divclass=CFunction><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass="PBeforeParameters prettyprint "nowrap>mxMorphing.prototype.show = function(</td><tdclass="PParameter prettyprint "nowrap>move</td><tdclass="PAfterParameters prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote>Shows the changes in the given mxCellStatePreview.</div></div><divclass=CToolTipid="tt9"><divclass=CClass>Implements a live preview for moving cells.</div></div><divclass=CToolTipid="tt10"><divclass=CFunction><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass="PBeforeParameters prettyprint "nowrap>mxMorphing.prototype.animateCell = function(</td><tdclass="PParameter prettyprint "nowrap>cell,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>move,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>recurse</td><tdclass="PAfterParameters prettyprint "nowrap>)</td></tr></table></td></tr></table></blockquote>Animates the given cell state using mxCellStatePreview.moveState.</div></div><divclass=CToolTipid="tt11"><divclass=CFunction><blockquote><tableborder=0cellspacing=0cellpadding=0class="Prototype"><tr><td><tableborder=0cellspacing=0cellpadding=0><tr><tdclass="PBeforeParameters prettyprint "nowrap>mxCellStatePreview.prototype.moveState = function(</td><tdclass="PParameter prettyprint "nowrap>state,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>dx,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>dy,</td></tr><tr><td></td><tdclass="PParameter prettyprint "nowrap>add,</td></tr><tr><td></td><tdclass="PParameter prettyprint "no
