Hello! Today I'll explain you how to create skin for tool and what skin parts it uses. If you look at default skin for tool you'll see following:
1. States.
States determines if key modifiers is pressed. If on start of transformation shift button pressed then tool will be switched into "shiftPressed" state until transformation complete. Priority shift, ctrl, alt. You can put some modification on states for example if shift pressed then maintain aspect ratio. 2. Cursor manager.
Here you can add cursors for each control. Property "maintainRotation" specifies whether cursor should be rotated automatically to take the same angle as tool (you can see it with default resize cursor). Also here you can specify hint popup (specify your custom skin), it automatically shows under current cursor position with specified offset while transformation is in progress.
3. Preview
Used when "liveTransformation" property is false to show bitmap copy of target.
4. Bounding group
It will be positioned automaticlly and used as container where all action content would be placed.
5. Controls
You can specify as many controls as you want and add to them different operations. Property "anchor" on Control object would specify Anchor ui object that would be switched into anchor state while operation is in progress. Property "anchor" on Operation specifies position of ahchor relative to tool size (point [0.5, 1] means that anchor is width*0.5, height*1). If you don't specify it then anchor would be given from control's anchor (center of it in tool's coordinate space), if control's anchor also is not specified then default value [0.5,0.5] would be given.
6. Anchor
Control can be used as UI anchor but if you have for example rotate operation where anchor is center than you can put there special Anchor object thet will be shown while rotation.
See below some examples with different skins. Press view source context menu to get source code.
Hello! Example below shows how to simply add z-order functionality such as bring to front, send to back, etc. using action content. Press view source context menu to get source code.
Hello! Now you can easily add your custom controls using action content property of Transform Tool. It will be placed into bounding group that is positioned always around tool with rotation 0, see red rectangle on picture below.
If you creates your custom transform tool skin make sure that skin part "boundingGroup" is defined. See example below. Press view source context menu to get source code.
Hello! If you want to have editable text in Transform Tool you need two different modes (e.g. like in MS PowePoint). You can implement it easily extending Transform Tool component like in example below. Drag by border to perform moving. Press view source context menu to get source code.
