Context Navigation

source: Dev/trunk/RGraph/libraries/RGraph.common.resizing.js @ 77

Last change on this file since 77 was 77, checked in by fpvanagthoven, 14 years ago
RGraph
File size: 21.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	* This is an array of CSS properties that should be preserved when adding theplaceholder DIV
20	*/
21	__rgraph_resizing_preserve_css_properties__ = [];
22
23	/**
24	* This function can be used to allow resizing
25	*
26	* @param object obj Your graph object
27	*/
28	RGraph.AllowResizing = function (obj)
29	{
30	if (obj.Get('chart.resizable')) {
31	var canvas = obj.canvas;
32	var context = obj.context;
33	var resizeHandle = 15;
34	RGraph.Resizing.canvas = canvas;
35	RGraph.Resizing.placeHolders = [];
36
37	/**
38	* Add the original width and height to the canvas
39	*/
40	if (!canvas.__original_width__ && !canvas.__original_height__) {
41	canvas.__original_width__ = canvas.width;
42	canvas.__original_height__ = canvas.height;
43	}
44
45
46	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);
47	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);
48
49
50	/**
51	* Draw the resize handle
52	*/
53	var textWidth = context.measureText('Reset').width + 2;
54
55
56	// Draw the white background for the resize handle - OPTIONAL default is rgba(0,0,0,0);
57	var bgcolor = obj.Get('chart.resize.handle.background');
58
59	if (!bgcolor) {
60	bgcolor = 'rgba(0,0,0,0)';
61	}
62
63	context.beginPath();
64	context.fillStyle = bgcolor;
65	context.moveTo(canvas.width - resizeHandle - resizeHandle + adjustX, canvas.height - resizeHandle);
66	context.fillRect(canvas.width - resizeHandle - resizeHandle + adjustX, canvas.height - resizeHandle + adjustY, 2 * resizeHandle, resizeHandle);
67	context.fill();
68
69
70	obj.context.beginPath();
71	obj.context.strokeStyle = 'gray';
72	obj.context.fillStyle = 'rgba(0,0,0,0)';
73	obj.context.lineWidth = 1;
74	obj.context.fillRect(obj.canvas.width - resizeHandle + adjustX, obj.canvas.height - resizeHandle - 2 + adjustY, resizeHandle, resizeHandle + 2);
75	obj.context.fillRect(obj.canvas.width - resizeHandle - textWidth + adjustX, obj.canvas.height - resizeHandle + adjustY, resizeHandle + textWidth, resizeHandle + 2);
76
77
78	// Draw the arrows
79
80	// Vertical line
81	obj.context.moveTo(obj.canvas.width - (resizeHandle / 2) + adjustX, obj.canvas.height - resizeHandle + adjustY);
82	obj.context.lineTo(obj.canvas.width - (resizeHandle / 2) + adjustX, obj.canvas.height + adjustY);
83
84
85	// Horizontal line
86	obj.context.moveTo(obj.canvas.width + adjustX, obj.canvas.height - (resizeHandle / 2) + adjustY);
87	obj.context.lineTo(obj.canvas.width - resizeHandle + adjustX, obj.canvas.height - (resizeHandle / 2) + adjustY);
88
89	context.fill();
90	context.stroke();
91
92
93	// Top arrow head
94	context.fillStyle = 'gray';
95	context.beginPath();
96	context.moveTo(canvas.width - (resizeHandle / 2) + adjustX, canvas.height - resizeHandle + adjustY);
97	context.lineTo(canvas.width - (resizeHandle / 2) + 3 + adjustX, canvas.height - resizeHandle + 3 + adjustY);
98	context.lineTo(canvas.width - (resizeHandle / 2) - 3 + adjustX, canvas.height - resizeHandle + 3 + adjustY);
99	context.closePath();
100	context.fill();
101
102	// Bottom arrow head
103	context.beginPath();
104	context.moveTo(canvas.width - (resizeHandle / 2) + adjustX, canvas.height + adjustY);
105	context.lineTo(canvas.width - (resizeHandle / 2) + 3 + adjustX, canvas.height - 3 + adjustY);
106	context.lineTo(canvas.width - (resizeHandle / 2) - 3 + adjustX, canvas.height - 3 + adjustY);
107	context.closePath();
108	context.fill();
109
110	// Left arrow head
111	context.beginPath();
112	context.moveTo(canvas.width - resizeHandle + adjustX, canvas.height - (resizeHandle / 2) + adjustY);
113	context.lineTo(canvas.width - resizeHandle + 3 + adjustX, canvas.height - (resizeHandle / 2) + 3 + adjustY);
114	context.lineTo(canvas.width - resizeHandle + 3 + adjustX, canvas.height - (resizeHandle / 2) - 3 + adjustY);
115	context.closePath();
116	context.fill();
117
118	// Right arrow head
119	context.beginPath();
120	context.moveTo(canvas.width + adjustX, canvas.height - (resizeHandle / 2) + adjustY);
121	context.lineTo(canvas.width - 3 + adjustX, canvas.height - (resizeHandle / 2) + 3 + adjustY);
122	context.lineTo(canvas.width - 3 + adjustX, canvas.height - (resizeHandle / 2) - 3 + adjustY);
123	context.closePath();
124	context.fill();
125
126	// Square at the centre of the arrows
127	context.beginPath();
128	context.fillStyle = 'white';
129	context.moveTo(canvas.width + adjustX, canvas.height - (resizeHandle / 2) + adjustY);
130	context.strokeRect(canvas.width - (resizeHandle / 2) - 2 + adjustX, canvas.height - (resizeHandle / 2) - 2 + adjustY, 4, 4);
131	context.fillRect(canvas.width - (resizeHandle / 2) - 2 + adjustX, canvas.height - (resizeHandle / 2) - 2 + adjustY, 4, 4);
132	context.fill();
133	context.stroke();
134
135
136	// Draw the "Reset" button
137	context.beginPath();
138	context.fillStyle = 'gray';
139	context.moveTo(canvas.width - resizeHandle - 3 + adjustX, canvas.height - resizeHandle / 2 + adjustY);
140	context.lineTo(canvas.width - resizeHandle - resizeHandle + adjustX, canvas.height - (resizeHandle / 2) + adjustY);
141	context.lineTo(canvas.width - resizeHandle - resizeHandle + 2 + adjustX, canvas.height - (resizeHandle / 2) - 2 + adjustY);
142	context.lineTo(canvas.width - resizeHandle - resizeHandle + 2 + adjustX, canvas.height - (resizeHandle / 2) + 2 + adjustY);
143	context.lineTo(canvas.width - resizeHandle - resizeHandle + adjustX, canvas.height - (resizeHandle / 2) + adjustY);
144	context.stroke();
145	context.fill();
146
147	context.beginPath();
148	context.moveTo(canvas.width - resizeHandle - resizeHandle - 1 + adjustX, canvas.height - (resizeHandle / 2) - 3 + adjustY);
149	context.lineTo(canvas.width - resizeHandle - resizeHandle - 1 + adjustX, canvas.height - (resizeHandle / 2) + 3 + adjustY);
150	context.stroke();
151	context.fill();
152
153
154
155	var window_onmousemove = function (e)
156	{
157	e = RGraph.FixEventObject(e);
158
159	var canvas = RGraph.Resizing.canvas;
160	var newWidth = RGraph.Resizing.originalw - (RGraph.Resizing.originalx - e.pageX);// - 5
161	var newHeight = RGraph.Resizing.originalh - (RGraph.Resizing.originaly - e.pageY);// - 5
162
163	if (RGraph.Resizing.mousedown) {
164	if (newWidth > (canvas.__original_width__ / 2)) RGraph.Resizing.div.style.width = newWidth + 'px';
165	if (newHeight > (canvas.__original_height__ / 2)) RGraph.Resizing.div.style.height = newHeight + 'px';
166
167	RGraph.FireCustomEvent(canvas.__object__, 'onresize');
168	}
169	}
170	window.addEventListener('mousemove', window_onmousemove, false);
171	RGraph.AddEventListener(canvas.id, 'window_mousemove', window_onmousemove);
172
173	/**
174	* The window onmouseup function
175	*/
176	var MouseupFunc = function (e)
177	{
178	if (!RGraph.Resizing \|\| !RGraph.Resizing.div \|\| !RGraph.Resizing.mousedown) {
179	return;
180	}
181
182	if (RGraph.Resizing.div) {
183
184	var div = RGraph.Resizing.div;
185	var canvas = div.__canvas__;
186	var coords = RGraph.getCanvasXY(div.__canvas__);
187
188	var parentNode = canvas.parentNode;
189
190	if (canvas.style.position != 'absolute') {
191	// Create a DIV to go in the canvases place
192	var placeHolderDIV = document.createElement('DIV');
193	placeHolderDIV.style.width = RGraph.Resizing.originalw + 'px';
194	placeHolderDIV.style.height = RGraph.Resizing.originalh + 'px';
195	//placeHolderDIV.style.backgroundColor = 'red';
196	placeHolderDIV.style.display = 'inline-block'; // Added 5th Nov 2010
197	placeHolderDIV.style.position = canvas.style.position;
198	placeHolderDIV.style.left = canvas.style.left;
199	placeHolderDIV.style.top = canvas.style.top;
200	placeHolderDIV.style.cssFloat = canvas.style.cssFloat;
201
202	parentNode.insertBefore(placeHolderDIV, canvas);
203	}
204
205
206	// Now set the canvas to be positioned absolutely
207	canvas.style.backgroundColor = 'white';
208	canvas.style.position = 'absolute';
209	canvas.style.border = '1px dashed gray';
210	canvas.style.left = (RGraph.Resizing.originalCanvasX - 1) + 'px';
211	canvas.style.top = (RGraph.Resizing.originalCanvasY - 1) + 'px';
212
213	canvas.width = parseInt(div.style.width);
214	canvas.height = parseInt(div.style.height);
215
216
217
218	/**
219	* Fire the onresize event
220	*/
221	RGraph.FireCustomEvent(canvas.__object__, 'onresizebeforedraw');
222
223	canvas.__object__.Draw();
224
225	// Get rid of transparent semi-opaque DIV
226	RGraph.Resizing.mousedown = false;
227	div.style.display = 'none';
228	document.body.removeChild(div);
229	}
230
231	/**
232	* If there is zoom enabled in thumbnail mode, lose the zoom image
233	*/
234	if (RGraph.Registry.Get('chart.zoomed.div') \|\| RGraph.Registry.Get('chart.zoomed.img')) {
235	RGraph.Registry.Set('chart.zoomed.div', null);
236	RGraph.Registry.Set('chart.zoomed.img', null);
237	}
238
239	/**
240	* Fire the onresize event
241	*/
242	RGraph.FireCustomEvent(canvas.__object__, 'onresizeend');
243	}
244
245
246	var window_onmouseup = MouseupFunc;
247	window.addEventListener('onmouseup', window_onmouseup, false);
248	RGraph.AddEventListener(canvas.id, 'window_mouseup', window_onmouseup);
249
250
251	var canvas_onmousemove = function (e)
252	{
253	e = RGraph.FixEventObject(e);
254
255	var coords = RGraph.getMouseXY(e);
256	var canvas = e.target;
257	var context = canvas.getContext('2d');
258	//var orig_cursor = canvas.style.cursor; // Used for playing well with tooltips
259
260	RGraph.Resizing.title = canvas.title;
261
262	if ( (coords[0] > (canvas.width - resizeHandle)
263	&& coords[0] < canvas.width
264	&& coords[1] > (canvas.height - resizeHandle)
265	&& coords[1] < canvas.height)) {
266
267	canvas.style.cursor = 'move';
268
269	if (navigator.userAgent.indexOf('Chrome') > 0 \|\| document.all) {
270	canvas.title = 'Resize the graph';
271	}
272
273	} else if ( coords[0] > (canvas.width - resizeHandle - resizeHandle)
274	&& coords[0] < canvas.width - resizeHandle
275	&& coords[1] > (canvas.height - resizeHandle)
276	&& coords[1] < canvas.height) {
277
278	canvas.style.cursor = 'pointer';
279
280	if (navigator.userAgent.indexOf('Chrome') > 0 \|\| document.all) {
281	canvas.title = 'Reset graph to original size';
282	}
283
284	} else {
285
286	// orig_cursor
287	canvas.style.cursor = 'default';
288	canvas.title = '';
289	}
290	}
291	canvas.addEventListener('mousemove', canvas_onmousemove, false);
292	RGraph.AddEventListener(canvas.id, 'mousemove', canvas_onmousemove);
293
294
295
296	var canvas_onmouseout = function (e)
297	{
298	e.target.style.cursor = 'default';
299	e.target.title = '';
300	}
301	canvas.addEventListener('mouseout', canvas_onmouseout, false);
302	RGraph.AddEventListener(canvas.id, 'mouseout', canvas_onmouseout);
303
304
305
306	var canvas_onmousedown = function (e)
307	{
308	e = RGraph.FixEventObject(e);
309
310	var coords = RGraph.getMouseXY(e);
311	var canvasCoords = RGraph.getCanvasXY(e.target);
312	var canvas = e.target;
313
314	if ( coords[0] > (obj.canvas.width - resizeHandle)
315	&& coords[0] < obj.canvas.width
316	&& coords[1] > (obj.canvas.height - resizeHandle)
317	&& coords[1] < obj.canvas.height) {
318
319	RGraph.FireCustomEvent(obj, 'onresizebegin');
320
321	// Save the existing border
322	if (canvas.__original_css_border__ == null) {
323	canvas.__original_css_border__ = canvas.style.border;
324	}
325
326	RGraph.Resizing.mousedown = true;
327
328
329	/**
330	* Create the semi-opaque DIV
331	*/
332
333	var div = document.createElement('DIV');
334	div.style.position = 'absolute';
335	div.style.left = canvasCoords[0] + 'px';
336	div.style.top = canvasCoords[1] + 'px';
337	div.style.width = canvas.width + 'px';
338	div.style.height = canvas.height + 'px';
339	div.style.border = '1px dotted black';
340	div.style.backgroundColor = 'gray';
341	div.style.opacity = 0.5;
342	div.__canvas__ = e.target;
343
344	document.body.appendChild(div);
345	RGraph.Resizing.div = div;
346	RGraph.Resizing.placeHolders.push(div);
347
348	// Hide the previous resize indicator layers. This is only necessary it seems for the Meter chart
349	for (var i=0; i<(RGraph.Resizing.placeHolders.length - 1); ++i) {
350	RGraph.Resizing.placeHolders[i].style.display = 'none';
351	}
352
353	// This is a repetition of the window.onmouseup function (No need to use DOM2 here)
354	div.onmouseup = function (e)
355	{
356	MouseupFunc(e);
357	}
358
359
360	// No need to use DOM2 here
361	RGraph.Resizing.div.onmouseover = function (e)
362	{
363	e = RGraph.FixEventObject(e);
364	e.stopPropagation();
365	}
366
367	// The mouse
368	RGraph.Resizing.originalx = e.pageX;
369	RGraph.Resizing.originaly = e.pageY;
370
371	RGraph.Resizing.originalw = obj.canvas.width;
372	RGraph.Resizing.originalh = obj.canvas.height;
373
374	RGraph.Resizing.originalCanvasX = RGraph.getCanvasXY(obj.canvas)[0];
375	RGraph.Resizing.originalCanvasY = RGraph.getCanvasXY(obj.canvas)[1];
376	}
377
378
379	/**
380	* This facilitates the reset button
381	*/
382	if ( coords[0] > (canvas.width - resizeHandle - resizeHandle)
383	&& coords[0] < canvas.width - resizeHandle
384	&& coords[1] > (canvas.height - resizeHandle)
385	&& coords[1] < canvas.height) {
386
387	/**
388	* Fire the onresizebegin event
389	*/
390	RGraph.FireCustomEvent(canvas.__object__, 'onresizebegin');
391
392	// Restore the original width and height
393	canvas.width = canvas.__original_width__;
394	canvas.height = canvas.__original_height__;
395
396	// Lose the border
397	canvas.style.border = canvas.__original_css_border__;
398	//canvas.__original_css_border__ = null;
399
400	// Add 1 pixel to the top/left because the border is going
401	canvas.style.left = (parseInt(canvas.style.left)) + 'px';
402	canvas.style.top = (parseInt(canvas.style.top)) + 'px';
403
404
405	RGraph.FireCustomEvent(canvas.__object__, 'onresizebeforedraw');
406
407	// Redraw the canvas
408	canvas.__object__.Draw();
409
410	// Set the width and height on the DIV
411	if (RGraph.Resizing.div) {
412	RGraph.Resizing.div.style.width = canvas.__original_width__ + 'px';
413	RGraph.Resizing.div.style.height = canvas.__original_height__ + 'px';
414	}
415
416	/**
417	* Fire the resize event
418	*/
419	RGraph.FireCustomEvent(canvas.__object__, 'onresize');
420	RGraph.FireCustomEvent(canvas.__object__, 'onresizeend');
421	}
422	}
423	canvas.addEventListener('mousedown', canvas_onmousedown, false);
424	RGraph.AddEventListener(canvas.id, 'mousedown', canvas_onmousedown);
425
426
427	/**
428	* This function facilitates the reset button
429	*
430	* NOTE: 31st December 2010 - doesn't appear to be being used any more
431	*/
432
433	/*
434	canvas.onclick = function (e)
435	{
436	var coords = RGraph.getMouseXY(e);
437	var canvas = e.target;
438
439	if ( coords[0] > (canvas.width - resizeHandle - resizeHandle)
440	&& coords[0] < canvas.width - resizeHandle
441	&& coords[1] > (canvas.height - resizeHandle)
442	&& coords[1] < canvas.height) {
443
444	// Restore the original width and height
445	canvas.width = canvas.__original_width__;
446	canvas.height = canvas.__original_height__;
447
448	// Lose the border
449	canvas.style.border = '';
450
451	// Add 1 pixel to the top/left because the border is going
452	canvas.style.left = (parseInt(canvas.style.left) + 1) + 'px';
453	canvas.style.top = (parseInt(canvas.style.top) + 1) + 'px';
454
455	// Fire the onresizebeforedraw event
456	RGraph.FireCustomEvent(canvas.__object__, 'onresizebeforedraw');
457
458	// Redraw the canvas
459	canvas.__object__.Draw();
460
461	// Set the width and height on the DIV
462	RGraph.Resizing.div.style.width = canvas.__original_width__ + 'px';
463	RGraph.Resizing.div.style.height = canvas.__original_height__ + 'px';
464
465	// Fire the resize event
466	RGraph.FireCustomEvent(canvas.__object__, 'onresize');
467	}
468	}
469	*/
470	}
471	}

Note: See TracBrowser for help on using the repository browser.

Download in other formats: