package Ġb aa ah s . app . ui . editor . layout Ċ Ċ import Ġb aa ah s . app . ui . Common Icons Ċ import Ġb aa ah s . app . ui . app Context Ċ import Ġb aa ah s . show . mutable . Mutable Show Ċ import Ġb aa ah s . show . mutable . Mutable Tab Ċ import Ġb aa ah s . ui . Prompt Ċ import Ġb aa ah s . ui . unary Plus Ċ import Ġb aa ah s . ui . value Ċ import Ġb aa ah s . ui . x Component Ċ import Ġkotlinx . css . Display Ċ import Ġkotlinx . css . Grid Template Columns Ċ import Ġkotlinx . css . display Ċ import Ġkotlinx . css . grid Template Columns Ċ import Ġkotlinx . html . js . onChange Function Ċ import Ġkotlinx . html . js . onClick Function Ċ import Ġmaterial ui . components . icon button . icon Button Ċ import Ġmaterial ui . components . tab . tab Ċ import Ġmaterial ui . components . tabs . tabs Ċ import Ġmaterial ui . icon Ċ import Ġorg . w 3 c . dom . events . Event Ċ import Ġreact .* Ċ import Ġreact . dom . div Ċ import Ġstyled . inline Styles Ċ Ċ val ĠLayout Editor Ġ= Ġx Component < Layout Editor Props >(" Layout Editor ") Ġ{ Ġprops Ġ-> ĊĠĠĠ Ġval Ġapp Context Ġ= ĠuseContext ( app Context ) ĊĠĠĠ Ġval Ġstyles Ġ= Ġapp Context . all Styles . layout Editor ĊĊĠĠĠ Ġvar Ġcurrent TabIndex Ġby Ġstate Ġ{ Ġ 0 Ġ} ĊĠĠĠ Ġval Ġmutable Layouts Ġ= Ġprops . mutable Show . layouts ĊĠĠĠ Ġval Ġmutable Layout Ġ= Ġmutable Layouts . formats [ props . format ] !! ĊĠĠĠ Ġval Ġcurrent Tab Ġ= Ġmutable Layout . tabs [ current TabIndex ] ĊĊĠĠĠ Ġval Ġhandle Tab Change Ġby Ġevent Handler Ġ{ Ġe : ĠEvent Ġ-> ĊĠĠĠĠĠĠĠ Ġcurrent TabIndex Ġ= Ġe . target . value . toInt () ĊĠĠĠ Ġ} ĊĊĠĠĠ Ġval Ġhandle New Tab Click Ġby Ġevent Handler Ġ{ Ġ_: ĠEvent Ġ-> ĊĠĠĠĠĠĠĠ Ġapp Context . prompt ( ĊĠĠĠĠĠĠĠĠĠĠĠ ĠPrompt ( ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ" Create ĠNew ĠTab ", ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ" Enter Ġa Ġname Ġfor Ġyour Ġnew Ġtab .", ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ"", ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġfield Label Ġ= Ġ" Tab ĠName ", ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġcancel Button Label Ġ= Ġ" Cancel ", ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġsubmit Button Label Ġ= Ġ" Create ", ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠisValid Ġ= Ġ{ Ġname Ġ-> ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġif Ġ( name . isBlank ()) Ġreturn @ Prompt Ġ" No Ġname Ġgiven ." ĊĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġif Ġ( mutable Layout . tabs . any Ġ{ Ġit . title Ġ== Ġname Ġ}) Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ" L ooks Ġlike Ġthere 's Ġalready Ġa Ġtab Ġnamed Ġnamed Ġ\"$ name \" ." ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} Ġelse Ġnull ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ}, ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠonSubmit Ġ= Ġ{ Ġname Ġ-> ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġval Ġnew Tab Ġ= ĠMutable Tab ( name ) ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġmutable Layout . tabs . add ( new Tab ) ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġprops . on Grid Change () ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ) ĊĠĠĠĠĠĠĠ Ġ) ĊĠĠĠ Ġ} ĊĊĠĠĠ Ġdiv Ġ{ ĊĠĠĠĠĠĠĠ Ġtabs Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġattrs . value Ġ= Ġcurrent TabIndex . toString () ĊĠĠĠĠĠĠĠĠĠĠĠ Ġattrs . onChange Function Ġ= Ġhandle Tab Change ĊĊĠĠĠĠĠĠĠĠĠĠĠ Ġmutable Layout . tabs . forEach Indexed Ġ{ Ġindex , Ġtab Ġ-> ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġtab Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs . value Ġ= Ġindex . toString () ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs . label Ġ{ Ġ+ current Tab . title Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĊĠĠĠĠĠĠĠĠĠĠĠ Ġtab Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs . value Ġ= Ġcurrent TabIndex . toString () ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs . icon Ġ{ Ġicon ( Common Icons . Add ) Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs . disabled Ġ= Ġtrue ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs . onClick Function Ġ= Ġhandle New Tab Click ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġ} ĊĊĠĠĠĠĠĠĠ Ġdiv (+ styles . editor Grid ) Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ// Ġgrid Ġholder ĊĠĠĠĠĠĠĠĠĠĠĠ Ġinline Styles Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġdisplay Ġ= ĠDisplay . grid ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġgrid Template Columns Ġ= ĠGrid Template Columns ( ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ ĠMutable List ( current Tab . columns . size Ġ+ Ġ 1 ) Ġ{ Ġ" 1 fr " Ġ}. join ToString (" Ġ") Ġ+ Ġ" Ġauto " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ) Ċ // ĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġgrid Template Areas Ġ= ĠGrid Template Areas ( areas . join ToString (" Ġ") Ġ{ Ġ"\" $ it \"" Ġ}) Ċ // ĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġgrid Template Columns Ġ= ĠGrid Template Columns ( current Tab . columns . join ToString (" Ġ")) Ċ // ĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġgrid Template Rows Ġ= ĠGrid Template Rows ( current Tab . rows . join ToString (" Ġ")) ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĊĠĠĠĠĠĠĠĠĠĠĠ Ġ(- 1 Ġuntil Ġcurrent Tab . rows . size ). forEach Ġ{ ĠrowIndex Ġ-> ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ(- 1 Ġuntil Ġcurrent Tab . columns . size ). forEach Ġ{ ĠcolumnIndex Ġ-> ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġif Ġ( rowIndex Ġ== Ġ- 1 Ġ&& ĠcolumnIndex Ġ== Ġ- 1 ) Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ// ĠEmpty Ġcell Ġat Ġtop - left . ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġdiv Ġ{} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} Ġelse Ġif Ġ( rowIndex Ġ== Ġ- 1 ) Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ// ĠCell Ġalong Ġthe Ġtop . ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġlayout Size Cell Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs . key Ġ= Ġ" col $ column Index " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs . dim en Ġ= Ġcurrent Tab . columns [ column Index ] ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs . type Ġ= Ġ" Column " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs . onChange Ġ= Ġprops . on Grid Change ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs . on Duplicate Ġ= Ġ{ Ġcurrent Tab . duplicate Column ( column Index ); Ġprops . on Grid Change () Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs . onDelete Ġ= Ġ{ Ġcurrent Tab . delete Column ( column Index ); Ġprops . on Grid Change () Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} Ġelse Ġif Ġ( column Index Ġ== Ġ- 1 ) Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ// ĠExtra Ġcell Ġon Ġright Ġside Ġfor Ġ" add Ġcolumn ". ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġdiv (+ styles . grid Area Edge ) Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġif Ġ( rowIndex Ġ== Ġ 0 ) Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġicon Button Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs . onClick Function Ġ= Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġcurrent Tab . append Column () ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġprops . on Grid Change () ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġicon ( Common Icons . Add ) ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ// ĠCell Ġalong Ġthe Ġleft . ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġlayout Size Cell Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs . key Ġ= Ġ" row $ rowIndex " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs . dim en Ġ= Ġcurrent Tab . rows [ rowIndex ] ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs . type Ġ= Ġ" Row " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs . onChange Ġ= Ġprops . on Grid Change ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs . on Duplicate Ġ= Ġ{ Ġcurrent Tab . duplicate Row ( rowIndex ); Ġprops . on Grid Change () Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs . onDelete Ġ= Ġ{ Ġcurrent Tab . delete Row ( rowIndex ); Ġprops . on Grid Change () Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} Ġelse Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġlayout Area Cell Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs . key Ġ= Ġ" area $ rowIndex ,$ column Index " ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs . layouts Ġ= Ġmutable Layouts ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs . tab Ġ= Ġcurrent Tab ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs . column Index Ġ= ĠcolumnIndex ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs . rowIndex Ġ= ĠrowIndex ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs . onChange Ġ= Ġprops . on Grid Change ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĊĠĠĠĠĠĠĠĠĠĠĠ Ġ// ĠFill Ġout Ġ" add Ġcolumn " Ġcolumn . ĊĠĠĠĠĠĠĠĠĠĠĠ Ġdiv (+ styles . grid Area Edge ) Ġ{} ĊĊĠĠĠĠĠĠĠĠĠĠĠ Ġ// ĠExtra Ġcell Ġon Ġbottom Ġleft Ġfor Ġ" add Ġrow ". ĊĠĠĠĠĠĠĠĠĠĠĠ Ġdiv (+ styles . grid Area Edge ) Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġicon Button Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġattrs . onClick Function Ġ= Ġ{ ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġcurrent Tab . append Row () ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġprops . on Grid Change () ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġicon ( Common Icons . Add ) ĊĠĠĠĠĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠĠĠĠĠ Ġ} ĊĠĠĠĠĠĠĠ Ġ} ĊĠĠĠ Ġ} Ċ } Ċ Ċ external Ġinterface ĠLayout Editor Props Ġ: ĠR Props Ġ{ ĊĠĠĠ Ġvar Ġmutable Show : ĠMutable Show ĊĠĠĠ Ġvar Ġformat : ĠString ĊĠĠĠ Ġvar Ġon Grid Change : Ġ() Ġ-> ĠUnit Ċ } Ċ Ċ fun ĠR Builder . layout Editor ( handler : ĠR Handler < Layout Editor Props >) Ġ= ĊĠĠĠ Ġchild ( Layout Editor , Ġhandler Ġ= Ġhandler )