From 2892176a76ba9184df17d5440b322cf0773789db Mon Sep 17 00:00:00 2001
From: Leo dev <klesti.selimay@icloud.com>
Date: Sat, 2 Aug 2025 06:16:09 -0500
Subject: [PATCH] Square outline demo fix #15

---
 src/demos/mod.rs    | 10 ++++++++--
 src/render_scope.rs | 18 ++++++++++++++++--
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/demos/mod.rs b/src/demos/mod.rs
index 869e8d0..104f97d 100644
--- a/src/demos/mod.rs
+++ b/src/demos/mod.rs
@@ -15,13 +15,19 @@ pub fn app() -> Rsx {
         FlexRow {
             FlexCol {
                 @Transform::new().padding(2, 2);
-                @Style { foreground: None, background: Background::RoundedOutline(0x00ff00) }; // TODO: Outline doesn't work
+                @Style { foreground: None, background: Background::RoundedOutline(0x00ff00) };
                 Div {
                     "This is text inside a div"
                 }
 
+                @Transform::new().padding(2, 2);
+                @Style { foreground: None, background: Background::Outline(0x00ff00) };
+                Div {
+                    "This is text inside a div with square outlines"
+                }
+
                 // TODO: div with width full
-            } (2)
+            } (1)
 
             FlexCol {
                 Div {
diff --git a/src/render_scope.rs b/src/render_scope.rs
index 42cdd4d..4fbaf18 100644
--- a/src/render_scope.rs
+++ b/src/render_scope.rs
@@ -105,8 +105,22 @@ impl RenderScope {
 
         match self.style.background {
             crate::style::Background::NoBackground => {}
-            crate::style::Background::Outline(_c) => {
-                // TODO: Implement basic outline drawing if needed
+            crate::style::Background::Outline(c) => {
+                let width = width + self.transform.px * 2;
+                let height = height + self.transform.py * 2;
+                if width > 1 && height > 1 {
+                    let d = "─".repeat(width as usize - 2);
+                    utils::print_liner(
+                        self.transform.x,
+                        self.transform.y,
+                        &utils::hex_ansi(c),
+                        &format!(
+                            "┌{d}┐{}\n└{d}┘",
+                            format!("\n│{}│", " ".repeat(width as usize - 2))
+                                .repeat(height as usize - 2),
+                        ),
+                    );
+                }
             }
             crate::style::Background::RoundedOutline(c) => {
                 let width = width + self.transform.px * 2;