- First impl of remove...

mindplot/src/main/javascript/Icon.js

@@ -42,7 +42,11 @@ mindplot.Icon = new Class({
 
     getPosition : function() {
         return this._image.getPosition();
-    }
+    },
+
+    setSize : function(x,y) {
+        return this._image.setSize(x,y);
+    },
 });
 
 

mindplot/src/main/javascript/IconGroup.js

@@ -31,6 +31,9 @@ mindplot.IconGroup = new Class({
         };
         this.updateIconGroupPosition();
         this.registerListeners();
+
+        this._removeTip = new mindplot.IconGroup.RemoveTip(this.options.nativeElem, this);
+
     },
 
     setPosition : function(x, y) {
@@ -57,7 +60,6 @@ mindplot.IconGroup = new Class({
     addIcon : function(icon) {
         $defined(icon, "icon is not defined");
         icon.setGroup(this);
-
         var newIcon = icon.getImage();
         var nativeElem = this.options.nativeElem;
 
@@ -77,6 +79,17 @@ mindplot.IconGroup = new Class({
         nativeElem.setSize(size.width, size.height);
         this.options.width = size.width;
         this.options.height = size.height;
+
+        // Register event for the group ..
+        var topicId = this.options.topic.getId();
+        newIcon.addEvent('mouseover', function(event) {
+            this._removeTip.show(topicId, icon);
+            event.stopPropagation();
+        }.bind(this));
+
+        newIcon.addEvent('mouseout', function(event) {
+            this._removeTip.hide(newIcon);
+        }.bind(this));
     },
 
     getIcons : function() {
@@ -161,6 +174,7 @@ mindplot.IconGroup = new Class({
             event.stopPropagation();
 
         });
+
         this.options.nativeElem.addEvent('dblclick', function(event) {
             event.stopPropagation();
 
@@ -188,3 +202,96 @@ mindplot.IconGroup = new Class({
         return {x:offset, y:yOffset};
     }
 });
+
+
+mindplot.IconGroup.RemoveTip = new Class({
+    initialize : function(container) {
+        $assert(container, "group can not be null");
+        this._container = container;
+    },
+
+
+    show : function(topicId, icon) {
+        $assert(icon, 'icon can not be null');
+
+        // Nothing to do ...
+        if (this._activeIcon != icon) {
+            // If there is an active icon, close it first ...
+            if (this._activeIcon) {
+                this.close(icon);
+            }
+
+            // Now, let move the position the icon...
+            var pos = icon.getPosition();
+            icon.setSize(15, 15);
+
+            // Create a new remove widget ...
+            var widget = this._buildWeb2d();
+            widget.addEvent('click', function() {
+                var actionDispatcher = mindplot.ActionDispatcher.getInstance();
+                actionDispatcher.removeIconFromTopic(topicId, icon._iconModel);
+            });
+
+            widget.setPosition(pos.x + 11, pos.y - 11);
+            this._container.appendChild(widget);
+
+            // Setup current element ...
+            this._activeIcon = icon;
+            this._widget = widget;
+
+        }
+    },
+
+    hide : function(icon) {
+        this.close(icon, 1000);
+    },
+
+    close : function(icon, delay) {
+        $assert(icon, 'icon can not be null');
+
+
+        if (this._activeIcon) {
+            var close = function() {
+                icon.setSize(12, 12);
+                this._container.removeChild(this._widget);
+                // Clear state ...
+                this._activeIcon = null;
+                this._widget = null
+            }.bind(this);
+
+            !$defined(delay) ? close() : close.delay(delay);
+        }
+    },
+
+    _buildWeb2d : function(icon) {
+        var result = new web2d.Group({width: 10, height:10,x: 0, y:0, coordSizeWidth:10,coordSizeHeight:10});
+        var rect = new web2d.Rect(0, {x: 0, y: 0, width:10, height:10, stroke:'0',fillColor:'black', visibility:true});
+        result.appendChild(rect);
+
+        var rect2 = new web2d.Rect(0, {x: 1, y: 1, width:8, height:8, stroke:'1 solid white',fillColor:'#CC0033', visibility:true});
+        result.appendChild(rect2);
+
+        var line = new web2d.Line({stroke:'1 solid white'});
+        line.setFrom(1, 1);
+        line.setTo(9, 9);
+        result.appendChild(line);
+
+        var line2 = new web2d.Line({stroke:'1 solid white'});
+        line2.setFrom(1, 9);
+        line2.setTo(9, 1);
+        result.appendChild(line2);
+
+        rect2.setCursor('pointer');
+
+
+        // Some sily events ...
+        result.addEvent('mouseover', function() {
+            rect2.setFill('black');
+        });
+        result.addEvent('mouseout', function() {
+            rect2.setFill('#CC0033');
+        });
+        return result;
+    }
+
+});

mindplot/src/main/javascript/ImageIcon.js

@@ -36,8 +36,6 @@ mindplot.ImageIcon = new Class({
         //Remove
         if (!this._readOnly) {
 
-            var deleteTip = new mindplot.ImageIcon.DeleteTip(this._topic.getId(), this);
-
             //Icon
             var image = this.getImage();
             image.addEvent('click', function() {
@@ -50,10 +48,7 @@ mindplot.ImageIcon = new Class({
                 this._image.setHref(imgUrl);
 
             }.bind(this));
-
-            image.addEvent('mouseover', function(event) {
-                deleteTip.show();
-            });
+            this._image.setCursor('pointer');
         }
     },
 
@@ -113,54 +108,6 @@ mindplot.ImageIcon = new Class({
 
 });
 
-mindplot.ImageIcon.DeleteTip = new Class({
-    initialize : function(topicId, icon) {
-        $assert(topicId, "topicId can not be null");
-        $assert(icon, "iconModel can not be null");
-        this._icon = icon;
-        this._topicId = topicId;
-
-        this._registerEvents();
-    },
-
-    _registerEvents : function() {
-
-        this._containerElem = this._buildHtml();
-        this._containerElem.inject($(document.body));
-
-        this._containerElem.addEvent('click', function() {
-            var actionDispatcher = mindplot.ActionDispatcher.getInstance();
-            actionDispatcher.removeIconFromTopic(this._topicId, this._icon._iconModel);
-            this.close();
-        }.bind(this));
-
-
-    },
-
-    show : function() {
-        this._icon._image.positionRelativeTo(this._containerElem, {
-            position: 'upperRight',
-            offset: {x:10,y:-10}
-        });
-        this._icon._image.setStroke(1,'dash','red');
-    },
-
-    close : function() {
-        this._containerElem.dispose();
-    },
-
-    _buildHtml : function() {
-        var result = new Element('div');
-        result.setStyles({
-                zIndex: "8",
-                width:"10px",
-                height:"10px",
-                'background-color':'red'}
-        );
-        return result;
-    }
-});
-
 
 mindplot.ImageIcon.prototype.ICON_FAMILIES = [
     {"id": "face", "icons" : ["face_plain","face_sad","face_crying","face_smile","face_surprise","face_wink"]},