Question

I have a canvas onto which I draw shapes like rectangle etc. When I move the shape using my custom mouse down/mouse move handler, the shape can go outside the parent bounds.

I am checking if the child is outside the parent’s bound to snap it back:

   var bounds:Rectangle = this.getBounds(this.parent);
   var p:Point;

   if (bounds.x <0) {
    p = new Point(0,0);
    p.offset(-bounds.x,0);
   }
   if (bounds.y <0) {
    if (!p) p = new Point(0,0);
    p.offset(0,-bounds.y);
   } 
   if (bounds.y+bounds.height > this.parent.height) {
    if (!p) p = new Point(0,0);
    p.offset(0,-bounds.y-height+this.parent.height);
   }
   if (bounds.x+bounds.width > this.parent.width) {
    if (!p) p = new Point(0,0);
    p.offset(-bounds.x-width+this.parent.width,0);
   }   
   if (p) {
    trace("invoking snapInside ", p);
           snapInside(p);

The snapInside method gets called when I go outside the left or top boundary. But when the child is dragged outside the right or bottom boundary, I find Flex/Flash runtime automatically expands the parent’s height and width. So say the parent size was initially 800×600, if child Y bounds exceed 800 by say 20 pixel, I find the this.parent.height automatically resized by flex to 820!!

How do I prevent the parent from resizing when child goes outside the original bounds of the parent ?

Answer 1

when the parent object is created save the bounds to a var outside your function so you can call to the stored size later. If you keep checking the bounds within your function then of course it will change as the objects with in the parent change. Or set the bounds on mouseDown but not on drag so you have an updated bounds before your drag object hits the edge.