Adding fade in - fade out effect when adding new nodes

core-js/src/main/javascript/Utils.js

@@ -271,3 +271,64 @@ core.Utils.calculateDefaultControlPoints = function(srcPos, tarPos){
 
     return [new core.Point(-srcPos.x + x1,-srcPos.y + y1),new core.Point(-tarPos.x + x2,-tarPos.y + y2)];
 };
+
+core.Utils.setVisibilityAnimated = function(elems, isVisible, doneFn){
+    core.Utils.animateVisibility(elems, isVisible, doneFn);
+};
+core.Utils.setChildrenVisibilityAnimated = function(rootElem, isVisible){
+    var children = core.Utils._addInnerChildrens(rootElem);
+    core.Utils.animateVisibility(children, isVisible);
+};
+
+core.Utils.animateVisibility = function (elems, isVisible, doneFn){
+    var _fadeEffect=null;
+    var _opacity = (isVisible?0:1);
+    if(isVisible){
+        elems.forEach(function(child, index){
+                child.setOpacity(_opacity);
+                child.setVisibility(isVisible);
+            });
+    }
+    var fadeEffect = function(index)
+    {
+        var step = 10;
+        if((_opacity<=0 && !isVisible) || (_opacity>=1 && isVisible)){
+            $clear(_fadeEffect);
+            _fadeEffect = null;
+            elems.forEach(function(child, index){
+
+                child.setVisibility(isVisible);
+
+            });
+            if(core.Utils.isDefined(doneFn))
+                doneFn.attempt();
+        }
+        else{
+            var fix = 1;
+            if(isVisible){
+                fix = -1;
+            }
+            _opacity-=(1/step)*fix;
+            elems.forEach(function(child, index){
+                child.setOpacity(_opacity);
+            });
+        }
+
+    };
+    _fadeEffect =fadeEffect.periodical(30);
+};
+
+core.Utils._addInnerChildrens = function(elem){
+    var children = [];
+    var childs = elem._getChildren();
+    for(var i = 0 ; i<childs.length; i++){
+        var child = childs[i];
+        children.push(child);
+        children.push(child.getOutgoingLine());
+        var relationships = child.getRelationships();
+        children = children.concat(relationships);
+        var innerChilds = core.Utils._addInnerChildrens(child);
+        children = children.concat(innerChilds);
+    }
+    return children;
+};

mindplot/src/main/javascript/ConnectionLine.js

@@ -93,6 +93,15 @@ mindplot.ConnectionLine.prototype.setVisibility = function(value)
     this._line2d.setVisibility(value);
 };
 
+mindplot.ConnectionLine.prototype.isVisible = function()
+{
+    return this._line2d.isVisible();
+};
+
+mindplot.ConnectionLine.prototype.setOpacity = function(opacity){
+    this._line2d.setOpacity(opacity);
+};
+
 mindplot.ConnectionLine.prototype.redraw = function()
 {
     var line2d = this._line2d;

mindplot/src/main/javascript/DesignerActionRunner.js

@@ -92,10 +92,10 @@ mindplot.CommandContext = new Class({
     {
         this._designer._removeNode(topic);
     },
-    createTopic:function(model)
+    createTopic:function(model, isVisible)
     {
         core.assert(model, "model can not be null");
-        var topic = this._designer._nodeModelToNodeGraph(model);
+        var topic = this._designer._nodeModelToNodeGraph(model, isVisible);
 
         // @todo: Is this required ?
         var designer = this._designer;
@@ -109,9 +109,9 @@ mindplot.CommandContext = new Class({
         var model = mindmap.createNode(mindplot.NodeModel.MAIN_TOPIC_TYPE);
         return model;
     },
-    connect:function(childTopic, parentTopic)
+    connect:function(childTopic, parentTopic, isVisible)
     {
-        childTopic.connectTo(parentTopic, this._designer._workspace);
+        childTopic.connectTo(parentTopic, this._designer._workspace, isVisible);
     } ,
     disconnect:function(topic)
     {

mindplot/src/main/javascript/MindmapDesigner.js

@@ -179,7 +179,7 @@ mindplot.MindmapDesigner.prototype._registerEvents = function()
             var centralTopicId = centralTopic.getId();
 
             // Execute action ...
-            var command = new mindplot.commands.AddTopicCommand(model, centralTopicId);
+            var command = new mindplot.commands.AddTopicCommand(model, centralTopicId, true);
             this._actionRunner.execute(command);
         }.bind(this));
     }
@@ -325,7 +325,7 @@ mindplot.MindmapDesigner.prototype.createChildForSelectedNode = function()
     var parentTopicId = centalTopic.getId();
     var childModel = centalTopic.createChildModel();
 
-    var command = new mindplot.commands.AddTopicCommand(childModel, parentTopicId);
+    var command = new mindplot.commands.AddTopicCommand(childModel, parentTopicId, true);
     this._actionRunner.execute(command);
 };
 
@@ -357,7 +357,7 @@ mindplot.MindmapDesigner.prototype.createSiblingForSelectedNode = function()
         var parentTopic = topic.getOutgoingConnectedTopic();
         var siblingModel = topic.createSiblingModel();
         var parentTopicId = parentTopic.getId();
-        var command = new mindplot.commands.AddTopicCommand(siblingModel, parentTopicId);
+        var command = new mindplot.commands.AddTopicCommand(siblingModel, parentTopicId, true);
 
         this._actionRunner.execute(command);
     }
@@ -545,11 +545,14 @@ mindplot.MindmapDesigner.prototype.redo = function()
     this._actionRunner.redo();
 };
 
-mindplot.MindmapDesigner.prototype._nodeModelToNodeGraph = function(nodeModel)
+mindplot.MindmapDesigner.prototype._nodeModelToNodeGraph = function(nodeModel, isVisible)
 {
     core.assert(nodeModel, "Node model can not be null");
     var nodeGraph = this._buildNodeGraph(nodeModel);
 
+    if(core.Utils.isDefined(isVisible))
+        nodeGraph.setVisibility(isVisible);
+
     var children = nodeModel.getChildren().slice();
 
     // Sort children by order to solve adding order ...

mindplot/src/main/javascript/RelationshipLine.js

@@ -101,8 +101,8 @@ mindplot.RelationshipLine.prototype.redraw = function()
 
 mindplot.RelationshipLine.prototype._positionateArrows = function()
 {
-    this._endArrow.setVisibility(this._showEndArrow);
+    this._endArrow.setVisibility(this.isVisible() && this._showEndArrow);
-    this._startArrow.setVisibility(this._showStartArrow);
+    this._startArrow.setVisibility(this.isVisible() && this._showStartArrow);
 
     var tpos = this._line2d.getTo();
     this._endArrow.setFrom(tpos.x, tpos.y);
@@ -205,8 +205,16 @@ mindplot.RelationshipLine.prototype.isInWorkspace = function(){
 mindplot.RelationshipLine.prototype.setVisibility = function(value)
 {
     mindplot.RelationshipLine.superClass.setVisibility.call(this,value);
-    this._endArrow.setVisibility(value);
+    this._endArrow.setVisibility(this._showEndArrow && value);
-    this._startArrow.setVisibility(value);
+    this._startArrow.setVisibility(this._showStartArrow && value);
+};
+
+mindplot.RelationshipLine.prototype.setOpacity = function(opacity){
+    mindplot.RelationshipLine.superClass.setOpacity.call(this,opacity);
+    if(this._showEndArrow)
+        this._endArrow.setOpacity(opacity);
+    if(this._showStartArrow)
+        this._startArrow.setOpacity(opacity);
 };
 
 mindplot.RelationshipLine.prototype.setShowEndArrow = function(visible){

mindplot/src/main/javascript/ShrinkConnector.js

@@ -36,10 +36,10 @@ mindplot.ShirinkConnector = function(topic)
         {
             topic.setChildrenShrinked(isShrink);
             return !isShrink;
-        }
+        };
 
         var command = new mindplot.commands.GenericFunctionCommand(commandFunc, isShrink, [topicId]);
-        actionRunner.execute(command)
+        actionRunner.execute(command);
 
         new Event(event).stop();
 
@@ -94,6 +94,11 @@ mindplot.ShirinkConnector.prototype.setVisibility = function(value)
     this._elipse.setVisibility(value);
 }
 
+mindplot.ShirinkConnector.prototype.setOpacity = function(opacity)
+{
+    this._elipse.setOpacity(opacity);
+}
+
 mindplot.ShirinkConnector.prototype.setFill = function(color)
 {
     this._fillColor = color;

mindplot/src/main/javascript/Topic.js

@@ -848,15 +848,8 @@ mindplot.Topic.prototype.setChildrenShrinked = function(value)
     var shrinkConnector = this.getShrinkConnector();
     shrinkConnector.changeRender(value);
 
-    //  Hide branch in order to avoid flickering...
-    this._setChildrenVisibility(false);
-
-    // Update topic position based on the state ...
-    var targetTopicBoard = this.getTopicBoard();
-    targetTopicBoard.repositionate();
-
     // Hide children ...
-    this._setChildrenVisibility(!value);
+    core.Utils.setChildrenVisibilityAnimated(this, !value);
 };
 
 mindplot.Topic.prototype.getShrinkConnector = function()
@@ -999,8 +992,8 @@ mindplot.Topic.prototype.isVisible = function(){
 };
 
 mindplot.Topic.prototype._setRelationshipLinesVisibility = function(value){
-    var relationships = designer.findRelationShipsByTopicId(this.getId());
+    //var relationships = designer.findRelationShipsByTopicId(this.getId());
-    relationships.forEach(function(relationship, index){
+    this._relationships.forEach(function(relationship, index){
         relationship.setVisibility(value);
     });
 };
@@ -1021,6 +1014,16 @@ mindplot.Topic.prototype._setTopicVisibility = function(value)
 
 };
 
+mindplot.Topic.prototype.setOpacity = function(opacity){
+    var elem = this.get2DElement();
+    elem.setOpacity(opacity);
+
+    this.getShrinkConnector().setOpacity(opacity);
+
+    var textShape = this .getTextShape();
+    textShape.setOpacity(opacity);
+};
+
 mindplot.Topic.prototype._setChildrenVisibility = function(isVisible)
 {
 
@@ -1171,7 +1174,7 @@ mindplot.Topic.prototype.setOrder = function(value)
     model.setOrder(value);
 };
 
-mindplot.Topic.prototype.connectTo = function(targetTopic, workspace)
+mindplot.Topic.prototype.connectTo = function(targetTopic, workspace, isVisible)
 {
     core.assert(!this._outgoingLine, 'Could not connect an already connected node');
     core.assert(targetTopic != this, 'Cilcular connection are not allowed');
@@ -1180,6 +1183,8 @@ mindplot.Topic.prototype.connectTo = function(targetTopic, workspace)
 
     // Create a connection line ...
     var outgoingLine = new mindplot.ConnectionLine(this, targetTopic);
+    if(core.Utils.isDefined(isVisible))
+        outgoingLine.setVisibility(isVisible);
     this._outgoingLine = outgoingLine;
     workspace.appendChild(outgoingLine);
 
@@ -1293,12 +1298,20 @@ mindplot.Topic.prototype.updateNode = function()
         var sizeHeight = textShape.getHeight();
         var font = textShape.getFont();
         var iconOffset = this.getIconOffset();
+        var height = sizeHeight + this._offset;
+        var width = sizeWidth + this._offset*2 + iconOffset;
+        var pos = this._offset /2;
+        if(this.getShapeType()==mindplot.NodeModel.SHAPE_TYPE_ELIPSE){
+            var factor = 0.25;
+            height = (width*factor<height?height:width*factor);
+            pos = (height-sizeHeight+3)/2;
+        }
 
-        var newSize = {width:sizeWidth + this._offset*2 + iconOffset,height:sizeHeight + this._offset};
+        var newSize = {width:width,height:height};
         this.setSize(newSize);
 
         // Positionate node ...
-        textShape.setPosition(iconOffset+this._offset, this._offset / 2);
+        textShape.setPosition(iconOffset+this._offset, pos);
         textShape.setTextSize(sizeWidth, sizeHeight);
     }
 };

mindplot/src/main/javascript/commands/AddTopicCommand.js

@@ -18,33 +18,49 @@
 
 mindplot.commands.AddTopicCommand = mindplot.Command.extend(
 {
-    initialize: function(model, parentTopicId)
+    initialize: function(model, parentTopicId, animated)
     {
         core.assert(model, 'Model can not be null');
         this._model = model;
         this._parentId = parentTopicId;
         this._id = mindplot.Command._nextUUID();
+        this._animated = core.Utils.isDefined(animated)?animated:false;
     },
     execute: function(commandContext)
     {
         // Add a new topic ...
-        var topic = commandContext.createTopic(this._model);
+
+        var topic = commandContext.createTopic(this._model, !this._animated);
 
         // Connect to topic ...
         if (this._parentId)
         {
             var parentTopic = commandContext.findTopics(this._parentId)[0];
-            commandContext.connect(topic, parentTopic);
+            commandContext.connect(topic, parentTopic, !this._animated);
         }
 
-        // Finally, focus ...
+        var doneFn = function(){
-        topic.setOnFocus(true);
+            // Finally, focus ...
+            topic.setOnFocus(true);
+        };
+        
+        if(this._animated){
+            core.Utils.setVisibilityAnimated([topic,topic.getOutgoingLine()],true,doneFn);
+        } else
+            doneFn.attempt();
     },
     undoExecute: function(commandContext)
     {
         // Finally, delete the topic from the workspace ...
         var topicId = this._model.getId();
         var topic = commandContext.findTopics(topicId)[0];
-        commandContext.deleteTopic(topic);
+        var doneFn = function(){
+            commandContext.deleteTopic(topic);
+        };
+        if(this._animated){
+            core.Utils.setVisibilityAnimated([topic,topic.getOutgoingLine()],false, doneFn);
+        }
+        else
+            doneFn.attempt();
     }
 });