Context Navigation

source: Dev/branches/jQueryUI/client/RGraph/libraries/RGraph.common.resizing.js @ 249

Last change on this file since 249 was 249, checked in by hendrikvanantwerpen, 13 years ago

This one's for Subversion, because it's so close...

First widget (stripped down sequencer).
Seperated client and server code in two direcotry trees.

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: