Retour à la documentation
/**
* @class spw.widgets.SpwOverview
*/
define(["dojo/_base/declare", "spw/api/SpwBaseTemplatedWidget", "dojo/text!./templates/SpwOverview.html",
"dojo/dom-style", "dojo/on", "dojo/dom-construct", "dojo/dom-geometry", "dojo/_base/lang", "dojo/i18n!./nls/SpwOverview"],
function(declare, SpwBaseTemplatedWidget, tmpl, domStyle, on, domConstruct, domGeom, lang, labels) {
return declare("spw.widgets.SpwOverview", [SpwBaseTemplatedWidget], /** @lends spw.widgets.SpwOverview.prototype */{
templateString: tmpl,
labels: labels,
oWidth:250,
oHeight:150,
oXmin:42000,
oXmax:295200,
oYmin:20500,
oYmax:167900,
documentMouseMoveHandler: null,
documentMouseUpHandler: null,
postCreate: function() {
this.inherited(arguments);
domStyle.set(this._spwOverviewWidgetSurfaceDiv, {
position: "absolute", width: this.oWidth + "px", height: this.oHeight + "px",border: "none"
});
var spwMap = this.spwViewer.get('spwMap');
this.own(
on(this._spwOverviewWidgetSurfaceDiv, "mousedown", lang.hitch(this, this.activateOverviewDnD)),
spwMap.on(spwMap.events.MapExtentChanged, lang.hitch(this, this.onSpwMapExtentChanged))
);
},
surfacePositionBeforeMove: null,
xClickRelativeToSurface: null,
yClickRelativeToSurface: null,
activateOverviewDnD: function(e){
this.disableSurfaceMove();
this.surfacePositionBeforeMove = domGeom.position(this._spwOverviewWidgetSurfaceDiv);
this.xClickRelativeToSurface = e.clientX - this.surfacePositionBeforeMove.x;
this.yClickRelativeToSurface = e.clientY - this.surfacePositionBeforeMove.y;
//attach document onmousemove to move overview
this.own(
this.documentMouseMoveHandler = on(this.spwViewer.domNode, "mousemove", lang.hitch(this, this.onOverviewSurfaceMoving)),
//attach document onmouseup to finalize overview DnD
this.documentMouseUpHandler = on(this.spwViewer.domNode, "mouseup", lang.hitch(this, this.onOverviewSurfaceEndMove))
);
},
isOverviewSurfaceFull: function(){
var wrapperPos = domGeom.position(this.surfaceWrapperDiv);
var surfacePos = domGeom.position(this._spwOverviewWidgetSurfaceDiv);
if(wrapperPos.w == 0 && wrapperPos.h == 0){
return false;
}
var inBottomBound = (surfacePos.y+surfacePos.h) >= (wrapperPos.y+wrapperPos.h);
var inRightBound = (surfacePos.x+surfacePos.w) >= (wrapperPos.x+wrapperPos.w);
var surfaceGreater = surfacePos.w >= wrapperPos.w && surfacePos.h >= wrapperPos.h;
var inTopLeftBound = surfacePos.x <= wrapperPos.x && surfacePos.y <= wrapperPos.y;
return surfaceGreater && inTopLeftBound && inBottomBound && inRightBound;
},
onOverviewSurfaceMoving: function(e){
var x = e.clientX;
var y = e.clientY;
var wrapperPos = domGeom.position(this.surfaceWrapperDiv);
var newTop = y - wrapperPos.y-this.yClickRelativeToSurface;
var newLeft = x - wrapperPos.x-this.xClickRelativeToSurface;
if(wrapperPos.w > this.surfacePositionBeforeMove.w){
//Configure surface right boundary position
newLeft = ((newLeft+this.surfacePositionBeforeMove.w) > this.oWidth) ? (this.oWidth-this.surfacePositionBeforeMove.w) : newLeft;
//Configure surface left boundary position
newLeft = (newLeft > 0) ? newLeft:0;
} else {
//Configure surface to disable the "out of box" capability (right)
newLeft = newLeft > (this.oWidth - 10) ? (this.oWidth - 10) : newLeft;
//Configure surface to disable the "out of box" capability (left)
newLeft = newLeft < (10-this.surfacePositionBeforeMove.w) ? (10-this.surfacePositionBeforeMove.w) : newLeft;
}
if(wrapperPos.h > this.surfacePositionBeforeMove.h){
//Configure surface bottom boundary position
newTop = ((newTop+this.surfacePositionBeforeMove.h) > this.oHeight) ? (this.oHeight - this.surfacePositionBeforeMove.h) : newTop;
//Configure surface top boundary position
newTop = (newTop > 0) ? newTop:0;
} else {
//Configure surface to disable the "out of box" capability (bottom)
newTop = newTop > (this.oHeight - 10) ? (this.oHeight - 10) : newTop;
//Configure surface to disable the "out of box" capability (top)
newTop = newTop < (10-this.surfacePositionBeforeMove.h) ? (10-this.surfacePositionBeforeMove.h) : newTop;
}
domStyle.set(this._spwOverviewWidgetSurfaceDiv, {top: newTop + "px", left: newLeft + "px"});
},
disableSurfaceMove: function(){
if(this.documentMouseMoveHandler != null)
this.documentMouseMoveHandler.remove();
if(this.documentMouseUpHandler != null)
this.documentMouseUpHandler.remove();
},
onOverviewSurfaceEndMove: function(e){
this.disableSurfaceMove();
var surfacePos = domGeom.position(this._spwOverviewWidgetSurfaceDiv);
var wrapperPos = domGeom.position(this.surfaceWrapperDiv);
var xmin = surfacePos.x - wrapperPos.x;
var ymin = this.oHeight - (surfacePos.y - wrapperPos.y + surfacePos.h);
this.setExtentForOverviewSurface(xmin, ymin);
},
onClickOpen: function() {
this.spwViewer.trackEvent("spw.widgets.SpwOverviewWidget", "onClickOpen");
this._spwOverviewWidgetOpenImg.style.display = "none";
this._spwOverviewWidgetCloseImg.style.display = "block";
this._spwOverviewWidgetOverviewImg.style.display = "block";
this._spwOverviewWidgetSurfaceDiv.style.display = "block";
this.hideOrShowPositionDiv();
},
onClickClose: function() {
this.spwViewer.trackEvent("spw.widgets.SpwOverviewWidget", "onClickClose");
this._spwOverviewWidgetOpenImg.style.display = "block";
this._spwOverviewWidgetCloseImg.style.display = "none";
this._spwOverviewWidgetOverviewImg.style.display = "none";
this._spwOverviewWidgetSurfaceDiv.style.display = "none";
},
setExtentForOverviewSurface: function(xmin, ymin){
xmin = parseInt((xmin* (this.oXmax - this.oXmin))/this.oWidth);
ymin = parseInt((ymin * (this.oYmax - this.oYmin))/this.oHeight);
var x1 = this.oXmin + xmin;
var x2 = x1 + this.widthOnExtent;
var y1 = this.oYmin + ymin;
var y2 = y1 + this.heightOnExtent;
this.spwViewer.get('spwMap').zoomToBbox(x1,x2,y1,y2);
},
widthOnExtent: null,
heightOnExtent: null,
onSpwMapExtentChanged: function(e) {
var xmin = e.extent.xmin, xmax = e.extent.xmax, ymin = e.extent.ymin, ymax = e.extent.ymax;
this.widthOnExtent = parseInt(xmax-xmin);
this.heightOnExtent = parseInt(ymax-ymin);
xmin = parseInt((xmin - this.oXmin) * (this.oWidth / (this.oXmax - this.oXmin)));
xmax = parseInt((xmax - this.oXmin) * (this.oWidth / (this.oXmax - this.oXmin)));
ymin = parseInt((ymin - this.oYmin) * (this.oHeight / (this.oYmax - this.oYmin)));
ymax = parseInt((ymax - this.oYmin) * (this.oHeight / (this.oYmax - this.oYmin)));
var w = xmax-xmin;
var h = ymax-ymin;
ymin = this.oHeight - ymin - h;
if ( h < 10 || w < 10){
this._spwOverviewWidgetSurfaceDiv.style.top = ymin-10 + "px";
this._spwOverviewWidgetSurfaceDiv.style.left = xmin + "px";
this._spwOverviewWidgetSurfaceDiv.style.width = "20px";
this._spwOverviewWidgetSurfaceDiv.style.height = "20px";
this._spwOverviewWidgetSurfaceDiv.style.backgroundImage = "url('" + this.imagesPath + "cur368.gif')";
this._spwOverviewWidgetSurfaceDiv.style.backgroundRepeat = "no-repeat";
} else {
this._spwOverviewWidgetSurfaceDiv.style.top = ymin + "px";
this._spwOverviewWidgetSurfaceDiv.style.left = xmin + "px";
this._spwOverviewWidgetSurfaceDiv.style.width = w + "px";
this._spwOverviewWidgetSurfaceDiv.style.height = h + "px";
this._spwOverviewWidgetSurfaceDiv.style.backgroundImage = "url('" + this.imagesPath + "alpha.png')";
this._spwOverviewWidgetSurfaceDiv.style.backgroundRepeat = "repeat";
}
this.hideOrShowPositionDiv();
},
hideOrShowPositionDiv: function(){
if(this.isOverviewSurfaceFull()){
this._spwOverviewWidgetSurfaceDiv.style.visibility = "hidden";
} else {
this._spwOverviewWidgetSurfaceDiv.style.visibility = "visible";
}
}
});
});