Context Navigation

source: Dev/trunk/RGraph/libraries/RGraph.common.zoom.js @ 77

Last change on this file since 77 was 77, checked in by fpvanagthoven, 14 years ago
RGraph
File size: 42.2 KB

Line
1	/**
2	* o------------------------------------------------------------------------------o
3	* \| This file is part of the RGraph package - you can learn more at: \|
4	* \| \|
5	* \| http://www.rgraph.net \|
6	* \| \|
7	* \| This package is licensed under the RGraph license. For all kinds of business \|
8	* \| purposes there is a small one-time licensing fee to pay and for non \|
9	* \| commercial purposes it is free to use. You can read the full license here: \|
10	* \| \|
11	* \| http://www.rgraph.net/LICENSE.txt \|
12	* o------------------------------------------------------------------------------o
13	*/
14
15	if (typeof(RGraph) == 'undefined') RGraph = {isRGraph:true,type:'common'};
16
17
18	/**
19	* Installs the event handlers for zooming an area of the graph
20	*
21	* @param object obj Your graph object
22	*/
23	RGraph.ZoomArea = function (obj)
24	{
25	if (obj.Get('chart.zoom.mode') == 'area') {
26
27	var canvas = obj.canvas;
28	var context = obj.context;
29
30	obj.canvas.style.cursor = 'crosshair';
31
32	RGraph.Register(obj);
33
34
35	canvas.onmousedown = function(e)
36	{
37	var canvas = e.target;
38	var coords = RGraph.getMouseXY(e);
39	var obj = canvas.__object__;
40
41	if (RGraph.Registry.Get('chart.zoomed.area.div')) {
42	RGraph.Registry.Get('chart.zoomed.area.div').style.display = 'none';
43	}
44
45	if (typeof(RGraph.Registry.Get('chart.zoomed.area.divs')) == null) {
46	RGraph.Registry.Set('chart.zoomed.area.divs', []);
47
48	} else {
49
50	var divs = RGraph.Registry.Get('chart.zoomed.area.divs');
51
52	if (divs && divs.length) {
53	for (var i=0; i<divs.length; ++i) {
54	if (divs[i]) {
55	divs[i].style.display = 'none';
56	divs[i] = null;
57	}
58	}
59	}
60	}
61
62	/**
63	* Create the indicator DIV
64	*/
65	var canvasXY = RGraph.getCanvasXY(canvas);
66	var areaDiv = document.createElement('DIV');
67	areaDiv.__canvas__ = canvas;
68	areaDiv.style.position = 'absolute';
69	areaDiv.style.left = canvasXY[0] + coords[0] + 'px'
70	areaDiv.style.top = canvasXY[1] + coords[1] + 'px'
71	areaDiv.style.width = 0;
72	areaDiv.style.height = 0;
73	areaDiv.style.border = '1px solid black';
74	areaDiv.style.backgroundColor = 'rgba(220,220,220,0.3)';
75	areaDiv.style.display = 'none';
76
77	areaDiv.onmouseover = function (e)
78	{
79	setTimeout(function () {e.target.style.opacity = 0.8;}, 50);
80	setTimeout(function () {e.target.style.opacity = 0.6;}, 100);
81	setTimeout(function () {e.target.style.opacity = 0.4;}, 150);
82	setTimeout(function () {e.target.style.opacity = 0.2;}, 200);
83	setTimeout(function () {e.target.style.opacity = 0;}, 250);
84	setTimeout(function () {e.target.style.display = 'none';}, 300);
85	setTimeout(function () {e.target = null;}, 350);
86	}
87
88	document.body.appendChild(areaDiv);
89
90
91	RGraph.Registry.Set('chart.zoomed.area.div', null);
92	RGraph.Registry.Set('chart.zoomed.area.mousedown', coords);
93	RGraph.Registry.Set('chart.zoomed.area.areadiv', areaDiv);
94	}
95
96
97	var window_onmousemove = function (e)
98	{
99	var startCoords = RGraph.Registry.Get('chart.zoomed.area.mousedown');
100
101	if (startCoords && startCoords.length) {
102
103	var coords = RGraph.getMouseXY(e);
104	var canvasXY = RGraph.getCanvasXY(e.target);
105	var obj = e.target.__object__;
106	var context = obj.context;
107	var canvas = obj.canvas;
108	var startx = startCoords[0];
109	var starty = startCoords[1];
110	var endx = coords[0];
111	var endy = coords[1];
112	var width = endx - startx;
113	var height = endy - starty;
114	var areaDiv = RGraph.Registry.Get('chart.zoomed.area.areadiv');
115
116	if (width >= 0 && height >= 0) {
117
118	if (width > 5 && height > 5) {
119	areaDiv.style.width = (width - 15) + 'px';
120	areaDiv.style.height = (height - 15) + 'px';
121	areaDiv.style.display = 'inline';
122	} else {
123	areaDiv.style.display = 'none';
124	}
125
126	} else if (width < -5 \|\| height < -5) {
127
128	var canvasCoords = RGraph.getCanvasXY(canvas);
129	var noticeDiv = document.createElement('DIV');
130
131	noticeDiv.style.position = 'absolute';
132	noticeDiv.style.top = 0;
133	noticeDiv.style.left = 0;
134	noticeDiv.style.zIndex = 99;
135	noticeDiv.style.border = '1px dashed black';
136	noticeDiv.style.backgroundColor = '#ffc1c1';
137	noticeDiv.style.MozBoxShadow = '0 0 5px #999';
138	noticeDiv.style.WebkitBoxShadow = '0 0 5px #999';
139	noticeDiv.style.boxShadow = '0 0 5px #999';
140	noticeDiv.style.padding = '2px';
141	noticeDiv.innerHTML = 'Zoom goes right and down';
142	document.body.appendChild(noticeDiv);
143
144	// Reposition the warning
145	noticeDiv.style.top = canvasCoords[1] + startCoords[1] - noticeDiv.offsetHeight + 'px';
146	noticeDiv.style.left = canvasCoords[0] + startCoords[0] - (noticeDiv.offsetWidth / 2) + 'px';
147	noticeDiv.style.width = noticeDiv.offsetWidth + 'px';
148
149	setTimeout(function () {noticeDiv.style.opacity = 0.8;}, 2100);
150	setTimeout(function () {noticeDiv.style.opacity = 0.6;}, 2200);
151	setTimeout(function () {noticeDiv.style.opacity = 0.4;}, 2300);
152	setTimeout(function () {noticeDiv.style.opacity = 0.2;}, 2400);
153	setTimeout(function () {noticeDiv.style.display = 'none';}, 2500);
154	setTimeout(function () {noticeDiv = null;}, 2600);
155	}
156	}
157	}
158	window.addEventListener('mousemove', window_onmousemove, false);
159	RGraph.AddEventListener(canvas.id, 'window_mousemove', window_onmousemove);
160
161
162	canvas.onmouseup = function (e)
163	{
164	RGraph.FixEventObject(e);
165
166	var startCoords = RGraph.Registry.Get('chart.zoomed.area.mousedown');
167	var coords = RGraph.getMouseXY(e);
168
169	// Do the zooming here
170	if (RGraph.Registry.Get('chart.zoomed.area.mousedown')) {
171
172	//RGraph.Redraw();
173
174	RGraph.Registry.Get('chart.zoomed.area.areadiv').style.display = 'none';
175	RGraph.Registry.Get('chart.zoomed.area.areadiv').style.left = '-1000px';
176	RGraph.Registry.Get('chart.zoomed.area.areadiv').style.top = '-1000px';
177	RGraph.Registry.Set('chart.zoomed.area.areadiv', null);
178
179	if (coords[0] < startCoords[0] \|\| coords[1] < startCoords[1]) {
180	RGraph.Registry.Set('chart.zoomed.area.mousedown', false);
181	return;
182	}
183
184	var canvas = e.target;
185	var obj = canvas.__object__;
186	var context = obj.context;
187	var canvasCoords = RGraph.getCanvasXY(e.target);
188	var coords = RGraph.getMouseXY(e);
189	var startCoords = RGraph.Registry.Get('chart.zoomed.area.mousedown');
190	var startx = startCoords[0];
191	var starty = startCoords[1];
192	var endx = coords[0] - 15;
193	var endy = coords[1] - 15;
194	var width = Math.abs(endx - startx);
195	var height = Math.abs(endy - starty);
196	var factor = obj.Get('chart.zoom.factor') - 1;
197
198	var img = document.createElement('IMG');
199	img.src = canvas.toDataURL();
200	img.style.position = 'relative';
201	img.style.left = (factor + 1) * -1 * startx + 'px';
202	img.style.top = (factor + 1) * -1 * starty + 'px';
203	img.width = (factor + 1) * canvas.width;
204	img.height = (factor + 1) * canvas.height;
205
206	var div = document.createElement('DIV');
207	div.__object__ = obj;
208	div.className = 'RGraph_zoomed_area';
209	div.style.position = 'absolute';
210	div.style.backgroundColor = 'white';
211	div.style.cursor = 'move';
212
213	div.style.top = e.pageY + 'px';
214	div.style.left = e.pageX + 'px';
215	div.origWidth = width;
216	div.origHeight = height;
217	div.style.width = width + 'px';
218	div.style.height = height + 'px';
219	div.style.border = '1px solid black';
220	div.style.boxShadow = '0 0 15px black';
221	div.style.MozBoxShadow = '0 0 15px black';
222	div.style.WebkitBoxShadow = '0 0 15px black';
223	div.style.overflow = 'hidden';
224	div.style.opacity = 0;
225	div.style.zIndex = 99;
226
227	document.body.appendChild(div);
228	div.appendChild(img);
229
230
231	/**
232	* This facilitates expanding the zoomed area once visible (the double click)
233	*/
234	div.ondblclick = function (event)
235	{
236	var event = RGraph.FixEventObject(event);
237	var img = event.target;
238	var div = event.target.parentNode;
239
240	var current_width = div.offsetWidth
241	var current_height = div.offsetHeight
242	var target_width = img.offsetWidth;
243	var target_height = img.offsetHeight;
244	var diff_width = target_width - current_width;
245	var diff_height = target_height - current_height;
246
247	var img_offset_left = parseInt(img.offsetLeft);
248	var img_offset_top = parseInt(img.offsetTop);
249
250	// Global vars on purpose so the timers can access them
251	__zoomed_div_style__ = div.style;
252	__zoomed_img_style__ = img.style;
253
254	setTimeout("__zoomed_div_style__.left = parseInt(__zoomed_div_style__.left) - " + (diff_width * 0.1) + " + 'px'", 50);
255	setTimeout("__zoomed_div_style__.left = parseInt(__zoomed_div_style__.left) - " + (diff_width * 0.1) + " + 'px'", 100);
256	setTimeout("__zoomed_div_style__.left = parseInt(__zoomed_div_style__.left) - " + (diff_width * 0.1) + " + 'px'", 150);
257	setTimeout("__zoomed_div_style__.left = parseInt(__zoomed_div_style__.left) - " + (diff_width * 0.1) + " + 'px'", 200);
258	setTimeout("__zoomed_div_style__.left = parseInt(__zoomed_div_style__.left) - " + (diff_width * 0.1) + " + 'px'", 250);
259
260	setTimeout("__zoomed_div_style__.top = parseInt(__zoomed_div_style__.top) - " + (diff_height * 0.1) + " + 'px'", 50);
261	setTimeout("__zoomed_div_style__.top = parseInt(__zoomed_div_style__.top) - " + (diff_height * 0.1) + " + 'px'", 100);
262	setTimeout("__zoomed_div_style__.top = parseInt(__zoomed_div_style__.top) - " + (diff_height * 0.1) + " + 'px'", 150);
263	setTimeout("__zoomed_div_style__.top = parseInt(__zoomed_div_style__.top) - " + (diff_height * 0.1) + " + 'px'", 200);
264	setTimeout("__zoomed_div_style__.top = parseInt(__zoomed_div_style__.top) - " + (diff_height * 0.1) + " + 'px'", 250);
265
266	setTimeout("__zoomed_div_style__.width = parseInt(__zoomed_div_style__.width) + " + (diff_width * 0.2) + " + 'px'", 50);
267	setTimeout("__zoomed_div_style__.width = parseInt(__zoomed_div_style__.width) + " + (diff_width * 0.2) + " + 'px'", 100);
268	setTimeout("__zoomed_div_style__.width = parseInt(__zoomed_div_style__.width) + " + (diff_width * 0.2) + " + 'px'", 150);
269	setTimeout("__zoomed_div_style__.width = parseInt(__zoomed_div_style__.width) + " + (diff_width * 0.2) + " + 'px'", 200);
270	setTimeout("__zoomed_div_style__.width = parseInt(__zoomed_div_style__.width) + " + (diff_width * 0.2) + " + 'px'", 250);
271
272	setTimeout("__zoomed_div_style__.height = parseInt(__zoomed_div_style__.height) + " + (diff_height * 0.2) + " + 'px'", 50);
273	setTimeout("__zoomed_div_style__.height = parseInt(__zoomed_div_style__.height) + " + (diff_height * 0.2) + " + 'px'", 100);
274	setTimeout("__zoomed_div_style__.height = parseInt(__zoomed_div_style__.height) + " + (diff_height * 0.2) + " + 'px'", 150);
275	setTimeout("__zoomed_div_style__.height = parseInt(__zoomed_div_style__.height) + " + (diff_height * 0.2) + " + 'px'", 200);
276	setTimeout("__zoomed_div_style__.height = parseInt(__zoomed_div_style__.height) + " + (diff_height * 0.2) + " + 'px'", 250);
277
278	// Move the image within the div
279	setTimeout("__zoomed_img_style__.left = " + (img_offset_left * 0.8) + " + 'px'", 50);
280	setTimeout("__zoomed_img_style__.left = " + (img_offset_left * 0.6) + " + 'px'", 100);
281	setTimeout("__zoomed_img_style__.left = " + (img_offset_left * 0.4) + " + 'px'", 150);
282	setTimeout("__zoomed_img_style__.left = " + (img_offset_left * 0.2) + " + 'px'", 200);
283	setTimeout("__zoomed_img_style__.left = 0", 250);
284
285	setTimeout("__zoomed_img_style__.top = " + (img_offset_top * 0.8) + " + 'px'", 50);
286	setTimeout("__zoomed_img_style__.top = " + (img_offset_top * 0.6) + " + 'px'", 100);
287	setTimeout("__zoomed_img_style__.top = " + (img_offset_top * 0.4) + " + 'px'", 150);
288	setTimeout("__zoomed_img_style__.top = " + (img_offset_top * 0.2) + " + 'px'", 200);
289	setTimeout("__zoomed_img_style__.top = 0", 250);
290
291	div.ondblclick = null;
292	}
293	/**
294	* Make the zoomed bit draggable
295	*/
296	div.onmousedown = function (e)
297	{
298	e = RGraph.FixEventObject(e);
299
300	var div = e.target.parentNode;
301	var img = div.childNodes[0];
302
303	if (e.button == 0 \|\| e.button == 1 ) {
304
305	div.__offsetx__ = e.offsetX + img.offsetLeft;
306	div.__offsety__ = e.offsetY + img.offsetTop;
307
308	RGraph.Registry.Set('chart.mousedown', div);
309	RGraph.Registry.Set('chart.button', 0);
310
311	} else {
312
313	img.__startx__ = e.pageX;
314	img.__starty__ = e.pageY;
315
316	img.__originalx__ = img.offsetLeft;
317	img.__originaly__ = img.offsetTop;
318
319	RGraph.Registry.Set('chart.mousedown', img);
320	RGraph.Registry.Set('chart.button', 2);
321
322	/**
323	* Don't show a context menu when the zoomed area is right-clicked on
324	*/
325	window.oncontextmenu = function (e)
326	{
327	e = RGraph.FixEventObject(e);
328
329	e.stopPropagation();
330
331	// [18th July 2010] Is this reallly necessary?
332	window.oncontextmenu = function (e)
333	{
334	return true;
335	}
336
337
338	return false;
339	}
340	}
341
342	e.stopPropagation();
343
344	return false;
345	}
346
347	window.onmouseup = function (e)
348	{
349	RGraph.Registry.Set('chart.mousedown', false);
350	}
351
352	window.onmousemove = function (e)
353	{
354	if (RGraph.Registry.Get('chart.mousedown') && RGraph.Registry.Get('chart.button') == 0) {
355
356	var div = RGraph.Registry.Get('chart.mousedown');
357
358	var x = e.pageX - div.__offsetx__;
359	var y = e.pageY - div.__offsety__;
360
361	div.style.left = x + 'px';
362	div.style.top = y + 'px';
363
364	} else if (RGraph.Registry.Get('chart.mousedown') && RGraph.Registry.Get('chart.button') == 2) {
365
366	var img = RGraph.Registry.Get('chart.mousedown');
367
368	var x = img.__originalx__ + e.pageX - img.__startx__;
369	var y = img.__originaly__ + e.pageY - img.__starty__;
370
371	img.style.left = x + 'px';
372	img.style.top = y + 'px';
373	}
374	}
375	// End dragging code
376
377
378	var divs = RGraph.Registry.Get('chart.zoomed.area.divs');
379	if (typeof(divs) == 'object') {
380	divs.push(div);
381	} else {
382	RGraph.Registry.Set('chart.zoomed.area.divs', [div])
383	}
384
385	// Create the background
386	var bg = document.createElement('DIV');
387	bg.style.position = 'fixed'
388	bg.style.zIndex = 98;
389	bg.style.top = 0;
390	bg.style.left = 0;
391	bg.style.backgroundColor = '#999';
392	bg.style.opacity = 0;
393	bg.style.width = (screen.width + 100) + 'px';
394	bg.style.height = (screen.height + 100) + 'px';
395	document.body.appendChild(bg);
396
397	bg.onclick = function (e)
398	{
399	div.style.display = 'none';
400	bg.style.display = 'none';
401	div = null;
402	bg = null;
403	}
404
405
406	setTimeout(function (){div.style.opacity = 0.2;}, 50);
407	setTimeout(function (){div.style.opacity = 0.4;}, 100);
408	setTimeout(function (){div.style.opacity = 0.6;}, 150);
409	setTimeout(function (){div.style.opacity = 0.8;}, 200);
410	setTimeout(function (){div.style.opacity = 1.0;}, 250);
411
412	setTimeout(function () {div.style.left = canvasCoords[0] + startx - (width * factor * 0.1) + 'px'}, 50);
413	setTimeout(function () {div.style.left = canvasCoords[0] + startx - (width * factor * 0.2) + 'px'}, 100);
414	setTimeout(function () {div.style.left = canvasCoords[0] + startx - (width * factor * 0.3) + 'px'}, 150);
415	setTimeout(function () {div.style.left = canvasCoords[0] + startx - (width * factor * 0.4) + 'px'}, 200);
416	setTimeout(function () {div.style.left = canvasCoords[0] + startx - (width * factor * 0.5) + 'px'}, 250);
417
418	setTimeout(function () {div.style.top = canvasCoords[1] + starty - (height * factor * 0.1) + 'px'}, 50);
419	setTimeout(function () {div.style.top = canvasCoords[1] + starty - (height * factor * 0.2) + 'px'}, 100);
420	setTimeout(function () {div.style.top = canvasCoords[1] + starty - (height * factor * 0.3) + 'px'}, 150);
421	setTimeout(function () {div.style.top = canvasCoords[1] + starty - (height * factor * 0.4) + 'px'}, 200);
422	setTimeout(function () {div.style.top = canvasCoords[1] + starty - (height * factor * 0.5) + 'px'}, 250);
423
424	setTimeout(function () {div.style.width = width + (width * factor * 0.2) + 'px'}, 50);
425	setTimeout(function () {div.style.width = width + (width * factor * 0.4) + 'px'}, 100);
426	setTimeout(function () {div.style.width = width + (width * factor * 0.6) + 'px'}, 150);
427	setTimeout(function () {div.style.width = width + (width * factor * 0.8) + 'px'}, 200);
428	setTimeout(function () {div.style.width = width + (width * factor * 1.0) + 'px'}, 250);
429
430	setTimeout(function () {div.style.height = height + (height * factor * 0.2) + 'px'}, 50);
431	setTimeout(function () {div.style.height = height + (height * factor * 0.4) + 'px'}, 100);
432	setTimeout(function () {div.style.height = height + (height * factor * 0.6) + 'px'}, 150);
433	setTimeout(function () {div.style.height = height + (height * factor * 0.8) + 'px'}, 200);
434	setTimeout(function () {div.style.height = height + (height * factor * 1.0) + 'px'}, 250);
435
436	setTimeout(function (){bg.style.opacity = 0.1;}, 50);
437	setTimeout(function (){bg.style.opacity = 0.2;}, 100);
438	setTimeout(function (){bg.style.opacity = 0.3;}, 150);
439	setTimeout(function (){bg.style.opacity = 0.4;}, 200);
440	setTimeout(function (){bg.style.opacity = 0.5;}, 250);
441
442	RGraph.Registry.Set('chart.zoomed.area.bg', bg);
443	RGraph.Registry.Set('chart.zoomed.area.img', img);
444	RGraph.Registry.Set('chart.zoomed.area.div', div);
445	RGraph.Registry.Set('chart.zoomed.area.mousedown', null);
446	}
447
448	/**
449	* Fire the zoom event
450	*/
451	RGraph.FireCustomEvent(obj, 'onzoom');
452	}
453
454	canvas.onmouseout = function (e)
455	{
456	RGraph.Registry.Set('chart.zoomed.area.areadiv', null);
457	RGraph.Registry.Set('chart.zoomed.area.mousedown', null);
458	RGraph.Registry.Set('chart.zoomed.area.div', null);
459	}
460	}
461	}
462
463
464	/**
465	* This function sets up the zoom window if requested
466	*
467	* @param obj object The graph object
468	*/
469	RGraph.ShowZoomWindow = function (obj)
470	{
471	if (obj.Get('chart.zoom.mode') == 'thumbnail') {
472	RGraph.ZoomWindow(obj.canvas);
473	}
474
475	if (obj.Get('chart.zoom.mode') == 'area') {
476	RGraph.ZoomArea(obj);
477	}
478	}
479
480
481	/**
482	* Installs the evnt handler for the zoom window/THUMBNAIL
483	*/
484	RGraph.ZoomWindow = function (canvas)
485	{
486	canvas.onmousemove = function (e)
487	{
488	e = RGraph.FixEventObject(e);
489
490	var obj = e.target.__object__;
491	var canvas = obj.canvas;
492	var context = obj.context;
493	var coords = RGraph.getMouseXY(e);
494
495	/**
496	* Create the DIV
497	*/
498	if (!RGraph.Registry.Get('chart.zoomed.div')) {
499
500	var div = document.createElement('div');
501	div.className = 'RGraph_zoom_window';
502	div.style.width = obj.Get('chart.zoom.thumbnail.width') + 'px';
503	div.style.height = obj.Get('chart.zoom.thumbnail.height') + 'px';
504
505	// Added back in on the 17th December
506	div.style.border = '2px dashed gray';
507
508	div.style.position = 'absolute';
509	div.style.overflow = 'hidden';
510	div.style.backgroundColor = 'white';
511
512	// Initially the zoomed layer should be off-screen
513	div.style.left = '-1000px';
514	div.style.top = '-1000px';
515
516	// Should these be 0? No.
517	div.style.borderRadius = '5px';
518	div.style.MozBorderRadius = '5px';
519	div.style.WebkitBorderRadius = '5px';
520
521	if (obj.Get('chart.zoom.shadow')) {
522	div.style.boxShadow = 'rgba(0,0,0,0.5) 3px 3px 3px';
523	div.style.MozBoxShadow = 'rgba(0,0,0,0.5) 3px 3px 3px';
524	div.style.WebkitBoxShadow = 'rgba(0,0,0,0.5) 3px 3px 3px';
525	}
526
527	//div.style.opacity = 0.2;
528	div.__object__ = obj;
529	document.body.appendChild(div);
530
531	/**
532	* Get the canvas as an image
533	*/
534	var img = document.createElement('img');
535	img.width = obj.canvas.width * obj.Get('chart.zoom.factor');
536	img.height = obj.canvas.height * obj.Get('chart.zoom.factor');
537	img.style.position = 'relative';
538	img.style.backgroundColor = 'white';
539	img.__object__ = obj;
540
541	div.appendChild(img);
542
543	RGraph.Registry.Set('chart.zoomed.div', div);
544	RGraph.Registry.Set('chart.zoomed.img', img);
545
546	// Fade the zoom in
547	setTimeout("RGraph.Registry.Get('chart.zoomed.div').__object__.canvas.onmouseover()", 5);
548
549	} else {
550
551	div = RGraph.Registry.Get('chart.zoomed.div');
552	img = RGraph.Registry.Get('chart.zoomed.img');
553	}
554
555	// Make sure the image is up-to-date
556	img.src = canvas.toDataURL();
557
558	/**
559	* Ensure the div is visible
560	*/
561	if (div && div.style.opacity < 1) {
562	setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 1", 400);
563	}
564
565	/**
566	* Get the canvas x/y coords
567	*/
568	var c = RGraph.getCanvasXY(obj.canvas);
569	var x = c[0];
570	var y = c[1];
571
572	/**
573	* Position the div and img
574	*/
575	var offset = 7;
576
577	div.style.left = (e.pageX - obj.Get('chart.zoom.thumbnail.width') - offset) + 'px';
578	div.style.top = (e.pageY - obj.Get('chart.zoom.thumbnail.height') - offset) + 'px';
579
580	var l = (obj.Get('chart.zoom.thumbnail.width') / 2) - (coords[0] * obj.Get('chart.zoom.factor'));
581	var t = (obj.Get('chart.zoom.thumbnail.height') / 2) - (coords[1] * obj.Get('chart.zoom.factor'));
582
583	// More positioning
584	img.style.left = (l + ((obj.Get('chart.zoom.thumbnail.width') / 2) * obj.Get('chart.zoom.factor'))) + 'px';
585	img.style.top = (t + ((obj.Get('chart.zoom.thumbnail.height') / 2) * obj.Get('chart.zoom.factor'))) + 'px';
586
587	/**
588	* Fire the onzoom event
589	*/
590	RGraph.FireCustomEvent(obj, 'onzoom');
591	}
592
593	/**
594	* The onmouseover event. Evidently. Fades the zoom window in
595	*/
596	canvas.onmouseover = function (e)
597	{
598	var div = RGraph.Registry.Get('chart.zoomed.div');
599
600	// ???
601	if (!div) return;
602
603	var obj = div.__object__;
604
605	// Used for the enlargement animation
606	var targetWidth = obj.Get('chart.zoom.thumbnail.width');
607	var targetHeight = obj.Get('chart.zoom.thumbnail.height');
608
609	div.style.width = 0;
610	div.style.height = 0;
611
612	if (obj.Get('chart.zoom.fade.in')) {
613
614	RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.2;
615	setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.4", 100);
616	setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.6", 200);
617	setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.8", 300);
618	setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 1", 400);
619
620	} else {
621
622	setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 1", 1);
623	}
624
625	// The enlargement animation frames
626	setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.width = '" + (targetWidth * (1/5) ) + "px'", 75);
627	setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.width = '" + (targetWidth * (2/5) ) + "px'", 150);
628	setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.width = '" + (targetWidth * (3/5) ) + "px'", 225);
629	setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.width = '" + (targetWidth * (4/5) ) + "px'", 300);
630	setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.width = '" + (targetWidth * (5/5) ) + "px'", 325);
631
632	setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.height = '" + (targetHeight * (1/5) ) + "px'", 75);
633	setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.height = '" + (targetHeight * (2/5) ) + "px'", 150);
634	setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.height = '" + (targetHeight * (3/5) ) + "px'", 225);
635	setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.height = '" + (targetHeight * (4/5) ) + "px'", 300);
636	setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.height = '" + (targetHeight * (5/5) ) + "px'", 375);
637	}
638
639	canvas.onmouseout = function (e)
640	{
641	if (RGraph.Registry.Get('chart.zoomed.div') && RGraph.Registry.Get('chart.zoomed.div').__object__.Get('chart.zoom.fade.out')) {
642
643	RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.8;
644	setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.6", 100);
645	setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.4", 200);
646	setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.2", 300);
647	setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0", 400);
648
649	// Get rid of the zoom window
650	setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.left = '-400px'", 400);
651	setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.top = '-400px'", 400);
652
653	} else {
654	// Get rid of the zoom window
655	if (RGraph.Registry.Get('chart.zoomed.div')) {
656	setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.left = '-400px'", 1);
657	setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.top = '-400px'", 41);
658	} }
659	}
660	}
661
662
663	/**
664	* A zoom in function
665	*
666	* @param e object The event object
667	*/
668	RGraph.Zoom = function (e)
669	{
670	e = RGraph.FixEventObject(e);
671
672	/**
673	* Show the zoom window
674	*/
675	//if ((e.target.__canvas__ && e.target.__canvas__.__object__.Get('chart.zoom.mode') == 'thumbnail') \|\| (e.target.parentNode.__canvas__ && e.target.parentNode.__canvas__.__object__.Get('chart.zoom.mode') == 'thumbnail') ) {
676	// return RGraph.ZoomWindow(e);
677	//}
678	if (e && e.target && e.target.__canvas__) {
679	var canvas = e.target.__canvas__;
680
681	/*******************************************************
682	* This is here to facilitate zooming by just a single left click
683	*******************************************************/
684	} else if (e && e.target && e.target.__object__) {
685	var canvas = e.target.__object__.canvas;
686	e.stopPropagation(); // Hmmmm
687	}
688
689	// Fallback for MSIE9
690	if (!canvas) {
691	var registry_canvas = RGraph.Registry.Get('chart.contextmenu').__canvas__;
692	if (registry_canvas) {
693	var canvas = registry_canvas;
694	}
695	}
696
697	var context = canvas.getContext('2d');
698	var obj = canvas.__object__;
699	var dataurl = canvas.toDataURL();
700	var tmp = canvas;
701	var coords = RGraph.getCanvasXY(canvas);
702	var factor = obj.Get('chart.zoom.factor') - 1;
703
704	var x = coords[0];
705	var y = coords[1];
706
707	var img = document.createElement('img');
708	img.className = 'RGraph_zoomed_canvas';
709	img.style.border = '3px solid gray';
710	img.style.width = canvas.width + 'px';
711	img.style.height = canvas.height + 'px';
712	img.style.position = 'absolute';
713	img.style.left = x + 'px';
714	img.style.top = y + 'px';
715	img.style.backgroundColor = 'white';
716	img.style.opacity = obj.Get('chart.zoom.fade.in') ? 0 : 1;
717	img.style.zIndex = 99;
718	img.src = dataurl;
719	document.body.appendChild(img);
720
721	//RGraph.Registry.Set('chart.zoomedimage', img);
722	// Store the zoomed image in a global var - NOT the registry
723	__zoomedimage__ = img;
724	__zoomedimage__.obj = obj;
725
726	// Image onclick should not hide the image
727	img.onclick = function (e)
728	{
729	e = RGraph.FixEventObject(e);
730	e.stopPropagation();
731	return false;
732	}
733
734	setTimeout(function () {window.onclick = RGraph.HideZoomedCanvas;}, 1);
735
736	var width = parseInt(canvas.width);
737	var height = parseInt(canvas.height);
738	var frames = obj.Get('chart.zoom.frames');
739	var delay = obj.Get('chart.zoom.delay');
740
741	// Increase the width over 10 frames - center
742	if (obj.Get('chart.zoom.hdir') == 'center') {
743
744	for (var i=1; i<=frames; ++i) {
745	var newWidth = width * factor * (i/frames) + width;
746	var rightHandEdge = x + canvas.width;
747	var newLeft = (x + (canvas.width / 2)) - (newWidth / 2);
748
749	setTimeout("__zoomedimage__.style.width = '" + String(newWidth) + "px'; __zoomedimage__.style.left = '" + newLeft + "px'", i * delay);
750	}
751
752	// Left
753	} else if (obj.Get('chart.zoom.hdir') == 'left') {
754	for (var i=1; i<=frames; ++i) {
755	var newWidth = width * factor * (i/frames) + width;
756	var rightHandEdge = x + canvas.width;
757	var newLeft = rightHandEdge - newWidth;
758
759	setTimeout("__zoomedimage__.style.width = '" + String(newWidth) + "px'; __zoomedimage__.style.left = '" + newLeft + "px'", i * delay);
760	}
761
762	// Right (default)
763	} else {
764	for (var i=1; i<=frames; ++i) {
765	var newWidth = width * factor * (i/frames) + width;
766	setTimeout("__zoomedimage__.style.width = '" + String(newWidth) + "px'", i * delay);
767	}
768	}
769
770	// Increase the height over 10 frames - up
771	if (obj.Get('chart.zoom.vdir') == 'up') {
772	for (var i=1; i<=frames; ++i) {
773	var newHeight = (height * factor * (i/frames)) + height;
774	var bottomEdge = y + canvas.height;
775	var newTop = bottomEdge - newHeight;
776
777	setTimeout("__zoomedimage__.style.height = '" + String(newHeight) + "px'; __zoomedimage__.style.top = '" + newTop + "px'", i * delay);
778	}
779
780	// center
781	} else if (obj.Get('chart.zoom.vdir') == 'center') {
782	for (var i=1; i<=frames; ++i) {
783	var newHeight = (height * factor * (i/frames)) + height;
784	var bottomEdge = (y + (canvas.height / 2)) + (newHeight / 2);
785	var newTop = bottomEdge - newHeight;
786
787	setTimeout("__zoomedimage__.style.height = '" + String(newHeight) + "px'; __zoomedimage__.style.top = '" + newTop + "px'", i * delay);
788	}
789
790	// Down (default
791	} else {
792	for (var i=1; i<=frames; ++i) {
793	setTimeout("__zoomedimage__.style.height = '" + String(height * factor * (i/frames) + height) + "px'", i * delay);
794	}
795	}
796
797	// If enabled, increase the opactity over 10 frames
798	if (obj.Get('chart.zoom.fade.in')) {
799	for (var i=1; i<=frames; ++i) {
800	setTimeout("__zoomedimage__.style.opacity = " + String(i / frames), i * delay);
801	}
802	}
803
804	// If stipulated, produce a shadow
805	if (obj.Get('chart.zoom.shadow')) {
806	for (var i=1; i<=frames; ++i) {
807	setTimeout("__zoomedimage__.style.boxShadow = 'rgba(128,128,128," + Number(i / frames) / 2 + ") 0 0 15px'", i * delay);
808	setTimeout("__zoomedimage__.style.MozBoxShadow = 'rgba(128,128,128," + Number(i / frames) / 2 + ") 0 0 15px'", i * delay);
809	setTimeout("__zoomedimage__.style.WebkitBoxShadow = 'rgba(128,128,128," + Number(i / frames) / 2 + ") 0 0 15px'", i * delay);
810	}
811	}
812
813	/**
814	* The onmouseout event. Hides the zoom window. Fades the zoom out
815	*/
816	canvas.onmouseout = function (e)
817	{
818	if (RGraph.Registry.Get('chart.zoomed.div') && RGraph.Registry.Get('chart.zoomed.div').__object__.Get('chart.zoom.fade.out')) {
819
820	RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.8;
821	setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.6", 100);
822	setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.4", 200);
823	setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.2", 300);
824	setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0", 400);
825
826	// Get rid of the zoom window
827	setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.left = '-400px'", 400);
828	setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.top = '-400px'", 400);
829
830	} else {
831
832	// Get rid of the zoom window
833	if (RGraph.Registry.Get('chart.zoomed.div')) {
834	setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.left = '-400px'", 1);
835	setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.top = '-400px'", 1);
836	}
837	}
838	}
839
840	// The background
841	if (obj.Get('chart.zoom.background')) {
842	var div = document.createElement('DIV');
843	div.style.backgroundColor = '#999';
844	div.style.opacity = 0;
845	div.style.position = 'fixed';
846	div.style.top = 0;
847	div.style.left = 0;
848	div.style.width = (screen.width + 100) + 'px';
849	div.style.height = (screen.height + 100) + 'px';
850	div.style.zIndex = 98;
851
852	// Hides the zoomed caboodle
853	div.oncontextmenu = function (e)
854	{
855	return RGraph.HideZoomedCanvas(e);
856	}
857
858	// 30th July 2010 - Is this necessary?
859	//for (var i=1; i<=frames; ++i) {
860	// setTimeout('__zoomedbackground__.style.opacity = ' + Number(0.04 * i), i * delay);
861	//
862	// // MSIE doesn't support zoom
863	// //setTimeout('__zoomedbackground__.style.filter = "progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=135); Alpha(opacity=10)"', 50);
864	//}
865
866	div.origHeight = div.style.height;
867
868	document.body.appendChild(div);
869
870	__zoomedbackground__ = div;
871
872	// If the window is resized, hide the zoom
873	//window.onresize = RGraph.HideZoomedCanvas;
874
875	for (var i=1; i<=frames; ++i) {
876	setTimeout("__zoomedbackground__.style.opacity = " + (Number(i / frames) * 0.5), i * delay);
877	}
878	}
879
880	/**
881	* Fire the onzoom event
882	*/
883	RGraph.FireCustomEvent(obj, 'onzoom');
884	}

Note: See TracBrowser for help on using the repository browser.

Download in other formats: