import Bilza, { Ui, CompFactory as cf, hsl} from "../../src/bilza.js";
let bil = new Bilza("bilza", 70);

bil.alwaysOn().grid(10,10, 0 );
//--------------------
const caption = bil.add(0,15).text("blue",hsl(240));
caption.align(1,2)// --x align mid , y align bottom
caption.x.set(50);
caption.y.set(95);
caption.fontSize.set(100);

//--------------------
const fill = bil.add(0,15).fillRect(hsl(240));

fill.x.set(50);
fill.y.set(50);

fill.width.set(50);
fill.height.set(50);

fill.align(1,1);

//---Goto commands for fillRect and text components

fill.color.goto(2, hsl( 0 ));
caption.color.goto(2, hsl( 0 ));
caption.content.goto(2, "red");
///////////////////////////////
fill.color.goto(4, hsl( 120 ));
caption.color.goto(4, hsl( 120 ));
caption.content.goto(4, "green");
///////////////////////////////
fill.color.goto(6, hsl( 240 ));
caption.color.goto(6, hsl( 240 ));
caption.content.goto(6, "blue");
///////////////////////////////
fill.color.goto(8, hsl( 180 ));
caption.color.goto(8, hsl( 180 ));
caption.content.goto(8, "cyan");
///////////////////////////////
fill.color.goto(10, hsl(300 ));
caption.color.goto(10, hsl( 300 ));
caption.content.goto(10, "megenta");
/////////////////////////////////
fill.color.goto(12, hsl( 60 ));
caption.color.goto(12, hsl( 60 ));
caption.content.goto(12, "yellow");
///////////////////////////////
const ui = new Ui(bil);
bil.draw();