Resize Flex/Flash object from the left side?

Question

I'm working on Flex component which can be resized using handles on the right and left (that is, if you click and drag the left side, the component will grow to the left, if you click and drag on the right, it will grow to the right).

Right now I am using:

var oldX:Number = this.x;
this.x = event.stageX + (initial.x - initial.stageX); // Move the left edge to the left
this.width += oldX - this.x; // Increase the width to compensate for the move to the left

But that makes the right side jump around, and generally looks ugly.

What is the "right" to do this? Is there something fundamental I've gotten wrong?

Thanks!

Edit: The jitter occurs on the right side of the component. When I set this.x, the component moves to the left, the screen redraws, then the width is updated, and the screen redraws again.

Answer 1

Depending on how you have the listeners for the handles set up, the problem could be that the resize code is called over and over again because when you set the new x position for the component the handle will go under the mouse cursor effectively calling the resize code again and so on.

Answer 2

I'm not a Flex guy, but I imagine your jitter is something to do with the Flex framework internally using Stage.invalidate() or some such thing to cause redraws during frame execution.

I imagine there's probably a "framework" way to deal with the problem, but for a workaround to make your change into one atomic operation you could update the object's transform directly, along these lines:

var dx:Number = // however you're finding this
var m:Matrix = new Matrix();
m.scale( scaleX*(width-dx)/width, scaleY );
m.translate( x+dx, y );
transform.matrix = m;

That should work for a simple graphic, but I'm not sure if it would work with a component that probably needs to catch events that the dimensions have changed and redraw itself. I think that's the only way to make your update atomic though, so if something along those lines doesn't help then you'll need an answer from someone more up on the framework.

Answer 3

Had the same problem.

The problem is that the stage isn't refreshing enough.

Just add stage.invalidate(); after your 2 assignments ...