/**
* @classdesc
* This control let you draw several shapes on the map.
*
*
* @constructor
* @extends {ol.control.Control}
*/
cercalia.Control.Draw = function() {
/**
* @private
* @type {string}
*/
this.name_ = cercalia.MapControls.DrawControl;
/**
* Class name
* @private
* @type {string}
*/
this.CLASS_NAME_ = "cercalia.Control.Draw";
/**
* @private
* @type {Object}
*/
this.dialog_ = null;
/**
* @private
* @type {ol.interaction.Draw}
*/
this.drawInteraction_ = null;
/**
* Button
* @private
* @type {Object}
*/
this.element_ = null;
var interactionType = {
POINT : 'Point',
LINESTRING : 'LineString',
POLYGON : 'Polygon',
CIRCLE : 'Circle'
};
var self = this;
this.element_ = document.createElement('div');
//this.element_.href = '#CercaliaControlDrawControl';
this.element_.className = "cercalia-big-icon cercalia-control cercalia-control-drawControl";
cercalia.jQuery(this.element_).button({icons: {primary:"cercalia-big-icon cercalia-big-icon-pencil", secondary: "" }, text: false }).attr("title", cercalia.i18n._("TOOLTIP_DRAW"));
cercalia.jQuery(this.element_).addClass("cercalia-tool-button");
this.element_.addEventListener('click', function(e) {
var isOpen;
if(cercalia.jQuery(self.element_).hasClass("cercalia-tool-button-open")) {
cercalia.jQuery(self.element_).removeClass("cercalia-tool-button-open");
cercalia.jQuery(".cercalia-tool-button.cercalia-tool-button-open").click().removeClass("cercalia-tool-button-open").button("refresh")
isOpen = true;
} else {
cercalia.jQuery(".cercalia-tool-button.cercalia-tool-button-open").click().removeClass("cercalia-tool-button-open").button("refresh");
cercalia.jQuery(self.element_).addClass("cercalia-tool-button-open");
isOpen = false;
}
var cercaliaMap = self.getMap().getCercalia();
cercaliaMap.deactivateControls();
//Si no existe la primera vez lo creamos
if ( ! self.dialog_ ) {
self.dialog_ =
cercalia.jQuery('<div />')
.addClass('dialogDrawBox')
.append(
cercalia.jQuery('<div />')
.addClass('point')
.click(function(){
self.enableDrawInteraction(this, interactionType.POINT);
})
)
.append(
cercalia.jQuery('<div />')
.addClass('line')
.click(function(){
self.enableDrawInteraction(this, interactionType.LINESTRING);
})
)
.append(
cercalia.jQuery('<div />')
.addClass('polygon')
.click(function(){
self.enableDrawInteraction(this, interactionType.POLYGON);
})
)
.append(
cercalia.jQuery('<div />')
.addClass('circle')
.click(function(){
//alert( cercalia.i18n._('Option not available') );
self.enableDrawInteraction(this, interactionType.CIRCLE);
})
)
.dialog({
height: "auto",
width: "auto",
draggable: true,
resizable: false,
position: {
my: "left top",
at: "left+55px top+64px",
of: self.getMap().getViewport()
},
appendTo: "#" + cercaliaMap.getContainerId()
});
} else { //Ya existe
isOpen ? self.dialog_.dialog('close') : self.dialog_.dialog('open');
self.dialog_.children().removeClass('active');
}
e.preventDefault();
}, false);
};
ol.inherits(cercalia.Control.Draw, ol.control.Control);
/**
* Create the button in the tools topbar
* @param {string} idTopBar Div element ID where the control will be embedded
*/
cercalia.Control.Draw.prototype.setTopBar = function (idTopBar) {
var self = this;
ol.control.Control.call(this, {
element: self.element_,
target: document.getElementById(idTopBar)
});
};
/**
*
* @param {Object} domElem
* @param {string} type
*/
cercalia.Control.Draw.prototype.enableDrawInteraction = function(domElem, type){
this.dialog_.children().removeClass('active');
cercalia.jQuery(domElem).addClass('active');
this.disableDrawInteraction();
var layer = this.getMap().getCercalia().getLayerByName('DrawLayer');
if(type){
this.drawInteraction_ = new ol.interaction.Draw({
source: layer.getSource(),
type: type
});
this.getMap().addInteraction(this.drawInteraction_);
}
};
/**
* Disable the control
*/
cercalia.Control.Draw.prototype.disableDrawInteraction = function(){
//Al clickar siempre al icono si esta activo lo desactivamos
if(this.drawInteraction_){
this.getMap().removeInteraction(this.drawInteraction_);
this.drawInteraction_ = null;
}
};
/**
* Get menu dialog element
* @return {jQuery} jQueryElement
*/
cercalia.Control.Draw.prototype.getDialog = function() {
return this.dialog_;
};