Demo widgets and layout for drag drop and file list

Inc/UI_Layout.hpp

@@ -6,5 +6,17 @@
 
 // UI布局
 void UI_Layout();
+// 组件
+namespace Widgets
+{
+    // 拖拽输入区域
+    void Drag_Input_Area(const ImVec2 &size = ImVec2(0, 0));
+
+    // 文件列表区域
+    void File_List_Area(const ImVec2 &size = ImVec2(0, 0));
+
+    // 工作流区域
+    void Workflow_Area(const ImVec2 &size = ImVec2(0, 0));
+}
 
 #endif

Src/UI_Layout.cpp

@@ -1,4 +1,8 @@
 #include "UI_Layout.hpp"
+extern "C"
+{
+#include "windows.h"
+}
 
 // UI布局
 void UI_Layout()
@@ -24,32 +28,81 @@ void UI_Layout()
     // 设置窗体相关属性，不允许停靠
     window_flags |= ImGuiWindowFlags_NoDocking;
 
-    ImGui::Begin("Main Panel", NULL, window_flags); // 创建Label
+    ImGui::Begin("Main Panel", NULL, window_flags); // 创建主面板
     ImGui::PopStyleVar(2);                          // 退出绘制风格栈中的设置项
     {
 
-        ImNodes::BeginNodeEditor();
+        // 拖拽输入区域
-        {
+        Widgets::Drag_Input_Area(ImVec2(ImGui::GetContentRegionAvail().x, ImGui::GetContentRegionAvail().x / 2));
 
-            ImNodes::BeginNode(1);
+        // 文件列表组件
-
+        Widgets::File_List_Area();
-            ImNodes::BeginNodeTitleBar();
-            ImGui::TextUnformatted("output node");
-            ImNodes::EndNodeTitleBar();
-
-            ImGui::Text("Test Format %%d :%d", 123);
-
-            ImGui::Button("Click");
-
-            ImGui::SameLine();
-            static bool check = false;
-            ImGui::Checkbox("", &check);
-
-            ImNodes::EndNode();
-        }
-        ImNodes::EndNodeEditor();
     }
     ImGui::End();
 
     ImGui::ShowDemoWindow(nullptr);
+}
+
+void Widgets::Drag_Input_Area(const ImVec2 &size)
+{
+    ImGui::BeginChild("Drag_Drop_Area", size);
+    {
+        ImGui::PushStyleVar(ImGuiStyleVar_FrameRounding, 10.0f); // 绘制风格栈压入窗口圆角为0
+        ImGui::PushStyleVar(ImGuiStyleVar_FrameBorderSize, 1.0f);
+        // 显示一个按钮，作为拖拽源
+        static bool pressed_hover = false;
+        ImGui::Button(pressed_hover ? u8"松开左键以添加" : u8"拖拽文件到此处", ImVec2(ImGui::GetContentRegionAvail().x, ImGui::GetContentRegionAvail().y));
+        // 仅在外部拖拽入内时触发，内部拖拽不触发
+        pressed_hover = (ImGui::IsItemHovered() && (GetAsyncKeyState(VK_LBUTTON) < 0) && (!ImGui::IsMouseDown(ImGuiMouseButton_Left)));
+
+        ImGui::PopStyleVar(2);
+    }
+    ImGui::EndChild();
+}
+
+void Widgets::File_List_Area(const ImVec2 &size)
+{
+    ImGui::PushStyleVar(ImGuiStyleVar_ChildRounding, 10.0f);
+    ImGui::BeginChild("File_List_Area", ImVec2(size.x, size.y), ImGuiChildFlags_Border);
+    ImGui::PopStyleVar();
+    {
+
+        ImGui::Dummy(ImVec2(ImGui::GetContentRegionAvail().x - 30, ImGui::GetContentRegionAvail().y));
+
+        const float spacing = 4;
+        ImGui::PushStyleVar(ImGuiStyleVar_ItemSpacing, ImVec2(spacing, spacing));
+        ImGui::PushStyleVar(ImGuiStyleVar_FrameRounding, 10.0f); // 绘制风格栈压入窗口圆角为10
+        ImGui::PushStyleVar(ImGuiStyleVar_GrabRounding, 10.0f);  // 抓取条圆角
+        static int int_value = 0;
+        ImGui::SameLine();
+
+        ImGui::VSliderInt("int", ImVec2(30, ImGui::GetContentRegionAvail().y), &int_value, 0, 5);
+
+        ImGui::PopStyleVar(3);
+    }
+    ImGui::EndChild();
+}
+
+void Widgets::Workflow_Area(const ImVec2 &size)
+{
+    ImNodes::BeginNodeEditor();
+    {
+
+        ImNodes::BeginNode(1);
+
+        ImNodes::BeginNodeTitleBar();
+        ImGui::TextUnformatted("output node");
+        ImNodes::EndNodeTitleBar();
+
+        ImGui::Text("Test Format %%d :%d", 123);
+
+        ImGui::Button("Click");
+
+        ImGui::SameLine();
+        static bool check = false;
+        ImGui::Checkbox("", &check);
+
+        ImNodes::EndNode();
+    }
+    ImNodes::EndNodeEditor();
 }