mirror of
https://bitbucket.org/wisemapping/wisemapping-open-source.git
synced 2024-11-05 07:03:24 +01:00
- First impl of remove...
This commit is contained in:
parent
1f5dbfb5d2
commit
74f69fd5e4
@ -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);
|
||||||
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
@ -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"]},
|
||||||
|
Loading…
Reference in New Issue
Block a user