Chris' Cairo Blog

January 15, 2010

Component rotation…the early stages

Filed under: What I am working on — thorgch @ 5:21 pm

It has been a while since my last post, but my time away from the blog has been well spent. After a nice holiday break, I jumped back into my goal of adding rotation functionality to the GUI Painter. In the same way you can now select a DragHandle and resize a component, I wanted to be able to switch to a RotationHandle and rotate a component. I admit that rotating a component won’t get used all that often, but there are a few scenarios when it’s going to come in handy. I can see the abuse now….”why is this list box tilted at 45 degrees?” My main push for getting component rotation functional was to simplify the layout and development of the animation overviews I work on. Even with cairo, the current method of overview layout involves a blend of Abode Illustrator, Photoshop and the GUI Painter tools. With rotation now an option in the GUI painter, Illustrator and Photoshop will play a smaller role.   

Here are some pictures and a video.   

Component Before Rotation

CairoPNGImageView Before Rotation

CairoPNGImageView After Rotation

CairoPNGImageView After Rotation

As simple as the rotation functionality may seem, let me tell you… was no picnic! However, I am proud to say that I got it all done with extensions to some of the granddaddy VisualWorks classes and there is not one override in sight. I now have a new drag mode tracker called…you guessed it…RotationDragModeTracker. It’s a subclass of CornerDragModeTracker. I also needed to create a subclass of DragHandle also un-originally called…RotationHandle. As you can tell from the screenshot and video, the rotation handles are not all that exciting graphically, but that will change soon. The work also involved a couple of small extensions to the UIPainterController.   

By far, the hardest part of this development effort was the refinement of a wrapper I created when I first got involved with cairo. It’s called the TransformWrapper. Similar to the VisualWorks translation wrapper performing translation, the new transform wrapper can also perform scale and rotation on the component it wraps (the component must be cairo based). My fight with the transform wrapper was mainly around making sure the bounds were reported properly once the transform was applied. It also didn’t help that my linear algebra skills were weak going into this.   

All in all, I am very pleased with the ability to now rotate one of my cairo widgets in the GUI painter. There is still a lot more to be done to make things a bit more intuitive on some of the painter slices. I am in the process of creating a rotation slice that gives the user a bit more direct control over where the rotation origin is. Anyway, that’s all for now…


Blog at