From ae9f05dd05337b074c9e67514b72cd2b4df57da9 Mon Sep 17 00:00:00 2001
From: Paulo Gustavo Veiga <pveiga@wisemapping.com>
Date: Wed, 7 Mar 2012 20:35:06 -0300
Subject: [PATCH] Use FX class for delete node events.

---
 core-js/src/main/javascript/Utils.js          | 70 ----------------
 mindplot/pom.xml                              |  1 +
 .../javascript/StandaloneActionDispatcher.js  |  3 +-
 mindplot/src/main/javascript/Topic.js         | 32 +++++++-
 .../javascript/commands/AddTopicCommand.js    | 80 ++++++++-----------
 .../javascript/layout/EventBusDispatcher.js   |  2 +-
 .../src/main/javascript/util/FadeEffect.js    | 50 ++++++++++++
 web2d/src/main/javascript/Group.js            |  5 ++
 .../src/main/javascript/peer/svg/GroupPeer.js |  4 +
 wise-editor/src/main/webapp/html/editor.html  | 38 ++++-----
 10 files changed, 143 insertions(+), 142 deletions(-)
 create mode 100644 mindplot/src/main/javascript/util/FadeEffect.js

diff --git a/core-js/src/main/javascript/Utils.js b/core-js/src/main/javascript/Utils.js
index 9c1f9651..ff870beb 100644
--- a/core-js/src/main/javascript/Utils.js
+++ b/core-js/src/main/javascript/Utils.js
@@ -140,57 +140,6 @@ 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.flattenTopicChildElements(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) {
-            if ($defined(child)) {
-                child.setOpacity(_opacity);
-                child.setVisibility(isVisible ? "visible" : "hidden");
-            }
-        });
-    }
-    var fadeEffect = function() {
-        var step = 10;
-        if ((_opacity <= 0 && !isVisible) || (_opacity >= 1 && isVisible)) {
-            $clear(_fadeEffect);
-            _fadeEffect = null;
-            elems.forEach(function(child) {
-                if ($defined(child)) {
-                    child.setVisibility(isVisible ? "visible" : "hidden");
-                }
-
-            });
-            if ($defined(doneFn))
-                doneFn.attempt();
-        }
-        else {
-            var fix = 1;
-            if (isVisible) {
-                fix = -1;
-            }
-            _opacity -= (1 / step) * fix;
-            elems.forEach(function(child) {
-                if ($defined(child)) {
-                    child.setOpacity(_opacity);
-                }
-            });
-        }
-
-    };
-    _fadeEffect = fadeEffect.periodical(10);
-};
-
 core.Utils.animatePosition = function (elems, doneFn, designer) {
     var _moveEffect = null;
     var i = 10;
@@ -231,22 +180,3 @@ core.Utils.animatePosition = function (elems, doneFn, designer) {
     };
     _moveEffect = moveEffect.periodical(10);
 };
-
-core.Utils.flattenTopicChildElements = function(topic) {
-    var result = [];
-
-    var children = topic.getChildren();
-    for (var i = 0; i < children.length; i++) {
-
-        var child = children[i];
-        result.push(child);
-        result.push(child.getOutgoingLine());
-
-        var relationships = child.getRelationships();
-        result = result.concat(relationships);
-
-        var innerChilds = core.Utils.flattenTopicChildElements(child);
-        result = result.concat(innerChilds);
-    }
-    return result;
-};
\ No newline at end of file
diff --git a/mindplot/pom.xml b/mindplot/pom.xml
index 2c29a931..dab5bd3c 100644
--- a/mindplot/pom.xml
+++ b/mindplot/pom.xml
@@ -81,6 +81,7 @@
                                     <!--<filelist dir="${basedir}/src/main/javascript/" files="RichTextEditor.js"/>-->
                                     <filelist dir="${basedir}/src/main/javascript/" files="TextEditorFactory.js"/>
                                     <filelist dir="${basedir}/src/main/javascript/" files="util/Shape.js"/>
+                                    <filelist dir="${basedir}/src/main/javascript/" files="util/FadeEffect.js"/>
                                     <filelist dir="${basedir}/src/main/javascript/"
                                               files="persistence/ModelCodeName.js"/>
                                     <filelist dir="${basedir}/src/main/javascript/"
diff --git a/mindplot/src/main/javascript/StandaloneActionDispatcher.js b/mindplot/src/main/javascript/StandaloneActionDispatcher.js
index 0c6aea88..ae368c99 100644
--- a/mindplot/src/main/javascript/StandaloneActionDispatcher.js
+++ b/mindplot/src/main/javascript/StandaloneActionDispatcher.js
@@ -260,8 +260,7 @@ mindplot.CommandContext = new Class({
 
     createTopic:function(model, isVisible) {
         $assert(model, "model can not be null");
-        var result = this._designer._nodeModelToNodeGraph(model, isVisible);
-        return  result;
+        return  this._designer._nodeModelToNodeGraph(model, isVisible);
     },
 
     createModel:function() {
diff --git a/mindplot/src/main/javascript/Topic.js b/mindplot/src/main/javascript/Topic.js
index 65a8ebbb..a669085e 100644
--- a/mindplot/src/main/javascript/Topic.js
+++ b/mindplot/src/main/javascript/Topic.js
@@ -625,12 +625,19 @@ mindplot.Topic = new Class({
         model.setChildrenShrunken(value);
 
         // Change render base on the state.
+
         var shrinkConnector = this.getShrinkConnector();
         shrinkConnector.changeRender(value);
 
-        // Hide children ...
-        core.Utils.setChildrenVisibilityAnimated(this, !value);
-        mindplot.EventBus.instance.fireEvent(mindplot.EventBus.events.NodeShrinkEvent, this.getModel());
+        // Do some fancy animation ....
+        var elements = this._flatten2DElements(this);
+        var fade = new mindplot.util.FadeEffect(elements, !value);
+        fade.addEvent('complete', function() {
+
+        });
+        fade.start();
+        mindplot.EventBus.instance.fireEvent(mindplot.EventBus.events.NodeShrinkEvent, model);
+
     },
 
     getShrinkConnector : function() {
@@ -1160,6 +1167,25 @@ mindplot.Topic = new Class({
                 this.setSize(size);
             }
         }
+    },
+
+    _flatten2DElements : function(topic) {
+        var result = [];
+
+        var children = topic.getChildren();
+        for (var i = 0; i < children.length; i++) {
+
+            var child = children[i];
+            result.push(child);
+            result.push(child.getOutgoingLine());
+
+            var relationships = child.getRelationships();
+            result = result.concat(relationships);
+
+            var innerChilds = core.Utils.flattenTopicChildElements(child);
+            result = result.concat(innerChilds);
+        }
+        return result;
     }
 
 });
diff --git a/mindplot/src/main/javascript/commands/AddTopicCommand.js b/mindplot/src/main/javascript/commands/AddTopicCommand.js
index 2923c30c..a0cf5d95 100644
--- a/mindplot/src/main/javascript/commands/AddTopicCommand.js
+++ b/mindplot/src/main/javascript/commands/AddTopicCommand.js
@@ -16,55 +16,41 @@
  *   limitations under the License.
  */
 
-mindplot.commands.AddTopicCommand = new Class(
-    {
-        Extends:mindplot.Command,
-        initialize: function(model, parentTopicId, animated) {
-            $assert(model, 'Model can not be null');
+mindplot.commands.AddTopicCommand = new Class({
+    Extends:mindplot.Command,
+    initialize: function(model, parentTopicId) {
+        $assert(model, 'Model can not be null');
 
-            this.parent();
-            this._model = model;
-            this._parentId = parentTopicId;
-            this._id = mindplot.Command._nextUUID();
-            this._animated = $defined(animated) ? animated : false;
-        },
+        this.parent();
+        this._model = model;
+        this._parentId = parentTopicId;
+    },
 
-        execute: function(commandContext) {
+    execute: function(commandContext) {
 
-            // Add a new topic ...
-           var topic = commandContext.createTopic(this._model, !this._animated);
+        // Add a new topic ...
+        var topic = commandContext.createTopic(this._model, false);
 
-            // Connect to topic ...
-            if ($defined(this._parentId)) {
-                var parentTopic = commandContext.findTopics(this._parentId)[0];
-                commandContext.connect(topic, parentTopic, !this._animated);
-            }
-
-            var doneFn = function() {
-                // Finally, focus ...
-                var designer = commandContext._designer;
-                designer.onObjectFocusEvent(topic);
-                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];
-            var doneFn = function() {
-                commandContext.deleteTopic(topic);
-            };
-            if (this._animated) {
-                core.Utils.setVisibilityAnimated([topic,topic.getOutgoingLine()], false, doneFn);
-            }
-            else
-                doneFn.attempt();
+        // Connect to topic ...
+        if ($defined(this._parentId)) {
+            var parentTopic = commandContext.findTopics(this._parentId)[0];
+            commandContext.connect(topic, parentTopic);
         }
-    });
\ No newline at end of file
+
+        // Finally, focus ...
+        var designer = commandContext._designer;
+        var fade = new mindplot.util.FadeEffect([topic,topic.getOutgoingLine()], true);
+        fade.addEvent('complete', function() {
+            designer.onObjectFocusEvent(topic);
+            topic.setOnFocus(true);
+        });
+        fade.start();
+    },
+
+    undoExecute: function(commandContext) {
+        // Finally, delete the topic from the workspace ...
+        var topicId = this._model.getId();
+        var topic = commandContext.findTopics(topicId)[0];
+        commandContext.deleteTopic(topic);
+    }
+});
\ No newline at end of file
diff --git a/mindplot/src/main/javascript/layout/EventBusDispatcher.js b/mindplot/src/main/javascript/layout/EventBusDispatcher.js
index 5a122b78..e5e768f0 100644
--- a/mindplot/src/main/javascript/layout/EventBusDispatcher.js
+++ b/mindplot/src/main/javascript/layout/EventBusDispatcher.js
@@ -73,7 +73,7 @@ mindplot.layout.EventBusDispatcher = new Class({
 //        (function() {
         this._layoutManager.layout(true);
 //        console.log("---------");
-        this._layoutManager.dump();
+//        this._layoutManager.dump();
 //        console.log("---------");
 //        console.log("---------");
 //        }).delay(0, this);
diff --git a/mindplot/src/main/javascript/util/FadeEffect.js b/mindplot/src/main/javascript/util/FadeEffect.js
new file mode 100644
index 00000000..efd99e5e
--- /dev/null
+++ b/mindplot/src/main/javascript/util/FadeEffect.js
@@ -0,0 +1,50 @@
+/*
+ *    Copyright [2011] [wisemapping]
+ *
+ *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
+ *   It is basically the Apache License, Version 2.0 (the "License") plus the
+ *   "powered by wisemapping" text requirement on every single page;
+ *   you may not use this file except in compliance with the License.
+ *   You may obtain a copy of the license at
+ *
+ *       http://www.wisemapping.org/license
+ *
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *   See the License for the specific language governing permissions and
+ *   limitations under the License.
+ */
+
+mindplot.util.FadeEffect = new Class({
+    Extends: Fx,
+    initialize: function(elements, isVisible) {
+        this.parent({duration:3000,frames:15,transition:'linear'});
+        this._isVisible = isVisible;
+        this._element = elements;
+
+
+        this.addEvent('complete', function() {
+            this._element.forEach(function(elem) {
+                if(elem){
+                    elem.setVisibility(isVisible);
+                 }
+            });
+        });
+
+    },
+
+    start: function(){
+      this.parent(this._isVisible ? 0 : 1, this._isVisible ? 1 : 0);
+    },
+
+    set: function(now) {
+        this._element.forEach(function(elem) {
+           if(elem){
+                elem.setOpacity(now);
+           }
+        });
+        return this;
+    }
+});
+
diff --git a/web2d/src/main/javascript/Group.js b/web2d/src/main/javascript/Group.js
index cb7e210d..c2dd64f0 100644
--- a/web2d/src/main/javascript/Group.js
+++ b/web2d/src/main/javascript/Group.js
@@ -123,5 +123,10 @@ web2d.Group = new Class({
         }
 
         this._peer._native.appendChild(DomElement);
+    },
+
+    setOpacity:function(value){
+      this._peer.setOpacity(value);
     }
+
 });
\ No newline at end of file
diff --git a/web2d/src/main/javascript/peer/svg/GroupPeer.js b/web2d/src/main/javascript/peer/svg/GroupPeer.js
index 1af52095..10b7ab69 100644
--- a/web2d/src/main/javascript/peer/svg/GroupPeer.js
+++ b/web2d/src/main/javascript/peer/svg/GroupPeer.js
@@ -73,6 +73,10 @@ web2d.peer.svg.GroupPeer = new Class({
         this._native.setAttribute("transform", "translate(" + cx + "," + cy + ") scale(" + sx + "," + sy + ")");
     },
 
+    setOpacity : function(value) {
+        this._native.setAttribute("opacity", value);
+    },
+
     setCoordOrigin : function(x, y) {
         var change = x != this._coordOrigin.x || y != this._coordOrigin.y;
         if ($defined(x)) {
diff --git a/wise-editor/src/main/webapp/html/editor.html b/wise-editor/src/main/webapp/html/editor.html
index 2d185769..38622a98 100644
--- a/wise-editor/src/main/webapp/html/editor.html
+++ b/wise-editor/src/main/webapp/html/editor.html
@@ -4,7 +4,8 @@
 <head>
     <base href="../">
     <title>WiseMapping - Editor </title>
-    <meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
+    <meta http-equiv="Content-type" content="text/html; char
+    set=UTF-8"/>
 
     <!--[if lt IE 9]>
     <meta http-equiv="X-UA-Compatible" content="chrome=1">
@@ -133,26 +134,25 @@
     </div>
 </div>
 
-<!--
-<div style="position: absolute;align:left;background: gray;width: 100px;height: 300px;z-index: 100" id="dragPanel">
-    <div id="dragIcon" style="">
-        <img src="images/logo-small.png"/>
-    </div>
-</div>
+<!--<div style="position: absolute;align:left;background: gray;width: 100px;height: 300px;z-index: 100" id="dragPanel">-->
+    <!--<div id="dragIcon" style="">-->
+        <!--<img src="images/logo-small.png"/>-->
+    <!--</div>-->
+<!--</div>-->
 
-<script type="text/javascript">
-    $("dragIcon").addEvent('mousedown', function(event) {
-        event.preventDefault();
+<!--<script type="text/javascript">-->
+    <!--$("dragIcon").addEvent('mousedown', function(event) {-->
+        <!--event.preventDefault();-->
+
+        <!--var options = {imageUrl:"images/logo-small.png",-->
+            <!--imageWidth:80,-->
+            <!--imageHeight:43,-->
+            <!--metadata: "{'media':'video,'url':'http://www.youtube.com/watch?v=P3FrXftyuzw&feature=g-vrec&context=G2b4ab69RVAAAAAAAAAA'}"-->
+        <!--};-->
+        <!--designer.addDraggedNode(event, options);-->
+    <!--});-->
+<!--</script>-->
 
-        var options = {imageUrl:"images/logo-small.png",
-            imageWidth:80,
-            imageHeight:43,
-            metadata: "{'media':'video,'url':'http://www.youtube.com/watch?v=P3FrXftyuzw&feature=g-vrec&context=G2b4ab69RVAAAAAAAAAA'}"
-        };
-        designer.addDraggedNode(event, options);
-    });
-</script>
--->
 <div id="mindplot"></div>
 <script type="text/javascript" src="js/editor.js"></script>
 </body>