Implement tab switching and editor button population

claude · claude · commit 3fe7832ad641 · 2025-11-16T10:31:40.000Z
Fixed widget errors and implemented core tabbed interface logic:

RML Changes:
- Removed team selector (will use Chili floating widget like original)
- Removed onclick handlers causing widget errors
- Simplified tab buttons (Objects, Map, Env, Misc)
- Tab IDs match tab names (tab-Objects, tab-Map, etc.)

RCSS Changes:
- Adjusted layout: tabs at 10dp, editor buttons at 40dp, content at 125dp
- Added flex-shrink: 0 to editor buttons for proper scrolling
- Reduced sizes to match tighter layout

View.lua Changes:
- Added BindTabEvents() - binds click events to tab buttons
- Added SwitchTab() - switches active tab and updates styling
- Added PopulateEditorButtons() - reads SB.editorRegistry and creates buttons
- Added OpenEditor() - placeholder for opening editors
- Added UpdateEditorButtonStates() - highlights pressed editor button
- Initializes with Objects tab by default

Next: Implement field rendering system to show actual editor content
diff --git a/scen_edit/view/rcss/springboard.rcss b/scen_edit/view/rcss/springboard.rcss
@@ -10,53 +10,28 @@ body#springboard {
     background-color: #1a1a1a;
 }
 
-/* Team selector (top right corner) */
-.team-selector {
-    position: absolute;
-    top: 10dp;
-    right: 10dp;
-    padding: 5dp;
-    background-color: #2a2a2a;
-    border: 1dp #555555;
-    border-radius: 3dp;
-    display: flex;
-    flex-direction: row;
-    gap: 5dp;
-    align-items: center;
-}
-
-.team-selector label {
-    color: #cccccc;
-}
-
-.team-selector select {
-    background-color: #3a3a3a;
-    color: #cccccc;
-    border: 1dp #555555;
-    padding: 3dp;
-}
-
-/* Tab bar */
+/* Tab bar at top */
 .tab-bar {
     position: absolute;
-    top: 50dp;
+    top: 10dp;
     left: 0dp;
     right: 0dp;
-    height: 30dp;
-    background-color: #2a2a2a;
+    height: 25dp;
+    background-color: #222222;
     display: flex;
     flex-direction: row;
-    gap: 2dp;
-    padding: 2dp;
+    gap: 1dp;
+    padding: 1dp;
 }
 
 .tab-button {
     flex: 1;
     background-color: #3a3a3a;
     color: #999999;
     border: 1dp #555555;
-    padding: 5dp 10dp;
+    padding: 3dp 8dp;
     text-align: center;
+    font-size: 12dp;
     cursor: pointer;
 }
 
@@ -71,10 +46,10 @@ body#springboard {
     border-bottom: 2dp #3a7ebf;
 }
 
-/* Editor button panel (scrollable horizontal) */
+/* Editor button panel (scrollable horizontal) - matches TOOLBOX_ITEM_HEIGHT (70dp) + padding */
 .editor-panel-wrapper {
     position: absolute;
-    top: 85dp;
+    top: 40dp;
     left: 0dp;
     right: 0dp;
     height: 80dp;
@@ -104,6 +79,7 @@ body#springboard {
     align-items: center;
     justify-content: center;
     padding: 5dp;
+    flex-shrink: 0;
 }
 
 .editor-button:hover {
@@ -119,23 +95,24 @@ body#springboard {
 .editor-button img {
     width: 35dp;
     height: 35dp;
-    margin-bottom: 5dp;
+    margin-bottom: 3dp;
 }
 
 .editor-button-label {
-    font-size: 10dp;
+    font-size: 9dp;
     color: #cccccc;
     text-align: center;
+    word-wrap: break-word;
 }
 
 .editor-button.pressed .editor-button-label {
     color: #00ff00;
 }
 
-/* Main content area */
+/* Main content area - starts after editor panel (40 + 80 = 120dp) */
 .main-content {
     position: absolute;
-    top: 170dp;
+    top: 125dp;
     left: 0dp;
     right: 0dp;
     bottom: 0dp;
diff --git a/scen_edit/view/rml/springboard_main.rml b/scen_edit/view/rml/springboard_main.rml
@@ -5,21 +5,12 @@
     <link type="text/rcss" href="../rcss/springboard.rcss"/>
 </head>
 <body id="springboard">
-    <!-- Team selector (top right) -->
-    <div id="team-selector-container" class="team-selector">
-        <label>Team:</label>
-        <select id="team-selector">
-            <option value="0">Team 0</option>
-            <option value="1">Team 1</option>
-        </select>
-    </div>
-
     <!-- Tab bar -->
     <div id="tab-bar" class="tab-bar">
-        <button id="tab-objects" class="tab-button active" data-tab="Objects" onclick="widget:OnTabClick(event)">Objects</button>
-        <button id="tab-map" class="tab-button" data-tab="Map" onclick="widget:OnTabClick(event)">Map</button>
-        <button id="tab-env" class="tab-button" data-tab="Env" onclick="widget:OnTabClick(event)">Env</button>
-        <button id="tab-misc" class="tab-button" data-tab="Misc" onclick="widget:OnTabClick(event)">Misc</button>
+        <button id="tab-Objects" class="tab-button active">Objects</button>
+        <button id="tab-Map" class="tab-button">Map</button>
+        <button id="tab-Env" class="tab-button">Env</button>
+        <button id="tab-Misc" class="tab-button">Misc</button>
     </div>
 
     <!-- Editor button panel (scrollable horizontal) -->
diff --git a/scen_edit/view/view.lua b/scen_edit/view/view.lua
@@ -83,6 +83,11 @@ function View:InitializeRmlUi()
         return
     end
 
+    -- Initialize tab system
+    self.currentTab = "Objects"
+    self:BindTabEvents()
+    self:PopulateEditorButtons(self.currentTab)
+
     -- Initialize floating windows (hidden by default)
     self.commandWindow = RmlUiCommandWindow()
     self.commandWindow:Initialize()
@@ -323,3 +328,133 @@ function View:DrawWorldPreUnit()
     end
     self.selectionManager:DrawWorldPreUnit()
 end
+
+-- RmlUi tab and editor button management
+function View:BindTabEvents()
+    if not self.mainDocument then return end
+    
+    -- Bind click events to all tab buttons
+    local tabs = {"Objects", "Map", "Env", "Misc"}
+    for _, tabName in ipairs(tabs) do
+        local tabButton = self.mainDocument:GetElementById("tab-" .. tabName)
+        if tabButton then
+            tabButton:AddEventListener("click", function()
+                self:SwitchTab(tabName)
+            end)
+        end
+    end
+end
+
+function View:SwitchTab(tabName)
+    if self.currentTab == tabName then return end
+    
+    -- Update tab button styles
+    local tabs = {"Objects", "Map", "Env", "Misc"}
+    for _, name in ipairs(tabs) do
+        local tabButton = self.mainDocument:GetElementById("tab-" .. name)
+        if tabButton then
+            if name == tabName then
+                tabButton:SetClass("active", true)
+            else
+                tabButton:SetClass("active", false)
+            end
+        end
+    end
+    
+    self.currentTab = tabName
+    self:PopulateEditorButtons(tabName)
+    
+    -- Clear main content area
+    local mainContent = self.mainDocument:GetElementById("main-content")
+    if mainContent then
+        mainContent.inner_rml = "<p>Select an editor from the buttons above</p>"
+    end
+end
+
+function View:PopulateEditorButtons(tabName)
+    local editorPanel = self.mainDocument:GetElementById("editor-button-panel")
+    if not editorPanel then return end
+    
+    -- Clear existing buttons
+    editorPanel.inner_rml = ""
+    
+    -- Get all editors for this tab from editorRegistry
+    local editors = {}
+    for name, editorCfg in pairs(SB.editorRegistry) do
+        if editorCfg.tab == tabName then
+            table.insert(editors, editorCfg)
+        end
+    end
+    
+    -- Sort by order
+    table.sort(editors, function(a, b)
+        if a.order ~= b.order then
+            return a.order < b.order
+        end
+        return a.caption < b.caption
+    end)
+    
+    -- Create button HTML for each editor
+    local buttonsHTML = ""
+    for _, editorCfg in ipairs(editors) do
+        local btnId = "editor-btn-" .. editorCfg.name
+        buttonsHTML = buttonsHTML .. string.format([[
+            <div id="%s" class="editor-button">
+                <div class="editor-button-label">%s</div>
+            </div>
+        ]], btnId, editorCfg.caption)
+    end
+    
+    editorPanel.inner_rml = buttonsHTML
+    
+    -- Bind click events to editor buttons
+    for _, editorCfg in ipairs(editors) do
+        local btnId = "editor-btn-" .. editorCfg.name
+        local btn = self.mainDocument:GetElementById(btnId)
+        if btn then
+            btn:AddEventListener("click", function()
+                self:OpenEditor(editorCfg.name)
+            end)
+        end
+    end
+end
+
+function View:OpenEditor(editorName)
+    Log.Notice("Opening editor: " .. editorName)
+    
+    -- Create editor instance if not exists
+    if not SB.editors then
+        SB.editors = {}
+    end
+    
+    if not SB.editors[editorName] then
+        local editorCfg = SB.editorRegistry[editorName]
+        if editorCfg and editorCfg.editor then
+            SB.editors[editorName] = editorCfg.editor()
+        else
+            Log.Error("Editor not found: " .. editorName)
+            return
+        end
+    end
+    
+    local editor = SB.editors[editorName]
+    local mainContent = self.mainDocument:GetElementById("main-content")
+    if mainContent and editor then
+        -- For now, just show a placeholder
+        -- TODO: Implement full editor rendering with fields
+        mainContent.inner_rml = "<h3>Editor: " .. editorName .. "</h3><p>Fields will be rendered here</p>"
+    end
+    
+    -- Highlight pressed button
+    self:UpdateEditorButtonStates(editorName)
+end
+
+function View:UpdateEditorButtonStates(activeEditorName)
+    -- Remove pressed state from all buttons
+    for name, _ in pairs(SB.editorRegistry) do
+        local btn = self.mainDocument:GetElementById("editor-btn-" .. name)
+        if btn then
+            btn:SetClass("pressed", name == activeEditorName)
+        end
+    end
+end
