Sunday, February 5, 2012

Transform Tool - text modes

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. 

SWC: Transform Tool 2 version 2.4.8.
Source code: Project home page.
ASDoc:  API ASDoc.
Required Flex SDK version: SDK 4.5

9 comments:

  1. hi, I'm using part of this code but i'm facing some issue.

    I have some images and some text, so i use this code

    protected function select(event:MouseEvent):void
    {
    if(!tool.target || tool.target != event.target)
    {
    tool.target = event.target as UIComponent;
    tool.visible = true;
    tool.startMoving(event);
    }
    }

    protected function designArea_clickHandler(event:MouseEvent):void
    {
    if(event.target == designArea)
    {
    tool.target = null;
    tool.visible = false;
    }
    }

    but when i click the text, it focus on the textskin not the textarea. It works fine, it i hard-code to the textarea like the example : tool.target = {mytextarea}; but i cant deselect it, or mousechildren = false; but then I cant edit text.

    Any idea? thanks

    ReplyDelete
    Replies
    1. Hi, use currentTarget in select function

      protected function select(event:MouseEvent):void
      {
      if(!tool.target || tool.target != event.currentTarget)
      {
      tool.target = event.currentTarget as UIComponent;

      ...

      Delete
    2. This comment has been removed by the author.

      Delete
    3. thanks for that code, it solved part of it, i can now select and resize the text properly, by seems i having a issue with the focus now, tool vs the textfield. i'll try to work on it some more, cheers..

      Delete
  2. hi this Nagaraju, i have some problem while i am using a transformation tool for my RichTextEditor control.. problem is when i double click RichTextEditor the transformation tool is applied but when i just moved my mouse pointer this RichTextEditor is also moving with the mouse pointer..that is when RichTextEditor is moving as it is sticked by that mouse pointer.. i tried to apply tool when mouse clicked..could you help me

    ReplyDelete
    Replies
    1. Please provide me piece of code on my email vstyran@gmail.com

      Delete
  3. What about resizable Textarea?

    ReplyDelete
  4. Hi Volodymyr,

    I have small issue, that already described by Nag.
    RichEditableText component inside Group component. When I set focus to RichEditableText I still availble to drag it instead text selection ability.
    Please note that I'm using UITransformTool instead TransformTool.
    Problem that I won't want drag component when it focused on RichEditableText. I just want to drag it like in your example, only when user drag it by picking border.
    Please help

    I will provide code sample if you can't help me fast with it.
    Thank you

    ReplyDelete
  5. solved, you need to find this string
    skinClass="{(hostComponent.uiTargetsLength > 0) ? MoveControlSkin : FilledMoveControlSkin}"
    replace MoveControlSkin with FilledMoveControlSkin and vice versa
    now RichEditableText will be non draggable

    ReplyDelete