Context Navigation

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

Last change on this file since 144 was 77, checked in by fpvanagthoven, 14 years ago
RGraph
File size: 21.2 KB

Rev	Line
[77]	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: