wisemapping-open-source/mindplot/src/main/javascript/IconGroup.js

288 lines
7.8 KiB
JavaScript
Raw Normal View History

2009-06-07 20:59:43 +02:00
/*
2011-07-27 13:25:10 +02:00
* Copyright [2011] [wisemapping]
*
* Licensed under WiseMapping Public License, Version 1.0 (the "License").
* It is basically the Apache License, Version 2.0 (the "License") plus the
* "powered by wisemapping" text requirement on every single page;
* you may not use this file except in compliance with the License.
* You may obtain a copy of the license at
*
* http://www.wisemapping.org/license
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
mindplot.IconGroup = new Class({
2011-09-02 07:31:03 +02:00
initialize : function(topicId, iconSize) {
2011-09-10 02:53:41 +02:00
$assert($defined(topicId), "topicId can not be null");
2011-10-18 14:29:29 +02:00
$assert($defined(iconSize), "iconSize can not be null");
2011-09-02 07:31:03 +02:00
this._icons = [];
this._group = new web2d.Group({width: 0, height:iconSize,x: 0, y:0, coordSizeWidth:0,coordSizeHeight:100});
this._removeTip = new mindplot.IconGroup.RemoveTip(this._group, topicId);
this.seIconSize(iconSize, iconSize);
2011-08-24 05:03:52 +02:00
this._registerListeners();
2011-08-24 05:03:52 +02:00
2011-07-27 13:25:10 +02:00
},
setPosition : function(x, y) {
2011-09-02 07:31:03 +02:00
this._group.setPosition(x, y);
2011-07-27 13:25:10 +02:00
},
getPosition : function() {
2011-09-02 07:31:03 +02:00
return this._group.getPosition();
},
getNativeElement : function() {
return this._group;
2011-07-27 13:25:10 +02:00
},
getSize : function() {
2011-09-02 07:31:03 +02:00
return this._group.getSize();
},
seIconSize : function(width, height) {
this._iconSize = {width:width,height:height};
2011-09-03 01:05:51 +02:00
this._resize(this._icons.length);
2011-07-27 13:25:10 +02:00
},
2011-10-07 05:21:49 +02:00
addIcon : function(icon, remove) {
2011-08-21 17:42:00 +02:00
$defined(icon, "icon is not defined");
2011-08-05 06:06:56 +02:00
icon.setGroup(this);
this._icons.push(icon);
2011-07-27 13:25:10 +02:00
// Adjust group and position ...
this._resize(this._icons.length);
this._positionIcon(icon, this._icons.length - 1);
2011-07-27 13:25:10 +02:00
var imageShape = icon.getImage();
this._group.appendChild(imageShape);
2011-08-24 05:03:52 +02:00
// Register event for the group ..
2011-10-07 05:21:49 +02:00
if (remove) {
this._removeTip.decorate(this._topicId, icon);
}
2011-07-27 13:25:10 +02:00
},
_findIconFromModel : function(iconModel) {
2011-07-27 13:25:10 +02:00
var result = null;
this._icons.each(function(icon) {
var elModel = icon.getModel();
if (elModel.getId() == iconModel.getId()) {
result = icon;
2011-07-27 13:25:10 +02:00
}
}, this);
if (result == null) {
throw "Icon can no be found.";
2009-06-07 20:59:43 +02:00
}
2011-07-27 13:25:10 +02:00
return result;
},
removeIconByModel : function(featureModel) {
$assert(featureModel, "featureModel can not be null");
var icon = this._findIconFromModel(featureModel);
this._removeIcon(icon);
},
2011-07-27 13:25:10 +02:00
_removeIcon : function(icon) {
$assert(icon, "icon can not be null");
this._removeTip.close(0);
this._group.removeChild(icon.getImage());
2011-09-02 07:31:03 +02:00
this._icons.erase(icon);
this._resize(this._icons.length);
2011-07-27 13:25:10 +02:00
2011-09-02 07:31:03 +02:00
// Add all again ...
this._icons.forEach(function(elem, i) {
this._positionIcon(elem, i);
2011-09-02 07:31:03 +02:00
}.bind(this));
2011-07-27 13:25:10 +02:00
},
moveToFront : function() {
2011-09-02 07:31:03 +02:00
this._group.moveToFront();
2011-07-27 13:25:10 +02:00
},
_registerListeners : function() {
2011-09-02 07:31:03 +02:00
this._group.addEvent('click', function(event) {
2011-07-27 13:25:10 +02:00
// Avoid node creation ...
2011-08-21 17:42:00 +02:00
event.stopPropagation();
2011-07-27 13:25:10 +02:00
});
2011-08-24 05:03:52 +02:00
2011-09-02 07:31:03 +02:00
this._group.addEvent('dblclick', function(event) {
2011-08-21 17:42:00 +02:00
event.stopPropagation();
2011-07-27 13:25:10 +02:00
});
},
_resize : function(iconsLength) {
this._group.setSize(iconsLength * this._iconSize.width, this._iconSize.height);
2011-09-02 23:25:34 +02:00
var iconSize = mindplot.Icon.SIZE + (mindplot.IconGroup.ICON_PADDING * 2);
this._group.setCoordSize(iconsLength * iconSize, iconSize);
},
_positionIcon : function(icon, order) {
2011-09-02 23:25:34 +02:00
var iconSize = mindplot.Icon.SIZE + (mindplot.IconGroup.ICON_PADDING * 2);
icon.getImage().setPosition(iconSize * order + mindplot.IconGroup.ICON_PADDING, mindplot.IconGroup.ICON_PADDING);
2011-07-27 13:25:10 +02:00
}
2011-08-24 05:03:52 +02:00
});
2011-09-02 23:25:34 +02:00
mindplot.IconGroup.ICON_PADDING = 5;
2011-08-24 05:03:52 +02:00
mindplot.IconGroup.RemoveTip = new Class({
initialize : function(container) {
$assert(container, "group can not be null");
2011-10-04 06:16:29 +02:00
this._fadeElem = container;
2011-08-24 05:03:52 +02:00
},
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) {
2011-08-24 06:06:32 +02:00
this.close(0);
2011-08-24 05:03:52 +02:00
}
// Now, let move the position the icon...
var pos = icon.getPosition();
2011-08-24 06:06:32 +02:00
// Register events ...
2011-08-24 05:03:52 +02:00
var widget = this._buildWeb2d();
widget.addEvent('click', function() {
2011-08-26 03:08:39 +02:00
icon.remove();
2011-08-24 05:03:52 +02:00
});
2011-08-24 06:06:32 +02:00
widget.addEvent('mouseover', function() {
this.show(topicId, icon);
}.bind(this));
widget.addEvent('mouseout', function() {
this.hide();
}.bind(this));
2011-09-02 07:31:03 +02:00
widget.setPosition(pos.x + 80, pos.y - 50);
2011-10-04 06:16:29 +02:00
this._fadeElem.appendChild(widget);
2011-08-24 05:03:52 +02:00
// Setup current element ...
this._activeIcon = icon;
this._widget = widget;
2011-08-24 06:06:32 +02:00
} else {
clearTimeout(this._closeTimeoutId);
2011-08-24 05:03:52 +02:00
}
},
2011-08-24 06:06:32 +02:00
hide : function() {
2011-08-25 05:17:13 +02:00
this.close(200);
2011-08-24 05:03:52 +02:00
},
2011-08-24 06:06:32 +02:00
close : function(delay) {
2011-08-24 05:03:52 +02:00
2011-08-24 06:06:32 +02:00
// This is not ok, trying to close the same dialog twice ?
if (this._closeTimeoutId) {
clearTimeout(this._closeTimeoutId)
}
2011-08-24 05:03:52 +02:00
if (this._activeIcon) {
2011-08-24 06:06:32 +02:00
var widget = this._widget;
2011-08-24 05:03:52 +02:00
var close = function() {
2011-08-24 06:06:32 +02:00
2011-08-24 05:03:52 +02:00
this._activeIcon = null;
2011-10-04 06:16:29 +02:00
this._fadeElem.removeChild(widget);
2011-08-24 06:06:32 +02:00
this._widget = null;
this._closeTimeoutId = null;
2011-08-24 05:03:52 +02:00
}.bind(this);
2011-08-24 06:06:32 +02:00
if (!$defined(delay) || delay == 0) {
close();
}
else {
this._closeTimeoutId = close.delay(delay);
}
2011-08-24 05:03:52 +02:00
}
},
2011-08-24 06:06:32 +02:00
_buildWeb2d : function() {
var result = new web2d.Group({
width: 10,
height:10,
x: 0,
y:0,
coordSizeWidth:10,
coordSizeHeight:10
});
2011-08-24 05:03:52 +02:00
2011-08-24 06:06:32 +02:00
var outerRect = new web2d.Rect(0, {
x: 0,
y: 0,
width:10,
height:10,
stroke:'0',
2011-08-24 06:14:58 +02:00
fillColor:'black'
2011-08-24 06:06:32 +02:00
});
result.appendChild(outerRect);
outerRect.setCursor('pointer');
var innerRect = new web2d.Rect(0, {
x: 1,
y: 1,
width:8,
height:8,
stroke:'1 solid white',
2011-08-24 06:14:58 +02:00
fillColor:'gray'
2011-08-24 06:06:32 +02:00
});
result.appendChild(innerRect);
2011-08-24 05:03:52 +02:00
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);
2011-09-02 07:31:03 +02:00
// Some events ...
2011-08-24 05:03:52 +02:00
result.addEvent('mouseover', function() {
2011-08-24 06:06:32 +02:00
innerRect.setFill('#CC0033');
2011-08-24 05:03:52 +02:00
});
result.addEvent('mouseout', function() {
2011-08-24 06:06:32 +02:00
innerRect.setFill('gray');
2011-08-24 05:03:52 +02:00
});
2011-09-02 07:31:03 +02:00
result.setSize(50, 50);
2011-08-24 05:03:52 +02:00
return result;
2011-08-24 06:06:32 +02:00
},
decorate : function(topicId, icon) {
2011-09-02 07:31:03 +02:00
if (!icon.__remove) {
icon.addEvent('mouseover', function() {
this.show(topicId, icon);
}.bind(this));
icon.addEvent('mouseout', function() {
this.hide();
}.bind(this));
2011-09-02 07:31:03 +02:00
icon.__remove = true;
}
2011-08-24 05:03:52 +02:00
}
2011-07-27 13:25:10 +02:00
});