diff options
Diffstat (limited to 'schall/static/RGraph/libraries/RGraph.common.resizing.js')
| -rw-r--r-- | schall/static/RGraph/libraries/RGraph.common.resizing.js | 471 |
1 files changed, 471 insertions, 0 deletions
diff --git a/schall/static/RGraph/libraries/RGraph.common.resizing.js b/schall/static/RGraph/libraries/RGraph.common.resizing.js new file mode 100644 index 0000000..ee96747 --- /dev/null +++ b/schall/static/RGraph/libraries/RGraph.common.resizing.js @@ -0,0 +1,471 @@ + /** + * 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'}; + + + /** + * This is an array of CSS properties that should be preserved when adding theplaceholder DIV + */ + __rgraph_resizing_preserve_css_properties__ = []; + + /** + * This function can be used to allow resizing + * + * @param object obj Your graph object + */ + RGraph.AllowResizing = function (obj) + { + if (obj.Get('chart.resizable')) { + var canvas = obj.canvas; + var context = obj.context; + var resizeHandle = 15; + RGraph.Resizing.canvas = canvas; + RGraph.Resizing.placeHolders = []; + + /** + * Add the original width and height to the canvas + */ + if (!canvas.__original_width__ && !canvas.__original_height__) { + canvas.__original_width__ = canvas.width; + canvas.__original_height__ = canvas.height; + } + + + var adjustX = (typeof(obj.Get('chart.resize.handle.adjust')) == 'object' && typeof(obj.Get('chart.resize.handle.adjust')[0]) == 'number' ? obj.Get('chart.resize.handle.adjust')[0] : 0); + var adjustY = (typeof(obj.Get('chart.resize.handle.adjust')) == 'object' && typeof(obj.Get('chart.resize.handle.adjust')[1]) == 'number' ? obj.Get('chart.resize.handle.adjust')[1] : 0); + + + /** + * Draw the resize handle + */ + var textWidth = context.measureText('Reset').width + 2; + + + // Draw the white background for the resize handle - OPTIONAL default is rgba(0,0,0,0); + var bgcolor = obj.Get('chart.resize.handle.background'); + + if (!bgcolor) { + bgcolor = 'rgba(0,0,0,0)'; + } + + context.beginPath(); + context.fillStyle = bgcolor; + context.moveTo(canvas.width - resizeHandle - resizeHandle + adjustX, canvas.height - resizeHandle); + context.fillRect(canvas.width - resizeHandle - resizeHandle + adjustX, canvas.height - resizeHandle + adjustY, 2 * resizeHandle, resizeHandle); + context.fill(); + + + obj.context.beginPath(); + obj.context.strokeStyle = 'gray'; + obj.context.fillStyle = 'rgba(0,0,0,0)'; + obj.context.lineWidth = 1; + obj.context.fillRect(obj.canvas.width - resizeHandle + adjustX, obj.canvas.height - resizeHandle - 2 + adjustY, resizeHandle, resizeHandle + 2); + obj.context.fillRect(obj.canvas.width - resizeHandle - textWidth + adjustX, obj.canvas.height - resizeHandle + adjustY, resizeHandle + textWidth, resizeHandle + 2); + + + // Draw the arrows + + // Vertical line + obj.context.moveTo(obj.canvas.width - (resizeHandle / 2) + adjustX, obj.canvas.height - resizeHandle + adjustY); + obj.context.lineTo(obj.canvas.width - (resizeHandle / 2) + adjustX, obj.canvas.height + adjustY); + + + // Horizontal line + obj.context.moveTo(obj.canvas.width + adjustX, obj.canvas.height - (resizeHandle / 2) + adjustY); + obj.context.lineTo(obj.canvas.width - resizeHandle + adjustX, obj.canvas.height - (resizeHandle / 2) + adjustY); + + context.fill(); + context.stroke(); + + + // Top arrow head + context.fillStyle = 'gray'; + context.beginPath(); + context.moveTo(canvas.width - (resizeHandle / 2) + adjustX, canvas.height - resizeHandle + adjustY); + context.lineTo(canvas.width - (resizeHandle / 2) + 3 + adjustX, canvas.height - resizeHandle + 3 + adjustY); + context.lineTo(canvas.width - (resizeHandle / 2) - 3 + adjustX, canvas.height - resizeHandle + 3 + adjustY); + context.closePath(); + context.fill(); + + // Bottom arrow head + context.beginPath(); + context.moveTo(canvas.width - (resizeHandle / 2) + adjustX, canvas.height + adjustY); + context.lineTo(canvas.width - (resizeHandle / 2) + 3 + adjustX, canvas.height - 3 + adjustY); + context.lineTo(canvas.width - (resizeHandle / 2) - 3 + adjustX, canvas.height - 3 + adjustY); + context.closePath(); + context.fill(); + + // Left arrow head + context.beginPath(); + context.moveTo(canvas.width - resizeHandle + adjustX, canvas.height - (resizeHandle / 2) + adjustY); + context.lineTo(canvas.width - resizeHandle + 3 + adjustX, canvas.height - (resizeHandle / 2) + 3 + adjustY); + context.lineTo(canvas.width - resizeHandle + 3 + adjustX, canvas.height - (resizeHandle / 2) - 3 + adjustY); + context.closePath(); + context.fill(); + + // Right arrow head + context.beginPath(); + context.moveTo(canvas.width + adjustX, canvas.height - (resizeHandle / 2) + adjustY); + context.lineTo(canvas.width - 3 + adjustX, canvas.height - (resizeHandle / 2) + 3 + adjustY); + context.lineTo(canvas.width - 3 + adjustX, canvas.height - (resizeHandle / 2) - 3 + adjustY); + context.closePath(); + context.fill(); + + // Square at the centre of the arrows + context.beginPath(); + context.fillStyle = 'white'; + context.moveTo(canvas.width + adjustX, canvas.height - (resizeHandle / 2) + adjustY); + context.strokeRect(canvas.width - (resizeHandle / 2) - 2 + adjustX, canvas.height - (resizeHandle / 2) - 2 + adjustY, 4, 4); + context.fillRect(canvas.width - (resizeHandle / 2) - 2 + adjustX, canvas.height - (resizeHandle / 2) - 2 + adjustY, 4, 4); + context.fill(); + context.stroke(); + + + // Draw the "Reset" button + context.beginPath(); + context.fillStyle = 'gray'; + context.moveTo(canvas.width - resizeHandle - 3 + adjustX, canvas.height - resizeHandle / 2 + adjustY); + context.lineTo(canvas.width - resizeHandle - resizeHandle + adjustX, canvas.height - (resizeHandle / 2) + adjustY); + context.lineTo(canvas.width - resizeHandle - resizeHandle + 2 + adjustX, canvas.height - (resizeHandle / 2) - 2 + adjustY); + context.lineTo(canvas.width - resizeHandle - resizeHandle + 2 + adjustX, canvas.height - (resizeHandle / 2) + 2 + adjustY); + context.lineTo(canvas.width - resizeHandle - resizeHandle + adjustX, canvas.height - (resizeHandle / 2) + adjustY); + context.stroke(); + context.fill(); + + context.beginPath(); + context.moveTo(canvas.width - resizeHandle - resizeHandle - 1 + adjustX, canvas.height - (resizeHandle / 2) - 3 + adjustY); + context.lineTo(canvas.width - resizeHandle - resizeHandle - 1 + adjustX, canvas.height - (resizeHandle / 2) + 3 + adjustY); + context.stroke(); + context.fill(); + + + + var window_onmousemove = function (e) + { + e = RGraph.FixEventObject(e); + + var canvas = RGraph.Resizing.canvas; + var newWidth = RGraph.Resizing.originalw - (RGraph.Resizing.originalx - e.pageX);// - 5 + var newHeight = RGraph.Resizing.originalh - (RGraph.Resizing.originaly - e.pageY);// - 5 + + if (RGraph.Resizing.mousedown) { + if (newWidth > (canvas.__original_width__ / 2)) RGraph.Resizing.div.style.width = newWidth + 'px'; + if (newHeight > (canvas.__original_height__ / 2)) RGraph.Resizing.div.style.height = newHeight + 'px'; + + RGraph.FireCustomEvent(canvas.__object__, 'onresize'); + } + } + window.addEventListener('mousemove', window_onmousemove, false); + RGraph.AddEventListener(canvas.id, 'window_mousemove', window_onmousemove); + + /** + * The window onmouseup function + */ + var MouseupFunc = function (e) + { + if (!RGraph.Resizing || !RGraph.Resizing.div || !RGraph.Resizing.mousedown) { + return; + } + + if (RGraph.Resizing.div) { + + var div = RGraph.Resizing.div; + var canvas = div.__canvas__; + var coords = RGraph.getCanvasXY(div.__canvas__); + + var parentNode = canvas.parentNode; + + if (canvas.style.position != 'absolute') { + // Create a DIV to go in the canvases place + var placeHolderDIV = document.createElement('DIV'); + placeHolderDIV.style.width = RGraph.Resizing.originalw + 'px'; + placeHolderDIV.style.height = RGraph.Resizing.originalh + 'px'; + //placeHolderDIV.style.backgroundColor = 'red'; + placeHolderDIV.style.display = 'inline-block'; // Added 5th Nov 2010 + placeHolderDIV.style.position = canvas.style.position; + placeHolderDIV.style.left = canvas.style.left; + placeHolderDIV.style.top = canvas.style.top; + placeHolderDIV.style.cssFloat = canvas.style.cssFloat; + + parentNode.insertBefore(placeHolderDIV, canvas); + } + + + // Now set the canvas to be positioned absolutely + canvas.style.backgroundColor = 'white'; + canvas.style.position = 'absolute'; + canvas.style.border = '1px dashed gray'; + canvas.style.left = (RGraph.Resizing.originalCanvasX - 1) + 'px'; + canvas.style.top = (RGraph.Resizing.originalCanvasY - 1) + 'px'; + + canvas.width = parseInt(div.style.width); + canvas.height = parseInt(div.style.height); + + + + /** + * Fire the onresize event + */ + RGraph.FireCustomEvent(canvas.__object__, 'onresizebeforedraw'); + + canvas.__object__.Draw(); + + // Get rid of transparent semi-opaque DIV + RGraph.Resizing.mousedown = false; + div.style.display = 'none'; + document.body.removeChild(div); + } + + /** + * If there is zoom enabled in thumbnail mode, lose the zoom image + */ + if (RGraph.Registry.Get('chart.zoomed.div') || RGraph.Registry.Get('chart.zoomed.img')) { + RGraph.Registry.Set('chart.zoomed.div', null); + RGraph.Registry.Set('chart.zoomed.img', null); + } + + /** + * Fire the onresize event + */ + RGraph.FireCustomEvent(canvas.__object__, 'onresizeend'); + } + + + var window_onmouseup = MouseupFunc; + window.addEventListener('onmouseup', window_onmouseup, false); + RGraph.AddEventListener(canvas.id, 'window_mouseup', window_onmouseup); + + + var canvas_onmousemove = function (e) + { + e = RGraph.FixEventObject(e); + + var coords = RGraph.getMouseXY(e); + var canvas = e.target; + var context = canvas.getContext('2d'); + //var orig_cursor = canvas.style.cursor; // Used for playing well with tooltips + + RGraph.Resizing.title = canvas.title; + + if ( (coords[0] > (canvas.width - resizeHandle) + && coords[0] < canvas.width + && coords[1] > (canvas.height - resizeHandle) + && coords[1] < canvas.height)) { + + canvas.style.cursor = 'move'; + + if (navigator.userAgent.indexOf('Chrome') > 0 || document.all) { + canvas.title = 'Resize the graph'; + } + + } else if ( coords[0] > (canvas.width - resizeHandle - resizeHandle) + && coords[0] < canvas.width - resizeHandle + && coords[1] > (canvas.height - resizeHandle) + && coords[1] < canvas.height) { + + canvas.style.cursor = 'pointer'; + + if (navigator.userAgent.indexOf('Chrome') > 0 || document.all) { + canvas.title = 'Reset graph to original size'; + } + + } else { + + // orig_cursor + canvas.style.cursor = 'default'; + canvas.title = ''; + } + } + canvas.addEventListener('mousemove', canvas_onmousemove, false); + RGraph.AddEventListener(canvas.id, 'mousemove', canvas_onmousemove); + + + + var canvas_onmouseout = function (e) + { + e.target.style.cursor = 'default'; + e.target.title = ''; + } + canvas.addEventListener('mouseout', canvas_onmouseout, false); + RGraph.AddEventListener(canvas.id, 'mouseout', canvas_onmouseout); + + + + var canvas_onmousedown = function (e) + { + e = RGraph.FixEventObject(e); + + var coords = RGraph.getMouseXY(e); + var canvasCoords = RGraph.getCanvasXY(e.target); + var canvas = e.target; + + if ( coords[0] > (obj.canvas.width - resizeHandle) + && coords[0] < obj.canvas.width + && coords[1] > (obj.canvas.height - resizeHandle) + && coords[1] < obj.canvas.height) { + + RGraph.FireCustomEvent(obj, 'onresizebegin'); + + // Save the existing border + if (canvas.__original_css_border__ == null) { + canvas.__original_css_border__ = canvas.style.border; + } + + RGraph.Resizing.mousedown = true; + + + /** + * Create the semi-opaque DIV + */ + + var div = document.createElement('DIV'); + div.style.position = 'absolute'; + div.style.left = canvasCoords[0] + 'px'; + div.style.top = canvasCoords[1] + 'px'; + div.style.width = canvas.width + 'px'; + div.style.height = canvas.height + 'px'; + div.style.border = '1px dotted black'; + div.style.backgroundColor = 'gray'; + div.style.opacity = 0.5; + div.__canvas__ = e.target; + + document.body.appendChild(div); + RGraph.Resizing.div = div; + RGraph.Resizing.placeHolders.push(div); + + // Hide the previous resize indicator layers. This is only necessary it seems for the Meter chart + for (var i=0; i<(RGraph.Resizing.placeHolders.length - 1); ++i) { + RGraph.Resizing.placeHolders[i].style.display = 'none'; + } + + // This is a repetition of the window.onmouseup function (No need to use DOM2 here) + div.onmouseup = function (e) + { + MouseupFunc(e); + } + + + // No need to use DOM2 here + RGraph.Resizing.div.onmouseover = function (e) + { + e = RGraph.FixEventObject(e); + e.stopPropagation(); + } + + // The mouse + RGraph.Resizing.originalx = e.pageX; + RGraph.Resizing.originaly = e.pageY; + + RGraph.Resizing.originalw = obj.canvas.width; + RGraph.Resizing.originalh = obj.canvas.height; + + RGraph.Resizing.originalCanvasX = RGraph.getCanvasXY(obj.canvas)[0]; + RGraph.Resizing.originalCanvasY = RGraph.getCanvasXY(obj.canvas)[1]; + } + + + /** + * This facilitates the reset button + */ + if ( coords[0] > (canvas.width - resizeHandle - resizeHandle) + && coords[0] < canvas.width - resizeHandle + && coords[1] > (canvas.height - resizeHandle) + && coords[1] < canvas.height) { + + /** + * Fire the onresizebegin event + */ + RGraph.FireCustomEvent(canvas.__object__, 'onresizebegin'); + + // Restore the original width and height + canvas.width = canvas.__original_width__; + canvas.height = canvas.__original_height__; + + // Lose the border + canvas.style.border = canvas.__original_css_border__; + //canvas.__original_css_border__ = null; + + // Add 1 pixel to the top/left because the border is going + canvas.style.left = (parseInt(canvas.style.left)) + 'px'; + canvas.style.top = (parseInt(canvas.style.top)) + 'px'; + + + RGraph.FireCustomEvent(canvas.__object__, 'onresizebeforedraw'); + + // Redraw the canvas + canvas.__object__.Draw(); + + // Set the width and height on the DIV + if (RGraph.Resizing.div) { + RGraph.Resizing.div.style.width = canvas.__original_width__ + 'px'; + RGraph.Resizing.div.style.height = canvas.__original_height__ + 'px'; + } + + /** + * Fire the resize event + */ + RGraph.FireCustomEvent(canvas.__object__, 'onresize'); + RGraph.FireCustomEvent(canvas.__object__, 'onresizeend'); + } + } + canvas.addEventListener('mousedown', canvas_onmousedown, false); + RGraph.AddEventListener(canvas.id, 'mousedown', canvas_onmousedown); + + + /** + * This function facilitates the reset button + * + * NOTE: 31st December 2010 - doesn't appear to be being used any more + */ + + /* + canvas.onclick = function (e) + { + var coords = RGraph.getMouseXY(e); + var canvas = e.target; + + if ( coords[0] > (canvas.width - resizeHandle - resizeHandle) + && coords[0] < canvas.width - resizeHandle + && coords[1] > (canvas.height - resizeHandle) + && coords[1] < canvas.height) { + + // Restore the original width and height + canvas.width = canvas.__original_width__; + canvas.height = canvas.__original_height__; + + // Lose the border + canvas.style.border = ''; + + // Add 1 pixel to the top/left because the border is going + canvas.style.left = (parseInt(canvas.style.left) + 1) + 'px'; + canvas.style.top = (parseInt(canvas.style.top) + 1) + 'px'; + + // Fire the onresizebeforedraw event + RGraph.FireCustomEvent(canvas.__object__, 'onresizebeforedraw'); + + // Redraw the canvas + canvas.__object__.Draw(); + + // Set the width and height on the DIV + RGraph.Resizing.div.style.width = canvas.__original_width__ + 'px'; + RGraph.Resizing.div.style.height = canvas.__original_height__ + 'px'; + + // Fire the resize event + RGraph.FireCustomEvent(canvas.__object__, 'onresize'); + } + } + */ + } + }
\ No newline at end of file |