import { Laya } from "Laya" ; import { Stage } from "laya/display/Stage" ; import { Box } from "laya/ui/Box" ; import { Clip } from "laya/ui/Clip" ; import { Label } from "laya/ui/Label" ; import { Tree } from "laya/ui/Tree" ; import { Handler } from "laya/utils/Handler" ; import { Utils } from "laya/utils/Utils" ; import { WebGL } from "laya/webgl/WebGL" ; import { Main } from "./../Main" ; export class UI_Tree { Main : typeof Main = null ; constructor ( maincls ) { this . Main = maincls ; Laya . init ( 550 , 400 , WebGL ) ; Laya . stage . alignV = Stage . ALIGN_MIDDLE ; Laya . stage . alignH = Stage . ALIGN_CENTER ; Laya . stage . scaleMode = Stage . SCALE_SHOWALL ; Laya . stage . bgColor = "#232628" ; var res = [ "res/ui/vscroll.png" , "res/ui/vscroll$bar.png" , "res/ui/vscroll$down.png" , "res/ui/vscroll$up.png" , "res/ui/tree/clip_selectBox.png" , "res/ui/tree/clip_tree_folder.png" , "res/ui/tree/clip_tree_arrow.png" ] ; Laya . loader . load ( res , new Handler ( this , this . onLoadComplete ) ) ; } private onLoadComplete ( e = null ) { var treeData = "<data>" ; for ( var i = 0 ; i < 5 ; ++ i ) { treeData += "<item label='Directory " + ( i + 1 ) + "' isOpen='true'>" ; for ( var j = 0 ; j < 5 ; ++ j ) { treeData += "<leaf label='File " + ( j + 1 ) + "'/>" ; } treeData += "</item>" ; } treeData += "</data>" ; var xml = Utils . parseXMLFromString ( treeData ) ; var tree = new Tree ( ) ; tree . scrollBarSkin = "res/ui/vscroll.png" ; tree . itemRender = Item ; tree . xml = xml ; tree . size ( 300 , 300 ) ; tree . x = ( Laya . stage . width - tree . width ) / 2 ; tree . y = ( Laya . stage . height - tree . height ) / 2 ; this . Main . box2D . addChild ( tree ) ; } } class Item extends Box { Main : typeof Main = null ; constructor ( maincls ) { super ( ) ; this . Main = maincls ; this . right = 0 ; this . left = 0 ; var selectBox = new Clip ( "res/ui/tree/clip_selectBox.png" , 1 , 2 ) ; selectBox . name = "selectBox" ; selectBox . height = 32 ; selectBox . x = 13 ; selectBox . left = 12 ; this . addChild ( selectBox ) ; var folder = new Clip ( "res/ui/tree/clip_tree_folder.png" , 1 , 3 ) ; folder . name = "folder" ; folder . x = 14 ; folder . y = 4 ; this . addChild ( folder ) ; var label = new Label ( "treeItem" ) ; label . name = "label" ; label . fontSize = 20 ; label . color = "#FFFFFF" ; label . padding = "6,0,0,13" ; label . width = 150 ; label . height = 30 ; label . x = 33 ; label . y = 1 ; label . left = 33 ; label . right = 0 ; this . addChild ( label ) ; var arrow = new Clip ( "res/ui/tree/clip_tree_arrow.png" , 1 , 2 ) ; arrow . name = "arrow" ; arrow . x = 0 ; arrow . y = 5 ; this . addChild ( arrow ) ; } }