CDPP / AMDA_IHM

Blame view

js/app/views/PlotComponents/PlotResultImage.js 6.85 KB
Edit Raw Normal View History
d0b61b72   Benjamin Renard   Show coordinates ... 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
/**
 * Project   : AMDA-NG
 * Name      : PlotResultImage.js
 * @class    amdaUI.PlotResultImage
 * @extends  Ext.Img
 * @brief    Plot Image Result definition (View)
 * @author    
 * @version  $Id: PlotResultImage.js benjamin $
 ********************************************************************************
 *    FT Id     :   Date   : Name - Description
 *******************************************************************************
 *              
 */

Ext.define('amdaPlotComp.PlotResultImage', {
    extend: 'Ext.Img',

	onMouseMove : null,
	onClick : null,
9f08f4eb   Benjamin Renard   Zoom in interacti... 
21
22
23
 
	verticalCursor   : null,
	horizontalCursor : null,
caff798e   Benjamin Renard   Fix zoom bar for ... 
24
25
26
27
 
	firstVerticalMarker    : null,
	secondVerticalMarker   : null,
	firstHorizontalMarker  : null,
	secondHorizontalMarker : null,
9f08f4eb   Benjamin Renard   Zoom in interacti... 
28
29
30
 
	
	showVerticalCursor  : true,
	showHorizontalCursor : true,
d0b61b72   Benjamin Renard   Show coordinates ... 
31
32
33
34
35
36
37
38
39
40
41
42
43
 
	
	constructor: function(config) {
		this.init(config);	    
		this.callParent(arguments);
	},
 
	refreshMe : function(){
		var el;
        if(el = this.el){
			el.dom.src = this.src + '?dc=' + new Date().getTime();
		}
	},
9f08f4eb   Benjamin Renard   Zoom in interacti... 
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
 
	createNewVerticalDiv : function() {
		var verticalDiv = new Ext.Element(document.createElement('div')); 
		verticalDiv.setStyle('position', 'absolute');
		verticalDiv.setStyle('top', '1px');
		verticalDiv.setStyle('height', '1px');
		verticalDiv.setStyle('borderLeft', '1px none rgb(0, 0, 0)');
		verticalDiv.setStyle('pointer-events', 'none');
		this.el.parent().appendChild(verticalDiv);
		return verticalDiv;
	},
	
	createNewHorizontalDiv : function() {
		var horizontalDiv = new Ext.Element(document.createElement('div')); 
		horizontalDiv.setStyle('position', 'absolute');
		horizontalDiv.setStyle('left', '1px');
		horizontalDiv.setStyle('width', '1px');
		horizontalDiv.setStyle('borderTop', "1px none rgb(0, 0, 0)");
		horizontalDiv.setStyle('pointer-events', 'none');
		this.el.parent().appendChild(horizontalDiv);
		return horizontalDiv;
	},
	
	resetCursor : function() {
		if (this.horizontalCursor)
			this.horizontalCursor.setStyle('borderTopStyle', 'none');
		if (this.verticalCursor)
			this.verticalCursor.setStyle('borderLeftStyle', 'none');
	},
	
	updateCursor : function(containerX, containerY, containerWidth, containerHeight, xPos, yPos) {
		if (this.horizontalCursor && this.showHorizontalCursor)
d0b61b72   Benjamin Renard   Show coordinates ... 
75
 
		{
9f08f4eb   Benjamin Renard   Zoom in interacti... 
76
77
78
79
 
			this.horizontalCursor.setStyle('left',containerX+'px');
			this.horizontalCursor.setStyle('top',yPos+'px');
			this.horizontalCursor.setStyle('width',containerWidth+'px');
			this.horizontalCursor.setStyle('borderTopStyle', 'solid');
d0b61b72   Benjamin Renard   Show coordinates ... 
80
 
		}
9f08f4eb   Benjamin Renard   Zoom in interacti... 
81
 
		if (this.verticalCursor && this.showVerticalCursor)
d0b61b72   Benjamin Renard   Show coordinates ... 
82
 
		{
9f08f4eb   Benjamin Renard   Zoom in interacti... 
83
84
85
86
 
			this.verticalCursor.setStyle('left',xPos+'px');
			this.verticalCursor.setStyle('top',containerY+'px');
			this.verticalCursor.setStyle('height',containerHeight+'px');
			this.verticalCursor.setStyle('borderLeftStyle', 'solid');
d0b61b72   Benjamin Renard   Show coordinates ... 
87
 
		}
d0b61b72   Benjamin Renard   Show coordinates ... 
88
89
 
	},
9f08f4eb   Benjamin Renard   Zoom in interacti... 
90
91
92
93
94
95
96
97
98
99
 
	resetZoom : function() {
		//This function is override during a startZoom call
	},
	
	stopZoom : function() {
		this.showVerticalCursor   = true;
		this.showHorizontalCursor = true;
		this.resetZoom();
		this.onClick = null;
		this.resetZoom = function() {};
d0b61b72   Benjamin Renard   Show coordinates ... 
100
101
 
	},
9f08f4eb   Benjamin Renard   Zoom in interacti... 
102
103
104
105
106
107
108
109
110
111
112
113
 
	startZoom : function(isHorizontal, containerPos, containerSize, onSelectFirst, onSelectSecond) {
		this.resetZoom();
		
		//this.showVerticalCursor   = isHorizontal;
		//this.showHorizontalCursor = !isHorizontal;
		this.resetCursor();
		
		var me = this;
		var selectFirst = null;
		var selectSecond = null;
		
		selectSecond = function(x, y)
d0b61b72   Benjamin Renard   Show coordinates ... 
114
 
		{
9f08f4eb   Benjamin Renard   Zoom in interacti... 
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
 
			if (isHorizontal)
			{
				me.secondVerticalMarker.setStyle('left',x+'px');
				me.secondVerticalMarker.setStyle('top',containerPos+'px');
				me.secondVerticalMarker.setStyle('height',containerSize+'px');
				me.secondVerticalMarker.setStyle('borderLeftStyle', 'dotted');
				if (onSelectSecond)
					onSelectSecond(x);
			}
			else
			{
				me.secondHorizontalMarker.setStyle('left',containerPos+'px');
				me.secondHorizontalMarker.setStyle('top',y+'px');
				me.secondHorizontalMarker.setStyle('width',containerSize+'px');
				me.secondHorizontalMarker.setStyle('borderTopStyle', 'dotted');
				if (onSelectSecond)
					onSelectSecond(y);
			}
			
			me.onClick = selectFirst;
		};
		
		selectFirst = function(x, y)
d0b61b72   Benjamin Renard   Show coordinates ... 
138
 
		{
9f08f4eb   Benjamin Renard   Zoom in interacti... 
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
 
			if (isHorizontal)
			{
				me.secondVerticalMarker.setStyle('borderLeftStyle', 'none');
				me.firstVerticalMarker.setStyle('left',x+'px');
				me.firstVerticalMarker.setStyle('top',containerPos+'px');
				me.firstVerticalMarker.setStyle('height',containerSize+'px');
				me.firstVerticalMarker.setStyle('borderLeftStyle', 'dotted');
				if (onSelectFirst)
					onSelectFirst(x);
			}
			else
			{
				me.secondHorizontalMarker.setStyle('borderLeftStyle', 'none');
				me.firstHorizontalMarker.setStyle('left',containerPos+'px');
				me.firstHorizontalMarker.setStyle('top',y+'px');
				me.firstHorizontalMarker.setStyle('width',containerSize+'px');
				me.firstHorizontalMarker.setStyle('borderTopStyle', 'dotted');
				if (onSelectFirst)
					onSelectFirst(y);
			}
			
			me.onClick = selectSecond;
		};
		
		this.resetZoom = function()
		{
			me.firstVerticalMarker.setStyle('borderLeftStyle', 'none');
			me.secondVerticalMarker.setStyle('borderLeftStyle', 'none');
			me.firstHorizontalMarker.setStyle('borderTopStyle', 'none');
			me.secondHorizontalMarker.setStyle('borderTopStyle', 'none');
			
			me.resetCursor();
			me.onClick = selectFirst;
		};
		
		this.onClick = selectFirst;
d0b61b72   Benjamin Renard   Show coordinates ... 
175
176
177
178
179
180
181
182
183
184
 
	},
	
	init : function(config) {
		var me = this;
				
		var myConf = {
			src    : config.imageUrl,
			width  : config.width,
            height : config.height,
			onMouseMove : config.onMouseMove,
9f08f4eb   Benjamin Renard   Zoom in interacti... 
185
 
			onContextMenu : config.onContextMenu,
d0b61b72   Benjamin Renard   Show coordinates ... 
186
187
188
 
            listeners : {
				render :  function(img, eOpts){
					me.refreshMe();
9f08f4eb   Benjamin Renard   Zoom in interacti... 
189
190
191
192
193
194
195
196
197
198
 
					//Create cursor
					me.verticalCursor         = me.createNewVerticalDiv();
					me.horizontalCursor       = me.createNewHorizontalDiv();
					//Create markers (used for zoom)
					me.firstVerticalMarker    = me.createNewVerticalDiv();
					me.secondVerticalMarker   = me.createNewVerticalDiv();
					me.firstHorizontalMarker  = me.createNewHorizontalDiv();
					me.secondHorizontalMarker = me.createNewHorizontalDiv();
					
					me.resetCursor();
d0b61b72   Benjamin Renard   Show coordinates ... 
199
200
201
202
203
204
205
 
				},
				el: {
					click: function(e, t, eOpts) {
						if (me.onClick)
							me.onClick(e.getX()-me.getPosition()[0], e.getY()-me.getPosition()[1]);
					},
					mousemove: function(e, t, eOpts){
9f08f4eb   Benjamin Renard   Zoom in interacti... 
206
207
 
						me.verticalCursor.setStyle('left', (e.getX()-me.getPosition()[0])+"px");
						me.horizontalCursor.setStyle('top', (e.getY()-me.getPosition()[1])+"px");
d0b61b72   Benjamin Renard   Show coordinates ... 
208
209
 
						if (me.onMouseMove)
							me.onMouseMove(e.getX()-me.getPosition()[0], e.getY()-me.getPosition()[1]);
9f08f4eb   Benjamin Renard   Zoom in interacti... 
210
211
212
213
214
215
216
217
218
 
					},
					contextmenu : function(event, t, eOpts ) {
						event = event || window.event;
						if (event.preventDefault) {
							event.preventDefault();
						}
						if (me.onContextMenu)
							me.onContextMenu(event.getX(), event.getY(), event.getX()-me.getPosition()[0], event.getY()-me.getPosition()[1]);
						return false;
d0b61b72   Benjamin Renard   Show coordinates ... 
219
220
221
222
223
224
225
 
					}
				}
			}
		};
		
		Ext.apply (this , Ext.apply (arguments, myConf));
	}
caff798e   Benjamin Renard   Fix zoom bar for ... 
226
 
});