1 /**
  2  * @fileOverview  
  3  * Copyright (c) 2013 Regione Autonoma della Sardegna
  4  * Published under the GPL license.<br>
  5  * See <a href="https://sardegnageoportale.it/webgis/license.txt">https://sardegnageoportale.it/webgis/license.txt</a>
  6  * for the full text of the license.
  7  * @version 0.1
  8  */
  9 
 10 /**
 11  * @namespace framework.widgets.doublemap
 12  */
 13 Ext.namespace('framework.widgets.control');
 14 
 15 /**
 16  *  Compass control to select an angle for 45° views
 17  *  
 18  *  @name_ Compass
 19  *  @class Ccontrol to select an angle for 45° views
 20  *  @constructor
 21  *  @extends <a target="_blank" href="http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.Button">Ext.Button</a>
 22  */
 23 framework.widgets.control.Compass = OpenLayers.Class(OpenLayers.Control.Panel,
 24     /** 
 25      * @lends framework.widgets.control.Compass.prototype 
 26      */
 27         {
 28           /**
 29            * Constant for modes enum
 30            */
 31           MODES: { COMPASS: {id: 0, name: 'Compass'}, ORTHO: {id: 1, name:'Orthophoto'}},
 32           /**
 33            * Current direction id
 34            * @private
 35            * @type int
 36            */
 37           directionId: 0,
 38           /**
 39            * Mode: can be compass or orthophoto
 40            */
 41           mode: null,
 42           /**
 43           * Start direction. Fixed North (N)
 44           * 
 45           * @public
 46           * @type String
 47           */          
 48           initDirection: 'N',
 49           /**
 50            * Prefix for element css class
 51            * @private
 52            * @type String
 53            */
 54           classPrefix: null,
 55           /**
 56            * Initialize the component
 57            * @param {Object} options Parameters for object creation
 58            * @private
 59            */
 60           initialize: function(options) {
 61             options.autoActivate = false;
 62             this.mode = this.MODES.COMPASS;
 63             this.classPrefix = options.displayClass;
 64             //toward north
 65             this.directionId = 0;
 66             options.displayClass += this.initDirection;
 67             this.oldCssClass = options.displayClass;
 68             options.eventListeners = {
 69               'activate': function(evt) {
 70                 Ext.get(this.id).on('mousedown', this.onClick, this);
 71               },
 72               'deactivate': function() {
 73                 Ext.get(this.id).un('mousedown', this.onClick, this);
 74               }};
 75             OpenLayers.Control.Panel.prototype.initialize.apply(this, [options]);
 76           },
 77           /**
 78            * Encapsulate the object in an Extjs Element
 79            * @return {Ext.Element} ExtJs element
 80            * @public
 81            */
 82           getElement: function() {
 83             return Ext.get(this.id);
 84           },
 85           /**
 86            * Returns current direction
 87            * @return {String} current direction
 88            * @public
 89            */
 90           getDirection: function() {
 91             if (this.initDirection == "N")
 92                var dirs = ['N', 'E', 'S', 'W'];
 93             else
 94                var dirs = ['NE', 'SE', 'SW', 'NW'];
 95             return dirs[this.directionId];
 96           },
 97           /**
 98            * Setting direction
 99            *
100            * @public
101            */
102           setDirection: function(dir) {
103             if (this.initDirection == "N")
104                var dirs = ['N', 'E', 'S', 'W'];
105             else
106                var dirs = ['NE', 'SE', 'SW', 'NW'];
107             this.directionId = dirs.indexOf(dir);
108           },
109           /**
110            * Refreshes css class using current direction info
111            * @private
112            */
113           refreshCssClass: function() {
114             var newClass = (this.mode === this.MODES.COMPASS) ?
115                 this.classPrefix + this.getDirection() : 
116                 this.classPrefix + this.mode.name;
117             this.getElement().replaceClass(this.oldCssClass, newClass);
118             this.oldCssClass = newClass;
119           },
120           /**
121            * Changes mode from compass to orthophoto and back
122            * @public
123            */
124           switchMode: function() {
125             this.mode = (this.mode === this.MODES.COMPASS) ? this.MODES.ORTHO : this.MODES.COMPASS;
126             this.refreshCssClass();
127           },
128           /**
129            * Rotates compass left
130            * @public
131            */
132           rotateLeft: function() {
133             if (this.directionId === 0) {
134               this.directionId = 3;
135             } else {
136               this.directionId--;
137             }
138             this.refreshCssClass();
139           },
140           /**
141            * Rotates compass right
142            * @public
143            */
144           rotateRight: function() {
145             if (this.directionId === 3) {
146               this.directionId = 0;
147             } else {
148               this.directionId++;
149             }
150             this.refreshCssClass();
151             
152           },
153           /**
154            * Management of click event
155            * @param {Object} evt event parameters
156            * @private
157            */
158           onClick: function(evt) {
159             if (!Ext.isEmpty(evt)) {
160               var self = this.getElement();
161               var x = evt.xy[0] - self.getLeft();
162               var y = evt.xy[1] - self.getTop();
163               if ((this.mode === this.MODES.COMPASS) && x <= 15) {
164                 //rotate left event
165                 this.rotateLeft();
166                 this.events.triggerEvent('rotateLeft', this.getDirection());
167               } else if ((this.mode === this.MODES.COMPASS) && x >= 35) {
168                 //rotate right event
169                 this.rotateRight();
170                 this.events.triggerEvent('rotateRight', this.getDirection());
171               } else {
172                 //orthophoto
173                 this.switchMode();
174                 this.events.triggerEvent('modeSwitched', this.mode);
175               }
176             }
177             evt.preventDefault();
178             evt.stopPropagation();
179           }
180         });
181 
182     Ext.reg('framework_compass', framework.widgets.control.Compass);
183 
184 
185 
186 
187