From 74f69fd5e4caf059de1334a94096a248559c6860 Mon Sep 17 00:00:00 2001 From: Paulo Veiga Date: Wed, 24 Aug 2011 00:03:52 -0300 Subject: [PATCH] - First impl of remove... --- mindplot/src/main/javascript/Icon.js | 6 +- mindplot/src/main/javascript/IconGroup.js | 109 +++++++++++++++++++++- mindplot/src/main/javascript/ImageIcon.js | 55 +---------- 3 files changed, 114 insertions(+), 56 deletions(-) diff --git a/mindplot/src/main/javascript/Icon.js b/mindplot/src/main/javascript/Icon.js index 909863b7..8e9d2dcf 100644 --- a/mindplot/src/main/javascript/Icon.js +++ b/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); + }, }); diff --git a/mindplot/src/main/javascript/IconGroup.js b/mindplot/src/main/javascript/IconGroup.js index 2634cd7b..a4c5ec45 100644 --- a/mindplot/src/main/javascript/IconGroup.js +++ b/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(); @@ -187,4 +201,97 @@ mindplot.IconGroup = new Class({ yOffset = text.getPosition().y + (sizeHeight - 18) / 2 + 1; 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; + } + }); \ No newline at end of file diff --git a/mindplot/src/main/javascript/ImageIcon.js b/mindplot/src/main/javascript/ImageIcon.js index b46a3a8c..517d27fd 100644 --- a/mindplot/src/main/javascript/ImageIcon.js +++ b/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"]},