Slow/unpredictable response when switching between editing different TextFlows
Hi All,
Our (AIR) app requires multiple textFlow objects contained in groups over the app desktop. The user should be able to begin editing any one of these by clicking on the text, then beginning editing. I have been doing this by switching an EditManager in and out based on mouse click events, but I notice there is some delay that appears arbitrary after the mouse click, before editing is possible. The MXML and AS3 code below gives an example. You have a desktop with two text elements. When you mouse over one and click on the text, it will usually enter edit mode (with an I-bar cursor) pretty quickly. But when you click on the second text group the I-bar (and edit functionality) often doesn’t appear until you mouse out and mouse in again. On other occasions the I-bar will appear after just moving the cursor about in the group a bit. Clicking on the desktop and then on the text elements gives similar behaviour. Either way, we really need to get more responsive click to editing!
From tracking through it seems that there is some hidden sequence of events between assigning the interactionManager to the textFlow, and the events being captured and handled by the ContainerController / EditManager. Is there some way I can know this has occurred, or force it to happen immediately?
Thanks!
Darryl
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:ns1="*"
width="800"
height="600"
click="clickHandler(event)">
<fx:Script>
<![CDATA[
protected function clickHandler(event:MouseEvent):void
{
var targ:DisplayObject = DisplayObject(event.target);
while ( targ && !(targ is Group ) ) {
targ = targ.parent;
}
text1.canEdit = (targ == text1);
text2.canEdit = (targ == text2);
}
]]>
</fx:Script>
<s:Group width="800" height="600" id="baseGroup">
<ns1:TextGroup left="80" top="200" width="240" height="200" id="text1" text="This is text group 1"/>
<ns1:TextGroup left="480" top="200" width="240" height="200" id="text2" text="This is text group 2"/>
</s:Group>
</s:WindowedApplication>
package
{
import flash.events.MouseEvent;
import flashx.textLayout.container.ContainerController;
import flashx.textLayout.conversion.TextConverter;
import flashx.textLayout.edit.EditManager;
import flashx.textLayout.elements.TextFlow;
import flashx.undo.UndoManager;
import spark.components.Group;
import spark.core.SpriteVisualElement;
import spark.utils.TextFlowUtil;
public class TextGroup extends Group
{
protected var _textFlow:TextFlow=null;
protected var _editManager:EditManager=new EditManager(new UndoManager());
protected var _container:SpriteVisualElement = new SpriteVisualElement;
protected var _controller:ContainerController;
public function TextGroup()
{
super();
this.addElement(_container);
_container.percentHeight = 100;
_container.percentWidth = 100;
_controller = new ContainerController(_container,this.width,this.height);
this.addEventListener(MouseEvent.MOUSE_OVER,eventHandler);
this.addEventListener(MouseEvent.MOUSE_OUT,eventHandler);
}
public function set text(txt:String):void {
_textFlow=TextConverter.importToFlow(txt, TextConverter.PLAIN_TEXT_FORMAT);
_textFlow.flowComposer.addController(_controller);
_controller.setCompositionSize(this.width,this.height);
_textFlow.flowComposer.updateAllControllers();
}
public function get text():String {
return _textFlow.getText();
}
public function set canEdit(b:Boolean):void {
if (b && !_textFlow.interactionManager) {
_textFlow.interactionManager = _editManager;
} else if (!b && _textFlow.interactionManager ) {
_textFlow.interactionManager = null;
}
}
protected function eventHandler(event:MouseEvent):void
{
switch(event.type) {
case (MouseEvent.MOUSE_OVER):
this.opaqueBackground = 0xc4c4c4;
break;
case (MouseEvent.MOUSE_OUT):
this.opaqueBackground = null;
break;
}
}
}
}
AdChoices