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