Custom Flex 4 HornLayout variation

Few days ago I presented custom Flex 4 TriangleLayout. Another variation of this layout would be when individual items are ordered from left to right, unlike in TrinagleLayout where items are placed top to bottom.



Code is almost the same, just a minor differences.

HornLayout.as

package com.flash2nd.layout {
    
    // author: http://flanture.blogspot.com - www.flash2nd.com
    // license: http://creativecommons.org/licenses/by/3.0/
    // October 2010
    
    import mx.core.ILayoutElement;
    import mx.utils.ObjectUtil;
    
    import spark.layouts.supportClasses.LayoutBase;
    
    public class HornLayout extends LayoutBase {
        
        public function HornLayout() {
            super();
        }
        
        override public function measure():void {
            super.measure();
        }
        
        override public function updateDisplayList(width:Number, height:Number):void {
            super.updateDisplayList(width,height);
            
            if(target){
                var count:int = target.numElements;
                var layoutElement:ILayoutElement;
                var startX:Number = 0;
                var startY:Number = target.height/2;
                var shift:int = 1;
                                
                for(var i:int = 1; i < count+1; i++){
                    // find current level
                    var level:int = findLevel(i);
                    
                    layoutElement = target.getElementAt(i-1);
                    layoutElement.setLayoutBoundsSize(NaN,NaN);
                    
                    var elWidth:Number = layoutElement.getLayoutBoundsWidth();
                    var elHeight:Number = layoutElement.getLayoutBoundsHeight();

                    if (level !== findLevel(i-1)) {
                        shift = i;
                    }
                    
                    var x:Number = startX + elWidth * (level - 1) * 2;
                    var y:Number = startY - elHeight * (level - 1) + (i % shift) * elHeight * 2;
                    
                    layoutElement.setLayoutBoundsPosition(x,y);
                }                
            }
            
        }
        
        private function findLevel(index:int):int {
            var levelCounter:int = 1;
            var sum:int = 1;
            while (sum < index) {
                sum += levelCounter;
                if (sum <= index) {
                    levelCounter += 1;
                }
            }
            return levelCounter;
        }        
        
    }
}

HornLayoutTest.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Application 
    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:layout="com.flash2nd.layout.*"
    width="100%" height="100%">

        
        <s:layout>
            <layout:HornLayout/>
        </s:layout>
        
        <s:Button label="Button A"/>
        <s:Button label="Button B"/>
        <s:Button label="Button C"/>
        <s:Button label="Button D"/>
        <s:Button label="Button E"/>
        <s:Button label="Button F"/>
        <s:Button label="Button G"/>
        <s:Button label="Button H"/>
        <s:Button label="Button I"/>
        <s:Button label="Button J"/>
        <s:Button label="Button K"/>
        <s:Button label="Button L"/>
        <s:Button label="Button M"/>
        <s:Button label="Button N"/>
        <s:Button label="Button O"/>
        <s:Button label="Button P"/>
        <s:Button label="Button Q"/>
        <s:Button label="Button R"/>    
    
</s:Application>

sharing is caring :)
thanx.

*_*