Source: widgets/SpwConcentricCirclesWidget.js

/**
 * @class spw.widgets.SpwConcentricCirclesWidget
 */
define([ "dojo/_base/declare", "spw/api/SpwBaseTemplatedWidget", "dojo/text!./templates/SpwConcentricCirclesWidget.html",
         "esri/layers/GraphicsLayer",
         "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleMarkerSymbol",
         "esri/graphic", "esri/geometry/Circle", "esri/geometry/Point", "spw/api/MessageManager", "dijit/registry", "dijit/form/NumberSpinner",
         "dojo/_base/lang", "dojo/query", "dojo/on", "dojo/dom", "dojo/dom-construct", "dojo/dom-style", "dojo/_base/Color",
         "esri/symbols/TextSymbol", "esri/symbols/Font", "dojo/i18n!./nls/SpwConcentricCirclesWidget",
         "dojox/widget/ColorPicker", "dijit/TooltipDialog", "dijit/form/DropDownButton", "dijit/form/Button", "dijit/form/FilteringSelect"],
         function(declare, SpwBaseTemplatedWidget, template, GraphicsLayer,
        		 SimpleFillSymbol, SimpleLineSymbol, SimpleMarkerSymbol, Graphic, Circle, Point, MessageManager,
        		 registry, NumberSpinner, lang, query, on, dom, domConstruct, domStyle, Color, TextSymbol, Font, labels){

	return declare("spw.widgets.SpwConcentricCirclesWidget", [SpwBaseTemplatedWidget], /** @lends spw.widgets.SpwConcentricCirclesWidget.prototype */{

		templateString: template,
		labels: labels,

		resetDrawingOnActivation: false,
		keepDrawingOnDeactivate: false,

		_circlesLayer: null,
		_mapClickHandler: null,
        _color: null,
        _font: null,

		/**
	     * @constructs
	     */
		constructor : function(config) {
			this.iconClass = "SpwConcentricCirclesWidgetIcon";
			this.widgetTitle = this.labels.panelTitle;
			this.height = "210px";
			this.width = "275px";
			this.resizable = false;

			this._circlesLayer = new GraphicsLayer();
			this._circlesLayer.spatialReference = config.spwViewer.get("spatialReference");
			this._font = new Font("16pt", Font.STYLE_NORMAL, Font.VARIANT_NORMAL, Font.WEIGHT_BOLD, "Courier");
			this._color = "red";
		},

		postCreate: function(){
			this.inherited(arguments);
		},

		onActivate: function(){
			this.inherited(arguments);
			this.spwViewer.get("spwMap").get("esriMap").addLayer(this._circlesLayer);
			if(this.resetDrawingOnActivation && this._circlesLayer) {
				this._circlesLayer.clear();
			}
		},

		onDeactivate: function(){
			this.inherited(arguments);
			if(!this.keepDrawingOnDeactivate){
				this.spwViewer.get("spwMap").get("esriMap").removeLayer(this._circlesLayer);
			}
			this.leaveDrawMode();
		},

		onChangeColor: function(e) {
			this._color = e;
			query(".colorPreviewIcon", this.ddbColor.domNode).forEach(function(node){
                node.style.backgroundColor = e;
            });
		},

		onClickBtnDessiner: function(){
			this.spanClickCarte.style.display = "";
			domStyle.set(this.btnEffacer.domNode, "display", "none");
			domStyle.set(this.btnAnnuler.domNode, "display", "");
			this.btnDessiner.set("disabled", true);

			this.spwViewer.get("spwMap").setMapCursor("crosshair");
    		if (this._mapClickHandler) {
                this._mapClickHandler.remove();
            }
            this._mapClickHandler = this.spwViewer.get('spwMap').get('esriMap').on("click", lang.hitch(this, this.drawCircles));
		},

		onClickBtnEffacer: function(){
			if(this._circlesLayer) {
				this._circlesLayer.clear();
			}
		},

		onClickBtnAnnuler: function(){
			this.leaveDrawMode();
		},

		drawCircles: function(mouseEvent) {
			this.leaveDrawMode();

			var rayon = this.nsRayon.value;
			var nombre = this.nsNombre.value;
			var epaisseur = this.nsEpaisseur.value;

			var color1 = new Color(this._color);
			var c = color1.toRgb();
			var color2 = new Color([c[0], c[1], c[2], 0.4]);

			var multiplicateur = (this.selectUnites.get('value') == "KM") ? 1000 : 1;

			var symbol1 = new SimpleFillSymbol().setColor(null).outline.setColor(color1).setWidth(epaisseur);
			var symbol2 = new SimpleFillSymbol().setColor(null).outline.setColor(color2).setWidth(epaisseur);

			this._circlesLayer.add(
				new Graphic(
					new Point(
						mouseEvent.mapPoint.x,
						mouseEvent.mapPoint.y,
						mouseEvent.mapPoint.spatialReference
					),
					new SimpleMarkerSymbol(
						SimpleMarkerSymbol.STYLE_CROSS,
						10,
						new SimpleLineSymbol(
							SimpleLineSymbol.STYLE_SOLID,
							color1,
							2
						),
					    color1
					)
				)
			);

			for(var i=1;i<=nombre; i++) {
				var circle = new Circle({
					  center: mouseEvent.mapPoint,
					  radius: rayon * multiplicateur * i
				  });

		          this._circlesLayer.add(
	        		  new Graphic(
        				  circle,
        				  i%2==0 ? symbol1 : symbol2
	        		  )
		          );

		          if(i == nombre) {
		        	  this.spwViewer.get('spwMap').get('esriMap').setExtent(circle.getExtent(),true);
		          }

				this._circlesLayer.add(
					new Graphic(
						new Point(
								mouseEvent.mapPoint.x + (Math.cos(-45) * (rayon * multiplicateur * i)),
								mouseEvent.mapPoint.y + (Math.sin(-45) * (rayon * multiplicateur * i)),
								mouseEvent.mapPoint.spatialReference),
						new TextSymbol(
							"" + (rayon * i) + ((this.selectUnites.get('value') == "KM") ? "Km" : "m"),
							this._font,
							color1
						).setOffset(40,0)
					)
				);
			}
		},

		leaveDrawMode: function() {
			this.spwViewer.get('spwMap').resetCursor();
            if (this._mapClickHandler) {
                this._mapClickHandler.remove();
            }
            this.spanClickCarte.style.display = "none";
			domStyle.set(this.btnEffacer.domNode, "display", "");
			domStyle.set(this.btnAnnuler.domNode, "display", "none");
			this.btnDessiner.set("disabled", false);
		}
	});
});