- First impl of remove...

This commit is contained in:
Paulo Veiga 2011-08-24 00:03:52 -03:00
parent 1f5dbfb5d2
commit 74f69fd5e4
3 changed files with 114 additions and 56 deletions

View File

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

View File

@ -31,6 +31,9 @@ mindplot.IconGroup = new Class({
}; };
this.updateIconGroupPosition(); this.updateIconGroupPosition();
this.registerListeners(); this.registerListeners();
this._removeTip = new mindplot.IconGroup.RemoveTip(this.options.nativeElem, this);
}, },
setPosition : function(x, y) { setPosition : function(x, y) {
@ -57,7 +60,6 @@ mindplot.IconGroup = new Class({
addIcon : function(icon) { addIcon : function(icon) {
$defined(icon, "icon is not defined"); $defined(icon, "icon is not defined");
icon.setGroup(this); icon.setGroup(this);
var newIcon = icon.getImage(); var newIcon = icon.getImage();
var nativeElem = this.options.nativeElem; var nativeElem = this.options.nativeElem;
@ -77,6 +79,17 @@ mindplot.IconGroup = new Class({
nativeElem.setSize(size.width, size.height); nativeElem.setSize(size.width, size.height);
this.options.width = size.width; this.options.width = size.width;
this.options.height = size.height; 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() { getIcons : function() {
@ -161,6 +174,7 @@ mindplot.IconGroup = new Class({
event.stopPropagation(); event.stopPropagation();
}); });
this.options.nativeElem.addEvent('dblclick', function(event) { this.options.nativeElem.addEvent('dblclick', function(event) {
event.stopPropagation(); event.stopPropagation();
@ -188,3 +202,96 @@ mindplot.IconGroup = new Class({
return {x:offset, y:yOffset}; 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;
}
});

View File

@ -36,8 +36,6 @@ mindplot.ImageIcon = new Class({
//Remove //Remove
if (!this._readOnly) { if (!this._readOnly) {
var deleteTip = new mindplot.ImageIcon.DeleteTip(this._topic.getId(), this);
//Icon //Icon
var image = this.getImage(); var image = this.getImage();
image.addEvent('click', function() { image.addEvent('click', function() {
@ -50,10 +48,7 @@ mindplot.ImageIcon = new Class({
this._image.setHref(imgUrl); this._image.setHref(imgUrl);
}.bind(this)); }.bind(this));
this._image.setCursor('pointer');
image.addEvent('mouseover', function(event) {
deleteTip.show();
});
} }
}, },
@ -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 = [ mindplot.ImageIcon.prototype.ICON_FAMILIES = [
{"id": "face", "icons" : ["face_plain","face_sad","face_crying","face_smile","face_surprise","face_wink"]}, {"id": "face", "icons" : ["face_plain","face_sad","face_crying","face_smile","face_surprise","face_wink"]},