{"id":27127060,"url":"https://github.com/toikron/imdesignmanager","last_synced_at":"2025-04-07T16:54:17.345Z","repository":{"id":282785189,"uuid":"945824135","full_name":"Toikron/ImDesignManager","owner":"Toikron","description":"Real-time UI builder and advanced design manager built with Dear ImGui \u0026 ImDrawList. Features dynamic interactions, intuitive animation controls, and instant visual feedback for modern UI development.","archived":false,"fork":false,"pushed_at":"2025-04-02T10:38:16.000Z","size":620,"stargazers_count":11,"open_issues_count":9,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-02T11:28:29.010Z","etag":null,"topics":["cpp","design","design-system","design-tool","gui","imgui","imgui-extension","imgui-menu","ui","ui-builder","ui-framework","ui-imgui"],"latest_commit_sha":null,"homepage":"","language":"C++","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Toikron.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-03-10T07:24:18.000Z","updated_at":"2025-03-30T22:17:39.000Z","dependencies_parsed_at":"2025-04-02T11:39:03.654Z","dependency_job_id":null,"html_url":"https://github.com/Toikron/ImDesignManager","commit_stats":null,"previous_names":["toikron/dear-design-manager","toikron/imdesignmanager"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Toikron%2FImDesignManager","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Toikron%2FImDesignManager/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Toikron%2FImDesignManager/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Toikron%2FImDesignManager/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Toikron","download_url":"https://codeload.github.com/Toikron/ImDesignManager/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247694879,"owners_count":20980731,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cpp","design","design-system","design-tool","gui","imgui","imgui-extension","imgui-menu","ui","ui-builder","ui-framework","ui-imgui"],"created_at":"2025-04-07T16:54:16.719Z","updated_at":"2025-04-07T16:54:17.336Z","avatar_url":"https://github.com/Toikron.png","language":"C++","readme":"# ImGui Visual Design Manager\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\u003c!-- Add other relevant badges here, e.g., build status, version --\u003e\n\n**ImGui Visual Design Manager is a single-header C++ library that adds a visual design workflow to Dear ImGui.**\n\n**It lets you build and arrange UI components interactively—similar to tools like Figma—directly within your ImGui-based application. Designed components can be exported and used as standard ImGui elements with minimal code changes.**\n\n![Showcase GIF - Replace with a good GIF showing the editor in action](https://github.com/user-attachments/assets/c978ff4c-dbd3-48d2-8b21-ded9333c2159)\n\n*(Caption: Visually design shapes, layers, and properties directly within your ImGui application)*\n\n\n---\n\n## Key Features\n\n*   🎨 **Figma-like Visual Canvas:**\n    *   Design UI layouts using **shapes** (rectangles, circles) with customizable properties (position, size, rotation, corner radius, fill, border, shadow).\n    *   Organize elements using a familiar **layer system** with Z-ordering, visibility, and locking.\n    *   Style elements with solid colors, **gradients** (linear, radial - configurable interpolation), and **embedded images**.\n    *   Add and style **text** elements with font selection, alignment, and rotation.\n*   🔗 **Bridge Design and Code:**\n    *   Instantly transform visual shapes into functional **ImGui Buttons** with configurable behavior (Toggle, Hold, SingleClick) and styling (Hover, Clicked colors).\n    *   Attach **ImGui Child Windows** to shapes, allowing you to embed complex ImGui content within your designed layouts. Child windows can optionally sync position/size with their parent shape.\n    *   Trigger standard ImGui windows or custom logic from designed buttons.\n*   ✨ **Dynamic \u0026 Responsive UIs:**\n    *   Create sophisticated **animations** on shapes triggered by clicks or hovers. Define behaviors like play-once, reverse, toggle, loop, and play-while-holding.\n    *   Build complex **chained animations**, sequencing multiple animation steps for intricate UI transitions.\n    *   Implement responsive layouts using **Shape Keys**, automatically adjusting position, size, or rotation based on the parent window's dimensions.\n*   🧩 **Modular \u0026 Organized Workflow:**\n    *   Manage multiple independent design canvases, each associated with a specific ImGui window (`DesignManager::g_windowsMap`).\n    *   Group buttons and child windows for **exclusive visibility** (e.g., tabbed interfaces).\n    *   Define **logical relationships** between button states and child window visibility (AND, OR, XOR, IF, etc.).\n*   ⚙️ **Developer Focused:**\n    *   **Built-in Visual Editor:** Use `DesignManager::ShowUI()` to access the powerful editor for real-time design and modification.\n    *   **Code Generation:** Automatically generate C++ code (using a clean Builder pattern) representing your visual designs, ready to be integrated into your project.\n    *   **Single-Header Library:** Easy integration - just drop `design_manager.h` into your project.\n    *   **Parenting System:** Group shapes hierarchically for complex component creation and coordinated transformations.\n*   *   **Easy to Implement SDL, DirectX. Just change in order GLFWwindow* to SDL_Window* and glfwGetWindowSize to SDL_GetWindowSize . Seamless Integration 🧩\n## Why Use ImGui Visual Design Manager?\n\n*   **Rapid Prototyping:** Visually iterate on UI designs much faster than coding them manually.\n*   **Designer-Friendly:** Empowers developers (and potentially designers) with a visual workflow within the target environment.\n*   **Seamless Integration:** Designs translate directly to functional ImGui code and widgets.\n*   **Consistency:** Maintain a consistent look and feel by designing reusable components visually.\n*   **Dynamic Interfaces:** Easily add complex animations and responsiveness without extensive manual coding.\n\n## Visual Examples\n\n*(These are the images you provided - captions added for context)*\n\n\u003cimg src=\"https://github.com/user-attachments/assets/05cb57a1-e197-4d94-837d-e9476407a33d\" width=\"200\"\u003e | \u003cimg src=\"https://github.com/user-attachments/assets/dac9e7ff-de4f-4e55-bd82-624fe03e172d\" width=\"200\"\u003e | \u003cimg src=\"https://github.com/user-attachments/assets/02a6c4fe-5572-44ae-848b-80da43185e2c\" width=\"200\"\u003e |\n|---|---|---|\n| |  |  |\n| \u003cimg src=\"https://github.com/user-attachments/assets/adf6fc34-cc35-462c-b7f9-7b2597c3c1ab\" width=\"200\"\u003e | \u003cimg src=\"https://github.com/user-attachments/assets/36e5171d-ec67-43bd-993c-13f0aa7aca7f\" width=\"200\"\u003e | \u003cimg src=\"https://github.com/user-attachments/assets/40365b18-1b8b-4632-adad-79bf04e08d23\" width=\"200\"\u003e |\n|  |  |  |\n\n## Getting Started\n\n### Installation\n\n1.  **Clone the repository:**\n    ```sh\n    git clone https://github.com/yourusername/design_manager.git # Replace with your actual repo URL\n    cd design_manager\n    ```\n2.  **Add Dear ImGui as a submodule (or ensure it's available):**\n    ```sh\n    # If you haven't already got ImGui in your project\n    git submodule add https://github.com/ocornut/imgui.git external/imgui\n    git submodule update --init --recursive\n    ```\n3.  **Include the header:** Simply include `design_manager.h` in your C++ project. Ensure Dear ImGui's headers are also accessible.\n\n### Basic Usage\n\n1.  **Initialize DesignManager:** Call `DesignManager::Init()` after setting up ImGui and your rendering backend (like GLFW/OpenGL).\n2.  **Load Your Design:** Call `DesignManager::GeneratedCode()` (or your custom function that uses the generated code) to load the UI elements you created with the visual editor.\n3.  **Update \u0026 Draw:** In your main loop:\n    *   Call `DesignManager::UpdateShapeTransforms_Unified()` to handle responsiveness (Shape Keys).\n    *   Call `DesignManager::UpdateChainAnimations()` to process chained animations.\n    *   Call `DesignManager::DrawAll(dl)` within the target ImGui window's `Begin`/`End` block to render the designed elements.\n    *   (Optional) Call `DesignManager::ShowUI()` to display the visual editor itself.\n    *   (Optional) Call `DesignManager::ShowChainAnimationGUI()` to manage chained animations.\n\n```cpp\n// --- main.cpp Example Snippet ---\n#include \"imgui.h\"\n#include \"imgui_impl_glfw.h\"\n#include \"imgui_impl_opengl3.h\"\n#include \u003cGLFW/glfw3.h\u003e // Or your backend header\n#include \"design_manager.h\" // Include the library\n\n// Your existing ImGui setup code... (Context creation, backend init)\n\nint main() {\n    // ... GLFW/Window setup ...\n    glfwMakeContextCurrent(window);\n\n    // ... ImGui backend setup (ImGui_ImplGlfw_Init*, ImGui_ImplOpenGL3_Init*) ...\n\n    // Initialize the Design Manager\n    int windowWidth, windowHeight;\n    glfwGetWindowSize(window, \u0026windowWidth, \u0026windowHeight);\n    DesignManager::Init(windowWidth, windowHeight, window);\n\n    // Load the design created visually (this function is generated/filled by the editor)\n    DesignManager::GeneratedCode(); // IMPORTANT!\n\n    double lastTime = glfwGetTime();\n\n    while (!glfwWindowShouldClose(window)) {\n        glfwPollEvents();\n\n        // Start the Dear ImGui frame\n        ImGui_ImplOpenGL3_NewFrame();\n        ImGui_ImplGlfw_NewFrame();\n        ImGui::NewFrame();\n\n        // --- Update Design Manager ---\n        double currentTime = glfwGetTime();\n        float deltaTime = (float)(currentTime - lastTime);\n        lastTime = currentTime;\n        DesignManager::UpdateShapeTransforms_Unified(window, deltaTime); // Handles Shape Keys/Responsiveness\n        DesignManager::UpdateChainAnimations(deltaTime); // Handles chained animations\n\n        // --- Show the Visual Editor (Optional) ---\n        DesignManager::ShowUI(window); // The main editor window\n        DesignManager::ShowChainAnimationGUI(); // Editor for chained animations\n\n        // --- Render Your Main Application Window ---\n        ImGuiViewport* main_viewport = ImGui::GetMainViewport();\n        ImGui::SetNextWindowPos(main_viewport-\u003ePos);\n        ImGui::SetNextWindowSize(main_viewport-\u003eSize);\n        ImGuiWindowFlags main_window_flags = ImGuiWindowFlags_NoTitleBar | ImGuiWindowFlags_NoResize | ImGuiWindowFlags_NoMove | ImGuiWindowFlags_NoSavedSettings | ImGuiWindowFlags_NoBringToFrontOnFocus | ImGuiWindowFlags_NoFocusOnAppearing | ImGuiWindowFlags_NoNavFocus;\n        ImGui::Begin(\"MainAppWindow\", NULL, main_window_flags); // Your main window\n\n        ImDrawList* draw_list = ImGui::GetWindowDrawList();\n\n        // --- Draw Designed Elements ---\n        // This draws shapes/buttons/etc. belonging to \"MainAppWindow\"\n        DesignManager::DrawAll(draw_list);\n\n        ImGui::End(); // End your main window\n\n        // --- Render other registered ImGui windows (including those opened by designed buttons) ---\n        DesignManager::RenderAllRegisteredWindows(); // Handles windows defined via RegisterWindow\n        DesignManager::RenderTemporaryWindows(); // Handles temporary windows for debugging\n\n        // Rendering\n        ImGui::Render();\n        int display_w, display_h;\n        glfwGetFramebufferSize(window, \u0026display_w, \u0026display_h);\n        glViewport(0, 0, display_w, display_h);\n        glClearColor(0.45f, 0.55f, 0.60f, 1.00f);\n        glClear(GL_COLOR_BUFFER_BIT);\n        ImGui_ImplOpenGL3_RenderDrawData(ImGui::GetDrawData());\n\n        glfwSwapBuffers(window);\n    }\n\n    // Cleanup\n    // ... ImGui_ImplOpenGL3_Shutdown, ImGui_ImplGlfw_Shutdown, ImGui::DestroyContext ...\n    glfwDestroyWindow(window);\n    glfwTerminate();\n    return 0;\n}\n\n// --- Example of using the Builder Pattern (if NOT using visual editor output) ---\nvoid SetupMyProgrammaticUI() {\n    // Get the layer you want to add to (assuming \"Main\" window and layer 0 exist)\n    if (!DesignManager::g_windowsMap[\"Main\"].layers.empty()) {\n        DesignManager::Layer\u0026 targetLayer = DesignManager::g_windowsMap[\"Main\"].layers[0];\n\n        auto coolButton = DesignManager::ShapeBuilder()\n            .setName(\"ProgrammaticButton\")\n            .setOwnerWindow(\"Main\") // Associate with the correct ImGui window\n            .setBasePosition({ 50, 50 })\n            .setBaseSize({ 180, 40 })\n            .setFillColor({ 0.1f, 0.8f, 0.2f, 1.0f })\n            .setCornerRadius(8.0f)\n            .setIsButton(true)\n            .setHoverColor({ 0.2f, 0.9f, 0.3f, 1.0f })\n            .setClickedColor({ 0.05f, 0.7f, 0.1f, 1.0f })\n            .setHasText(true)\n            .setText(\"I was made in code!\")\n            .setTextColor({ 1, 1, 1, 1 })\n            .setTextAlignment(1) // Center alignment\n            .addEventHandler(\"onClick\", \"MyButtonClickHandler\", [](DesignManager::ShapeItem\u0026 shape) {\n                printf(\"Button '%s' (ID: %d) clicked!\\n\", shape.name.c_str(), shape.id);\n             })\n            .build();\n\n        targetLayer.shapes.push_back(coolButton);\n    }\n}\n```\n\n## Core Concepts\n\n*   **Shapes (`ShapeItem`):** The fundamental visual building blocks. Can be styled, positioned, animated, and turned into interactive elements.\n*   **Layers:** Organize shapes within a window, controlling draw order and visibility.\n*   **Windows (`g_windowsMap`):** Each key represents an ImGui window context containing its own layers and shapes. This allows designing UIs for different parts of your application.\n*   **Visual Editor (`ShowUI`):** The primary interface for designing. Manipulate shapes, layers, properties, animations, and generate the corresponding C++ code.\n*   **Builder Pattern (`ShapeBuilder`, etc.):** Provides a fluent API for creating and configuring shapes, animations, and shape keys programmatically.\n*   **Code Generation:** The editor outputs C++ code using the builder pattern, typically into a function like `DesignManager::GeneratedCode()`, which you call at initialization.\n\n## 🧪 Experimental: HTML/CSS/React to ImGui Parser\n\nThis library includes a highly experimental feature aimed at bridging the gap between web design mockups and ImGui interfaces.\n\n*   **Goal:** Parse simple HTML/CSS or potentially even React/TSX component structures and attempt to translate them into ImGui Visual Design Manager elements.\n*   **Current State:** **Ultra Mega Super Alpha Beta Gamma Zeta** (as the original author put it!) - This is **highly experimental and incomplete**.\n*   **Planned Features (Long Term):**\n    *   HTML parsing (using Gumbo or similar).\n    *   Basic CSS property mapping (layout, color, text).\n    *   Potential TypeScript/React code analysis for component structure.\n    *   Handling basic responsive concepts.\n*   **Contributions Welcome:** This area needs significant development. If you have experience with parsing, compilers, or web technologies, your help would be invaluable!\n\n## Contributing\n\nContributions are highly welcome! Whether it's bug fixes, feature enhancements, documentation improvements, or tackling the experimental parser, please feel free to:\n\n1.  **Open an Issue:** Discuss bugs, suggest features, or ask questions.\n2.  **Submit a Pull Request:**\n    *   Fork the repository.\n    *   Create a new branch for your feature or fix.\n    *   Make your changes.\n    *   Ensure your code compiles and adheres to the project's style.\n    *   Write a clear description of your changes in the pull request.\n\n**Areas needing help:**\n\n*   Improving the experimental HTML/CSS parser.\n*   Adding more shape types and styling options.\n*   Optimizing rendering performance.\n*   Writing more examples and documentation.\n*   Testing across different platforms and backends.\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftoikron%2Fimdesignmanager","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftoikron%2Fimdesignmanager","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftoikron%2Fimdesignmanager/lists"}