Merge pull request #23 from Samerion/margins

Implement margins; Prepare for 0.4.0

dub.json

@@ -60,6 +60,18 @@
 			"sourcePaths": [],
 			"targetPath": "build",
 			"targetType": "executable"
+		},
+		{
+			"dependencies": {
+				"glui": ">=0.0.0"
+			},
+			"name": "example-margins",
+			"sourceFiles": [
+				"examples/margins.d"
+			],
+			"sourcePaths": [],
+			"targetPath": "build",
+			"targetType": "executable"
 		}
 	],
 	"targetPath": "build",

examples/margins.d

@@ -0,0 +1,109 @@
+import glui;
+import raylib;
+
+import std.array;
+import std.range;
+import std.format;
+
+void main() {
+
+    SetConfigFlags(ConfigFlag.FLAG_WINDOW_RESIZABLE);
+    SetTraceLogLevel(TraceLogType.LOG_NONE);
+    InitWindow(800, 600, "Hello, World!");
+    SetTargetFPS(60);
+
+    scope (exit) CloseWindow();
+
+    auto theme = makeTheme!q{
+
+        GluiFrame.styleAdd!q{
+
+            margin = 10;
+            backgroundColor = Color(0xff, 0xff, 0xff, 0xaa);
+
+        };
+
+    };
+
+    GluiFrame innerExpand;
+    GluiSpace root, screen1, screen2;
+
+    screen1 = vspace(
+        .layout!(1, "fill"),
+        theme,
+
+        vframe(
+            button("Switch to screen 2", { root = screen2; }),
+        ),
+        vframe(
+            .layout!"end",
+            label("hello"),
+        ),
+        vframe(
+            .layout!"fill",
+            label("hello"),
+        ),
+        vframe(
+            .layout!(1, "start"),
+            label("hello"),
+        ),
+        vframe(
+            .layout!(1, "fill"),
+
+            innerExpand = hframe(
+                .layout!(1, "fill"),
+                button("toggle expand", {
+
+                    innerExpand.layout.expand = !innerExpand.layout.expand;
+                    innerExpand.updateSize();
+
+                }),
+            ),
+
+            label("hello"),
+        ),
+    );
+
+    screen2 = vspace(
+        .layout!(1, "fill"),
+        theme,
+
+        vframe(
+            button("Switch to screen 1", { root = screen1; }),
+        ),
+        vscrollFrame(
+            .layout!(1, "fill"),
+            theme.makeTheme!q{
+
+                GluiFrame.styleAdd!q{
+                    backgroundColor = Color(0xff, 0xff, 0xff, 0xaa);
+                    margin = 10;
+                    padding = 10;
+                };
+
+                GluiScrollBar.styleAdd!q{
+                    margin.sideLeft = 4;
+                    padding = 4;
+                };
+
+            },
+
+            cast(GluiNode[]) generate(() => label("Line of text")).take(150).array,
+
+        ),
+    );
+
+    root = screen1;
+
+    while (!WindowShouldClose) {
+
+        BeginDrawing();
+
+            ClearBackground(Colors.BLACK);
+            root.draw();
+
+        EndDrawing();
+
+    }
+
+}

examples/scroll.d

@@ -19,6 +19,18 @@ void main() {
 
     };
 
+    immutable rightTheme = makeTheme!q{
+
+        GluiSpace.styleAdd!q{
+            margin = 5;
+            margin.sideY = 10;
+        };
+        GluiButton!().styleAdd!q{
+            margin.sideTop = 10;
+        };
+
+    };
+
     GluiScrollBar myScrollBar;
 
     auto root = hframe(
@@ -40,14 +52,28 @@ void main() {
         ),
         vframe(
             .layout!1,
-            label("A useless scrollbar:"),
-            myScrollBar = hscrollBar(.layout!"fill"),
-            label("..."), // margins are a must
-            button("Change scrollbar position", {
+            rightTheme,
+            vspace(
+
+                label("A useless scrollbar:"),
+                myScrollBar = hscrollBar(.layout!"fill"),
+
+                button("Change scrollbar position", {
 
-                myScrollBar.position = !myScrollBar.position * myScrollBar.scrollMax;
+                    myScrollBar.position = !myScrollBar.position * myScrollBar.scrollMax;
+
+                }),
+
+            ),
+            vspace(
+                hscrollFrame(
+                    .layout!"fill",
+
+                    label("A long time ago far far far far far far far far far far far far far far far away..."),
+
+                ),
+            ),
 
-            }),
         )
     );
 

examples/showcase.d

@@ -16,27 +16,21 @@ void main() {
     auto redTheme = makeTheme!q{
 
         GluiFrame.styleAdd.backgroundColor = Color(0xc0, 0x12, 0x12, 0xff);
+        GluiButton!().styleAdd.backgroundColor = Color(0xff, 0xff, 0xff, 0xff);
 
     };
-
-    auto greenTheme = makeTheme!q{
+    auto greenTheme = redTheme.makeTheme!q{
 
         GluiFrame.styleAdd.backgroundColor = Color(0x12, 0xc0, 0x12, 0xff);
 
     };
-    auto blueTheme = makeTheme!q{
+    auto blueTheme = redTheme.makeTheme!q{
 
         GluiFrame.styleAdd.backgroundColor = Color(0x12, 0x12, 0xc0, 0xff);
 
     };
 
-    auto whiteText = style!q{
-
-        textColor = Colors.WHITE;
-
-    };
-
-    Layout fill = layout!(1, "fill");
+    Layout fill = .layout!(1, "fill");
 
     // Save IDs
     GluiNode secondColumn;
@@ -54,13 +48,13 @@ void main() {
 
     auto root = vframe(fill,
 
-        vframe(layout!("fill", "start"),
+        vframe(.layout!("fill", "start"),
 
             hframe(
-                layout!"center",
+                .layout!"center",
 
                 imageView("./logo.png", Vector2(40, 40)),
-                label(layout!"center", "Hello, Glui!"),
+                label(.layout!"center", "Hello, Glui!"),
             )
 
         ),
@@ -69,23 +63,15 @@ void main() {
 
             vframe(redTheme, fill,
 
-                richLabel(
-                    layout!(1, "center"),
-                    "Hello, ", whiteText, "World", null, "!\n\n",
-
-                    "Line 1\n",
-                    "Line 2\n",
-                    whiteText, "Line 3 (but white)\n",
-                    null, "Line 4\n",
-                ),
+                label("Hello!"),
 
                 imageView(fill, "./logo.png"),
 
             ),
 
             vframe(greenTheme, fill,
 
-                button(layout!("fill", "start"),
+                button(.layout!("fill", "start"),
                     "Press to reveal the rest of this column",
 
                     {
@@ -111,10 +97,32 @@ void main() {
 
                 vframe(blueTheme, fill,
 
-                    label(layout!(1, "center"), "Third column")
+                    vspace(
+                        .layout!(1, "fill", "center"),
+                        makeTheme!q{
+
+                            GluiLabel.styleAdd!q{
+                                margin = 6;
+                                padding = 12;
+                                backgroundColor = Color(0xff, 0xff, 0xff, 0xaa);
+                            };
+
+                        },
+
+                        label(
+                            .layout!"fill",
+                            "Label with a margin",
+                        ),
+
+                        label(
+                            .layout!"fill",
+                            "Another label with a margin",
+                        )
+
+                    ),
 
                 ),
-                label(layout!("center"), "Welcome to Glui!"),
+                label(.layout!("center"), "Welcome to Glui!"),
 
             )
 

readme.md

@@ -12,4 +12,5 @@ integrate in other projects.
 
 It is guaranteed to work with Raylib, but might not work with other libraries or frameworks.
 
-glui has a poor feature set at the moment and new features will be added as needed.
+Glui has a decent feature set at the moment, but new features will still be added over time. It's mostly stable as of
+now and ready to be used. What it's missing the most, is examples and documentation on design concepts behind it.

source/glui/button.d

@@ -53,10 +53,10 @@ class GluiButton(T : GluiNode = GluiLabel) : GluiInput!T {
 
     }
 
-    protected override void drawImpl(Rectangle area) {
+    protected override void drawImpl(Rectangle outer, Rectangle inner) {
 
         // Draw the button
-        super.drawImpl(area);
+        super.drawImpl(outer, inner);
 
         // Reset pressed status
         isPressed = false;

source/glui/default_theme.d

@@ -9,43 +9,45 @@ shared static this() {
     gluiDefaultTheme = cast(immutable) Theme.init.makeTheme!q{
 
         fontSize = 20;
-        textColor = Colors.BLACK;
+        lineHeight = 1.4;
+        charSpacing = 0.1;
+        wordSpacing = 0.5;
 
+        textColor = Colors.BLACK;
 
-        import glui.frame;
         GluiFrame.styleAdd!q{
 
             backgroundColor = Colors.WHITE;
 
         };
 
-
-        import glui.button;
         GluiButton!().styleAdd!q{
 
-            backgroundColor = Colors.WHITE;
-            mouseCursor = MouseCursor.MOUSE_CURSOR_POINTING_HAND,
+            backgroundColor = Color(0xee, 0xee, 0xee, 0xff);
+            mouseCursor = MouseCursor.MOUSE_CURSOR_POINTING_HAND;
 
-            // Define alternative styles
-            focusStyleAdd.backgroundColor = Color(0xee, 0xee, 0xee, 0xff);
-            hoverStyleAdd.backgroundColor = Color(0xdd, 0xdd, 0xdd, 0xff);
+            margin.sideY = 2;
+            padding.sideX = 6;
+
+            focusStyleAdd.backgroundColor = Color(0xdd, 0xdd, 0xdd, 0xff);
+            hoverStyleAdd.backgroundColor = Color(0xcc, 0xcc, 0xcc, 0xff);
             pressStyleAdd.backgroundColor = Color(0xaa, 0xaa, 0xaa, 0xff);
 
         };
 
-
-        import glui.text_input;
         GluiTextInput.styleAdd!q{
 
             backgroundColor = Color(0xff, 0xff, 0xff, 0xcc);
             mouseCursor = MouseCursor.MOUSE_CURSOR_IBEAM;
 
+            margin.sideY = 2;
+            padding.sideX = 6;
+
             GluiTextInput.emptyStyleAdd.textColor = Color(0x00, 0x00, 0x00, 0xaa);
             GluiTextInput.focusStyleAdd.backgroundColor = Color(0xff, 0xff, 0xff, 0xff);
 
         };
 
-        import glui.scrollbar;
         GluiScrollBar.styleAdd!q{
 
             backgroundColor = Color(0xaa, 0xaa, 0xaa, 0xff);
@@ -57,7 +59,6 @@ shared static this() {
 
         };
 
-        import glui.file_picker;
         GluiFilePicker.selectedStyleAdd.backgroundColor = Color(0xff, 0x51, 0x2f, 0xff);
 
     };

source/glui/file_picker.d

@@ -301,7 +301,7 @@ class GluiFilePicker : GluiInput!GluiFrame {
 
     }
 
-    protected override void drawImpl(Rectangle rect) @trusted {
+    protected override void drawImpl(Rectangle outer, Rectangle inner) @trusted {
 
         // Wasn't focused
         if (!savedFocus) {
@@ -367,7 +367,7 @@ class GluiFilePicker : GluiInput!GluiFrame {
 
         }
 
-        super.drawImpl(rect);
+        super.drawImpl(outer, inner);
 
     }