Today, I worked a bit on getting an alternative look for ObjectHandles working. See the blue border in the screen shot? Clicking the left, right, or bottom edge resizes, and the top bar moves it around. The corners resize as expected as well. This is s a decent compromise for when you want to have text inside a moveable object, and you still want to be able to select the text with the mouse.
Here’s how I did it.
First, I created some custom handle classes. I had three other versions, one for the corners, one for the bottom bar, and one for the vertical ones. (They probably could have been a single class with a bit of smarts to it)
Here’s the one for the top horizontal bar.
-
-
<?xml version="1.0" encoding="utf-8"?>
-
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
-
xmlns:s="library://ns.adobe.com/flex/spark"
-
xmlns:mx="library://ns.adobe.com/flex/mx"
-
implements="com.roguedevelopment.objecthandles.IHandle"
-
width="{model.width + 8}" height="12"
-
-
>
-
<fx:Script>
-
<![CDATA[
-
import com.roguedevelopment.objecthandles.HandleDescription;
-
import com.roguedevelopment.objecthandles.IHandle;
-
import com.roguedevelopment.todoboard.model.BoardObject;
-
-
[Bindable] protected var hd:HandleDescription;
-
[Bindable] protected var model:BoardObject;
-
-
public function get handleDescriptor():HandleDescription
-
{
-
return hd;
-
}
-
-
public function set handleDescriptor(value:HandleDescription):void
-
{
-
hd = value;
-
}
-
-
public function redraw():void
-
{
-
invalidateDisplayList();
-
}
-
-
public function get targetModel():Object
-
{
-
return model;
-
}
-
-
public function set targetModel(value:Object):void
-
{
-
model = value as BoardObject;
-
}
-
-
]]>
-
</fx:Script>
-
<fx:Declarations>
-
<!– Place non-visual elements (e.g., services, value objects) here –>
-
</fx:Declarations>
-
<s:Rect x="{-width/2}" y="{-height/2}" width="100%" height="100%" topLeftRadiusX="3" topLeftRadiusY="3" topRightRadiusX="3" topRightRadiusY="3">
-
<s:fill>
-
<s:SolidColor color="#0A96CA" />
-
</s:fill>
-
<s:stroke>
-
<s:SolidColorStroke color="#077BA7" />
-
</s:stroke>
-
</s:Rect>
-
</s:Group>
-
-
The big difference between this and the normal handles, is that the size of the handles is dependent on the width/height of the model object, something I hadn’t tried before.
Next, I created a custom handle configuration to position them around the edges.
-
-
oh = new ObjectHandles( sprite , selectionManager);
-
-
oh.defaultHandles = [];
-
-
// Top border
-
oh.defaultHandles.push( new HandleDescription( HandleRoles.MOVE,
-
new Point(50,0) ,
-
new Point(0,-2) , new ClassFactory( TopHorizontalGrabberHandle )) );
-
-
// Bottom border
-
oh.defaultHandles.push( new HandleDescription( HandleRoles.RESIZE_DOWN,
-
new Point(50,100) ,
-
new Point(0,2) , new ClassFactory( HorizontalGrabberHandle )) );
-
-
// Left border
-
oh.defaultHandles.push( new HandleDescription( HandleRoles.RESIZE_LEFT,
-
new Point(0,50) ,
-
new Point(-2,0) , new ClassFactory( VerticalGrabberHandle )) );
-
-
// Right border
-
oh.defaultHandles.push( new HandleDescription( HandleRoles.RESIZE_RIGHT,
-
new Point(100,50) ,
-
new Point(2,0) , new ClassFactory( VerticalGrabberHandle )) );
-
-
-
oh.defaultHandles.push( new HandleDescription( HandleRoles.RESIZE_UP + HandleRoles.RESIZE_LEFT,
-
zero ,
-
new Point(-2,-2) ,
-
new ClassFactory(CornerGrabberHandle)
-
) );
-
-
-
oh.defaultHandles.push( new HandleDescription( HandleRoles.RESIZE_UP + HandleRoles.RESIZE_RIGHT,
-
new Point(100,0) ,
-
new Point(2,-2) ,
-
new ClassFactory(CornerGrabberHandle))
-
);
-
-
-
-
oh.defaultHandles.push( new HandleDescription( HandleRoles.RESIZE_DOWN + HandleRoles.RESIZE_RIGHT,
-
new Point(100,100) ,
-
new Point(2,2) ,
-
new ClassFactory(CornerGrabberHandle)));
-
-
-
-
oh.defaultHandles.push( new HandleDescription( HandleRoles.RESIZE_DOWN + HandleRoles.RESIZE_LEFT,
-
new Point(0,100) ,
-
new Point(-2,2) ,
-
new ClassFactory(CornerGrabberHandle) ) );
-
-
-
oh.defaultHandles.push( new HandleDescription( HandleRoles.ROTATE,
-
new Point(100,50) ,
-
new Point(15,0) ));
-
And unfortunately, at this point I realized the ObjectHandles didn’t correctly rotate it’s handles, so everything went wacky when I rotated. So a bit of tinkering around in the core library and I got that fixed.
End results:
New version of ObjectHandles posted:
http://code.google.com/p/flex-object-handles/downloads/list
Besides the rotating handles change, I’ve also made the examples build under flex 3 again, and added a submitted patch that allows you to have an isLocked attribute on your model objects. When set that, you can’t drag or resize that object.
Solution for Problem #1