diff options
Diffstat (limited to 'schall/static/RGraph/libraries/RGraph.common.zoom.js')
| -rw-r--r-- | schall/static/RGraph/libraries/RGraph.common.zoom.js | 886 |
1 files changed, 886 insertions, 0 deletions
diff --git a/schall/static/RGraph/libraries/RGraph.common.zoom.js b/schall/static/RGraph/libraries/RGraph.common.zoom.js new file mode 100644 index 0000000..2f797b9 --- /dev/null +++ b/schall/static/RGraph/libraries/RGraph.common.zoom.js @@ -0,0 +1,886 @@ + /** + * o------------------------------------------------------------------------------o + * | This file is part of the RGraph package - you can learn more at: | + * | | + * | http://www.rgraph.net | + * | | + * | This package is licensed under the RGraph license. For all kinds of business | + * | purposes there is a small one-time licensing fee to pay and for non | + * | commercial purposes it is free to use. You can read the full license here: | + * | | + * | http://www.rgraph.net/LICENSE.txt | + * o------------------------------------------------------------------------------o + */ + + if (typeof(RGraph) == 'undefined') RGraph = {isRGraph:true,type:'common'}; + + + /** + * Installs the event handlers for zooming an area of the graph + * + * @param object obj Your graph object + */ + RGraph.ZoomArea = function (obj) + { + if (obj.Get('chart.zoom.mode') == 'area') { + + var canvas = obj.canvas; + var context = obj.context; + + obj.canvas.style.cursor = 'crosshair'; + + RGraph.Register(obj); + + + canvas.onmousedown = function(e) + { + var canvas = e.target; + var coords = RGraph.getMouseXY(e); + var obj = canvas.__object__; + + if (RGraph.Registry.Get('chart.zoomed.area.div')) { + RGraph.Registry.Get('chart.zoomed.area.div').style.display = 'none'; + } + + if (typeof(RGraph.Registry.Get('chart.zoomed.area.divs')) == null) { + RGraph.Registry.Set('chart.zoomed.area.divs', []); + + } else { + + var divs = RGraph.Registry.Get('chart.zoomed.area.divs'); + + if (divs && divs.length) { + for (var i=0; i<divs.length; ++i) { + if (divs[i]) { + divs[i].style.display = 'none'; + divs[i] = null; + } + } + } + } + + /** + * Create the indicator DIV + */ + var canvasXY = RGraph.getCanvasXY(canvas); + var areaDiv = document.createElement('DIV'); + areaDiv.__canvas__ = canvas; + areaDiv.style.position = 'absolute'; + areaDiv.style.left = canvasXY[0] + coords[0] + 'px' + areaDiv.style.top = canvasXY[1] + coords[1] + 'px' + areaDiv.style.width = 0; + areaDiv.style.height = 0; + areaDiv.style.border = '1px solid black'; + areaDiv.style.backgroundColor = 'rgba(220,220,220,0.3)'; + areaDiv.style.display = 'none'; + + areaDiv.onmouseover = function (e) + { + setTimeout(function () {e.target.style.opacity = 0.8;}, 50); + setTimeout(function () {e.target.style.opacity = 0.6;}, 100); + setTimeout(function () {e.target.style.opacity = 0.4;}, 150); + setTimeout(function () {e.target.style.opacity = 0.2;}, 200); + setTimeout(function () {e.target.style.opacity = 0;}, 250); + setTimeout(function () {e.target.style.display = 'none';}, 300); + setTimeout(function () {e.target = null;}, 350); + } + + document.body.appendChild(areaDiv); + + + RGraph.Registry.Set('chart.zoomed.area.div', null); + RGraph.Registry.Set('chart.zoomed.area.mousedown', coords); + RGraph.Registry.Set('chart.zoomed.area.areadiv', areaDiv); + } + + + var window_onmousemove = function (e) + { + var startCoords = RGraph.Registry.Get('chart.zoomed.area.mousedown'); + + if (startCoords && startCoords.length) { + + var coords = RGraph.getMouseXY(e); + var canvasXY = RGraph.getCanvasXY(e.target); + var obj = e.target.__object__; + var context = obj.context; + var canvas = obj.canvas; + var startx = startCoords[0]; + var starty = startCoords[1]; + var endx = coords[0]; + var endy = coords[1]; + var width = endx - startx; + var height = endy - starty; + var areaDiv = RGraph.Registry.Get('chart.zoomed.area.areadiv'); + + if (width >= 0 && height >= 0) { + + if (width > 5 && height > 5) { + areaDiv.style.width = (width - 15) + 'px'; + areaDiv.style.height = (height - 15) + 'px'; + areaDiv.style.display = 'inline'; + } else { + areaDiv.style.display = 'none'; + } + + } else if (width < -5 || height < -5) { + + var canvasCoords = RGraph.getCanvasXY(canvas); + var noticeDiv = document.createElement('DIV'); + + noticeDiv.style.position = 'absolute'; + noticeDiv.style.top = 0; + noticeDiv.style.left = 0; + noticeDiv.style.zIndex = 99; + noticeDiv.style.border = '1px dashed black'; + noticeDiv.style.backgroundColor = '#ffc1c1'; + noticeDiv.style.MozBoxShadow = '0 0 5px #999'; + noticeDiv.style.WebkitBoxShadow = '0 0 5px #999'; + noticeDiv.style.boxShadow = '0 0 5px #999'; + noticeDiv.style.padding = '2px'; + noticeDiv.innerHTML = 'Zoom goes right and down'; + document.body.appendChild(noticeDiv); + + // Reposition the warning + noticeDiv.style.top = canvasCoords[1] + startCoords[1] - noticeDiv.offsetHeight + 'px'; + noticeDiv.style.left = canvasCoords[0] + startCoords[0] - (noticeDiv.offsetWidth / 2) + 'px'; + noticeDiv.style.width = noticeDiv.offsetWidth + 'px'; + + setTimeout(function () {noticeDiv.style.opacity = 0.8;}, 2100); + setTimeout(function () {noticeDiv.style.opacity = 0.6;}, 2200); + setTimeout(function () {noticeDiv.style.opacity = 0.4;}, 2300); + setTimeout(function () {noticeDiv.style.opacity = 0.2;}, 2400); + setTimeout(function () {noticeDiv.style.display = 'none';}, 2500); + setTimeout(function () {noticeDiv = null;}, 2600); + } + } + } + window.addEventListener('mousemove', window_onmousemove, false); + RGraph.AddEventListener(canvas.id, 'window_mousemove', window_onmousemove); + + + canvas.onmouseup = function (e) + { + RGraph.FixEventObject(e); + + var startCoords = RGraph.Registry.Get('chart.zoomed.area.mousedown'); + var coords = RGraph.getMouseXY(e); + + // Do the zooming here + if (RGraph.Registry.Get('chart.zoomed.area.mousedown')) { + + //RGraph.Redraw(); + + RGraph.Registry.Get('chart.zoomed.area.areadiv').style.display = 'none'; + RGraph.Registry.Get('chart.zoomed.area.areadiv').style.left = '-1000px'; + RGraph.Registry.Get('chart.zoomed.area.areadiv').style.top = '-1000px'; + RGraph.Registry.Set('chart.zoomed.area.areadiv', null); + + if (coords[0] < startCoords[0] || coords[1] < startCoords[1]) { + RGraph.Registry.Set('chart.zoomed.area.mousedown', false); + return; + } + + var canvas = e.target; + var obj = canvas.__object__; + var context = obj.context; + var canvasCoords = RGraph.getCanvasXY(e.target); + var coords = RGraph.getMouseXY(e); + var startCoords = RGraph.Registry.Get('chart.zoomed.area.mousedown'); + var startx = startCoords[0]; + var starty = startCoords[1]; + var endx = coords[0] - 15; + var endy = coords[1] - 15; + var width = Math.abs(endx - startx); + var height = Math.abs(endy - starty); + var factor = obj.Get('chart.zoom.factor') - 1; + + var img = document.createElement('IMG'); + img.src = canvas.toDataURL(); + img.style.position = 'relative'; + img.style.left = (factor + 1) * -1 * startx + 'px'; + img.style.top = (factor + 1) * -1 * starty + 'px'; + img.width = (factor + 1) * canvas.width; + img.height = (factor + 1) * canvas.height; + + var div = document.createElement('DIV'); + div.__object__ = obj; + div.className = 'RGraph_zoomed_area'; + div.style.position = 'absolute'; + div.style.backgroundColor = 'white'; + div.style.cursor = 'move'; + + div.style.top = e.pageY + 'px'; + div.style.left = e.pageX + 'px'; + div.origWidth = width; + div.origHeight = height; + div.style.width = width + 'px'; + div.style.height = height + 'px'; + div.style.border = '1px solid black'; + div.style.boxShadow = '0 0 15px black'; + div.style.MozBoxShadow = '0 0 15px black'; + div.style.WebkitBoxShadow = '0 0 15px black'; + div.style.overflow = 'hidden'; + div.style.opacity = 0; + div.style.zIndex = 99; + + document.body.appendChild(div); + div.appendChild(img); + + + /** + * This facilitates expanding the zoomed area once visible (the double click) + */ + div.ondblclick = function (event) + { + var event = RGraph.FixEventObject(event); + var img = event.target; + var div = event.target.parentNode; + + var current_width = div.offsetWidth + var current_height = div.offsetHeight + var target_width = img.offsetWidth; + var target_height = img.offsetHeight; + var diff_width = target_width - current_width; + var diff_height = target_height - current_height; + + var img_offset_left = parseInt(img.offsetLeft); + var img_offset_top = parseInt(img.offsetTop); + + // Global vars on purpose so the timers can access them + __zoomed_div_style__ = div.style; + __zoomed_img_style__ = img.style; + + setTimeout("__zoomed_div_style__.left = parseInt(__zoomed_div_style__.left) - " + (diff_width * 0.1) + " + 'px'", 50); + setTimeout("__zoomed_div_style__.left = parseInt(__zoomed_div_style__.left) - " + (diff_width * 0.1) + " + 'px'", 100); + setTimeout("__zoomed_div_style__.left = parseInt(__zoomed_div_style__.left) - " + (diff_width * 0.1) + " + 'px'", 150); + setTimeout("__zoomed_div_style__.left = parseInt(__zoomed_div_style__.left) - " + (diff_width * 0.1) + " + 'px'", 200); + setTimeout("__zoomed_div_style__.left = parseInt(__zoomed_div_style__.left) - " + (diff_width * 0.1) + " + 'px'", 250); + + setTimeout("__zoomed_div_style__.top = parseInt(__zoomed_div_style__.top) - " + (diff_height * 0.1) + " + 'px'", 50); + setTimeout("__zoomed_div_style__.top = parseInt(__zoomed_div_style__.top) - " + (diff_height * 0.1) + " + 'px'", 100); + setTimeout("__zoomed_div_style__.top = parseInt(__zoomed_div_style__.top) - " + (diff_height * 0.1) + " + 'px'", 150); + setTimeout("__zoomed_div_style__.top = parseInt(__zoomed_div_style__.top) - " + (diff_height * 0.1) + " + 'px'", 200); + setTimeout("__zoomed_div_style__.top = parseInt(__zoomed_div_style__.top) - " + (diff_height * 0.1) + " + 'px'", 250); + + setTimeout("__zoomed_div_style__.width = parseInt(__zoomed_div_style__.width) + " + (diff_width * 0.2) + " + 'px'", 50); + setTimeout("__zoomed_div_style__.width = parseInt(__zoomed_div_style__.width) + " + (diff_width * 0.2) + " + 'px'", 100); + setTimeout("__zoomed_div_style__.width = parseInt(__zoomed_div_style__.width) + " + (diff_width * 0.2) + " + 'px'", 150); + setTimeout("__zoomed_div_style__.width = parseInt(__zoomed_div_style__.width) + " + (diff_width * 0.2) + " + 'px'", 200); + setTimeout("__zoomed_div_style__.width = parseInt(__zoomed_div_style__.width) + " + (diff_width * 0.2) + " + 'px'", 250); + + setTimeout("__zoomed_div_style__.height = parseInt(__zoomed_div_style__.height) + " + (diff_height * 0.2) + " + 'px'", 50); + setTimeout("__zoomed_div_style__.height = parseInt(__zoomed_div_style__.height) + " + (diff_height * 0.2) + " + 'px'", 100); + setTimeout("__zoomed_div_style__.height = parseInt(__zoomed_div_style__.height) + " + (diff_height * 0.2) + " + 'px'", 150); + setTimeout("__zoomed_div_style__.height = parseInt(__zoomed_div_style__.height) + " + (diff_height * 0.2) + " + 'px'", 200); + setTimeout("__zoomed_div_style__.height = parseInt(__zoomed_div_style__.height) + " + (diff_height * 0.2) + " + 'px'", 250); + + // Move the image within the div + setTimeout("__zoomed_img_style__.left = " + (img_offset_left * 0.8) + " + 'px'", 50); + setTimeout("__zoomed_img_style__.left = " + (img_offset_left * 0.6) + " + 'px'", 100); + setTimeout("__zoomed_img_style__.left = " + (img_offset_left * 0.4) + " + 'px'", 150); + setTimeout("__zoomed_img_style__.left = " + (img_offset_left * 0.2) + " + 'px'", 200); + setTimeout("__zoomed_img_style__.left = 0", 250); + + setTimeout("__zoomed_img_style__.top = " + (img_offset_top * 0.8) + " + 'px'", 50); + setTimeout("__zoomed_img_style__.top = " + (img_offset_top * 0.6) + " + 'px'", 100); + setTimeout("__zoomed_img_style__.top = " + (img_offset_top * 0.4) + " + 'px'", 150); + setTimeout("__zoomed_img_style__.top = " + (img_offset_top * 0.2) + " + 'px'", 200); + setTimeout("__zoomed_img_style__.top = 0", 250); + + div.ondblclick = null; + } + /** + * Make the zoomed bit draggable + */ + div.onmousedown = function (e) + { + e = RGraph.FixEventObject(e); + + var div = e.target.parentNode; + var img = div.childNodes[0]; + + if (e.button == 0 || e.button == 1 ) { + + div.__offsetx__ = e.offsetX + img.offsetLeft; + div.__offsety__ = e.offsetY + img.offsetTop; + + RGraph.Registry.Set('chart.mousedown', div); + RGraph.Registry.Set('chart.button', 0); + + } else { + + img.__startx__ = e.pageX; + img.__starty__ = e.pageY; + + img.__originalx__ = img.offsetLeft; + img.__originaly__ = img.offsetTop; + + RGraph.Registry.Set('chart.mousedown', img); + RGraph.Registry.Set('chart.button', 2); + + /** + * Don't show a context menu when the zoomed area is right-clicked on + */ + window.oncontextmenu = function (e) + { + e = RGraph.FixEventObject(e); + + e.stopPropagation(); + + // [18th July 2010] Is this reallly necessary? + window.oncontextmenu = function (e) + { + return true; + } + + + return false; + } + } + + e.stopPropagation(); + + return false; + } + + window.onmouseup = function (e) + { + RGraph.Registry.Set('chart.mousedown', false); + } + + window.onmousemove = function (e) + { + if (RGraph.Registry.Get('chart.mousedown') && RGraph.Registry.Get('chart.button') == 0) { + + var div = RGraph.Registry.Get('chart.mousedown'); + + var x = e.pageX - div.__offsetx__; + var y = e.pageY - div.__offsety__; + + div.style.left = x + 'px'; + div.style.top = y + 'px'; + + } else if (RGraph.Registry.Get('chart.mousedown') && RGraph.Registry.Get('chart.button') == 2) { + + var img = RGraph.Registry.Get('chart.mousedown'); + + var x = img.__originalx__ + e.pageX - img.__startx__; + var y = img.__originaly__ + e.pageY - img.__starty__; + + img.style.left = x + 'px'; + img.style.top = y + 'px'; + } + } + // End dragging code + + + var divs = RGraph.Registry.Get('chart.zoomed.area.divs'); + if (typeof(divs) == 'object') { + divs.push(div); + } else { + RGraph.Registry.Set('chart.zoomed.area.divs', [div]) + } + + // Create the background + var bg = document.createElement('DIV'); + bg.style.position = 'fixed' + bg.style.zIndex = 98; + bg.style.top = 0; + bg.style.left = 0; + bg.style.backgroundColor = '#999'; + bg.style.opacity = 0; + bg.style.width = (screen.width + 100) + 'px'; + bg.style.height = (screen.height + 100) + 'px'; + document.body.appendChild(bg); + + bg.onclick = function (e) + { + div.style.display = 'none'; + bg.style.display = 'none'; + div = null; + bg = null; + } + + + setTimeout(function (){div.style.opacity = 0.2;}, 50); + setTimeout(function (){div.style.opacity = 0.4;}, 100); + setTimeout(function (){div.style.opacity = 0.6;}, 150); + setTimeout(function (){div.style.opacity = 0.8;}, 200); + setTimeout(function (){div.style.opacity = 1.0;}, 250); + + setTimeout(function () {div.style.left = canvasCoords[0] + startx - (width * factor * 0.1) + 'px'}, 50); + setTimeout(function () {div.style.left = canvasCoords[0] + startx - (width * factor * 0.2) + 'px'}, 100); + setTimeout(function () {div.style.left = canvasCoords[0] + startx - (width * factor * 0.3) + 'px'}, 150); + setTimeout(function () {div.style.left = canvasCoords[0] + startx - (width * factor * 0.4) + 'px'}, 200); + setTimeout(function () {div.style.left = canvasCoords[0] + startx - (width * factor * 0.5) + 'px'}, 250); + + setTimeout(function () {div.style.top = canvasCoords[1] + starty - (height * factor * 0.1) + 'px'}, 50); + setTimeout(function () {div.style.top = canvasCoords[1] + starty - (height * factor * 0.2) + 'px'}, 100); + setTimeout(function () {div.style.top = canvasCoords[1] + starty - (height * factor * 0.3) + 'px'}, 150); + setTimeout(function () {div.style.top = canvasCoords[1] + starty - (height * factor * 0.4) + 'px'}, 200); + setTimeout(function () {div.style.top = canvasCoords[1] + starty - (height * factor * 0.5) + 'px'}, 250); + + setTimeout(function () {div.style.width = width + (width * factor * 0.2) + 'px'}, 50); + setTimeout(function () {div.style.width = width + (width * factor * 0.4) + 'px'}, 100); + setTimeout(function () {div.style.width = width + (width * factor * 0.6) + 'px'}, 150); + setTimeout(function () {div.style.width = width + (width * factor * 0.8) + 'px'}, 200); + setTimeout(function () {div.style.width = width + (width * factor * 1.0) + 'px'}, 250); + + setTimeout(function () {div.style.height = height + (height * factor * 0.2) + 'px'}, 50); + setTimeout(function () {div.style.height = height + (height * factor * 0.4) + 'px'}, 100); + setTimeout(function () {div.style.height = height + (height * factor * 0.6) + 'px'}, 150); + setTimeout(function () {div.style.height = height + (height * factor * 0.8) + 'px'}, 200); + setTimeout(function () {div.style.height = height + (height * factor * 1.0) + 'px'}, 250); + + setTimeout(function (){bg.style.opacity = 0.1;}, 50); + setTimeout(function (){bg.style.opacity = 0.2;}, 100); + setTimeout(function (){bg.style.opacity = 0.3;}, 150); + setTimeout(function (){bg.style.opacity = 0.4;}, 200); + setTimeout(function (){bg.style.opacity = 0.5;}, 250); + + RGraph.Registry.Set('chart.zoomed.area.bg', bg); + RGraph.Registry.Set('chart.zoomed.area.img', img); + RGraph.Registry.Set('chart.zoomed.area.div', div); + RGraph.Registry.Set('chart.zoomed.area.mousedown', null); + } + + /** + * Fire the zoom event + */ + RGraph.FireCustomEvent(obj, 'onzoom'); + } + + canvas.onmouseout = function (e) + { + RGraph.Registry.Set('chart.zoomed.area.areadiv', null); + RGraph.Registry.Set('chart.zoomed.area.mousedown', null); + RGraph.Registry.Set('chart.zoomed.area.div', null); + } + } + } + + + /** + * This function sets up the zoom window if requested + * + * @param obj object The graph object + */ + RGraph.ShowZoomWindow = function (obj) + { + if (obj.Get('chart.zoom.mode') == 'thumbnail') { + RGraph.ZoomWindow(obj.canvas); + } + + if (obj.Get('chart.zoom.mode') == 'area') { + RGraph.ZoomArea(obj); + } + } + + + /** + * Installs the evnt handler for the zoom window/THUMBNAIL + */ + RGraph.ZoomWindow = function (canvas) + { + canvas.onmousemove = function (e) + { + e = RGraph.FixEventObject(e); + + var obj = e.target.__object__; + var canvas = obj.canvas; + var context = obj.context; + var coords = RGraph.getMouseXY(e); + + /** + * Create the DIV + */ + if (!RGraph.Registry.Get('chart.zoomed.div')) { + + var div = document.createElement('div'); + div.className = 'RGraph_zoom_window'; + div.style.width = obj.Get('chart.zoom.thumbnail.width') + 'px'; + div.style.height = obj.Get('chart.zoom.thumbnail.height') + 'px'; + + // Added back in on the 17th December + div.style.border = '2px dashed gray'; + + div.style.position = 'absolute'; + div.style.overflow = 'hidden'; + div.style.backgroundColor = 'white'; + + // Initially the zoomed layer should be off-screen + div.style.left = '-1000px'; + div.style.top = '-1000px'; + + // Should these be 0? No. + div.style.borderRadius = '5px'; + div.style.MozBorderRadius = '5px'; + div.style.WebkitBorderRadius = '5px'; + + if (obj.Get('chart.zoom.shadow')) { + div.style.boxShadow = 'rgba(0,0,0,0.5) 3px 3px 3px'; + div.style.MozBoxShadow = 'rgba(0,0,0,0.5) 3px 3px 3px'; + div.style.WebkitBoxShadow = 'rgba(0,0,0,0.5) 3px 3px 3px'; + } + + //div.style.opacity = 0.2; + div.__object__ = obj; + document.body.appendChild(div); + + /** + * Get the canvas as an image + */ + var img = document.createElement('img'); + img.width = obj.canvas.width * obj.Get('chart.zoom.factor'); + img.height = obj.canvas.height * obj.Get('chart.zoom.factor'); + img.style.position = 'relative'; + img.style.backgroundColor = 'white'; + img.__object__ = obj; + + div.appendChild(img); + + RGraph.Registry.Set('chart.zoomed.div', div); + RGraph.Registry.Set('chart.zoomed.img', img); + + // Fade the zoom in + setTimeout("RGraph.Registry.Get('chart.zoomed.div').__object__.canvas.onmouseover()", 5); + + } else { + + div = RGraph.Registry.Get('chart.zoomed.div'); + img = RGraph.Registry.Get('chart.zoomed.img'); + } + + // Make sure the image is up-to-date + img.src = canvas.toDataURL(); + + /** + * Ensure the div is visible + */ + if (div && div.style.opacity < 1) { + setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 1", 400); + } + + /** + * Get the canvas x/y coords + */ + var c = RGraph.getCanvasXY(obj.canvas); + var x = c[0]; + var y = c[1]; + + /** + * Position the div and img + */ + var offset = 7; + + div.style.left = (e.pageX - obj.Get('chart.zoom.thumbnail.width') - offset) + 'px'; + div.style.top = (e.pageY - obj.Get('chart.zoom.thumbnail.height') - offset) + 'px'; + + var l = (obj.Get('chart.zoom.thumbnail.width') / 2) - (coords[0] * obj.Get('chart.zoom.factor')); + var t = (obj.Get('chart.zoom.thumbnail.height') / 2) - (coords[1] * obj.Get('chart.zoom.factor')); + + // More positioning + img.style.left = (l + ((obj.Get('chart.zoom.thumbnail.width') / 2) * obj.Get('chart.zoom.factor'))) + 'px'; + img.style.top = (t + ((obj.Get('chart.zoom.thumbnail.height') / 2) * obj.Get('chart.zoom.factor'))) + 'px'; + + /** + * Fire the onzoom event + */ + RGraph.FireCustomEvent(obj, 'onzoom'); + } + + /** + * The onmouseover event. Evidently. Fades the zoom window in + */ + canvas.onmouseover = function (e) + { + var div = RGraph.Registry.Get('chart.zoomed.div'); + + // ??? + if (!div) return; + + var obj = div.__object__; + + // Used for the enlargement animation + var targetWidth = obj.Get('chart.zoom.thumbnail.width'); + var targetHeight = obj.Get('chart.zoom.thumbnail.height'); + + div.style.width = 0; + div.style.height = 0; + + if (obj.Get('chart.zoom.fade.in')) { + + RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.2; + setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.4", 100); + setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.6", 200); + setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.8", 300); + setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 1", 400); + + } else { + + setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 1", 1); + } + + // The enlargement animation frames + setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.width = '" + (targetWidth * (1/5) ) + "px'", 75); + setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.width = '" + (targetWidth * (2/5) ) + "px'", 150); + setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.width = '" + (targetWidth * (3/5) ) + "px'", 225); + setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.width = '" + (targetWidth * (4/5) ) + "px'", 300); + setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.width = '" + (targetWidth * (5/5) ) + "px'", 325); + + setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.height = '" + (targetHeight * (1/5) ) + "px'", 75); + setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.height = '" + (targetHeight * (2/5) ) + "px'", 150); + setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.height = '" + (targetHeight * (3/5) ) + "px'", 225); + setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.height = '" + (targetHeight * (4/5) ) + "px'", 300); + setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.height = '" + (targetHeight * (5/5) ) + "px'", 375); + } + + canvas.onmouseout = function (e) + { + if (RGraph.Registry.Get('chart.zoomed.div') && RGraph.Registry.Get('chart.zoomed.div').__object__.Get('chart.zoom.fade.out')) { + + RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.8; + setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.6", 100); + setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.4", 200); + setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.2", 300); + setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0", 400); + + // Get rid of the zoom window + setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.left = '-400px'", 400); + setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.top = '-400px'", 400); + + } else { + // Get rid of the zoom window + if (RGraph.Registry.Get('chart.zoomed.div')) { + setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.left = '-400px'", 1); + setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.top = '-400px'", 41); + } } + } + } + + + /** + * A zoom in function + * + * @param e object The event object + */ + RGraph.Zoom = function (e) + { + e = RGraph.FixEventObject(e); + + /** + * Show the zoom window + */ + //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') ) { + // return RGraph.ZoomWindow(e); + //} + if (e && e.target && e.target.__canvas__) { + var canvas = e.target.__canvas__; + + /******************************************************* + * This is here to facilitate zooming by just a single left click + *******************************************************/ + } else if (e && e.target && e.target.__object__) { + var canvas = e.target.__object__.canvas; + e.stopPropagation(); // Hmmmm + } + + // Fallback for MSIE9 + if (!canvas) { + var registry_canvas = RGraph.Registry.Get('chart.contextmenu').__canvas__; + if (registry_canvas) { + var canvas = registry_canvas; + } + } + + var context = canvas.getContext('2d'); + var obj = canvas.__object__; + var dataurl = canvas.toDataURL(); + var tmp = canvas; + var coords = RGraph.getCanvasXY(canvas); + var factor = obj.Get('chart.zoom.factor') - 1; + + var x = coords[0]; + var y = coords[1]; + + var img = document.createElement('img'); + img.className = 'RGraph_zoomed_canvas'; + img.style.border = '3px solid gray'; + img.style.width = canvas.width + 'px'; + img.style.height = canvas.height + 'px'; + img.style.position = 'absolute'; + img.style.left = x + 'px'; + img.style.top = y + 'px'; + img.style.backgroundColor = 'white'; + img.style.opacity = obj.Get('chart.zoom.fade.in') ? 0 : 1; + img.style.zIndex = 99; + img.src = dataurl; + document.body.appendChild(img); + + //RGraph.Registry.Set('chart.zoomedimage', img); + // Store the zoomed image in a global var - NOT the registry + __zoomedimage__ = img; + __zoomedimage__.obj = obj; + + // Image onclick should not hide the image + img.onclick = function (e) + { + e = RGraph.FixEventObject(e); + e.stopPropagation(); + return false; + } + + setTimeout(function (){window.onclick = RGraph.HideZoomedCanvas;}, 1); + + var width = parseInt(canvas.width); + var height = parseInt(canvas.height); + var frames = obj.Get('chart.zoom.frames'); + var delay = obj.Get('chart.zoom.delay'); + + // Increase the width over 10 frames - center + if (obj.Get('chart.zoom.hdir') == 'center') { + + for (var i=1; i<=frames; ++i) { + var newWidth = width * factor * (i/frames) + width; + var rightHandEdge = x + canvas.width; + var newLeft = (x + (canvas.width / 2)) - (newWidth / 2); + + setTimeout("__zoomedimage__.style.width = '" + String(newWidth) + "px'; __zoomedimage__.style.left = '" + newLeft + "px'", i * delay); + } + + // Left + } else if (obj.Get('chart.zoom.hdir') == 'left') { + for (var i=1; i<=frames; ++i) { + var newWidth = width * factor * (i/frames) + width; + var rightHandEdge = x + canvas.width; + var newLeft = rightHandEdge - newWidth; + + setTimeout("__zoomedimage__.style.width = '" + String(newWidth) + "px'; __zoomedimage__.style.left = '" + newLeft + "px'", i * delay); + } + + // Right (default) + } else { + for (var i=1; i<=frames; ++i) { + var newWidth = width * factor * (i/frames) + width; + setTimeout("__zoomedimage__.style.width = '" + String(newWidth) + "px'", i * delay); + } + } + + // Increase the height over 10 frames - up + if (obj.Get('chart.zoom.vdir') == 'up') { + for (var i=1; i<=frames; ++i) { + var newHeight = (height * factor * (i/frames)) + height; + var bottomEdge = y + canvas.height; + var newTop = bottomEdge - newHeight; + + setTimeout("__zoomedimage__.style.height = '" + String(newHeight) + "px'; __zoomedimage__.style.top = '" + newTop + "px'", i * delay); + } + + // center + } else if (obj.Get('chart.zoom.vdir') == 'center') { + for (var i=1; i<=frames; ++i) { + var newHeight = (height * factor * (i/frames)) + height; + var bottomEdge = (y + (canvas.height / 2)) + (newHeight / 2); + var newTop = bottomEdge - newHeight; + + setTimeout("__zoomedimage__.style.height = '" + String(newHeight) + "px'; __zoomedimage__.style.top = '" + newTop + "px'", i * delay); + } + + // Down (default + } else { + for (var i=1; i<=frames; ++i) { + setTimeout("__zoomedimage__.style.height = '" + String(height * factor * (i/frames) + height) + "px'", i * delay); + } + } + + // If enabled, increase the opactity over the requested number of frames + if (obj.Get('chart.zoom.fade.in')) { + for (var i=1; i<=frames; ++i) { + setTimeout("__zoomedimage__.style.opacity = " + Number(i / frames), i * (delay / 2)); + } + } + + // If stipulated, produce a shadow + if (obj.Get('chart.zoom.shadow')) { + for (var i=1; i<=frames; ++i) { + setTimeout("__zoomedimage__.style.boxShadow = 'rgba(128,128,128," + Number(i / frames) / 2 + ") 0 0 15px'", i * delay); + setTimeout("__zoomedimage__.style.MozBoxShadow = 'rgba(128,128,128," + Number(i / frames) / 2 + ") 0 0 15px'", i * delay); + setTimeout("__zoomedimage__.style.WebkitBoxShadow = 'rgba(128,128,128," + Number(i / frames) / 2 + ") 0 0 15px'", i * delay); + } + } + + /** + * The onmouseout event. Hides the zoom window. Fades the zoom out + * + canvas.onmouseout = function (e) + { + if (RGraph.Registry.Get('chart.zoomed.div') && RGraph.Registry.Get('chart.zoomed.div').__object__.Get('chart.zoom.fade.out')) { + + RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.8; + setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.6", 100); + setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.4", 200); + setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0.2", 300); + setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.opacity = 0", 400); + + // Get rid of the zoom window + setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.left = '-400px'", 400); + setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.top = '-400px'", 400); + + } else { + + // Get rid of the zoom window + if (RGraph.Registry.Get('chart.zoomed.div')) { + setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.left = '-400px'", 1); + setTimeout("RGraph.Registry.Get('chart.zoomed.div').style.top = '-400px'", 1); + } + } + } + */ + + // The background + if (obj.Get('chart.zoom.background')) { + + var div = document.createElement('DIV'); + div.style.backgroundColor = '#999'; + div.style.opacity = 0; + div.style.position = 'fixed'; + div.style.top = 0; + div.style.left = 0; + div.style.width = (screen.width + 100) + 'px'; + div.style.height = (screen.height + 100) + 'px'; + div.style.zIndex = 98; + + // Hides the zoomed caboodle + div.oncontextmenu = function (e) + { + return RGraph.HideZoomedCanvas(e); + } + + // 30th July 2010 - Is this necessary? + //for (var i=1; i<=frames; ++i) { + // setTimeout('__zoomedbackground__.style.opacity = ' + Number(0.04 * i), i * delay); + // + // // MSIE doesn't support zoom + // //setTimeout('__zoomedbackground__.style.filter = "progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=135); Alpha(opacity=10)"', 50); + //} + + div.origHeight = div.style.height; + + document.body.appendChild(div); + + __zoomedbackground__ = div; + + // If the window is resized, hide the zoom + //window.onresize = RGraph.HideZoomedCanvas; + + for (var i=1; i<=frames; ++i) { + setTimeout("__zoomedbackground__.style.opacity = " + (Number(i / frames) * 0.5), i * (delay / 2)); + } + } + + /** + * Fire the onzoom event + */ + RGraph.FireCustomEvent(obj, 'onzoom'); + }
\ No newline at end of file |