Context Navigation

source: Dev/branches/jQueryUI/client/RGraph/libraries/RGraph.common.zoom.js @ 249

Last change on this file since 249 was 249, checked in by hendrikvanantwerpen, 13 years ago

This one's for Subversion, because it's so close...

First widget (stripped down sequencer).
Seperated client and server code in two direcotry trees.

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: