How to reset Raphael canvas size when dragging the rectangle

Question

The drag function in Raphael is object.drag(move,start,up)

My idea is detecting the object's position in start function, if object's width or height larger than current canvas's size, then reset the canvas size, like increasing 100 for height or width.

var R = Raphael("canvas",500,500);

function rectangle(){
  var ox = 0; 
  var oy = 0;
  var rect = R.rect(100,100,10,20).attr({
fill: "white",
stroke: "black"
});

var start = function () {

    this.ox = this.attr("x");
    this.oy = this.attr("y");        

    this.box.ow = this.box.attr("width");
    this.box.oh = this.box.attr("height"); 

    },

    move = function (dx, dy) {

    this.attr({x: this.ox + dx, y: this.oy + dy});
    this.box.attr({width: this.box.ow + dx, height: this.box.oh + dy});

    if (this.attr("x") > R.width){
      R.width = R.width + 100;
    }

    if (this.attr("y") > R.height){
      R.height = R.height + 100;
    }

   R.setSize(R.width,R.height);

    },
    up = function () {
      ox = 0;
      oy = 0;

    };
 rect.drag(move, start, up);

  }
  window.onload = rectangle();

Rectangle is draggable, however, the canvas's size does not update as the rectangle's position. So what's wrong with my code? Anyone could help?

Answer 1

If you have a rectangle, the x and y coordinates are generally considered to be located in the upper left corner. If you're dragging the rectangle, within your canvas, it's not possible to have a x and/or y outside the canvas.

Instead of checking

if (this.attr("x") > R.width){
      R.width = R.width + 100;
}

if (this.attr("y") > R.height){
  R.height = R.height + 100;
}

Try checking for something like (R.width-rect.width), whatever your value of the rectangle is. Also do the same thing for your R.height and the rectangle's height.

Meaning:

if (this.attr("x") > R.width-rectangleWidth){
      R.width = R.width + 100;
}

if (this.attr("y") > R.height-rectangleHeight){
  R.height = R.height + 100;
}