libraries/RGraph.common.resizing.js

   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 function can be used to allow resizing
  20     *
  21     * @param object obj Your graph object
  22     */
  23     RGraph.AllowResizing = function (obj)
  24     {
  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;
  30
  31             /**
  32             * Add the original width and height to the canvas
  33             */
  34             if (!canvas.__original_width__ && !canvas.__original_height__) {
  35                 canvas.__original_width__  = canvas.width;
  36                 canvas.__original_height__ = canvas.height;
  37             }
  38
  39             /**
  40             * Draw the resize handle
  41             */
  42             var textWidth = context.measureText('Reset').width + 2;
  43
  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);
  50
  51
  52                 // Draw the arrows
  53
  54                     // Vertical line
  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);
  57
  58
  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));
  61
  62             context.fill();
  63             context.stroke();
  64
  65             // Top arrow head
  66             context.fillStyle = 'gray';
  67             context.beginPath();
  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);
  71             context.closePath();
  72             context.fill();
  73
  74             // Bottom arrow head
  75             context.beginPath();
  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);
  79             context.closePath();
  80             context.fill();
  81
  82             // Left arrow head
  83             context.beginPath();
  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);
  87             context.closePath();
  88             context.fill();
  89
  90             // Right arrow head
  91             context.beginPath();
  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);
  95             context.closePath();
  96             context.fill();
  97
  98             // Square at the centre of the arrows
  99             context.beginPath();
 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);
 104             context.fill();
 105             context.stroke();
 106
 107
 108             // Draw the "Reset" button
 109             context.beginPath();
 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));
 116             context.stroke();
 117             context.fill();
 118
 119             context.beginPath();
 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);
 122             context.stroke();
 123             context.fill();
 124
 125
 126             window.onmousemove = function (e)
 127             {
 128                 e = RGraph.FixEventObject(e);
 129
 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
 133
 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';
 137                 }
 138             }
 139
 140             /**
 141             * The window onmouseup function
 142             */
 143             var MouseupFunc = function (e)
 144             {
 145                 if (!RGraph.Resizing || !RGraph.Resizing.div || !RGraph.Resizing.mousedown) {
 146                     return;
 147                 }
 148
 149                 if (RGraph.Resizing.div) {
 150
 151                     var div   = RGraph.Resizing.div;
 152                     var canvas = div.__canvas__;
 153                     var coords = RGraph.getCanvasXY(div.__canvas__);
 154
 155                     var parentNode = canvas.parentNode;
 156
 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);
 169                     }
 170
 171
 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';
 178
 179                     canvas.width = parseInt(div.style.width);
 180                     canvas.height = parseInt(div.style.height);
 181                     canvas.__object__.Draw();
 182
 183                     // Get rid of transparent semi-opaque DIV
 184                     RGraph.Resizing.mousedown = false;
 185                     div.style.left = '-1000px';
 186                     div.style.top = '-1000px';
 187                 }
 188
 189                 /**
 190                 * Fire the onresize event
 191                 */
 192                 RGraph.FireCustomEvent(canvas.__object__, 'onresize');
 193             }
 194
 195
 196             window.onmouseup = MouseupFunc;
 197
 198
 199             canvas.onmousemove = function (e)
 200             {
 201                 e = RGraph.FixEventObject(e);
 202
 203                 var coords  = RGraph.getMouseXY(e);
 204                 var canvas  = e.target;
 205                 var context = canvas.getContext('2d');
 206
 207                 RGraph.Resizing.title = canvas.title;
 208
 209                 if (   (coords[0] > (canvas.width - resizeHandle)
 210                     && coords[0] < canvas.width
 211                     && coords[1] > (canvas.height - resizeHandle)
 212                     && coords[1] < canvas.height)) {
 213
 214                         canvas.title = 'Resize the graph';
 215                         canvas.style.cursor = 'move';
 216
 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) {
 221
 222                     canvas.style.cursor = 'pointer';
 223                     canvas.title = 'Reset graph to original size';
 224
 225                 } else {
 226
 227                     canvas.style.cursor = 'default';
 228                     canvas.title = '';
 229                 }
 230             }
 231
 232
 233             canvas.onmousedown = function (e)
 234             {
 235                 e = RGraph.FixEventObject(e);
 236
 237                 var coords = RGraph.getMouseXY(e);
 238                 var canvasCoords = RGraph.getCanvasXY(e.target);
 239
 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) {
 244
 245                     RGraph.Resizing.mousedown = true;
 246
 247
 248                     /**
 249                     * Create the semi-opaque DIV
 250                     */
 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;
 261
 262                     document.body.appendChild(div);
 263                     RGraph.Resizing.div = div;
 264
 265                     // This is a repetition of the window.onmouseup function
 266                     div.onmouseup = function (e)
 267                     {
 268                         MouseupFunc(e);
 269                     }
 270
 271
 272                     RGraph.Resizing.div.onmouseover = function (e)
 273                     {
 274                         e = RGraph.FixEventObject(e);
 275                         e.stopPropagation();
 276                     }
 277
 278                     // The mouse
 279                     RGraph.Resizing.originalx = e.pageX;
 280                     RGraph.Resizing.originaly = e.pageY;
 281
 282                     //The canvas
 283                     RGraph.Resizing.originalw = obj.canvas.width;
 284                     RGraph.Resizing.originalh = obj.canvas.height;
 285
 286                     RGraph.Resizing.originalCanvasX = RGraph.getCanvasXY(obj.canvas)[0];
 287                     RGraph.Resizing.originalCanvasY = RGraph.getCanvasXY(obj.canvas)[1];
 288                 }
 289             }
 290
 291
 292             /**
 293             * This function facilitates the reset button
 294             */
 295             canvas.onclick = function (e)
 296             {
 297                 var coords = RGraph.getMouseXY(e);
 298                 var canvas = e.target;
 299
 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) {
 304
 305                     // Restore the original width and height
 306                     canvas.width = canvas.__original_width__;
 307                     canvas.height = canvas.__original_height__;
 308
 309                     // Lose the border
 310                     canvas.style.border = '';
 311
 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';
 315
 316                     // Redraw the canvas
 317                     canvas.__object__.Draw();
 318
 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';
 322
 323                     /**
 324                     * Fire the resize event
 325                     */
 326                     RGraph.FireCustomEvent(canvas.__object__, 'onresize');
 327                 }
 328             }
 329         }
 330     }