Drag Handles

The combination of Draggable.as and Model.as 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:

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.