Here is the component that I am having issues with?  I keeps shrinking
and growing from the middle out instead of the from the top left corner?

<?xml version="1.0" encoding="utf-8"?>
<fig:CalloutContainer 
        xmlns:fig="com.adobe.wheelerstreet.fig.callout.*" 
        xmlns="http://ns.adobe.com/mxml/2009";
        xmlns:mx="http://ns.adobe.com/mxml/2009";
        xmlns:gumbo="library:adobe/flex/gumbo"
        mouseDown="stopProp(event)"
        mouseMove="stopProp(event)"
    >
        
        <mx:Script>
                <![CDATA[

                        import flare.vis.data.NodeSprite;
                        import mx.events.FlexEvent;
                        
                        /* AUTOCLOSE -- if set to true (default) clicking x 
will remove
                        this instance from its parent */
                        public var autoClose:Boolean = true;
                        public var device:String;
                        public var node:NodeSprite; 
                        
                        [Bindable]
                        public var title:String = "title";
                        [Bindable]
                        public var line1:String = "line1";
                        [Bindable]
                        public var line2:String = "line2";
                        
                        public static const SUPER_DETAILS_CLOSED:String         
= "superDetailClosed";
                        public static const SUPER_DETAILS_OPENED:String         
= "superDetailOpened";
                        public static const SUPER_DETAILS_MINIMIZED:String      
=
"superDetailMinimized";
                        public static const SUPER_DETAILS_MAXIMIZED:String      
=
"superDetailMaximized";
                
                        private function stopProp( event:MouseEvent ) : void
                        {
                                event.stopPropagation();
                        }
                        
                        
                        private function superDetailsOpened(  ) : void
                        {
                                trace( 'super detials created' );
                                dispatchEvent( new Event( SUPER_DETAILS_OPENED, 
true, false ) );
                        }
                        
                        private function superDetailsMinimized( event:FlexEvent 
) : void
                        {
                                trace(event);
                                event.stopPropagation();
                                dispatchEvent( new Event( 
SUPER_DETAILS_MINIMIZED, true, false ) );
                        }
                        
                        private function superDetailsMaximized( event:FlexEvent 
) : void
                        {
                                trace(event);
                                event.stopPropagation();
                                dispatchEvent( new Event( 
SUPER_DETAILS_MAXIMIZED, true, false ) );
                        }
                        
                        private function dispatchThenCloseNodeDetails( 
event:MouseEvent ) :
void
                        {
                                event.stopImmediatePropagation();
                                //removeSuperDetails();
                                dispatchEvent( new Event( SUPER_DETAILS_CLOSED, 
true, false ) );
                                
                        }
                        
                        
                        
                        
                ]]>
        </mx:Script>
        
        <fig:states>
                <State name="minState" 
enterState="superDetailsMinimized(event)" />
        <State name="maxState" basedOn="minState"
enterState="superDetailsMaximized(event)" />
        </fig:states>
         <fig:transitions>
        <mx:Transition fromState="*" toState="maxState">
                <mx:Parallel>
                                <mx:Resize target="{ this }" duration="200"/>
                                
                </mx:Parallel>
        </mx:Transition>
        <mx:Transition fromState="maxState" toState="*">
                        <mx:Parallel>
                                <mx:Resize target="{ this }" duration="150"/>
                                
                </mx:Parallel>
        </mx:Transition>
        </fig:transitions>

        
        
        
        <mx:Canvas id="contentVBox" includeIn="maxState, minState">
                <mx:Button 
                                id="closeButton" 
                                styleName="CalloutCloseButton" 
                                right="0"
                                width="14" height="14" 
                                click="{dispatchThenCloseNodeDetails( event )}"
                                includeIn="maxState, minState"
                                />
                
                        <mx:Button 
                                id="expandButton" 
                                styleName="CalloutExpandButton" 
                                right="{closeButton.width + 2}"
                                width="14" height="14" 
                                click.minState="currentState='maxState'"
click.maxState="currentState='minState'"
                                includeIn="maxState, minState"
                                />
                <mx:HBox id="titleBar" 
                        width.minState="250" width.maxState="400" 
                        height.minState="125" height.maxState="450"
                        top="18" 
                        includeIn="maxState, minState">
                                <mx:Label 
                                        id="titleLabel" 
                                        text="{title}" 
                                        rollOver 
="{Label(event.currentTarget).setStyle('textDecoration',
'underline');}"
                                        rollOut  
="{Label(event.currentTarget).setStyle('textDecoration',
'none');}"
                                        
mouseDown="{Label(event.currentTarget).setStyle('textDecoration',
'none');}"
                                        mouseUp  
="{Label(event.currentTarget).setStyle('textDecoration',
'underline');}"
                                        click    ="{/* handleMouse(event); */}"
                                        fontWeight="bold"
                                        includeIn="maxState, minState"
                                        />
                                        
                                <!--<mx:SWFLoader 
                                
source="@Embed(source='/assets/images/skins.swf',symbol='Icon_airport')" 
                                        width="18" height="18"
                                        />-->
                </mx:HBox>      
                
        </mx:Canvas>
        
        
</fig:CalloutContainer>



--- In flexcoders@yahoogroups.com, "flexaustin" <flexaus...@...> wrote:
>
> So I guess I am wanting the opposite of the orig. post.  I have a
> component based on canvas and I want to increase its size in a modal
> fashion min/max.
> 
> Click to maximize it (increase the width/height) and minimize state
> (decrease its height and width).
> 
> When I do that now it is increasing and decreasing from center, when
> actuall I need it to increase and decrease from the top left corner.
> 
> So grow down and to the right not in from both side and in from top
> and bottom.
> 
> TIA
>


Reply via email to