Dg4.0 guisystem (#269)

* - XML Like configuration for GUI

Signed-off-by: syeyoung <cyoung06@naver.com>

* - Stylesheets were never a good idea

Signed-off-by: syeyoung <cyoung06@naver.com>

* - Ref's are always bindable

Signed-off-by: syeyoung <cyoung06@naver.com>

* - cool components
Column
Background (color_
Row
SizedBox
Stack
Padding

Signed-off-by: syeyoung <cyoung06@naver.com>

* - Update copyright header v2

Signed-off-by: syeyoung <cyoung06@naver.com>

* - Bunch of stuff

Signed-off-by: syeyoung <cyoung06@naver.com>

* - Few more elements

Signed-off-by: syeyoung <cyoung06@naver.com>

* - View!!

Signed-off-by: syeyoung <cyoung06@naver.com>

* - Better click handlign
- Popups

Signed-off-by: syeyoung <cyoung06@naver.com>

* - ComponentCreator for DX
- test view (for testin

Signed-off-by: syeyoung <cyoung06@naver.com>

* - Column and Row shrink to crossAxisSize if its max is infinity
- Gui test.

Signed-off-by: syeyoung <cyoung06@naver.com>

* - Load attributes after super constructor
- Fix Stackoverflow in RootDom.setCursor
- Test Gui Command
- Test Gui to testview.gui
- XML Parser settings to ignore comments
- Controller check if element is actually an element, not a textnode.

Signed-off-by: syeyoung <cyoung06@naver.com>

* - Component Parent propagation
- better placeholder

Signed-off-by: syeyoung <cyoung06@naver.com>

* - Line needs texture2d

Signed-off-by: syeyoung <cyoung06@naver.com>

* - igitignore update

Signed-off-by: syeyoung <cyoung06@naver.com>

* - gradle build file update

Signed-off-by: syeyoung <cyoung06@naver.com>

* - Flexible
- Background uses singlehcildpassinglayouter
- Helper methods in ConstraintBox

Signed-off-by: syeyoung <cyoung06@naver.com>

* - Line and Border
- add updating code

Signed-off-by: syeyoung <cyoung06@naver.com>

* - Textfield

Signed-off-by: syeyoung <cyoung06@naver.com>

* - Column and Row with flex elements when given maximum mainAxis now throws an error
- Column and Row when given maximum mainAxis now shrinks to children

Signed-off-by: syeyoung <cyoung06@naver.com>

* - Better architecture
- I'll document it later on separate repo

Signed-off-by: syeyoung <cyoung06@naver.com>

* LGTM.
- Might change rendering architecture.
Separate child rendering and itself rendering

Signed-off-by: syeyoung <cyoung06@naver.com>

* - Fix some typo's and issues

Signed-off-by: syeyoung <cyoung06@naver.com>

* - make it work

Signed-off-by: syeyoung <cyoung06@naver.com>

* - smth

Signed-off-by: syeyoung <cyoung06@naver.com>

* - Button

Signed-off-by: syeyoung <cyoung06@naver.com>

* - colored button
- passthroughs

Signed-off-by: syeyoung <cyoung06@naver.com>

* - fix issue in text

Signed-off-by: syeyoung <cyoung06@naver.com>

* - Delegating widgets and scrollbar

Signed-off-by: syeyoung <cyoung06@naver.com>

* - scrollbar

Signed-off-by: syeyoung <cyoung06@naver.com>

* - list

Signed-off-by: syeyoung <cyoung06@naver.com>

* - popup
- align
- stack now only propagates events to first child (lol)

Signed-off-by: syeyoung <cyoung06@naver.com>

* - Event propagation changes
- some presets

Signed-off-by: syeyoung <cyoung06@naver.com>

* - moving stuff

Signed-off-by: syeyoung <cyoung06@naver.com>

Signed-off-by: syeyoung <cyoung06@naver.com>

11 files changed, 368 insertions, 0 deletions

diff --git a/mod/src/main/resources/assets/dungeonsguide/gui/elements/button.gui b/mod/src/main/resources/assets/dungeonsguide/gui/elements/button.gui
new file mode 100644
index 00000000..33173468
--- /dev/null
+++ b/mod/src/main/resources/assets/dungeonsguide/gui/elements/button.gui
@@ -0,0 +1,6 @@
+<multi>
+    <slot bind:child="wgtNormal" bind:ref="refNormal"/>
+    <slot bind:child="wgtDisabled" bind:ref="refDisabled"/>
+    <slot bind:child="wgtHover" bind:ref="refHover"/>
+    <slot bind:child="wgtPressed" bind:ref="refPressed"/>
+</multi>
\ No newline at end of file
diff --git a/mod/src/main/resources/assets/dungeonsguide/gui/elements/popupmgr.gui b/mod/src/main/resources/assets/dungeonsguide/gui/elements/popupmgr.gui
new file mode 100644
index 00000000..899d87ce
--- /dev/null
+++ b/mod/src/main/resources/assets/dungeonsguide/gui/elements/popupmgr.gui
@@ -0,0 +1,3 @@
+<stack bind:ref="stackRef">
+    <slot bind:child="$"/>
+</stack>
\ No newline at end of file
diff --git a/mod/src/main/resources/assets/dungeonsguide/gui/elements/ratioResourceImage.gui b/mod/src/main/resources/assets/dungeonsguide/gui/elements/ratioResourceImage.gui
new file mode 100644
index 00000000..bbdd1d4f
--- /dev/null
+++ b/mod/src/main/resources/assets/dungeonsguide/gui/elements/ratioResourceImage.gui
@@ -0,0 +1,26 @@
+<!--
+  ~ Dungeons Guide - The most intelligent Hypixel Skyblock Dungeons Mod
+  ~ Copyright (C) 2023  cyoung06 (syeyoung)
+  ~
+  ~ This program is free software: you can redistribute it and/or modify
+  ~ it under the terms of the GNU Affero General Public License as published
+  ~ by the Free Software Foundation, either version 3 of the License, or
+  ~ (at your option) any later version.
+  ~
+  ~ This program is distributed in the hope that it will be useful,
+  ~ but WITHOUT ANY WARRANTY; without even the implied warranty of
+  ~ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  ~ GNU Affero General Public License for more details.
+  ~
+  ~ You should have received a copy of the GNU Affero General Public License
+  ~ along with this program.  If not, see <https://www.gnu.org/licenses/>.
+  -->
+
+<wrapper x="0" y="0">
+    <aspectRatio bind:width="width" bind:height="height">
+        <BareResourceImage bind:location="location"
+                           bind:uvX="x" bind:uvY="y"
+                           bind:uvWidth="width" bind:uvHeight="height"
+                           bind:textureWidth="textureWidth" bind:textureHeight="textureHeight"/>
+    </aspectRatio>
+</wrapper>
\ No newline at end of file
diff --git a/mod/src/main/resources/assets/dungeonsguide/gui/elements/scrollBar.gui b/mod/src/main/resources/assets/dungeonsguide/gui/elements/scrollBar.gui
new file mode 100644
index 00000000..10dc4f15
--- /dev/null
+++ b/mod/src/main/resources/assets/dungeonsguide/gui/elements/scrollBar.gui
@@ -0,0 +1,28 @@
+<!--
+  ~ Dungeons Guide - The most intelligent Hypixel Skyblock Dungeons Mod
+  ~ Copyright (C) 2023  cyoung06 (syeyoung)
+  ~
+  ~ This program is free software: you can redistribute it and/or modify
+  ~ it under the terms of the GNU Affero General Public License as published
+  ~ by the Free Software Foundation, either version 3 of the License, or
+  ~ (at your option) any later version.
+  ~
+  ~ This program is distributed in the hope that it will be useful,
+  ~ but WITHOUT ANY WARRANTY; without even the implied warranty of
+  ~ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  ~ GNU Affero General Public License for more details.
+  ~
+  ~ You should have received a copy of the GNU Affero General Public License
+  ~ along with this program.  If not, see <https://www.gnu.org/licenses/>.
+  -->
+
+<measure bind:size="size">
+    <stack>
+        <absXY bind:x="x" bind:y="y">
+            <size bind:width="width" bind:height="height">
+                <slot bind:child="thumb"/>
+            </size>
+        </absXY>
+        <slot bind:child="track"/>
+    </stack>
+</measure>
\ No newline at end of file
diff --git a/mod/src/main/resources/assets/dungeonsguide/gui/elements/scrollablePanel.gui b/mod/src/main/resources/assets/dungeonsguide/gui/elements/scrollablePanel.gui
new file mode 100644
index 00000000..9047865c
--- /dev/null
+++ b/mod/src/main/resources/assets/dungeonsguide/gui/elements/scrollablePanel.gui
@@ -0,0 +1,46 @@
+<!--
+  ~ Dungeons Guide - The most intelligent Hypixel Skyblock Dungeons Mod
+  ~ Copyright (C) 2023  cyoung06 (syeyoung)
+  ~
+  ~ This program is free software: you can redistribute it and/or modify
+  ~ it under the terms of the GNU Affero General Public License as published
+  ~ by the Free Software Foundation, either version 3 of the License, or
+  ~ (at your option) any later version.
+  ~
+  ~ This program is distributed in the hope that it will be useful,
+  ~ but WITHOUT ANY WARRANTY; without even the implied warranty of
+  ~ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  ~ GNU Affero General Public License for more details.
+  ~
+  ~ You should have received a copy of the GNU Affero General Public License
+  ~ along with this program.  If not, see <https://www.gnu.org/licenses/>.
+  -->
+
+<col crossAlign="STRETCH">
+    <flexible>
+        <row crossAlign="STRETCH">
+            <flexible>
+                <measure bind:size="viewportSize">
+                    <clip>
+                        <absXY bind:x="contentX" bind:y="contentY">
+                            <UnconstrainedBox bind:direction="direction">
+                                <measure bind:size="contentSize">
+                                    <slot bind:child="$"/>
+                                </measure>
+                            </UnconstrainedBox>
+                        </absXY>
+                    </clip>
+                </measure>
+            </flexible>
+            <SimpleVerticalScrollBar bind:ref="vertRef" bind:thickness="verticalThickness" min="0" bind:max="contentHeight" bind:current="y" bind:thumbValue="viewportHeight"/>
+        </row>
+    </flexible>
+    <row>
+        <flexible>
+            <SimpleHorizontalScrollBar bind:ref="horzRef" bind:thickness="horizontalThickness" min="0" bind:max="contentWidth" bind:current="x" bind:thumbValue="viewportWidth"/>
+        </flexible>
+        <size bind:width="verticalThickness" bind:height="horizontalThickness">
+            <bgcolor backgroundColor="#FF1F1F1F"/>
+        </size>
+    </row>
+</col>
diff --git a/mod/src/main/resources/assets/dungeonsguide/gui/elements/simpleButton.gui b/mod/src/main/resources/assets/dungeonsguide/gui/elements/simpleButton.gui
new file mode 100644
index 00000000..ac96297c
--- /dev/null
+++ b/mod/src/main/resources/assets/dungeonsguide/gui/elements/simpleButton.gui
@@ -0,0 +1,41 @@
+<!--
+  ~ Dungeons Guide - The most intelligent Hypixel Skyblock Dungeons Mod
+  ~ Copyright (C) 2023  cyoung06 (syeyoung)
+  ~
+  ~ This program is free software: you can redistribute it and/or modify
+  ~ it under the terms of the GNU Affero General Public License as published
+  ~ by the Free Software Foundation, either version 3 of the License, or
+  ~ (at your option) any later version.
+  ~
+  ~ This program is distributed in the hope that it will be useful,
+  ~ but WITHOUT ANY WARRANTY; without even the implied warranty of
+  ~ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  ~ GNU Affero General Public License for more details.
+  ~
+  ~ You should have received a copy of the GNU Affero General Public License
+  ~ along with this program.  If not, see <https://www.gnu.org/licenses/>.
+  -->
+<wrapper disabled="false">
+    <AbstractButton bind:click="click" bind:disabled="disabled">
+        <bgcolor bind:backgroundColor="backgroundColor">
+            <col mainAlign="CENTER">
+                <Text bind:text="text" bind:color="textColor" align="CENTER"/>
+            </col>
+        </bgcolor>
+        <bgcolor slot="hovered" bind:backgroundColor="hoveredBackgroundColor">
+            <col mainAlign="CENTER">
+                <Text bind:text="text" bind:color="hoveredTextColor" align="CENTER"/>
+            </col>
+        </bgcolor>
+        <bgcolor slot="disabled" bind:backgroundColor="disabledBackgroundColor">
+            <col mainAlign="CENTER">
+                <Text bind:text="text" bind:color="disabledTextColor" align="CENTER"/>
+            </col>
+        </bgcolor>
+        <bgcolor slot="pressed" bind:backgroundColor="pressedBackgroundColor">
+            <col mainAlign="CENTER">
+                <Text bind:text="text" bind:color="pressedTextColor" align="CENTER"/>
+            </col>
+        </bgcolor>
+    </AbstractButton>
+</wrapper>
\ No newline at end of file
diff --git a/mod/src/main/resources/assets/dungeonsguide/gui/elements/simpleHorizontalScrollBar.gui b/mod/src/main/resources/assets/dungeonsguide/gui/elements/simpleHorizontalScrollBar.gui
new file mode 100644
index 00000000..010cfa6e
--- /dev/null
+++ b/mod/src/main/resources/assets/dungeonsguide/gui/elements/simpleHorizontalScrollBar.gui
@@ -0,0 +1,38 @@
+
+<!--
+  ~ Dungeons Guide - The most intelligent Hypixel Skyblock Dungeons Mod
+  ~ Copyright (C) 2023  cyoung06 (syeyoung)
+  ~
+  ~ This program is free software: you can redistribute it and/or modify
+  ~ it under the terms of the GNU Affero General Public License as published
+  ~ by the Free Software Foundation, either version 3 of the License, or
+  ~ (at your option) any later version.
+  ~
+  ~ This program is distributed in the hope that it will be useful,
+  ~ but WITHOUT ANY WARRANTY; without even the implied warranty of
+  ~ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  ~ GNU Affero General Public License for more details.
+  ~
+  ~ You should have received a copy of the GNU Affero General Public License
+  ~ along with this program.  If not, see <https://www.gnu.org/licenses/>.
+  -->
+
+<wrapper thickness="7" min="0" max="100" thumbValue="10" minThumbSize="20" thumbColor="#FF494949" thumbHoverColor="#FF555758" thumbActiveColor="#FF555758" backgroundColor="#FF1F1F1F">
+    <size bind:height="thickness">
+        <AbstractScrollBar bind:max="max" bind:min="min" bind:current="current" bind:thumbValue="thumbValue" bind:minThumbSize="minThumbSize"
+                           orientation="HORIZONTAL">
+            <bgcolor slot="track" bind:backgroundColor="backgroundColor"/>
+            <align slot="thumb">
+                <size height="4">
+                    <ColorButton
+                            bind:backgroundColor="thumbColor"          textColor="#FFFFFFFF"
+                            bind:hoveredBackgroundColor="thumbHoverColor"   hoveredTextColor="#FFFFFFFF"
+                            disabledBackgroundColor="#00000000"  disabledTextColor="#FFFFFFFF"
+                            bind:pressedBackgroundColor="thumbActiveColor"   pressedTextColor="#FFFFFFFF"
+                            text=""
+                    />
+                </size>
+            </align>
+        </AbstractScrollBar>
+    </size>
+</wrapper>
\ No newline at end of file
diff --git a/mod/src/main/resources/assets/dungeonsguide/gui/elements/simpleVerticalScrollBar.gui b/mod/src/main/resources/assets/dungeonsguide/gui/elements/simpleVerticalScrollBar.gui
new file mode 100644
index 00000000..9242a05c
--- /dev/null
+++ b/mod/src/main/resources/assets/dungeonsguide/gui/elements/simpleVerticalScrollBar.gui
@@ -0,0 +1,38 @@
+
+<!--
+  ~ Dungeons Guide - The most intelligent Hypixel Skyblock Dungeons Mod
+  ~ Copyright (C) 2023  cyoung06 (syeyoung)
+  ~
+  ~ This program is free software: you can redistribute it and/or modify
+  ~ it under the terms of the GNU Affero General Public License as published
+  ~ by the Free Software Foundation, either version 3 of the License, or
+  ~ (at your option) any later version.
+  ~
+  ~ This program is distributed in the hope that it will be useful,
+  ~ but WITHOUT ANY WARRANTY; without even the implied warranty of
+  ~ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  ~ GNU Affero General Public License for more details.
+  ~
+  ~ You should have received a copy of the GNU Affero General Public License
+  ~ along with this program.  If not, see <https://www.gnu.org/licenses/>.
+  -->
+
+<wrapper thickness="7" min="0" max="100" thumbValue="10" minThumbSize="20" thumbColor="#FF4F4F4F" thumbHoverColor="#FF555758" thumbActiveColor="#FF555758" backgroundColor="#FF1F1F1F">
+    <size bind:width="thickness">
+        <AbstractScrollBar bind:max="max" bind:min="min" bind:current="current" bind:thumbValue="thumbValue" bind:minThumbSize="minThumbSize"
+                           orientation="VERTICAL">
+            <bgcolor slot="track" bind:backgroundColor="backgroundColor"/>
+            <align slot="thumb">
+                <size width="4">
+                    <ColorButton
+                            bind:backgroundColor="thumbColor"          textColor="#FFFFFFFF"
+                            bind:hoveredBackgroundColor="thumbHoverColor"   hoveredTextColor="#FFFFFFFF"
+                            disabledBackgroundColor="#00000000"  disabledTextColor="#FFFFFFFF"
+                            bind:pressedBackgroundColor="thumbActiveColor"   pressedTextColor="#FFFFFFFF"
+                            text=""
+                    />
+                </size>
+            </align>
+        </AbstractScrollBar>
+    </size>
+</wrapper>
\ No newline at end of file
diff --git a/mod/src/main/resources/assets/dungeonsguide/gui/elements/slowlist.gui b/mod/src/main/resources/assets/dungeonsguide/gui/elements/slowlist.gui
new file mode 100644
index 00000000..9f40ecaf
--- /dev/null
+++ b/mod/src/main/resources/assets/dungeonsguide/gui/elements/slowlist.gui
@@ -0,0 +1,23 @@
+<!--
+  ~ Dungeons Guide - The most intelligent Hypixel Skyblock Dungeons Mod
+  ~ Copyright (C) 2023  cyoung06 (syeyoung)
+  ~
+  ~ This program is free software: you can redistribute it and/or modify
+  ~ it under the terms of the GNU Affero General Public License as published
+  ~ by the Free Software Foundation, either version 3 of the License, or
+  ~ (at your option) any later version.
+  ~
+  ~ This program is distributed in the hope that it will be useful,
+  ~ but WITHOUT ANY WARRANTY; without even the implied warranty of
+  ~ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  ~ GNU Affero General Public License for more details.
+  ~
+  ~ You should have received a copy of the GNU Affero General Public License
+  ~ along with this program.  If not, see <https://www.gnu.org/licenses/>.
+  -->
+
+<wrapper>
+    <ScrollablePanel direction="VERTICAL">
+        <column bind:api="api"/>
+    </ScrollablePanel>
+</wrapper>
\ No newline at end of file
diff --git a/mod/src/main/resources/assets/dungeonsguide/gui/testpopup.gui b/mod/src/main/resources/assets/dungeonsguide/gui/testpopup.gui
new file mode 100644
index 00000000..867c913f
--- /dev/null
+++ b/mod/src/main/resources/assets/dungeonsguide/gui/testpopup.gui
@@ -0,0 +1,36 @@
+<!--
+  ~ Dungeons Guide - The most intelligent Hypixel Skyblock Dungeons Mod
+  ~ Copyright (C) 2023  cyoung06 (syeyoung)
+  ~
+  ~ This program is free software: you can redistribute it and/or modify
+  ~ it under the terms of the GNU Affero General Public License as published
+  ~ by the Free Software Foundation, either version 3 of the License, or
+  ~ (at your option) any later version.
+  ~
+  ~ This program is distributed in the hope that it will be useful,
+  ~ but WITHOUT ANY WARRANTY; without even the implied warranty of
+  ~ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  ~ GNU Affero General Public License for more details.
+  ~
+  ~ You should have received a copy of the GNU Affero General Public License
+  ~ along with this program.  If not, see <https://www.gnu.org/licenses/>.
+  -->
+<bgcolor backgroundColor="#33000000">
+    <align>
+        <size width="200" height="200">
+            <bgcolor backgroundColor="#FFFFFFFF">
+                <align>
+                    <size width="50" height="30">
+                        <ColorButton on:click="close" disabled="false"
+                                     backgroundColor="#FF005500"          textColor="#FF777777"
+                                     hoveredBackgroundColor="#FF009900"   hoveredTextColor="#FF777777"
+                                     disabledBackgroundColor="#FF444444"  disabledTextColor="#FF777777"
+                                     pressedBackgroundColor="#FF00F00F"   pressedTextColor="#FF777777"
+                                     text="close"
+                        />
+                    </size>
+                </align>
+            </bgcolor>
+        </size>
+    </align>
+</bgcolor>
\ No newline at end of file
diff --git a/mod/src/main/resources/assets/dungeonsguide/gui/testview.gui b/mod/src/main/resources/assets/dungeonsguide/gui/testview.gui
new file mode 100644
index 00000000..e361909d
--- /dev/null
+++ b/mod/src/main/resources/assets/dungeonsguide/gui/testview.gui
@@ -0,0 +1,83 @@
+<!--
+  ~ Dungeons Guide - The most intelligent Hypixel Skyblock Dungeons Mod
+  ~ Copyright (C) 2022  cyoung06 (syeyoung)
+  ~
+  ~ This program is free software: you can redistribute it and/or modify
+  ~ it under the terms of the GNU Affero General Public License as published
+  ~ by the Free Software Foundation, either version 3 of the License, or
+  ~ (at your option) any later version.
+  ~
+  ~ This program is distributed in the hope that it will be useful,
+  ~ but WITHOUT ANY WARRANTY; without even the implied warranty of
+  ~ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  ~ GNU Affero General Public License for more details.
+  ~
+  ~ You should have received a copy of the GNU Affero General Public License
+  ~ along with this program.  If not, see <https://www.gnu.org/licenses/>.
+  -->
+
+<bgcolor backgroundColor="#FFFF0000">
+    <PopupManager>
+        <row mainAlign="CENTER">
+            <flexible fit="TIGHT">
+                <bgcolor backgroundColor="#FF003300"/>
+            </flexible>
+            <flexible fit="TIGHT">
+                <col mainAlign="CENTER">
+                    <flexible fit="TIGHT">
+                        <bgcolor backgroundColor="#FF0000FF"/>
+                    </flexible>
+                    <flexible fit="TIGHT">
+                        <padding left="20.0" right="20.0" top="10.0" bottom="10.0">
+                            <border>
+                                <line slot="left" dir="VERTICAL" thickness="5.0" color="#FF00FF00"/>
+                                <line slot="top" dir="HORIZONTAL" thickness="5.0" color="#FF00FF00"/>
+                                <line slot="bottom" dir="HORIZONTAL" thickness="5.0" color="#FF00FF00" pattern="0xAAAA" factor="10"/>
+                                <line slot="right" dir="VERTICAL" thickness="5.0" color="#FF00FF00" pattern="0xAAAA"/>
+                                <scaler scale="2.0" slot="content">
+                                    <ScrollablePanel>
+                                        <size width="1000" height="1000">
+                                            <col mainAlign="END">
+                                                <TextField placeholder="input text" bind:value="variable"/>
+                                                <row mainAlign="CENTER">
+                                                    <size height="32">
+                                                        <ResourceImage location="dungeonsguide:textures/dglogox128.png" width="128" height="128" textureWidth="128" textureHeight="128"/>
+                                                    </size>
+                                                    <Text text="Hello, "/>
+                                                    <size width="10" height="0"/>
+                                                    <flexible>
+                                                        <bgcolor backgroundColor="#FF00FFFF">
+                                                            <Text bind:text="variable" color="#FF777777"/>
+                                                        </bgcolor>
+                                                    </flexible>
+                                                    <size width="60" height="20">
+                                                        <ColorButton on:click="buttonClick" bind:disabled="bDisable"
+                                                                     backgroundColor="#FF005500"          textColor="#FF777777"
+                                                                     hoveredBackgroundColor="#FF009900"   hoveredTextColor="#FF777777"
+                                                                     disabledBackgroundColor="#FF444444"  disabledTextColor="#FF777777"
+                                                                     pressedBackgroundColor="#FF00F00F"   pressedTextColor="#FF777777"
+                                                                     bind:text="variable"
+                                                        />
+                                                    </size>
+                                                </row>
+                                                <flexible>
+                                                    <Placeholder/>
+                                                </flexible>
+                                            </col>
+                                        </size>
+                                    </ScrollablePanel>
+                                </scaler>
+                            </border>
+                        </padding>
+                    </flexible>
+                    <flexible fit="TIGHT" flex="2">
+                        <bgcolor backgroundColor="#FF0000FF"/>
+                    </flexible>
+                </col>
+            </flexible>
+            <flexible fit="TIGHT">
+                <bgcolor backgroundColor="#FF003300"/>
+            </flexible>
+        </row>
+    </PopupManager>
+</bgcolor>
\ No newline at end of file