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

bil.insert.alwaysOn(bil.add( ).grid(10,10,"grey"));
//--------------------
const caption = bil.add( ).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);
bil.insert.add(caption,0,15);
//--------------------
const comp = bil.add( ).text("TEXT COLOR GOTO",hsl(240),2);

comp.align(1,1);
comp.x.set(50);
comp.y.set(50);
comp.width.set(50);
comp.height.set(50);
comp.fontSize.set(130);

bil.insert.add(comp, 0, 15);

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

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