Retour à la documentation
/**
* @class spw.widgets.SpwDrawingWidget
*/
define([ "dojo/_base/declare", "spw/api/SpwBaseTemplatedWidget", "dojo/text!./templates/SpwDrawingWidget.html",
"spw/api/SpwViewer", "esri/toolbars/draw", "esri/toolbars/edit", "esri/layers/GraphicsLayer",
"esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol",
"esri/graphic", "esri/geometry/Polyline", "esri/geometry/Polygon", "spw/api/MessageManager", "dijit/registry",
"dojo/_base/lang", "dojo/query", "dojo/on", "dojo/dom", "dojo/dom-construct", "dojo/_base/Color",
"esri/symbols/TextSymbol", "esri/symbols/Font", "dojo/i18n!./nls/SpwDrawingWidget",
"dijit/form/ToggleButton", "dijit/form/CheckBox", "dijit/form/DropDownButton", "dijit/TooltipDialog", "dojox/widget/ColorPicker" ],
function(declare, SpwBaseTemplatedWidget, template, SpwViewer, Draw, Edit, GraphicsLayer,
SimpleFillSymbol, SimpleMarkerSymbol, SimpleLineSymbol, Graphic, Polyline, Polygon, MessageManager,
registry, lang, query, on, dom, domConstruct, Color, TextSymbol, Font, labels){
return declare("spw.widgets.SpwDrawingWidget", [SpwBaseTemplatedWidget], /** @lends spw.widgets.SpwDrawingWidget.prototype */{
templateString: template,
labels: labels,
drawToolbar: null,
editToolbar: null,
currentFillSymbol: null,
currentLineSymbol: null,
currentMarkerSymbol: null,
_currentActivatedButton: null,
_drawLayer: null,
/**
* @constructs
*/
constructor : function(config) {
this.iconClass = "SpwDrawingWidgetIcon";
this.widgetTitle = this.labels.panelTitle;
this.height = "255px";
this.width = "255px";
this.resizable = false;
this._drawLayer = new GraphicsLayer();
this._drawLayer.spatialReference = config.spwViewer.get('spatialReference');
this.drawToolbar = new Draw(config.spwViewer.get('spwMap').get('esriMap'));
this.own(
this.drawToolbar.on("draw-end", lang.hitch(this, this.addToMap)),
this._drawLayer
);
this.editToolbar = new Edit(config.spwViewer.get('spwMap').get('esriMap'));
},
postCreate: function(){
this.inherited(arguments);
},
onActivate: function(){
this.inherited(arguments);
this.spwViewer.get('spwMap').get('esriMap').addLayer(this._drawLayer);
},
onDeactivate: function(){
this.inherited(arguments);
this.spwViewer.get('spwMap').get('esriMap').removeLayer(this._drawLayer);
this.deactivateEdit();
this.deactivateDraw();
},
/**
* BEGIN - Color Management Part
*/
contentColorChanged : function(e){
this.showpickContentVal().style.background = e;
this.changeCurrentDrawSymbol();
if(this._editedGraphic){
var newSymbol = this.getCurrentSymbolForSelection();
if(newSymbol){
this._editedGraphic.setSymbol(newSymbol);
}
}
},
showpickLineVal: function(){
return query(".showpickLineVal", this.btpickerLine.domNode)[0];
},
showpickContentVal: function(){
return query(".showpickContentVal", this.btpickerContent.domNode)[0];
},
lineColorChanged : function(e){
this.showpickLineVal().style.background = e;
this.changeCurrentDrawSymbol();
if(this._editedGraphic){
var newSymbol = this.getCurrentSymbolForSelection();
if(newSymbol){
this._editedGraphic.setSymbol(newSymbol);
}
}
},
changeCurrentDrawSymbol: function(){
var lineColor = new Color(this.showpickLineVal().style.backgroundColor).toRgb();
var contentColor = new Color(this.showpickContentVal().style.backgroundColor).toRgb();
contentColor.push(0.25);
this.currentFillSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT, lineColor, 2), contentColor);
this.drawToolbar.setFillSymbol(this.currentFillSymbol);
this.currentMarkerSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 10, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, lineColor, 1), contentColor,0.25);
this.drawToolbar.setMarkerSymbol(this.currentMarkerSymbol);
this.currentLineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, lineColor, 1);
this.drawToolbar.setLineSymbol(this.currentLineSymbol);
},
/**
* END - Color Management Part
*/
/**
* BEGIN - Esri Draw Toolbar Management Part
*/
_keepProportion: null,
activateDrawCircleHandler: null,
deactivateDrawCircleHandler: null,
drawCircleHandler: null,
activateDrawTextHandler: null,
activateDraw: function(event){
this.deactivateDraw();
var toggleButton = this.getCheckedToggleButton();
if(!toggleButton){
return false;
}
if(toggleButton.get("checked")){
this._currentActivatedButton = toggleButton;
if(toggleButton.data == Draw.CIRCLE || toggleButton.data == Draw.ELLIPSE){
this.spwViewer.get('spwMap').get('esriMap').disableMapNavigation();
this.activateDrawCircleHandler = this.spwViewer.get('spwMap').get('esriMap').on("MouseDown", lang.hitch(this, this.activateDrawCircle));
this.deactivateDrawCircleHandler = this.spwViewer.get('spwMap').get('esriMap').on("MouseUp", lang.hitch(this, this.deactivateDrawCircle));
this.drawCircleHandler = this.spwViewer.get('spwMap').get('esriMap').on("MouseDrag", lang.hitch(this, this.drawCircle));
if(toggleButton.data == Draw.CIRCLE) {
this._keepProportion = true;
} else {
this._keepProportion = false;
}
} else if(toggleButton.data == "text"){
this.activateDrawTextHandler = this.spwViewer.get('spwMap').get('esriMap').on("Click", lang.hitch(this, this.activateDrawText));
} else {
this.drawToolbar.activate(toggleButton.data);
}
}
},
getCheckedToggleButton: function(){
var toggleBtn = null;
query("span[class*='btDrawing']", this.domNode).forEach(function(btn){
if(registry.byNode(btn).get("checked")){
toggleBtn = registry.byNode(btn);
}
});
return toggleBtn;
},
deactivateDraw: function(){
if(this._currentActivatedButton){
if(this.activateDrawCircleHandler != null && this.deactivateDrawCircleHandler != null && this.drawCircleHandler != null
&& this.activateDrawCircleHandler.advice != null && this.deactivateDrawCircleHandler.advice != null && this.drawCircleHandler.advice != null){
this.spwViewer.get('spwMap').get('esriMap').enableMapNavigation();
this.activateDrawCircleHandler.remove();
this.deactivateDrawCircleHandler.remove();
this.drawCircleHandler.remove();
} else if(this.activateDrawTextHandler != null && this.activateDrawTextHandler.advice != null){
this.activateDrawTextHandler.remove();
} else {
this.drawToolbar.deactivate();
}
this._currentActivatedButton.set("checked", false);
this._currentActivatedButton = null;
}
},
addToMap: function(evt) {
var graphic = new Graphic(evt.geometry, this.getCurrentSymbolForTool());
this._drawLayer.add(graphic);
},
getCurrentSymbolForTool: function(){
switch(this._currentActivatedButton.data)
{
case Draw.POINT:
return this.currentMarkerSymbol;
case Draw.LINE:
return this.currentLineSymbol;
case Draw.POLYLINE:
return this.currentFillSymbol;
case Draw.POLYGON:
return this.currentFillSymbol;
case Draw.FREEHAND_POLYLINE:
return this.currentFillSymbol;
case Draw.FREEHAND_POLYGON:
return this.currentFillSymbol;
}
return this.currentFillSymbol;
},
/**
* BEGIN - Esri Draw Toolbar Management Part
*/
/**
* BEGIN - Drawing Circle Part
*/
_circleStartPoint: null,
_circleEndPoint: null,
_circleGraphic: null,
activateDrawCircle: function (event){
this._circleStartPoint = event.mapPoint;
},
deactivateDrawCircle: function (event){
if(this._circleGraphic){
this._circleEndPoint = event.mapPoint;
this._drawLayer.remove(this._circleGraphic);
var polyline = new Polyline(this.spwViewer.get('spwMap').get('esriMap').spatialReference);
polyline.addPath([this._circleStartPoint,this._circleEndPoint]);
this._drawLayer.add(new Graphic(this._createCircleGeometry(polyline), this.getCurrentSymbolForTool()));
this._circleGraphic = null;
}
},
drawCircle: function (event){
if(this._circleGraphic){
this._drawLayer.remove(this._circleGraphic);
}
var polyline = new Polyline(this.spwViewer.get('spwMap').get('esriMap').spatialReference);
polyline.addPath([this._circleStartPoint, event.mapPoint]);
var circle = this._createCircleGeometry(polyline);
this._circleGraphic = new Graphic(circle, this.getCurrentSymbolForTool());
this._drawLayer.add(this._circleGraphic);
},
_createCircleGeometry: function (lineGeometry) {
if ( lineGeometry.paths[0].length != 2 ) {
MessageManager.getInstance().notifyError(createCircleError);
return;
}
var p1, p2, radius, circle, ring, pts, angle;
p1 = lineGeometry.paths[0][0]; // circle center
p2 = lineGeometry.paths[0][1]; // point on the circle
radius = Math.pow((Math.pow((p2[0] - p1[0]), 2) + Math.pow((p2[1] - p1[1]), 2)), 0.5);
circle = new Polygon(lineGeometry.spatialReference);
ring = []; // point that make up the circle
pts = 40; // number of points on the circle
angle = 360/pts; // used to compute points on the circle
for(var i = 1; i <= pts; i++) {
// convert angle to raidans
var radians = i * angle * Math.PI / 180;
// add point to the circle
if(this._keepProportion){
ring.push([p1[0] + radius * Math.cos(radians), p1[1] + radius * Math.sin(radians)]);
} else {
ring.push([p1[0] + (p2[0] - p1[0]) * Math.cos(radians), p1[1] + (p2[1] - p1[1]) * Math.sin(radians)]);
}
}
// start point needs to == end point
ring.push(ring[0]);
circle.addRing(ring);
return circle;
},
/**
* END - Drawing Circle Part
*/
/**
* BEGIN - Drawing Text Part
*/
activateDrawText: function (event){
var point = event.mapPoint;
var div = domConstruct.create("div");
var inputText = domConstruct.create("input", {type:'text', value:''}, div);
var btnOk = domConstruct.create("input", {type:'button', value:'Ok'}, div);
on(btnOk, "click", lang.hitch(this, this.addTextSymbolFunction(point, inputText)));
this.spwViewer.get('spwMap').showInfoWindowAt("Entrez votre texte", div, point);
},
addTextSymbolFunction: function(point, inputText){
return lang.hitch(this, function(){
var font = new Font("12pt").setWeight(Font.WEIGHT_BOLD);
var lineColor = new Color(this.showpickLineVal().style.backgroundColor);
var symbol = new TextSymbol(inputText.value, font, lineColor);
this._drawLayer.add( new Graphic( point, symbol ) );
this.spwViewer.get('spwMap').hideInfoWindow();
});
},
/**
* END - Drawing Text Part
*/
/**
* BEGIN - Editing Management Part
*/
eraseDraw: function(event) {
if(this._editedGraphic != null) {
var tmpGraphic = this._editedGraphic;
this.deactivateEditGraphic();
this._drawLayer.remove(tmpGraphic);
} else {
MessageManager.getInstance().notifyInfo("Aucun dessin n'est sélectionné.");
}
},
editGraphicHandler: null,
activateEdit: function(event) {
var checkbox = this.btEditing;
if(!checkbox){
return false;
}
if(checkbox.get("checked")){
this.deactivateDraw();
this.editGraphicHandler = this._drawLayer.on("Click", lang.hitch(this, this.editGraphic));
query('span[class*="btDrawing"]', this.domNode).forEach(function(node){
registry.byNode(node).set("disabled", true);
});
} else {
this.deactivateEdit();
}
},
deactivateEdit: function(){
this.deactivateEditGraphic();
if(this.editGraphicHandler != null){
this.editGraphicHandler.remove();
}
query('span[class*="btDrawing"]', this.domNode).forEach(function(node){
registry.byNode(node).set("disabled", false);
});
},
_editedGraphic: null,
editGraphic: function(e){
this.deactivateEditGraphic();
this._editedGraphic = e.graphic;
this.editToolbar.activate(Edit.MOVE | Edit.ROTATE | Edit.SCALE, e.graphic);
},
deactivateEditGraphic: function(){
if(this._editedGraphic != null) {
this.editToolbar.deactivate();
this._editedGraphic = null;
}
},
getCurrentSymbolForSelection: function(){
switch(this._editedGraphic.symbol.declaredClass)
{
case "esri.symbol.SimpleFillSymbol":
return this.currentFillSymbol;
case "esri.symbol.SimpleMarkerSymbol":
return this.currentMarkerSymbol;
case "esri.symbol.SimpleLineSymbol":
return this.currentLineSymbol;
case "esri.symbol.TextSymbol":
var lineColor = new Color(this.showpickLineVal().style.backgroundColor);
this._editedGraphic.symbol.setColor(lineColor);
this._drawLayer.refresh();
return null;
}
return this.currentFillSymbol;
}
/**
* END - Editing Management Part
*/
});
});