simplified grid implementation

examples/BasicGrid.lua

@@ -1,226 +0,0 @@
--- Example demonstrating basic CSS Grid layout
--- Shows how to create grid containers and position items
-
-package.path = package.path .. ";?.lua"
-require("testing/loveStub")
-local FlexLove = require("FlexLove")
-local Gui = FlexLove.GUI
-local Color = FlexLove.Color
-local enums = FlexLove.enums
-
-print("=== Basic Grid Layout Examples ===\n")
-
--- Example 1: Simple 3-column grid
-print("1. Simple 3-Column Grid")
-print("   Grid with equal columns using fr units")
-
-local grid1 = Gui.new({
-  x = 50,
-  y = 50,
-  width = 600,
-  height = 400,
-  positioning = enums.Positioning.GRID,
-  gridTemplateColumns = "1fr 1fr 1fr",
-  gridTemplateRows = "auto auto",
-  columnGap = 10,
-  rowGap = 10,
-  background = Color.new(0.9, 0.9, 0.9, 1),
-  padding = { horizontal = 20, vertical = 20 },
-})
-
--- Add grid items
-for i = 1, 6 do
-  Gui.new({
-    parent = grid1,
-    width = 50,
-    height = 50,
-    background = Color.new(0.2, 0.5, 0.8, 1),
-    text = "Item " .. i,
-    textColor = Color.new(1, 1, 1, 1),
-    textAlign = enums.TextAlign.CENTER,
-  })
-end
-
-print("   Grid container: 600x400, 3 columns (1fr each), 2 rows (auto)")
-print("   Column gap: 10px, Row gap: 10px")
-print("   Items: 6 items auto-placed in grid\n")
-
--- Example 2: Mixed column sizes
-print("2. Mixed Column Sizes")
-print("   Grid with different column widths")
-
-Gui.destroy()
-local grid2 = Gui.new({
-  x = 50,
-  y = 50,
-  width = 800,
-  height = 300,
-  positioning = enums.Positioning.GRID,
-  gridTemplateColumns = "200px 1fr 2fr",
-  gridTemplateRows = "100px 100px",
-  columnGap = 15,
-  rowGap = 15,
-  background = Color.new(0.9, 0.9, 0.9, 1),
-  padding = { horizontal = 20, vertical = 20 },
-})
-
-local labels = { "Sidebar", "Content", "Main", "Footer", "Info", "Extra" }
-for i = 1, 6 do
-  Gui.new({
-    parent = grid2,
-    background = Color.new(0.3, 0.6, 0.3, 1),
-    text = labels[i],
-    textColor = Color.new(1, 1, 1, 1),
-    textAlign = enums.TextAlign.CENTER,
-  })
-end
-
-print("   Columns: 200px (fixed), 1fr, 2fr (flexible)")
-print("   The flexible columns share remaining space proportionally\n")
-
--- Example 3: Explicit item placement
-print("3. Explicit Grid Item Placement")
-print("   Items placed at specific grid positions")
-
-Gui.destroy()
-local grid3 = Gui.new({
-  x = 50,
-  y = 50,
-  width = 600,
-  height = 400,
-  positioning = enums.Positioning.GRID,
-  gridTemplateColumns = "1fr 1fr 1fr",
-  gridTemplateRows = "1fr 1fr 1fr",
-  columnGap = 10,
-  rowGap = 10,
-  background = Color.new(0.9, 0.9, 0.9, 1),
-  padding = { horizontal = 20, vertical = 20 },
-})
-
--- Header spanning all columns
-Gui.new({
-  parent = grid3,
-  gridColumn = "1 / 4", -- Span from column 1 to 4 (all 3 columns)
-  gridRow = 1,
-  background = Color.new(0.8, 0.3, 0.3, 1),
-  text = "Header (spans all columns)",
-  textColor = Color.new(1, 1, 1, 1),
-  textAlign = enums.TextAlign.CENTER,
-})
-
--- Sidebar spanning 2 rows
-Gui.new({
-  parent = grid3,
-  gridColumn = 1,
-  gridRow = "2 / 4", -- Span from row 2 to 4 (2 rows)
-  background = Color.new(0.3, 0.3, 0.8, 1),
-  text = "Sidebar",
-  textColor = Color.new(1, 1, 1, 1),
-  textAlign = enums.TextAlign.CENTER,
-})
-
--- Main content area
-Gui.new({
-  parent = grid3,
-  gridColumn = "2 / 4", -- Span columns 2-3
-  gridRow = 2,
-  background = Color.new(0.3, 0.8, 0.3, 1),
-  text = "Main Content",
-  textColor = Color.new(1, 1, 1, 1),
-  textAlign = enums.TextAlign.CENTER,
-})
-
--- Footer spanning columns 2-3
-Gui.new({
-  parent = grid3,
-  gridColumn = "2 / 4",
-  gridRow = 3,
-  background = Color.new(0.8, 0.8, 0.3, 1),
-  text = "Footer",
-  textColor = Color.new(1, 1, 1, 1),
-  textAlign = enums.TextAlign.CENTER,
-})
-
-print("   Header: spans columns 1-3, row 1")
-print("   Sidebar: column 1, spans rows 2-3")
-print("   Main: spans columns 2-3, row 2")
-print("   Footer: spans columns 2-3, row 3\n")
-
--- Example 4: Using repeat() function
-print("4. Using repeat() Function")
-print("   Create multiple columns with repeat notation")
-
-Gui.destroy()
-local grid4 = Gui.new({
-  x = 50,
-  y = 50,
-  width = 800,
-  height = 300,
-  positioning = enums.Positioning.GRID,
-  gridTemplateColumns = "repeat(4, 1fr)", -- Creates 4 equal columns
-  gridTemplateRows = "repeat(2, 1fr)", -- Creates 2 equal rows
-  columnGap = 10,
-  rowGap = 10,
-  background = Color.new(0.9, 0.9, 0.9, 1),
-  padding = { horizontal = 20, vertical = 20 },
-})
-
-for i = 1, 8 do
-  Gui.new({
-    parent = grid4,
-    background = Color.new(0.5, 0.3, 0.7, 1),
-    text = "Box " .. i,
-    textColor = Color.new(1, 1, 1, 1),
-    textAlign = enums.TextAlign.CENTER,
-  })
-end
-
-print("   gridTemplateColumns: repeat(4, 1fr)")
-print("   gridTemplateRows: repeat(2, 1fr)")
-print("   Creates a 4x2 grid with 8 equal cells\n")
-
--- Example 5: Percentage-based grid
-print("5. Percentage-Based Grid")
-print("   Using percentage units for columns")
-
-Gui.destroy()
-local grid5 = Gui.new({
-  x = 50,
-  y = 50,
-  width = 600,
-  height = 200,
-  positioning = enums.Positioning.GRID,
-  gridTemplateColumns = "25% 50% 25%",
-  gridTemplateRows = "100%",
-  columnGap = 0,
-  rowGap = 0,
-  background = Color.new(0.9, 0.9, 0.9, 1),
-})
-
-local colors = {
-  Color.new(0.8, 0.2, 0.2, 1),
-  Color.new(0.2, 0.8, 0.2, 1),
-  Color.new(0.2, 0.2, 0.8, 1),
-}
-
-for i = 1, 3 do
-  Gui.new({
-    parent = grid5,
-    background = colors[i],
-    text = (i == 1 and "25%" or i == 2 and "50%" or "25%"),
-    textColor = Color.new(1, 1, 1, 1),
-    textAlign = enums.TextAlign.CENTER,
-  })
-end
-
-print("   Columns: 25%, 50%, 25%")
-print("   Perfect for layouts with specific proportions\n")
-
-print("=== Summary ===")
-print("• Set positioning = Positioning.GRID to create a grid container")
-print("• Use gridTemplateColumns and gridTemplateRows to define track sizes")
-print("• Supported units: px, %, fr, auto, repeat()")
-print("• Use columnGap and rowGap for spacing between tracks")
-print("• Use gridColumn and gridRow on children for explicit placement")
-print("• Use 'start / end' syntax to span multiple tracks")
-print("• Items auto-place if no explicit position is set")

examples/ResponsiveGrid.lua

@@ -1,249 +0,0 @@
--- Example demonstrating responsive grid layouts with viewport units
--- Shows how grids adapt to different screen sizes
-
-package.path = package.path .. ";?.lua"
-require("testing/loveStub")
-local FlexLove = require("FlexLove")
-local Gui = FlexLove.GUI
-local Color = FlexLove.Color
-local enums = FlexLove.enums
-
-print("=== Responsive Grid Layout Examples ===\n")
-
--- Example 1: Dashboard layout with responsive grid
-print("1. Dashboard Layout")
-print("   Responsive grid using viewport units")
-
-local dashboard = Gui.new({
-  x = 0,
-  y = 0,
-  width = "100vw",
-  height = "100vh",
-  positioning = enums.Positioning.GRID,
-  gridTemplateColumns = "200px 1fr 1fr",
-  gridTemplateRows = "60px 1fr 1fr 80px",
-  columnGap = 10,
-  rowGap = 10,
-  background = Color.new(0.95, 0.95, 0.95, 1),
-  padding = { horizontal = 10, vertical = 10 },
-})
-
--- Header (spans all columns)
-Gui.new({
-  parent = dashboard,
-  gridColumn = "1 / 4",
-  gridRow = 1,
-  background = Color.new(0.2, 0.3, 0.5, 1),
-  text = "Dashboard Header",
-  textColor = Color.new(1, 1, 1, 1),
-  textAlign = enums.TextAlign.CENTER,
-  textSize = 24,
-})
-
--- Sidebar (spans rows 2-3)
-Gui.new({
-  parent = dashboard,
-  gridColumn = 1,
-  gridRow = "2 / 4",
-  background = Color.new(0.3, 0.3, 0.4, 1),
-  text = "Navigation",
-  textColor = Color.new(1, 1, 1, 1),
-  textAlign = enums.TextAlign.CENTER,
-})
-
--- Main content area (top)
-Gui.new({
-  parent = dashboard,
-  gridColumn = "2 / 4",
-  gridRow = 2,
-  background = Color.new(1, 1, 1, 1),
-  text = "Main Content",
-  textColor = Color.new(0.2, 0.2, 0.2, 1),
-  textAlign = enums.TextAlign.CENTER,
-  border = { top = true, right = true, bottom = true, left = true },
-  borderColor = Color.new(0.8, 0.8, 0.8, 1),
-})
-
--- Stats section (bottom left)
-Gui.new({
-  parent = dashboard,
-  gridColumn = 2,
-  gridRow = 3,
-  background = Color.new(0.9, 0.95, 1, 1),
-  text = "Statistics",
-  textColor = Color.new(0.2, 0.2, 0.2, 1),
-  textAlign = enums.TextAlign.CENTER,
-  border = { top = true, right = true, bottom = true, left = true },
-  borderColor = Color.new(0.8, 0.8, 0.8, 1),
-})
-
--- Activity feed (bottom right)
-Gui.new({
-  parent = dashboard,
-  gridColumn = 3,
-  gridRow = 3,
-  background = Color.new(1, 0.95, 0.9, 1),
-  text = "Activity Feed",
-  textColor = Color.new(0.2, 0.2, 0.2, 1),
-  textAlign = enums.TextAlign.CENTER,
-  border = { top = true, right = true, bottom = true, left = true },
-  borderColor = Color.new(0.8, 0.8, 0.8, 1),
-})
-
--- Footer (spans all columns)
-Gui.new({
-  parent = dashboard,
-  gridColumn = "1 / 4",
-  gridRow = 4,
-  background = Color.new(0.2, 0.3, 0.5, 1),
-  text = "Footer - Copyright 2025",
-  textColor = Color.new(1, 1, 1, 1),
-  textAlign = enums.TextAlign.CENTER,
-})
-
-print("   Layout structure:")
-print("   - Header: Full width, 60px height")
-print("   - Sidebar: 200px wide, spans content rows")
-print("   - Main content: Flexible width, top content area")
-print("   - Stats & Activity: Split remaining space")
-print("   - Footer: Full width, 80px height\n")
-
--- Example 2: Card grid with auto-flow
-print("2. Card Grid with Auto-Flow")
-print("   Grid that automatically places items")
-
-Gui.destroy()
-local cardGrid = Gui.new({
-  x = "5vw",
-  y = "5vh",
-  width = "90vw",
-  height = "90vh",
-  positioning = enums.Positioning.GRID,
-  gridTemplateColumns = "repeat(3, 1fr)",
-  gridTemplateRows = "auto",
-  gridAutoRows = "200px",
-  gridAutoFlow = enums.GridAutoFlow.ROW,
-  columnGap = 20,
-  rowGap = 20,
-  background = Color.new(0.9, 0.9, 0.9, 1),
-  padding = { horizontal = 20, vertical = 20 },
-})
-
-local cardColors = {
-  Color.new(0.8, 0.3, 0.3, 1),
-  Color.new(0.3, 0.8, 0.3, 1),
-  Color.new(0.3, 0.3, 0.8, 1),
-  Color.new(0.8, 0.8, 0.3, 1),
-  Color.new(0.8, 0.3, 0.8, 1),
-  Color.new(0.3, 0.8, 0.8, 1),
-}
-
-for i = 1, 9 do
-  local colorIndex = ((i - 1) % #cardColors) + 1
-  Gui.new({
-    parent = cardGrid,
-    background = cardColors[colorIndex],
-    text = "Card " .. i,
-    textColor = Color.new(1, 1, 1, 1),
-    textAlign = enums.TextAlign.CENTER,
-    textSize = 20,
-  })
-end
-
-print("   9 cards in a 3-column grid")
-print("   Auto-flow: ROW (fills rows first)")
-print("   Auto-generated rows: 200px each\n")
-
--- Example 3: Nested grids
-print("3. Nested Grid Layout")
-print("   Grid containers within grid items")
-
-Gui.destroy()
-local outerGrid = Gui.new({
-  x = 50,
-  y = 50,
-  width = 700,
-  height = 500,
-  positioning = enums.Positioning.GRID,
-  gridTemplateColumns = "1fr 2fr",
-  gridTemplateRows = "1fr 1fr",
-  columnGap = 15,
-  rowGap = 15,
-  background = Color.new(0.85, 0.85, 0.85, 1),
-  padding = { horizontal = 15, vertical = 15 },
-})
-
--- Top-left: Simple item
-Gui.new({
-  parent = outerGrid,
-  background = Color.new(0.5, 0.3, 0.7, 1),
-  text = "Simple Item",
-  textColor = Color.new(1, 1, 1, 1),
-  textAlign = enums.TextAlign.CENTER,
-})
-
--- Top-right: Nested grid
-local nestedGrid1 = Gui.new({
-  parent = outerGrid,
-  positioning = enums.Positioning.GRID,
-  gridTemplateColumns = "1fr 1fr",
-  gridTemplateRows = "1fr 1fr",
-  columnGap = 5,
-  rowGap = 5,
-  background = Color.new(0.7, 0.7, 0.7, 1),
-  padding = { horizontal = 5, vertical = 5 },
-})
-
-for i = 1, 4 do
-  Gui.new({
-    parent = nestedGrid1,
-    background = Color.new(0.3, 0.6, 0.9, 1),
-    text = "A" .. i,
-    textColor = Color.new(1, 1, 1, 1),
-    textAlign = enums.TextAlign.CENTER,
-  })
-end
-
--- Bottom-left: Another nested grid
-local nestedGrid2 = Gui.new({
-  parent = outerGrid,
-  positioning = enums.Positioning.GRID,
-  gridTemplateColumns = "repeat(3, 1fr)",
-  gridTemplateRows = "1fr",
-  columnGap = 5,
-  rowGap = 5,
-  background = Color.new(0.7, 0.7, 0.7, 1),
-  padding = { horizontal = 5, vertical = 5 },
-})
-
-for i = 1, 3 do
-  Gui.new({
-    parent = nestedGrid2,
-    background = Color.new(0.9, 0.6, 0.3, 1),
-    text = "B" .. i,
-    textColor = Color.new(1, 1, 1, 1),
-    textAlign = enums.TextAlign.CENTER,
-  })
-end
-
--- Bottom-right: Simple item
-Gui.new({
-  parent = outerGrid,
-  background = Color.new(0.3, 0.7, 0.5, 1),
-  text = "Another Item",
-  textColor = Color.new(1, 1, 1, 1),
-  textAlign = enums.TextAlign.CENTER,
-})
-
-print("   Outer grid: 2x2 layout")
-print("   Top-right cell: 2x2 nested grid")
-print("   Bottom-left cell: 1x3 nested grid")
-print("   Other cells: Simple items\n")
-
-print("=== Summary ===")
-print("• Grids work with viewport units (vw, vh) for responsive layouts")
-print("• Use gridAutoFlow to control automatic item placement")
-print("• gridAutoRows/gridAutoColumns define sizes for auto-generated tracks")
-print("• Grids can be nested within grid items")
-print("• Combine fixed (px) and flexible (fr) units for hybrid layouts")
-print("• Use gaps to create visual separation between grid items")

examples/SimpleGrid.lua

@@ -0,0 +1,236 @@
+-- Example demonstrating the simplified grid layout system
+-- Shows how to create grids with simple row/column counts
+
+package.path = package.path .. ";?.lua"
+require("testing/loveStub")
+local FlexLove = require("FlexLove")
+local Gui = FlexLove.GUI
+local Color = FlexLove.Color
+local enums = FlexLove.enums
+
+print("=== Simplified Grid Layout Examples ===\n")
+
+-- Example 1: Simple 3x2 grid
+print("1. Simple 3x2 Grid")
+print("   Grid with 3 columns and 2 rows")
+
+local grid1 = Gui.new({
+  x = 50,
+  y = 50,
+  width = 600,
+  height = 400,
+  positioning = enums.Positioning.GRID,
+  gridRows = 2,
+  gridColumns = 3,
+  columnGap = 10,
+  rowGap = 10,
+  background = Color.new(0.9, 0.9, 0.9, 1),
+  padding = { horizontal = 20, vertical = 20 },
+})
+
+-- Add grid items - they auto-tile in order
+for i = 1, 6 do
+  Gui.new({
+    parent = grid1,
+    background = Color.new(0.2, 0.5, 0.8, 1),
+    text = "Item " .. i,
+    textColor = Color.new(1, 1, 1, 1),
+    textAlign = enums.TextAlign.CENTER,
+  })
+end
+
+print("   Grid container: 600x400, 3 columns, 2 rows")
+print("   Column gap: 10px, Row gap: 10px")
+print("   Items: 6 items auto-tiled in order\n")
+
+-- Example 2: Square grid (4x4)
+print("2. Square Grid (4x4)")
+print("   Perfect for icon grids or game boards")
+
+Gui.destroy()
+local grid2 = Gui.new({
+  x = 50,
+  y = 50,
+  width = 400,
+  height = 400,
+  positioning = enums.Positioning.GRID,
+  gridRows = 4,
+  gridColumns = 4,
+  columnGap = 5,
+  rowGap = 5,
+  background = Color.new(0.9, 0.9, 0.9, 1),
+  padding = { horizontal = 10, vertical = 10 },
+})
+
+for i = 1, 16 do
+  Gui.new({
+    parent = grid2,
+    background = Color.new(0.3, 0.6, 0.3, 1),
+    text = tostring(i),
+    textColor = Color.new(1, 1, 1, 1),
+    textAlign = enums.TextAlign.CENTER,
+  })
+end
+
+print("   16 items in a 4x4 grid")
+print("   Each cell is equal size\n")
+
+-- Example 3: Horizontal strip (1 row, multiple columns)
+print("3. Horizontal Strip")
+print("   Single row with multiple columns")
+
+Gui.destroy()
+local grid3 = Gui.new({
+  x = 50,
+  y = 50,
+  width = 800,
+  height = 100,
+  positioning = enums.Positioning.GRID,
+  gridRows = 1,
+  gridColumns = 5,
+  columnGap = 10,
+  rowGap = 0,
+  background = Color.new(0.9, 0.9, 0.9, 1),
+  padding = { horizontal = 10, vertical = 10 },
+})
+
+local labels = { "Home", "Products", "About", "Contact", "Login" }
+for i = 1, 5 do
+  Gui.new({
+    parent = grid3,
+    background = Color.new(0.3, 0.3, 0.8, 1),
+    text = labels[i],
+    textColor = Color.new(1, 1, 1, 1),
+    textAlign = enums.TextAlign.CENTER,
+  })
+end
+
+print("   Perfect for navigation bars\n")
+
+-- Example 4: Vertical strip (multiple rows, 1 column)
+print("4. Vertical Strip")
+print("   Single column with multiple rows")
+
+Gui.destroy()
+local grid4 = Gui.new({
+  x = 50,
+  y = 50,
+  width = 200,
+  height = 500,
+  positioning = enums.Positioning.GRID,
+  gridRows = 5,
+  gridColumns = 1,
+  columnGap = 0,
+  rowGap = 10,
+  background = Color.new(0.9, 0.9, 0.9, 1),
+  padding = { horizontal = 10, vertical = 10 },
+})
+
+for i = 1, 5 do
+  Gui.new({
+    parent = grid4,
+    background = Color.new(0.5, 0.3, 0.7, 1),
+    text = "Option " .. i,
+    textColor = Color.new(1, 1, 1, 1),
+    textAlign = enums.TextAlign.CENTER,
+  })
+end
+
+print("   Perfect for sidebar menus\n")
+
+-- Example 5: Nested grids
+print("5. Nested Grids")
+print("   Grid containers within grid cells")
+
+Gui.destroy()
+local outerGrid = Gui.new({
+  x = 50,
+  y = 50,
+  width = 600,
+  height = 400,
+  positioning = enums.Positioning.GRID,
+  gridRows = 2,
+  gridColumns = 2,
+  columnGap = 10,
+  rowGap = 10,
+  background = Color.new(0.85, 0.85, 0.85, 1),
+  padding = { horizontal = 10, vertical = 10 },
+})
+
+-- Top-left: Simple item
+Gui.new({
+  parent = outerGrid,
+  background = Color.new(0.5, 0.3, 0.7, 1),
+  text = "Single Item",
+  textColor = Color.new(1, 1, 1, 1),
+  textAlign = enums.TextAlign.CENTER,
+})
+
+-- Top-right: Nested 2x2 grid
+local nestedGrid1 = Gui.new({
+  parent = outerGrid,
+  positioning = enums.Positioning.GRID,
+  gridRows = 2,
+  gridColumns = 2,
+  columnGap = 5,
+  rowGap = 5,
+  background = Color.new(0.7, 0.7, 0.7, 1),
+  padding = { horizontal = 5, vertical = 5 },
+})
+
+for i = 1, 4 do
+  Gui.new({
+    parent = nestedGrid1,
+    background = Color.new(0.3, 0.6, 0.9, 1),
+    text = "A" .. i,
+    textColor = Color.new(1, 1, 1, 1),
+    textAlign = enums.TextAlign.CENTER,
+  })
+end
+
+-- Bottom-left: Nested 1x3 grid
+local nestedGrid2 = Gui.new({
+  parent = outerGrid,
+  positioning = enums.Positioning.GRID,
+  gridRows = 1,
+  gridColumns = 3,
+  columnGap = 5,
+  rowGap = 5,
+  background = Color.new(0.7, 0.7, 0.7, 1),
+  padding = { horizontal = 5, vertical = 5 },
+})
+
+for i = 1, 3 do
+  Gui.new({
+    parent = nestedGrid2,
+    background = Color.new(0.9, 0.6, 0.3, 1),
+    text = "B" .. i,
+    textColor = Color.new(1, 1, 1, 1),
+    textAlign = enums.TextAlign.CENTER,
+  })
+end
+
+-- Bottom-right: Another simple item
+Gui.new({
+  parent = outerGrid,
+  background = Color.new(0.3, 0.7, 0.5, 1),
+  text = "Another Item",
+  textColor = Color.new(1, 1, 1, 1),
+  textAlign = enums.TextAlign.CENTER,
+})
+
+print("   Outer grid: 2x2 layout")
+print("   Top-right: 2x2 nested grid")
+print("   Bottom-left: 1x3 nested grid\n")
+
+print("=== Summary ===")
+print("The simplified grid system provides:")
+print("• Simple API: Just set gridRows and gridColumns")
+print("• Auto-tiling: Children are placed in order automatically")
+print("• Equal sizing: All cells are equal size")
+print("• Gaps: Use columnGap and rowGap for spacing")
+print("• Stretch: Children stretch to fill cells by default")
+print("• Nesting: Grids can contain other grids")
+print("\nNo need for complex track definitions, explicit placement, or spans!")
+
+Gui.destroy()