2 * o------------------------------------------------------------------------------o
3 * | This file is part of the RGraph package - you can learn more at: |
5 * | http://www.rgraph.net |
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: |
11 * | http://www.rgraph.net/LICENSE.txt |
12 * o------------------------------------------------------------------------------o
15 if (typeof(RGraph) == 'undefined') RGraph = {isRGraph:true,type:'common'};
19 * This function can be used to allow resizing
21 * @param object obj Your graph object
23 RGraph.AllowResizing = function (obj)
25 if (obj.Get('chart.resizable')) {
26 var canvas = obj.canvas;
27 var context = obj.context;
28 var resizeHandle = 15;
29 RGraph.Resizing.canvas = canvas;
32 * Add the original width and height to the canvas
34 if (!canvas.__original_width__ && !canvas.__original_height__) {
35 canvas.__original_width__ = canvas.width;
36 canvas.__original_height__ = canvas.height;
40 * Draw the resize handle
42 var textWidth = context.measureText('Reset').width + 2;
44 obj.context.beginPath();
45 obj.context.strokeStyle = 'gray';
46 obj.context.fillStyle = 'rgba(0,0,0,0)';
47 obj.context.lineWidth = 1;
48 obj.context.fillRect(obj.canvas.width - resizeHandle, obj.canvas.height - resizeHandle - 2, resizeHandle, resizeHandle + 2);
49 obj.context.fillRect(obj.canvas.width - resizeHandle - textWidth, obj.canvas.height - resizeHandle, resizeHandle + textWidth, resizeHandle + 2);
55 obj.context.moveTo(obj.canvas.width - (resizeHandle / 2), obj.canvas.height - resizeHandle);
56 obj.context.lineTo(obj.canvas.width - (resizeHandle / 2), obj.canvas.height);
59 obj.context.moveTo(obj.canvas.width, obj.canvas.height - (resizeHandle / 2));
60 obj.context.lineTo(obj.canvas.width - resizeHandle, obj.canvas.height - (resizeHandle / 2));
66 context.fillStyle = 'gray';
68 context.moveTo(canvas.width - (resizeHandle / 2), canvas.height - resizeHandle);
69 context.lineTo(canvas.width - (resizeHandle / 2) + 3, canvas.height - resizeHandle + 3);
70 context.lineTo(canvas.width - (resizeHandle / 2) - 3, canvas.height - resizeHandle + 3);
76 context.moveTo(canvas.width - (resizeHandle / 2), canvas.height);
77 context.lineTo(canvas.width - (resizeHandle / 2) + 3, canvas.height - 3);
78 context.lineTo(canvas.width - (resizeHandle / 2) - 3, canvas.height - 3);
84 context.moveTo(canvas.width - resizeHandle, canvas.height - (resizeHandle / 2));
85 context.lineTo(canvas.width - resizeHandle + 3, canvas.height - (resizeHandle / 2) + 3);
86 context.lineTo(canvas.width - resizeHandle + 3, canvas.height - (resizeHandle / 2) - 3);
92 context.moveTo(canvas.width, canvas.height - (resizeHandle / 2));
93 context.lineTo(canvas.width - 3, canvas.height - (resizeHandle / 2) + 3);
94 context.lineTo(canvas.width - 3, canvas.height - (resizeHandle / 2) - 3);
98 // Square at the centre of the arrows
100 context.fillStyle = 'white';
101 context.moveTo(canvas.width, canvas.height - (resizeHandle / 2));
102 context.strokeRect(canvas.width - (resizeHandle / 2) - 2, canvas.height - (resizeHandle / 2) - 2, 4, 4);
103 context.fillRect(canvas.width - (resizeHandle / 2) - 2, canvas.height - (resizeHandle / 2) - 2, 4, 4);
108 // Draw the "Reset" button
110 context.fillStyle = 'gray';
111 context.moveTo(canvas.width - resizeHandle - 3, canvas.height - resizeHandle / 2);
112 context.lineTo(canvas.width - resizeHandle - resizeHandle, canvas.height - (resizeHandle / 2));
113 context.lineTo(canvas.width - resizeHandle - resizeHandle + 2, canvas.height - (resizeHandle / 2) - 2);
114 context.lineTo(canvas.width - resizeHandle - resizeHandle + 2, canvas.height - (resizeHandle / 2) + 2);
115 context.lineTo(canvas.width - resizeHandle - resizeHandle, canvas.height - (resizeHandle / 2));
120 context.moveTo(canvas.width - resizeHandle - resizeHandle - 1, canvas.height - (resizeHandle / 2) - 3);
121 context.lineTo(canvas.width - resizeHandle - resizeHandle - 1, canvas.height - (resizeHandle / 2) + 3);
126 window.onmousemove = function (e)
128 e = RGraph.FixEventObject(e);
130 var canvas = RGraph.Resizing.canvas;
131 var newWidth = RGraph.Resizing.originalw - (RGraph.Resizing.originalx - e.pageX);// - 5
132 var newHeight = RGraph.Resizing.originalh - (RGraph.Resizing.originaly - e.pageY);// - 5
134 if (RGraph.Resizing.mousedown) {
135 if (newWidth > (canvas.__original_width__ / 2)) RGraph.Resizing.div.style.width = newWidth + 'px';
136 if (newHeight > (canvas.__original_height__ / 2)) RGraph.Resizing.div.style.height = newHeight + 'px';
141 * The window onmouseup function
143 var MouseupFunc = function (e)
145 if (!RGraph.Resizing || !RGraph.Resizing.div || !RGraph.Resizing.mousedown) {
149 if (RGraph.Resizing.div) {
151 var div = RGraph.Resizing.div;
152 var canvas = div.__canvas__;
153 var coords = RGraph.getCanvasXY(div.__canvas__);
155 var parentNode = canvas.parentNode;
157 if (canvas.style.position != 'absolute') {
158 // Create a DIV to go in the canvases place
159 var placeHolderDIV = document.createElement('DIV');
160 placeHolderDIV.style.width = RGraph.Resizing.originalw + 'px';
161 placeHolderDIV.style.height = RGraph.Resizing.originalh + 'px';
162 //placeHolderDIV.style.backgroundColor = 'red';
163 placeHolderDIV.style.display = 'inline-block'; // Added 5th Nov 2010
164 placeHolderDIV.style.position = canvas.style.position;
165 placeHolderDIV.style.left = canvas.style.left;
166 placeHolderDIV.style.top = canvas.style.top;
167 placeHolderDIV.style.cssFloat = canvas.style.cssFloat;
168 parentNode.insertBefore(placeHolderDIV, canvas);
172 // Now set the canvas to be positioned absolutely
173 canvas.style.backgroundColor = 'white';
174 canvas.style.position = 'absolute';
175 canvas.style.border = '1px dashed gray';
176 canvas.style.left = (RGraph.Resizing.originalCanvasX - 1) + 'px';
177 canvas.style.top = (RGraph.Resizing.originalCanvasY - 1) + 'px';
179 canvas.width = parseInt(div.style.width);
180 canvas.height = parseInt(div.style.height);
181 canvas.__object__.Draw();
183 // Get rid of transparent semi-opaque DIV
184 RGraph.Resizing.mousedown = false;
185 div.style.left = '-1000px';
186 div.style.top = '-1000px';
190 * Fire the onresize event
192 RGraph.FireCustomEvent(canvas.__object__, 'onresize');
196 window.onmouseup = MouseupFunc;
199 canvas.onmousemove = function (e)
201 e = RGraph.FixEventObject(e);
203 var coords = RGraph.getMouseXY(e);
204 var canvas = e.target;
205 var context = canvas.getContext('2d');
207 RGraph.Resizing.title = canvas.title;
209 if ( (coords[0] > (canvas.width - resizeHandle)
210 && coords[0] < canvas.width
211 && coords[1] > (canvas.height - resizeHandle)
212 && coords[1] < canvas.height)) {
214 canvas.title = 'Resize the graph';
215 canvas.style.cursor = 'move';
217 } else if ( coords[0] > (canvas.width - resizeHandle - resizeHandle)
218 && coords[0] < canvas.width - resizeHandle
219 && coords[1] > (canvas.height - resizeHandle)
220 && coords[1] < canvas.height) {
222 canvas.style.cursor = 'pointer';
223 canvas.title = 'Reset graph to original size';
227 canvas.style.cursor = 'default';
233 canvas.onmousedown = function (e)
235 e = RGraph.FixEventObject(e);
237 var coords = RGraph.getMouseXY(e);
238 var canvasCoords = RGraph.getCanvasXY(e.target);
240 if ( coords[0] > (obj.canvas.width - resizeHandle)
241 && coords[0] < obj.canvas.width
242 && coords[1] > (obj.canvas.height - resizeHandle)
243 && coords[1] < obj.canvas.height) {
245 RGraph.Resizing.mousedown = true;
249 * Create the semi-opaque DIV
251 var div = document.createElement('DIV');
252 div.style.position = 'absolute';
253 div.style.left = canvasCoords[0] + 'px';
254 div.style.top = canvasCoords[1] + 'px';
255 div.style.width = canvas.width + 'px';
256 div.style.height = canvas.height + 'px';
257 div.style.border = '1px dotted black';
258 div.style.backgroundColor = 'gray';
259 div.style.opacity = 0.5;
260 div.__canvas__ = e.target;
262 document.body.appendChild(div);
263 RGraph.Resizing.div = div;
265 // This is a repetition of the window.onmouseup function
266 div.onmouseup = function (e)
272 RGraph.Resizing.div.onmouseover = function (e)
274 e = RGraph.FixEventObject(e);
279 RGraph.Resizing.originalx = e.pageX;
280 RGraph.Resizing.originaly = e.pageY;
283 RGraph.Resizing.originalw = obj.canvas.width;
284 RGraph.Resizing.originalh = obj.canvas.height;
286 RGraph.Resizing.originalCanvasX = RGraph.getCanvasXY(obj.canvas)[0];
287 RGraph.Resizing.originalCanvasY = RGraph.getCanvasXY(obj.canvas)[1];
293 * This function facilitates the reset button
295 canvas.onclick = function (e)
297 var coords = RGraph.getMouseXY(e);
298 var canvas = e.target;
300 if ( coords[0] > (canvas.width - resizeHandle - resizeHandle)
301 && coords[0] < canvas.width - resizeHandle
302 && coords[1] > (canvas.height - resizeHandle)
303 && coords[1] < canvas.height) {
305 // Restore the original width and height
306 canvas.width = canvas.__original_width__;
307 canvas.height = canvas.__original_height__;
310 canvas.style.border = '';
312 // Add 1 pixel to the top/left because the border is going
313 canvas.style.left = (parseInt(canvas.style.left) + 1) + 'px';
314 canvas.style.top = (parseInt(canvas.style.top) + 1) + 'px';
317 canvas.__object__.Draw();
319 // Set the width and height on the DIV
320 RGraph.Resizing.div.style.width = canvas.__original_width__ + 'px';
321 RGraph.Resizing.div.style.height = canvas.__original_height__ + 'px';
324 * Fire the resize event
326 RGraph.FireCustomEvent(canvas.__object__, 'onresize');