Skip to content

Phase 1: Establish Hazel-style UI:: namespace helpers#26

Draft
Copilot wants to merge 3 commits intodevfrom
copilot/phase-1-hazel-editor-setup
Draft

Phase 1: Establish Hazel-style UI:: namespace helpers#26
Copilot wants to merge 3 commits intodevfrom
copilot/phase-1-hazel-editor-setup

Conversation

Copy link
Copy Markdown

Copilot AI commented Apr 11, 2026

  • Inspect current implementation for window creation, titlebar hit testing, dockspace, and editor menus
  • Run baseline build command before edits (fails in this environment: missing premake5/Vulkan SDK path)
  • Update editor window/dockspace styling for fullscreen custom titlebar flow (border/rounding/padding/maximized behavior)
  • Add custom titlebar rendering with logo, scene/project text, integrated menu bar, drag zone, and window control buttons
  • Add titlebar interaction logic: hit test event handling, cross-platform drag fallback, minimize/maximize/restore/close behavior
  • Add menu structure for File/Edit/View/Tools/Help and wire panel toggles + diagnostics popups
  • Run targeted validation/build checks for changed code paths (blocked by missing premake5/Vulkan SDK path in this sandbox)
  • Attempt manual verification and capture a UI screenshot of the updated editor (blocked: editor build/run prerequisites missing in sandbox)
Original prompt

Execute Phase 1 of the Hazel Editor plan for LuxEngine. Establish the Hazel visual language, fonts, and ImGui configuration.

Please implement the following:

  1. ImGui Configuration: Ensure the ImGui setup has the Docking branch enabled and ImGuiConfigFlags_DockingEnable and ImGuiConfigFlags_ViewportsEnable active.
  2. Fonts & Icons: Implement a UI font system (e.g., loading Regular, Bold, and Large fonts). Load icons as Texture2D resources (Play, Stop, Pause, Translate, Rotate, Scale, Gears, File/Folder icons).
  3. Theme Colors: Create a Colors::Theme namespace/struct mapping exactly to Hazel's dark theme (e.g., titlebar, titlebarGreen, backgroundDark, text, muted, accent).
  4. UI Utility Wrapping: Replicate the UI:: namespace helpers (e.g., UI::ScopedStyle, UI::ScopedColour, UI::ShiftCursorY, UI::DrawButtonImage) used heavily throughout Hazel.

Look at the relevant ImGui setup files, editor layer, and UI utility files to implement these foundational features.

The following is the prior conversation context from the user's chat exploration (may be truncated):

User: Could you make a plan for the Copilot agent, to make my LuxEngine's Editor exactly looking like and feeling like the Hazel Editor's

Assistant: Here is a comprehensive, step-by-step plan for the GitHub Copilot coding agent to transform LuxEngine's editor into a Hazel-style Editor. This plan breaks down the massive EditorLayer.cpp and EditorLayer.h implementation into manageable, sequential phases that an AI agent can implement via separate Pull Requests (PRs).

Phase 1: Foundational UI & Theming Setup

Goal: Establish the Hazel visual language, fonts, and ImGui configuration.

  1. ImGui Configuration: Ensure the ImGui setup has the Docking branch enabled and ImGuiConfigFlags_DockingEnable and ImGuiConfigFlags_ViewportsEnable active.
  2. Fonts & Icons: Implement a UI font system (e.g., loading Regular, Bold, and Large fonts). Load icons as Texture2D resources (Play, Stop, Pause, Translate, Rotate, Scale, Gears, File/Folder icons).
  3. Theme Colors: Create a Colors::Theme namespace/struct mapping exactly to Hazel's dark theme (e.g., titlebar, titlebarGreen, backgroundDark, text, muted, accent).
  4. UI Utility Wrapping: Replicate the UI:: namespace helpers (e.g., UI::ScopedStyle, UI::ScopedColour, UI::ShiftCursorY, UI::DrawButtonImage) used heavily throughout Hazel.

Phase 2: Custom Titlebar & Frameless Window

Goal: Remove the OS window borders and implement the custom draggable Hazel titlebar.

  1. Window Modification: Modify LuxEngine's application window creation (GLFW/Win32) to remove standard decorations (titlebar and borders).
  2. Main Dockspace: Implement the fullscreen dockspace in OnImGuiRender with zero padding and no background.
  3. Titlebar Implementation: Port UI_DrawTitlebar(). Include the engine logo, project name, current scene name, and right-aligned custom Window control buttons (Minimize, Maximize, Close).
  4. Menubar Integration: Port UI_DrawMenubar() to embed the File, Edit, View, Tools, and Help menus directly into the custom titlebar.

Phase 3: The Viewport & Render Targets

Goal: Set up the main central viewport where the game scene is rendered.

  1. Framebuffer Rendering: Ensure LuxEngine's renderer outputs to a Framebuffer, and expose the color attachment to ImGui via ImGui::Image.
  2. Viewport Panel: Create the "Viewport" window. Calculate its bounds (m_ViewportBounds) to allow for accurate mouse picking and raycasting.
  3. Camera Controllers: Implement or adapt the EditorCamera to handle Maya-style panning, zooming, and orbiting when the viewport is hovered/focused.
  4. Resize Handling: Send resize events to the Framebuffer and EditorCamera when the ImGui Viewport panel size changes.

Phase 4: Overlaid Toolbars (Floating UI)

Goal: Add the floating transparent toolbars inside the viewport.

  1. Gizmos Toolbar: Port UI_GizmosToolbar(). Render a small borderless window in the top-left of the viewport containing Select, Translate, Rotate, and Scale icons.
  2. Central Toolbar: Port UI_CentralToolbar(). Render a centered overlay at the top of the viewport containing Play, Simulate, and Stop buttons to toggle the SceneState.
  3. Viewport Settings: Port UI_ViewportSettings(). Add the gear icon overlay in the top-right that opens a popup for grid snapping, bounding box rendering, and display modes.

Phase 5: ImGuizmo & Scene Interaction

Goal: Enable visual scene manipulation.

  1. ImGuizmo Setup: Integrate ImGuizmo::BeginFrame(), ImGuizmo::SetOrthographic(false), and ImGuizmo::SetRect() tied to the Viewport bounds.
  2. Transform Manipulation: Port UI_DrawGizmos(). Fetch the selected entity's transform, pass it to ImGuizmo::Manipulate, and decompose the resulting matrix back into the entity's Local Translation, Rotation, and Scale.
  3. Mouse Picking: Port the raycasting logic (`C...

This pull request was created from Copilot chat.

Copilot AI changed the title [WIP] Execute Phase 1 of Hazel Editor plan for LuxEngine Phase 1: Establish Hazel-style UI:: namespace helpers Apr 11, 2026
Copilot AI requested a review from sheazywi April 11, 2026 06:26
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants