Context Navigation

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

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

Rev	Line
[77]	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: