<?xml version="1.0" encoding="utf-8"?>
<!--

////////////////////////////////////////////////////////////////////////////////
//
//    Copyright 2014 Ardisia Labs LLC. All Rights Reserved.
//
//    This file is licensed under the Apache License, Version 2.0 (the "License");
//    you may not use this file except in compliance with the License.
//    You may obtain a copy of the License at
//
//      http://www.apache.org/licenses/LICENSE-2.0
//
//    Unless required by applicable law or agreed to in writing, software
//    distributed under the License is distributed on an "AS IS" BASIS,
//    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
//    See the License for the specific language governing permissions and
//    limitations under the License.
//
////////////////////////////////////////////////////////////////////////////////

-->
<s:Module 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:transformContainer="ardisia.components.transformContainer.*"
          xmlns:containers="containers.*"
          xmlns:data="containers.data.*"
          xmlns:separators="ardisia.components.separators.*"
          xmlns:colorPicker="ardisia.components.colorPicker.*" 
          xmlns:skins="components.transformContainer.*" 
          xmlns:scroller="ardisia.components.scroller.*"
          frameRate="60"
          width="100%" height="100%"
          removedFromStage="removedFromStageHandler(event)">
    
    <!-- scripts -->
    <fx:Script> 
        <![CDATA[
            import spark.components.TextArea;
            
            import components.transformContainer.SpiralShape;
            
            //----------------------------------
            //     methods
            //----------------------------------
            
            public function creationComplete():void
            {
                // if passes through a FormItem/Scroller, swallow the event before it reaches the
                // transformContainer to prevent dragging
                explicitPanel.addEventListener(MouseEvent.MOUSE_DOWN, function(event:MouseEvent):void
                {
                    var target:* = event.target;
                    while (target && target.hasOwnProperty("parent") && target.parent)
                    {
                        if (target is FormItem || target is Button)
                        {
                            event.stopImmediatePropagation();
                            
                            return;
                        }
                        
                        target = target.parent;
                    }
                }, false, 1000);
            }
            
            //----------------------------------
            //     event handlers
            //----------------------------------
            
            protected function tm_changeHandler(event:Event):void
            {
                var sel:* = tm1.selectedElements;
                
                if (sel && sel.length > 1)
                {
                    removeFormItem.enabled = true;
                }
                else if (sel && sel.length == 1)
                {
                    removeFormItem.enabled = selectionContainer1.enabled = true;
                    
                    var matrix:Matrix = sel[0].getLayoutMatrix();
                    depthSelect.value = sel[0].depth;
                    
                    // disabled this because it was making dragging choppy
                    /*
                    var pt:Point = GeomUtils.getTranslation(matrix);
                    translationLabel.text = "x: " + String(nf.format(pt.x)) + ", y:" + String(nf.format(pt.y));
                    pt = GeomUtils.getScale(matrix);
                    scaleLabel.text = "x: " + String(nf.format(pt.x)) + ", y: " + String(nf.format(pt.y));
                    pt = GeomUtils.getSkew(matrix);
                    skewLabel.text = "x: " + String(nf.format(pt.x)) + ", y: " + String(nf.format(pt.y));
                    rotationLabel.text = "Rotation: " + String(nf.format(GeomUtils.getRotation(matrix)));
                    */
                }
                else
                {
                    removeFormItem.enabled = selectionContainer1.enabled = false;
                }
            }
            
            protected function removehandler():void
            {
                var len:int = tm1.selectedElements ? tm1.selectedElements.length : 0;
                for (var i:int = len - 1; i > -1; i--)
                {
                    tm1.removeElement(tm1.selectedElements[i]);
                }
            }
            
            protected function addContentHandler():void
            {
                function getDepth():int
                {
                    var depth:int = 0;
                    for (var i:int = 0; i < tm1.numElements; i++)
                    {
                        depth = Math.max(depth, tm1.getElementAt(i).depth);
                    }
                    
                    depth++;
                    return depth;
                }
                
                switch (addContentSelect.selectedIndex)
                {
                    
                    case 0:
                        var newImage:Image = new Image();
                        newImage.source = bitmapData.data;
                        newImage.depth = getDepth();
                        tm1.addElement(newImage);
                        
                        break;
                    
                    case 1:
                        var newText:TextArea = new TextArea();
                        newText.editable = newText.selectable = false;
                        newText.minWidth = 50;
                        newText.minHeight = 100;
                        newText.width = 250;
                        newText.text = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";
                        newText.depth = getDepth();
                        
                        tm1.addElement(newText);
                        
                        break;
                    
                    case 2:
                        var newShape:SpiralShape = new SpiralShape();
                        newShape.depth = getDepth();
                        tm1.addElement(newShape);
                        
                        break;
                    
                }
            }
            
            protected function excludeHandler():void
            {
                var exclusionArr:Array = [];
                
                if (excludeNorthWest.selected)
                    exclusionArr.push(0);
                if (excludeNorth.selected)
                    exclusionArr.push(1);
                if (excludeNorthEast.selected)
                    exclusionArr.push(2);
                if (excludeEast.selected)
                    exclusionArr.push(3);
                if (excludeSouthEast.selected)
                    exclusionArr.push(4);
                if (excludeSouth.selected)
                    exclusionArr.push(5);
                if (excludeSouthWest.selected)
                    exclusionArr.push(6);
                if (excludeWest.selected)
                    exclusionArr.push(7);
                if (excludeRotate.selected)
                    exclusionArr.push(8);
                
                tmExclusionExample.excludedPips = exclusionArr;
            }
            
            protected function tmExplicitHandler():void
            {
                // exclude all pips except for east/west/rotate if text is selected
                if (tmExplicit.selectedElements && tmExplicit.selectedElements.length == 1 
                    && tmExplicit.selectedElements[0] == editableTextWrapper)
                {
                    tmExplicit.excludedPips = [0, 1, 2, 4, 5, 6];
                }
                else
                {
                    tmExplicit.excludedPips = null;
                }
            }
            
            protected function removedFromStageHandler(event:Event):void
            {
                
            }
            
        ]]>
    </fx:Script>
    
    <!-- declarations -->
    <fx:Declarations>
        
        <fx:Object id="bitmapData" 
                   data="@Embed(source='images/lion-king-laika.jpg')" />
        
    </fx:Declarations>
    
    <!-- states -->
    <s:states>
        <s:State name="stockholm" />
        <s:State name="london" />
        <s:State name="spark" />
    </s:states>
    
    <!-- application -->
    <containers:DemoApplicationWrapper id="demoAppWrapper" 
                                       width="100%" height="100%"
                                       westRegionTitle="TransformContainer Description"
                                       description="Simple container that adds selection and transformation support to children.&#13;&#13;All children that implement IVisualElement can be added, but only elements that dispatch mouse events, like DisplayObjects, can be selected and transformed.&#13;&#13;Three transformation modes are supported: postScale, preScale, and explicit.&#13;&#13;All the selection lassos and pips are fully skinnable and customizable. The cursors are also customizable either via CSS or skinning.&#13;&#13;Hold down the SHIFT key while transforming to rotate in 45 degree intervals or resize with a locked aspect ratio."
                                       currentState.stockholm="stockholm" currentState.london="london" currentState.spark="spark">
        
        <containers:expandingContainerContent>
            
            <!--- expanding container #1 -->
            <data:ExpandingContainerData>
                <data:label>API</data:label>
                <data:content>
                    <s:FormItem label="Scaling:"
                                enabled="{demoAppWrapper.tabBar.selectedItem.label=='Overview Example'}">
                        <s:HSlider id="scalingSelect"
                                   width="100"
                                   minimum="0.1" maximum="2.0"  snapInterval="0.1" value="1"
                                   change="tm1.contentGroup.scaleX=tm1.contentGroup.scaleY=scalingSelect.value;"  />
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="Scale the container.&#13;&#13;Notice that the selection indicators do not scale along with the container."/>
                        </s:helpContent>
                    </s:FormItem>
                    <s:FormItem label="Show Hover:">
                        <s:CheckBox id="showHoverIndicatorSelect" 
                                    selected="true" />
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="True to display the hoverIndicatorPart when mousing over child visual elements."/>
                        </s:helpContent>
                    </s:FormItem>
                    <s:FormItem label="Show Selection:">
                        <s:CheckBox id="showSelectionIndicatorsSelect" 
                                    selected="true" />
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="True to display the selection rectangle indicators over selected elements.&#13;&#13;The transform pips will always be displayed."/>
                        </s:helpContent>
                    </s:FormItem>
                    <s:FormItem label="Multiple Selection:">
                        <s:CheckBox id="allowMultipleSelectionSelect" 
                                    selected="true" />
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="True to allow the user to select multiple elements when the 'ctrl' or 'shift' key is down during selection."/>
                        </s:helpContent>
                    </s:FormItem>
                    <s:FormItem label="Drag Enabled:">
                        <s:CheckBox id="dragEnabledSelect" 
                                    selected="true" />
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="True to enable element dragging."/>
                        </s:helpContent>
                    </s:FormItem>
                    <s:FormItem label="Lock Aspect Ratio:">
                        <s:CheckBox id="lockAspectRatioSelect" 
                                    selected="false" />
                        <s:helpContent>
                            <s:Image source="@Embed(source='icons/question.png')"
                                     toolTip="True to lock the aspect ratio when transforming.&#13;&#13;Can also be locked by holding down the 'shift' key during a transformation."/>
                        </s:helpContent>
                    </s:FormItem>
                    
                    <separators:HSeparator width="100%"
                                           paddingTop="5" paddingBottom="5"/>
                    <s:FormHeading label="Styles"/>
                    <s:FormItem label="Background Color:">
                        <colorPicker:ColorPicker id="backgroundColorSelect" 
                                                 selectedColor="#FFFFFF"/>
                    </s:FormItem>
                    <s:FormItem label="Background Alpha:">
                        <s:HSlider id="backgroundAlphaSelect" 
                                   width="100"
                                   minimum="0" maximum="1" value="1" snapInterval="0"/>
                    </s:FormItem>
                    <s:FormItem label="Border Visible:">
                        <s:CheckBox id="borderVisibleSelect"
                                    selected="true"/>
                    </s:FormItem>
                    <s:FormItem label="Border Color:">
                        <colorPicker:ColorPicker id="borderColorSelect" 
                                                 selectedColor="{getStyle('borderColor')}"/>
                    </s:FormItem>
                    <s:FormItem label="Border Alpha:">
                        <s:HSlider id="borderAlphaSelect" 
                                   width="100"
                                   minimum="0" maximum="1" value="1" snapInterval="0"/>
                    </s:FormItem>
                </data:content>
            </data:ExpandingContainerData>
            
        </containers:expandingContainerContent>
        
        <containers:centerContent>
            
            <!--- example #1 -->
            <data:PrimaryContentData>
                <data:tabLabel>Overview Example</data:tabLabel>
                <data:exampleDescription>This example allows the user to change the transformMode of the transfromContainer and add/remove content.&#13;&#13;Hold down the shift or ctrl key to select multiple elements.</data:exampleDescription>
                <data:toolbarContent>
                    <s:HGroup>
                        <s:Form>
                            <s:FormHeading label="Transformations" />
                            <s:FormItem label="Transform Mode:">
                                <s:DropDownList id="transformModeSelect" 
                                                selectedIndex="2"
                                                requireSelection="true">
                                    <s:dataProvider>
                                        <s:ArrayCollection>
                                            <fx:String>none</fx:String>
                                            <fx:String>postScale</fx:String>
                                            <fx:String>preScale</fx:String>
                                            <fx:String>explicit</fx:String>
                                        </s:ArrayCollection>
                                    </s:dataProvider>
                                </s:DropDownList>
                                <s:helpContent>
                                    <s:Image source="@Embed(source='icons/question.png')"
                                             toolTip="'none' applies no transformation and does not display the transformation pips.&#13;&#13;'postScale' applies transform scaling to the selected element(s) after applying all other transformations. This mode can add large amounts of skew to transformed elements.&#13;&#13;'preScale' mode applies scaling before applying any other transformations and does not change the element's skew.&#13;&#13;'explicit' applies changes in size to explicit width and height values. 'explicit' is useful for text or containers when distortion is not desired. The element's scaling is not changed and the element's minWidth, maxWidth, minHeight, and maxHeight settings will be respected.&#13;&#13;'postScale' allows the user to skew elements while 'preScale' and 'explicit' mode will not add additional skew.&#13;&#13;NOTE: this property is irrelevant if multiple elements are selected.If multiple elements are selected, the 'postScale' transformMode is applied automatically."/>
                                </s:helpContent>
                            </s:FormItem>
                        </s:Form>
                        
                        <separators:VSeparator height="100%"
                                               paddingLeft="0" paddingRight="10"/>
                        <s:Form>
                            <s:FormHeading label="Content" />
                            <s:FormItem label="Add Content:">
                                <s:layout>
                                    <s:HorizontalLayout verticalAlign="middle"/>
                                </s:layout>
                                <s:DropDownList id="addContentSelect" 
                                                width="100"
                                                selectedIndex="0"
                                                requireSelection="true">
                                    <s:dataProvider>
                                        <s:ArrayCollection>
                                            <fx:String>image</fx:String>
                                            <fx:String>text field</fx:String>
                                            <fx:String>shape</fx:String>
                                        </s:ArrayCollection>
                                    </s:dataProvider>
                                </s:DropDownList>
                                <s:Button label="Add" 
                                          click="addContentHandler()"/>
                                <s:helpContent>
                                    <s:Image source="@Embed(source='icons/question.png')"
                                             toolTip="The TransformContainer can accept arbitrary content as children. Use this field to add new elements of varying types."/>
                                </s:helpContent>
                            </s:FormItem>
                            <s:FormItem id="removeFormItem" 
                                        enabled="false"
                                        label="Remove Content:">
                                <s:Button label="Remove Selected Elements"
                                          click="removehandler()"/>
                            </s:FormItem>
                        </s:Form>
                        
                        <separators:VSeparator height="100%"
                                               paddingLeft="0" paddingRight="10"/>
                        <s:Form id="selectionContainer1"
                                enabled="false">
                            <s:FormHeading label="Selection(s)" />
                            <s:FormItem label="Depth:">
                                <s:NumericStepper id="depthSelect" 
                                                  maximum="1000" minimum="0" 
                                                  change="tm1.selectedElements[0].depth = depthSelect.value;"/>
                                <s:helpContent>
                                    <s:Image source="@Embed(source='icons/question.png')"
                                             toolTip="Set the depth of the selected element to control how it overlaps over elements."/>
                                </s:helpContent>
                            </s:FormItem>
                        </s:Form>
                        <!--
                        <s:Form id="selectionContainer2"
                                enabled="false">
                            <s:FormItem label="Translation:">
                                <s:Label id="translationLabel"
                                         paddingTop="5"/>
                            </s:FormItem>
                            <s:FormItem label="Scale:">
                                <s:Label id="scaleLabel"
                                         paddingTop="5"/>
                            </s:FormItem>
                            <s:FormItem label="Skew:">
                                <s:Label id="skewLabel"
                                         paddingTop="5"/>
                            </s:FormItem>
                            <s:FormItem label="Rotation:">
                                <s:Label id="rotationLabel"
                                         paddingTop="5"/>
                            </s:FormItem>
                        </s:Form>
                        -->
                    </s:HGroup>
                </data:toolbarContent>
                <data:primaryContent>
                    <transformContainer:TransformContainer id="tm1" 
                                                           top="20" right="20" bottom="20" left="20"
                                                           showHoverIndicator="{showHoverIndicatorSelect.selected}"
                                                           showSelectionIndicators="{showSelectionIndicatorsSelect.selected}"
                                                           allowMultipleSelection="{allowMultipleSelectionSelect.selected}"
                                                           dragEnabled="{dragEnabledSelect.selected}"
                                                           lockAspectRatio="{lockAspectRatioSelect.selected}"
                                                           transformMode="{transformModeSelect.selectedItem}"
                                                           backgroundColor="{backgroundColorSelect.selectedColor}"
                                                           backgroundAlpha="{backgroundAlphaSelect.value}"
                                                           borderVisible="{borderVisibleSelect.selected}"
                                                           borderColor="{borderColorSelect.selectedColor}"
                                                           borderAlpha="{borderAlphaSelect.value}"
                                                           change="tm_changeHandler(event)">
                        <s:Image x="20" y="20"
                                 source="@Embed(source='images/sampleA-thumb.jpg')"
                                 depth="1"/>
                        <s:Image  x="70" y="70"  
                                  source="@Embed(source='images/sampleB-thumb.jpg')"
                                  depth="2"/>
                        <s:Image  x="120" y="120"  
                                  source="@Embed(source='images/noRedistribution/sampleD-thumb.jpg')"
                                  depth="4"/>
                        <s:Image  x="170" y="170"  
                                  source="@Embed(source='images/sampleE-thumb.jpg')"
                                  depth="5"/>
                        <s:Image  x="220" y="220" 
                                  focusEnabled="true"
                                  source="@Embed(source='images/sampleF-thumb.jpg')"
                                  depth="6"/>
                        <skins:StarShape x="280" y="20"
                                         depth="7"/>
                        <s:Panel x="500" y="20"  
                                 width="200" height="250"
                                 minWidth="120" maxWidth="400" minHeight="50" maxHeight="400"
                                 depth="9"
                                 title="Text Panel">
                            <s:RichText top="10" right="10" bottom="10" left="10"
                                        text="Use the 'explicit' transform mode to avoid distorting the text in this Panel.&#13;&#13;When transforming elements using the 'explicit' transformMode, the minimum and maximum dimensions of the element will be respected. This Panel's minimum width is 120 pixels, minimum height is 50 pixels, and the maximum width and height are 400 pixels."/>
                        </s:Panel>
                    </transformContainer:TransformContainer>
                </data:primaryContent>
            </data:PrimaryContentData>
            
            <!--- example #2 -->
            <data:PrimaryContentData>
                <data:tabLabel>POST/PRE SCALE Modes Example</data:tabLabel>
                <data:exampleDescription>This example illustrates the difference between the POST_SCALE and PRE_SCALE transform modes.  Note that when multiple elements are selected, the POST_SCALE transform mode is always used.&#13;&#13;See the next example for an illustration of the EXPLICIT transform mode.</data:exampleDescription>
                <data:primaryContent>
                    <s:HGroup top="20" right="20" bottom="20" left="20"
                              gap="20"
                              verticalAlign="justify">
                        <s:VGroup width="100%" 
                                  horizontalAlign="justify">
                            <s:HGroup verticalAlign="middle">
                                <s:Label text="POST_SCALE" 
                                         fontWeight="bold"/>
                                <s:Image source="@Embed(source='icons/question.png')"
                                         toolTip="The 'postScale' transform mode applies transform scaling to the selected element(s) after applying all other transformations. This mode can add large amounts of skew to transformed elements."/>
                            </s:HGroup>
                            <transformContainer:TransformContainer height="100%" width="100%"
                                                                   transformMode="postScale"
                                                                   showHoverIndicator="{showHoverIndicatorSelect.selected}"
                                                                   showSelectionIndicators="{showSelectionIndicatorsSelect.selected}"
                                                                   allowMultipleSelection="{allowMultipleSelectionSelect.selected}"
                                                                   dragEnabled="{dragEnabledSelect.selected}"
                                                                   lockAspectRatio="{lockAspectRatioSelect.selected}"
                                                                   backgroundColor="{backgroundColorSelect.selectedColor}"
                                                                   backgroundAlpha="{backgroundAlphaSelect.value}"
                                                                   borderVisible="{borderVisibleSelect.selected}"
                                                                   borderColor="{borderColorSelect.selectedColor}"
                                                                   borderAlpha="{borderAlphaSelect.value}">
                                <s:Image  x="150" y="40" 
                                          rotation="45" 
                                          source="@Embed(source='images/lion-king-laika.jpg')"
                                          depth="6"/>
                            </transformContainer:TransformContainer>
                        </s:VGroup>
                        <s:VGroup width="100%" 
                                  horizontalAlign="justify">
                            <s:HGroup verticalAlign="middle">
                                <s:Label text="PRE_SCALE" 
                                         fontWeight="bold"/>
                                <s:Image source="@Embed(source='icons/question.png')"
                                         toolTip="The 'preScale' transform mode applies scaling before applying any other transformations and does not change the element's skew."/>
                            </s:HGroup>
                            <transformContainer:TransformContainer height="100%" width="100%"
                                                                   transformMode="preScale"
                                                                   showHoverIndicator="{showHoverIndicatorSelect.selected}"
                                                                   showSelectionIndicators="{showSelectionIndicatorsSelect.selected}"
                                                                   allowMultipleSelection="{allowMultipleSelectionSelect.selected}"
                                                                   dragEnabled="{dragEnabledSelect.selected}"
                                                                   lockAspectRatio="{lockAspectRatioSelect.selected}"
                                                                   backgroundColor="{backgroundColorSelect.selectedColor}"
                                                                   backgroundAlpha="{backgroundAlphaSelect.value}"
                                                                   borderVisible="{borderVisibleSelect.selected}"
                                                                   borderColor="{borderColorSelect.selectedColor}"
                                                                   borderAlpha="{borderAlphaSelect.value}">
                                <s:Image  x="150" y="40" 
                                          rotation="45" 
                                          source="@Embed(source='images/lion-king-laika.jpg')"
                                          depth="6"/>
                            </transformContainer:TransformContainer>
                        </s:VGroup>
                    </s:HGroup>
                </data:primaryContent>
            </data:PrimaryContentData>
            
            <!--- example #3 -->
            <data:PrimaryContentData>
                <data:tabLabel>EXPLICIT Mode Example</data:tabLabel>
                <data:exampleDescription>Illustrates the EXPLICIT transform mode. When using this transform mode, elements are explicitly resized, not scaled, so elements will not distort.  This is very useful for containers and text.&#13;&#13;Also, an element's minWidth, minHeight, maxWidth, and maxHeight properties are respected during explicit transformations.&#13;&#13;The example below demonstrates both an explicitly transformed container (Panel) and an editable text control.</data:exampleDescription>
                <data:primaryContent>
                    <transformContainer:TransformContainer id="tmExplicit" 
                                                           top="20" right="20" bottom="20" left="20"
                                                           transformMode="explicit"
                                                           showHoverIndicator="{showHoverIndicatorSelect.selected}"
                                                           showSelectionIndicators="{showSelectionIndicatorsSelect.selected}"
                                                           allowMultipleSelection="{allowMultipleSelectionSelect.selected}"
                                                           dragEnabled="{dragEnabledSelect.selected}"
                                                           lockAspectRatio="{lockAspectRatioSelect.selected}"
                                                           backgroundColor="{backgroundColorSelect.selectedColor}"
                                                           backgroundAlpha="{backgroundAlphaSelect.value}"
                                                           borderVisible="{borderVisibleSelect.selected}"
                                                           borderColor="{borderColorSelect.selectedColor}"
                                                           borderAlpha="{borderAlphaSelect.value}"
                                                           change="tmExplicitHandler()">
                        <s:Panel id="explicitPanel"
                                 x="20" y="40"
                                 width="300" height="400"
                                 minWidth="{minWidthSelect.value}"
                                 minHeight="{minHeightSelect.value}"
                                 maxWidth="{maxWidthSelect.value}"
                                 maxHeight="{maxHeightSelect.value}"
                                 title="No Distortion When Transformed">
                            <scroller:Scroller width="100%" height="100%">
                                <s:Group>
                                    <s:VGroup top="20" left="20" right="20"
                                              gap="20">
                                        <s:Label width="100%" 
                                                 text="Explicit transforms will respect min/max dimensions for elements. Use the form below to change the min/max dimensions for this container."/>
                                        <s:Form>
                                            <s:FormHeading label="Min / Max Dimensions" />
                                            <s:FormItem label="Min Width:">
                                                <s:HSlider id="minWidthSelect"
                                                           minimum="120" maximum="200" value="120"/>
                                            </s:FormItem>
                                            <s:FormItem label="Min Height:">
                                                <s:HSlider id="minHeightSelect"
                                                           minimum="10" maximum="100" value="50"/>
                                            </s:FormItem>
                                            <s:FormItem label="Max Width:">
                                                <s:HSlider id="maxWidthSelect"
                                                           minimum="200" maximum="600" value="500"/>
                                            </s:FormItem>
                                            <s:FormItem label="Max Height:">
                                                <s:HSlider id="maxHeightSelect"
                                                           minimum="200" maximum="600" value="500"/>
                                            </s:FormItem>
                                            <mx:Spacer height="10" />
                                        </s:Form>
                                    </s:VGroup>
                                </s:Group>
                            </scroller:Scroller>
                        </s:Panel>
                        
                        <s:Group id="editableTextWrapper" 
                                 x="360" y="40"
                                 mouseChildren="false"
                                 mouseEnabledWhereTransparent="false"
                                 doubleClickEnabled="true"
                                 doubleClick="tmExplicit.dragEnabled=false;ret.setFocus();ret.selectAll();tmExplicit.excludedPips=[0,1,2,3,4,5,6,7,8];"
                                 keyDown="if(event.keyCode==Keyboard.ESCAPE){tmExplicit.clearSelection();}">
                            <s:RichEditableText id="ret"
                                                width="100%"
                                                fontWeight="bold"
                                                text="Double-Click me to edit"
                                                focusSkin="{null}" focusRect="false"
                                                paddingTop="5" paddingRight="7" paddingBottom="3" paddingLeft="7"
                                                resize="editableTextWrapper.explicitHeight=NaN;editableTextWrapper.validateNow();callLater(tmExplicit.applySelection);"
                                                focusOut="tmExplicit.dragEnabled=true;"/>
                        </s:Group>
                        
                    </transformContainer:TransformContainer>
                </data:primaryContent>
            </data:PrimaryContentData>
            
            <!--- example #4 -->
            <data:PrimaryContentData>
                <data:tabLabel>Excluded Pips Example</data:tabLabel>
                <data:exampleDescription>Individual transformation pips can be excluded to limit the user's transformation options.&#13;&#13;Exclude pips using the form below and then select the element in the TransformContainer below.</data:exampleDescription>
                <data:toolbarContent>
                    <s:HGroup>
                        <s:Form>
                            <s:FormItem label="Exclude NORTH_WEST">
                                <s:CheckBox id="excludeNorthWest"
                                            selected="false"
                                            change="excludeHandler()"/>
                            </s:FormItem>
                            <s:FormItem label="Exclude NORTH">
                                <s:CheckBox id="excludeNorth"
                                            selected="false"
                                            change="excludeHandler()"/>
                            </s:FormItem>
                            <s:FormItem label="Exclude NORTH_EAST">
                                <s:CheckBox id="excludeNorthEast"
                                            selected="false"
                                            change="excludeHandler()"/>
                            </s:FormItem>
                        </s:Form>
                        <separators:VSeparator height="100%"
                                               paddingLeft="0" paddingRight="5" />
                        <s:Form>
                            <s:FormItem label="Exclude EAST">
                                <s:CheckBox id="excludeEast"
                                            selected="false"
                                            change="excludeHandler()"/>
                            </s:FormItem>
                            <s:FormItem label="Exclude SOUTH_EAST">
                                <s:CheckBox id="excludeSouthEast"
                                            selected="false"
                                            change="excludeHandler()"/>
                            </s:FormItem>
                            <s:FormItem label="Exclude SOUTH">
                                <s:CheckBox id="excludeSouth"
                                            selected="false"
                                            change="excludeHandler()"/>
                            </s:FormItem>
                        </s:Form>
                        <separators:VSeparator height="100%"
                                               paddingLeft="0" paddingRight="5" />
                        <s:Form>
                            <s:FormItem label="Exclude SOUTH_WEST">
                                <s:CheckBox id="excludeSouthWest"
                                            selected="false"
                                            change="excludeHandler()"/>
                            </s:FormItem>
                            <s:FormItem label="Exclude WEST">
                                <s:CheckBox id="excludeWest"
                                            selected="false"
                                            change="excludeHandler()"/>
                            </s:FormItem>
                            <s:FormItem label="Exclude ROTATE">
                                <s:CheckBox id="excludeRotate"
                                            selected="false"
                                            change="excludeHandler()"/>
                            </s:FormItem>
                        </s:Form>
                    </s:HGroup>
                </data:toolbarContent>
                <data:primaryContent>
                    <transformContainer:TransformContainer id="tmExclusionExample" 
                                                           top="20" right="20" bottom="20" left="20"
                                                           transformMode="preScale"
                                                           showHoverIndicator="{showHoverIndicatorSelect.selected}"
                                                           showSelectionIndicators="{showSelectionIndicatorsSelect.selected}"
                                                           allowMultipleSelection="{allowMultipleSelectionSelect.selected}"
                                                           dragEnabled="{dragEnabledSelect.selected}"
                                                           lockAspectRatio="{lockAspectRatioSelect.selected}"
                                                           backgroundColor="{backgroundColorSelect.selectedColor}"
                                                           backgroundAlpha="{backgroundAlphaSelect.value}"
                                                           borderVisible="{borderVisibleSelect.selected}"
                                                           borderColor="{borderColorSelect.selectedColor}"
                                                           borderAlpha="{borderAlphaSelect.value}">
                        <s:Image  x="40" y="40" 
                                  focusEnabled="true"
                                  source="@Embed(source='images/lion-king-laika.jpg')"
                                  depth="6"/>
                    </transformContainer:TransformContainer>
                </data:primaryContent>
            </data:PrimaryContentData>
            
        </containers:centerContent>
        
    </containers:DemoApplicationWrapper>
    
</s:Module>