Drag Handles

After writing drag handles manually a few different times, I decided to write a library, and then another, and finally this one, which is much cleaner than my previous efforts. The combination of Draggable.as (view/controller) and Model.as (model) provide drag handles. Here’s a demo showing continuous control of the size and discrete (stepped) control over the angle. In addition, there’s a minimum and maximum size allowed:

Demo

The corresponding code constructs a drag handle that decomposes its position into radius (controlling size) and angle (controlling rotation angle):

new Draggable(
        Model.Polar(Model.ref(area, 'scaleX')
                     .callback(function():void { area.scaleY = area.scaleX; })
                     .clamped(0.2, 1.0)
                     .multiply(100),
                     Model.ref(area, 'rotation')
                     .rounded(15)
                     .multiply(Math.PI/180)
                     ).offset(new Point(200, 200))
         );

A Draggable takes a Model of a Point. Often you want to control a scalar instead of a Point, so use either Model.Polar or Model.Cartesian to decompose a point into two scalars. Model.constant(value) will always return value. Model.ref(obj, ‘prop’) will read from obj.prop and update it with updates. Models can be modified with methods such as .clamped, .multiply, .add, .offset, .rounded, and .callback; each of these returns a new model that performs the desired operation before or after passing updates on to the original model.

The draggable sprite contains three separate layers, for normal, hover, and dragging states. You can draw anything you want into them, or subclass Draggable and override draw().

The two classes together add 1937 bytes to the swf.

I also ported this library to Javascript and used it in this tutorial . Although it mostly worked well, there were some things that didn’t work as nicely as I would’ve liked, so I need to revisit this abstraction.