better callback(event) system

examples/EventSystemDemo.lua

@@ -0,0 +1,171 @@
+local FlexLove = require("FlexLove")
+local Gui = FlexLove.GUI
+local Color = FlexLove.Color
+
+---@class EventSystemDemo
+---@field window Element
+---@field eventLog table<integer, string>
+---@field logDisplay Element
+local EventSystemDemo = {}
+EventSystemDemo.__index = EventSystemDemo
+
+function EventSystemDemo.init()
+  local self = setmetatable({}, EventSystemDemo)
+  self.eventLog = {}
+
+  -- Create main demo window
+  self.window = Gui.new({
+    x = 50,
+    y = 50,
+    width = 700,
+    height = 500,
+    background = Color.new(0.15, 0.15, 0.2, 0.95),
+    border = { top = true, bottom = true, left = true, right = true },
+    borderColor = Color.new(0.8, 0.8, 0.8, 1),
+    positioning = "flex",
+    flexDirection = "vertical",
+    gap = 20,
+    padding = { top = 20, right = 20, bottom = 20, left = 20 },
+  })
+
+  -- Title
+  local title = Gui.new({
+    parent = self.window,
+    height = 40,
+    text = "Event System Demo - Try different clicks and modifiers!",
+    textSize = 18,
+    textAlign = "center",
+    textColor = Color.new(1, 1, 1, 1),
+    background = Color.new(0.2, 0.2, 0.3, 1),
+  })
+
+  -- Button container
+  local buttonContainer = Gui.new({
+    parent = self.window,
+    height = 200,
+    positioning = "flex",
+    flexDirection = "horizontal",
+    gap = 15,
+    background = Color.new(0.1, 0.1, 0.15, 0.5),
+    padding = { top = 15, right = 15, bottom = 15, left = 15 },
+  })
+
+  -- Helper function to add event to log
+  local function logEvent(message)
+    table.insert(self.eventLog, 1, message) -- Add to beginning
+    if #self.eventLog > 10 then
+      table.remove(self.eventLog) -- Keep only last 10 events
+    end
+    self:updateLogDisplay()
+  end
+
+  -- Left Click Button
+  local leftClickBtn = Gui.new({
+    parent = buttonContainer,
+    width = 150,
+    height = 80,
+    text = "Left Click Me",
+    textAlign = "center",
+    textColor = Color.new(1, 1, 1, 1),
+    background = Color.new(0.2, 0.6, 0.9, 0.8),
+    border = { top = true, bottom = true, left = true, right = true },
+    borderColor = Color.new(0.4, 0.8, 1, 1),
+    callback = function(element, event)
+      local msg = string.format("[%s] Button: %d, Clicks: %d", 
+        event.type, event.button, event.clickCount)
+      logEvent(msg)
+    end,
+  })
+
+  -- Right Click Button
+  local rightClickBtn = Gui.new({
+    parent = buttonContainer,
+    width = 150,
+    height = 80,
+    text = "Right Click Me",
+    textAlign = "center",
+    textColor = Color.new(1, 1, 1, 1),
+    background = Color.new(0.9, 0.4, 0.4, 0.8),
+    border = { top = true, bottom = true, left = true, right = true },
+    borderColor = Color.new(1, 0.6, 0.6, 1),
+    callback = function(element, event)
+      if event.type == "rightclick" then
+        logEvent("RIGHT CLICK detected!")
+      elseif event.type == "click" then
+        logEvent("Left click (try right click!)")
+      end
+    end,
+  })
+
+  -- Modifier Button
+  local modifierBtn = Gui.new({
+    parent = buttonContainer,
+    width = 150,
+    height = 80,
+    text = "Try Shift/Ctrl",
+    textAlign = "center",
+    textColor = Color.new(1, 1, 1, 1),
+    background = Color.new(0.6, 0.9, 0.4, 0.8),
+    border = { top = true, bottom = true, left = true, right = true },
+    borderColor = Color.new(0.8, 1, 0.6, 1),
+    callback = function(element, event)
+      if event.type == "click" then
+        local mods = {}
+        if event.modifiers.shift then table.insert(mods, "SHIFT") end
+        if event.modifiers.ctrl then table.insert(mods, "CTRL") end
+        if event.modifiers.alt then table.insert(mods, "ALT") end
+        if event.modifiers.cmd then table.insert(mods, "CMD") end
+        
+        if #mods > 0 then
+          logEvent("Modifiers: " .. table.concat(mods, "+"))
+        else
+          logEvent("No modifiers (try holding Shift/Ctrl)")
+        end
+      end
+    end,
+  })
+
+  -- Multi-Event Button (shows all event types)
+  local multiEventBtn = Gui.new({
+    parent = buttonContainer,
+    width = 150,
+    height = 80,
+    text = "All Events",
+    textAlign = "center",
+    textColor = Color.new(1, 1, 1, 1),
+    background = Color.new(0.9, 0.7, 0.3, 0.8),
+    border = { top = true, bottom = true, left = true, right = true },
+    borderColor = Color.new(1, 0.9, 0.5, 1),
+    callback = function(element, event)
+      local msg = string.format("[%s] Btn:%d at (%d,%d)", 
+        event.type, event.button, math.floor(event.x), math.floor(event.y))
+      logEvent(msg)
+    end,
+  })
+
+  -- Event log display area
+  self.logDisplay = Gui.new({
+    parent = self.window,
+    height = 200,
+    text = "Event log will appear here...",
+    textSize = 14,
+    textAlign = "start",
+    textColor = Color.new(0.9, 0.9, 1, 1),
+    background = Color.new(0.05, 0.05, 0.1, 1),
+    border = { top = true, bottom = true, left = true, right = true },
+    borderColor = Color.new(0.3, 0.3, 0.4, 1),
+    padding = { top = 10, right = 10, bottom = 10, left = 10 },
+  })
+
+  return self
+end
+
+function EventSystemDemo:updateLogDisplay()
+  if #self.eventLog == 0 then
+    self.logDisplay.text = "Event log will appear here..."
+  else
+    self.logDisplay.text = table.concat(self.eventLog, "\n")
+  end
+end
+
+return EventSystemDemo.init()