mirror of
https://bitbucket.org/wisemapping/wisemapping-open-source.git
synced 2024-08-20 12:30:44 +02:00
- First impl of remove...
This commit is contained in:
parent
1f5dbfb5d2
commit
74f69fd5e4
@ -42,7 +42,11 @@ mindplot.Icon = new Class({
|
||||
|
||||
getPosition : function() {
|
||||
return this._image.getPosition();
|
||||
}
|
||||
},
|
||||
|
||||
setSize : function(x,y) {
|
||||
return this._image.setSize(x,y);
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
|
@ -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;
|
||||
}
|
||||
|
||||
});
|
@ -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"]},
|
||||
|
Loading…
Reference in New Issue
Block a user