Added basic support for background-color and border to Element/Node (#50

)
andreamancuso · Aug 4, 2024 · ae06b17 · ae06b17
1 parent 62cb08c
commit ae06b17
Show file tree

Hide file tree

Showing 51 changed files with 420 additions and 248 deletions.
diff --git a/packages/dear-imgui/cpp/deps/vcpkg b/packages/dear-imgui/cpp/deps/vcpkg
diff --git a/packages/dear-imgui/cpp/include/element/element.h b/packages/dear-imgui/cpp/include/element/element.h
@@ -9,13 +9,22 @@ using json = nlohmann::json;
 
 class ReactImgui;
 
+struct BaseDrawStyle {
+    std::optional<ImVec4> backgroundColor;
+    std::optional<ImVec4> borderColor;
+    std::optional<float> rounding;
+    std::optional<float> borderThickness;
+    ImDrawFlags drawFlags = ImDrawFlags_RoundCornersNone;
+};
+
 class Element {
     public:
         int m_id;
         ReactImgui* m_view;
         bool m_handlesChildrenWithinRenderMethod;
         bool m_isRoot;
         std::unique_ptr<LayoutNode> m_layoutNode;
+        std::optional<BaseDrawStyle> m_baseDrawStyle;
 
         Element(ReactImgui* view, int id, bool isRoot);
 
@@ -35,6 +44,8 @@ class Element {
 
         virtual void PostRender(ReactImgui* view);
 
+        void DrawBaseEffects() const;
+
         virtual void Patch(const json& elementPatchDef, ReactImgui* view);
 
         virtual bool HasInternalOps();

diff --git a/packages/dear-imgui/cpp/include/reactimgui.h b/packages/dear-imgui/cpp/include/reactimgui.h
@@ -16,7 +16,7 @@ class MapGenerator;
 class Element;
 class StyledWidget;
 class LayoutNode;
-struct BaseStyle;
+struct WidgetStyle;
 
 enum ElementOp {
     OpCreateElement,
@@ -36,7 +36,7 @@ class ReactImgui : public ImPlotView {
 
         rpp::subjects::serialized_replay_subject<ElementOpDef> m_elementOpSubject;
 
-        std::unordered_map<std::string, std::function<std::unique_ptr<Element>(const json&, std::optional<BaseStyle>, ReactImgui*)>> m_element_init_fn;
+        std::unordered_map<std::string, std::function<std::unique_ptr<Element>(const json&, std::optional<WidgetStyle>, ReactImgui*)>> m_element_init_fn;
 
         std::unordered_map<int, std::unique_ptr<Element>> m_elements;
         std::mutex m_elements_mutex;
@@ -61,7 +61,7 @@ class ReactImgui : public ImPlotView {
 
         std::unordered_map<int, std::unique_ptr<char[]>> m_floatFormatChars;
 
-        ImGuiStyle m_baseStyle;
+        ImGuiStyle m_widgetStyle;
 
         OnInitCallback m_onInit;
         OnTextChangedCallback m_onInputTextChange;
@@ -151,6 +151,6 @@ class ReactImgui : public ImPlotView {
 };
 
 template <typename T, typename std::enable_if<std::is_base_of<Widget, T>::value, int>::type = 0>
-std::unique_ptr<T> makeWidget(const json& val, std::optional<BaseStyle> maybeStyle, ReactImgui* view);
+std::unique_ptr<T> makeWidget(const json& val, std::optional<WidgetStyle> maybeStyle, ReactImgui* view);
 
 std::unique_ptr<Element> makeElement(const json& val, ReactImgui* view);
diff --git a/packages/dear-imgui/cpp/include/shared.h b/packages/dear-imgui/cpp/include/shared.h
@@ -48,6 +48,10 @@ json IV4toJsonTuple(ImVec4 imVec4);
 json IV4toJsonRGBATuple(ImVec4 imVec4);
 json IV4toJsonHEXATuple(ImVec4 imVec4);
 
+std::optional<ImVec4> jsonHEXATupleToIV4(const json& tupleDef);
+
+ImDrawFlags cornersToDrawFlags(ImDrawFlags accumulator, std::string_view side);
+
 struct Texture {
     WGPUTextureView textureView;
     int width;

diff --git a/packages/dear-imgui/cpp/include/widget/button.h b/packages/dear-imgui/cpp/include/widget/button.h
@@ -4,16 +4,16 @@ class ReactImgui;
 
 class Button final : public StyledWidget {
     protected:
-        Button(ReactImgui* view, const int id, const std::string& label, std::optional<BaseStyle>& style) : StyledWidget(view, id, style) {
+        Button(ReactImgui* view, const int id, const std::string& label, std::optional<WidgetStyle>& style) : StyledWidget(view, id, style) {
             m_type = "Button";
             m_label = label;
         }
     public:
         std::string m_label;
 
-        static std::unique_ptr<Button> makeWidget(const json& widgetDef, std::optional<BaseStyle> maybeStyle, ReactImgui* view);
+        static std::unique_ptr<Button> makeWidget(const json& widgetDef, std::optional<WidgetStyle> maybeStyle, ReactImgui* view);
 
-        static std::unique_ptr<Button> makeWidget(ReactImgui* view, const int id, const std::string& label, std::optional<BaseStyle>& style) {
+        static std::unique_ptr<Button> makeWidget(ReactImgui* view, const int id, const std::string& label, std::optional<WidgetStyle>& style) {
             Button instance(view, id, label, style);
 
             return std::make_unique<Button>(std::move(instance));
@@ -25,7 +25,7 @@ class Button final : public StyledWidget {
             if (context) {
                 const auto widget = static_cast<Button*>(context);
 
-                size.width = (widget->m_view->m_baseStyle.FramePadding.x * 2.0f) + widget->m_view->CalcTextSize(widget, widget->m_label.c_str()).x;
+                size.width = (widget->m_view->m_widgetStyle.FramePadding.x * 2.0f) + widget->m_view->CalcTextSize(widget, widget->m_label.c_str()).x;
                 size.height = widget->m_view->GetFrameHeight(widget);
 
                 if (widget->HasCustomStyles() && widget->HasCustomStyleVar(ImGuiStyleVar_FramePadding)) {

diff --git a/packages/dear-imgui/cpp/include/widget/checkbox.h b/packages/dear-imgui/cpp/include/widget/checkbox.h
@@ -4,7 +4,7 @@
 
 class Checkbox final : public StyledWidget {
     protected:
-        Checkbox(ReactImgui* view, const int id, const std::string& label, const bool defaultChecked, std::optional<BaseStyle>& style) : StyledWidget(view, id, style) {
+        Checkbox(ReactImgui* view, const int id, const std::string& label, const bool defaultChecked, std::optional<WidgetStyle>& style) : StyledWidget(view, id, style) {
             m_type = "Checkbox";
             m_checked = defaultChecked;
             m_label = label;
@@ -14,7 +14,7 @@ class Checkbox final : public StyledWidget {
         bool m_checked;
         std::string m_label;
 
-        static std::unique_ptr<Checkbox> makeWidget(const json& widgetDef, std::optional<BaseStyle> maybeStyle, ReactImgui* view) {
+        static std::unique_ptr<Checkbox> makeWidget(const json& widgetDef, std::optional<WidgetStyle> maybeStyle, ReactImgui* view) {
             if (widgetDef.is_object() && widgetDef.contains("id") && widgetDef["id"].is_number_integer()) {
                 const auto id = widgetDef["id"].template get<int>();
                 const auto defaultChecked = widgetDef.contains("defaultChecked") && widgetDef["defaultChecked"].is_boolean() ? widgetDef["defaultChecked"].template get<bool>() : false;
@@ -26,7 +26,7 @@ class Checkbox final : public StyledWidget {
             throw std::invalid_argument("Invalid JSON data");
         }
 
-        static std::unique_ptr<Checkbox> makeWidget(ReactImgui* view, const int id,  const std::string& label, const bool defaultChecked, std::optional<BaseStyle>& style) {
+        static std::unique_ptr<Checkbox> makeWidget(ReactImgui* view, const int id,  const std::string& label, const bool defaultChecked, std::optional<WidgetStyle>& style) {
             Checkbox instance(view, id, label, defaultChecked, style);
             return std::make_unique<Checkbox>(std::move(instance));
         }

diff --git a/packages/dear-imgui/cpp/include/widget/child.h b/packages/dear-imgui/cpp/include/widget/child.h
@@ -7,7 +7,7 @@ class Child final : public StyledWidget {
     float m_width;
     float m_height;
 
-    static std::unique_ptr<Child> makeWidget(const json& widgetDef, std::optional<BaseStyle> maybeStyle, ReactImgui* view) {
+    static std::unique_ptr<Child> makeWidget(const json& widgetDef, std::optional<WidgetStyle> maybeStyle, ReactImgui* view) {
         if (widgetDef.is_object() && widgetDef.contains("id") && widgetDef["id"].is_number_integer()) {
             auto id = widgetDef["id"].template get<int>();
             float width = 0;
@@ -27,7 +27,7 @@ class Child final : public StyledWidget {
         throw std::invalid_argument("Invalid JSON data");
     }
 
-    Child(ReactImgui* view, int id, float width, float height, std::optional<BaseStyle>& style);
+    Child(ReactImgui* view, int id, float width, float height, std::optional<WidgetStyle>& style);
 
     void Render(ReactImgui* view) override;
 

diff --git a/packages/dear-imgui/cpp/include/widget/clipped_multi_line_text_renderer.h b/packages/dear-imgui/cpp/include/widget/clipped_multi_line_text_renderer.h
@@ -3,7 +3,7 @@
 // todo: should we preallocate buffer size?
 class ClippedMultiLineTextRenderer final : public StyledWidget {
     protected:
-        ClippedMultiLineTextRenderer(ReactImgui* view, const int id, const int numberOfLines, std::optional<BaseStyle>& style) : StyledWidget(view, id, style) {
+        ClippedMultiLineTextRenderer(ReactImgui* view, const int id, const int numberOfLines, std::optional<WidgetStyle>& style) : StyledWidget(view, id, style) {
             m_type = "ClippedMultiLineTextRenderer";
             m_numberOfLines = numberOfLines;
         }
@@ -13,7 +13,7 @@ class ClippedMultiLineTextRenderer final : public StyledWidget {
         ImVector<int> m_lineOffsets;
         ImGuiTextBuffer m_textBuffer;
 
-        static std::unique_ptr<ClippedMultiLineTextRenderer> makeWidget(const json& widgetDef, std::optional<BaseStyle> maybeStyle, ReactImgui* view) {
+        static std::unique_ptr<ClippedMultiLineTextRenderer> makeWidget(const json& widgetDef, std::optional<WidgetStyle> maybeStyle, ReactImgui* view) {
             if (widgetDef.is_object() && widgetDef.contains("id") && widgetDef["id"].is_number_integer()) {
                 const auto id = widgetDef["id"].template get<int>();
                 int numberOfLines = 10;
@@ -28,7 +28,7 @@ class ClippedMultiLineTextRenderer final : public StyledWidget {
             throw std::invalid_argument("Invalid JSON data");
         }
 
-        static std::unique_ptr<ClippedMultiLineTextRenderer> makeWidget(ReactImgui* view, int id, const int numberOfLines, std::optional<BaseStyle>& style) {
+        static std::unique_ptr<ClippedMultiLineTextRenderer> makeWidget(ReactImgui* view, int id, const int numberOfLines, std::optional<WidgetStyle>& style) {
             ClippedMultiLineTextRenderer instance(view, id, numberOfLines, style);
 
             return std::make_unique<ClippedMultiLineTextRenderer>(std::move(instance));

diff --git a/packages/dear-imgui/cpp/include/widget/collapsing_header.h b/packages/dear-imgui/cpp/include/widget/collapsing_header.h
@@ -4,7 +4,7 @@ class CollapsingHeader final : public StyledWidget {
 public:
     std::string m_label;
 
-    static std::unique_ptr<CollapsingHeader> makeWidget(const json& widgetDef, std::optional<BaseStyle> maybeStyle, ReactImgui* view) {
+    static std::unique_ptr<CollapsingHeader> makeWidget(const json& widgetDef, std::optional<WidgetStyle> maybeStyle, ReactImgui* view) {
         if (widgetDef.is_object() && widgetDef.contains("id") && widgetDef["id"].is_number_integer()) {
             auto id = widgetDef["id"].template get<int>();
             const auto label = widgetDef["label"].template get<std::string>();
@@ -15,7 +15,7 @@ class CollapsingHeader final : public StyledWidget {
         throw std::invalid_argument("Invalid JSON data");
     }
 
-    CollapsingHeader(ReactImgui* view, int id, const std::string& label, std::optional<BaseStyle>& style);
+    CollapsingHeader(ReactImgui* view, int id, const std::string& label, std::optional<WidgetStyle>& style);
 
     void Render(ReactImgui* view) override;
 

diff --git a/packages/dear-imgui/cpp/include/widget/combo.h b/packages/dear-imgui/cpp/include/widget/combo.h
@@ -2,7 +2,7 @@
 
 class Combo final : public StyledWidget {
     protected:
-        Combo(ReactImgui* view, const int id, const std::string& placeholder, const int initialSelectedIndex, const std::vector<std::string>& options, std::optional<BaseStyle>& style) : StyledWidget(view, id, style) {
+        Combo(ReactImgui* view, const int id, const std::string& placeholder, const int initialSelectedIndex, const std::vector<std::string>& options, std::optional<WidgetStyle>& style) : StyledWidget(view, id, style) {
             m_type = "Combo";
             m_placeholder = placeholder;
             m_options = options;
@@ -17,7 +17,7 @@ class Combo final : public StyledWidget {
         std::string m_placeholder;
         std::vector<std::string> m_options;
 
-        static std::unique_ptr<Combo> makeWidget(const json& widgetDef, std::optional<BaseStyle> maybeStyle, ReactImgui* view) {
+        static std::unique_ptr<Combo> makeWidget(const json& widgetDef, std::optional<WidgetStyle> maybeStyle, ReactImgui* view) {
             if (widgetDef.is_object() && widgetDef.contains("id") && widgetDef["id"].is_number_integer()) {
                 const auto id = widgetDef["id"].template get<int>();
                 const auto initialSelectedIndex = widgetDef.contains("initialSelectedIndex") && widgetDef["initialSelectedIndex"].is_number()
@@ -41,7 +41,7 @@ class Combo final : public StyledWidget {
             throw std::invalid_argument("Invalid JSON data");
         }
 
-        static std::unique_ptr<Combo> makeWidget(ReactImgui* view, const int id, const std::string& placeholder, const int initialSelectedIndex, const std::vector<std::string>& options, std::optional<BaseStyle>& style) {
+        static std::unique_ptr<Combo> makeWidget(ReactImgui* view, const int id, const std::string& placeholder, const int initialSelectedIndex, const std::vector<std::string>& options, std::optional<WidgetStyle>& style) {
             Combo instance(view, id, placeholder, initialSelectedIndex, options, style);
             return std::make_unique<Combo>(std::move(instance));
         }
@@ -89,9 +89,9 @@ class Combo final : public StyledWidget {
 
         void Patch(const json& widgetPatchDef, ReactImgui* view) override;
 
-        bool HasInternalOps();
+        bool HasInternalOps() override;
 
-        void HandleInternalOp(const json& opDef);
+        void HandleInternalOp(const json& opDef) override;
 
         void Init() override {
             Element::Init();

diff --git a/packages/dear-imgui/cpp/include/widget/group.h b/packages/dear-imgui/cpp/include/widget/group.h
@@ -2,7 +2,7 @@
 
 class Group final : public StyledWidget {
 public:
-    static std::unique_ptr<Group> makeWidget(const json& widgetDef, std::optional<BaseStyle> maybeStyle, ReactImgui* view) {
+    static std::unique_ptr<Group> makeWidget(const json& widgetDef, std::optional<WidgetStyle> maybeStyle, ReactImgui* view) {
         if (widgetDef.is_object() && widgetDef.contains("id") && widgetDef["id"].is_number_integer()) {
             auto id = widgetDef["id"].template get<int>();
 
@@ -12,7 +12,7 @@ class Group final : public StyledWidget {
         throw std::invalid_argument("Invalid JSON data");
     }
 
-    Group(ReactImgui* view, int id, std::optional<BaseStyle>& style);
+    Group(ReactImgui* view, int id, std::optional<WidgetStyle>& style);
 
     void Render(ReactImgui* view) override;
 };
diff --git a/packages/dear-imgui/cpp/include/widget/image.h b/packages/dear-imgui/cpp/include/widget/image.h
@@ -11,7 +11,7 @@ class Image final : public StyledWidget {
     Texture m_texture;
 
 public:
-    static std::unique_ptr<Image> makeWidget(const json& widgetDef, std::optional<BaseStyle> maybeStyle, ReactImgui* view) {
+    static std::unique_ptr<Image> makeWidget(const json& widgetDef, std::optional<WidgetStyle> maybeStyle, ReactImgui* view) {
         if (widgetDef.is_object() && widgetDef.contains("id") && widgetDef["id"].is_number_integer() && widgetDef.contains("url")) {
             auto id = widgetDef["id"].template get<int>();
             auto url = widgetDef["url"].template get<std::string>();
@@ -35,7 +35,7 @@ class Image final : public StyledWidget {
 
     bool HasCustomHeight() override;
 
-    Image(ReactImgui* view, const int id, const std::string& url, const std::optional<ImVec2>& size, std::optional<BaseStyle>& style) : StyledWidget(view, id, style), m_texture() {
+    Image(ReactImgui* view, const int id, const std::string& url, const std::optional<ImVec2>& size, std::optional<WidgetStyle>& style) : StyledWidget(view, id, style), m_texture() {
         m_type = "Image";
         m_url = url;
 
@@ -46,9 +46,9 @@ class Image final : public StyledWidget {
 
     static YGSize Measure(YGNodeConstRef node, float width, YGMeasureMode widthMode, float height, YGMeasureMode heightMode);
 
-    bool HasInternalOps();
+    bool HasInternalOps() override;
 
-    void HandleInternalOp(const json& opDef);
+    void HandleInternalOp(const json& opDef) override;
 
     void FetchImage();
 

diff --git a/packages/dear-imgui/cpp/include/widget/input_text.h b/packages/dear-imgui/cpp/include/widget/input_text.h
@@ -6,7 +6,7 @@ class InputText final : public StyledWidget {
 
         static int InputTextCb(ImGuiInputTextCallbackData* data);
 
-        InputText(ReactImgui* view, const int id, const std::string& defaultValue, const std::string& label, std::optional<BaseStyle>& style) : StyledWidget(view, id, style) {
+        InputText(ReactImgui* view, const int id, const std::string& defaultValue, const std::string& label, std::optional<WidgetStyle>& style) : StyledWidget(view, id, style) {
             m_type = "InputText";
             m_bufferPointer = std::make_unique<char[]>(100);
             m_defaultValue = defaultValue;
@@ -22,7 +22,7 @@ class InputText final : public StyledWidget {
         std::string m_defaultValue;
         std::string m_label;
 
-        static std::unique_ptr<InputText> makeWidget(const json& widgetDef, std::optional<BaseStyle> maybeStyle, ReactImgui* view) {
+        static std::unique_ptr<InputText> makeWidget(const json& widgetDef, std::optional<WidgetStyle> maybeStyle, ReactImgui* view) {
             if (widgetDef.is_object() && widgetDef.contains("id") && widgetDef["id"].is_number_integer()) {
                 const auto id = widgetDef["id"].template get<int>();
                 const auto defaultValue = widgetDef.contains("defaultValue") && widgetDef["defaultValue"].is_string() ? widgetDef["defaultValue"].template get<std::string>() : "";
@@ -34,7 +34,7 @@ class InputText final : public StyledWidget {
             throw std::invalid_argument("Invalid JSON data");
         }
 
-        static std::unique_ptr<InputText> makeWidget(ReactImgui* view, const int id, const std::string& defaultValue, const std::string& label, std::optional<BaseStyle>& style) {
+        static std::unique_ptr<InputText> makeWidget(ReactImgui* view, const int id, const std::string& defaultValue, const std::string& label, std::optional<WidgetStyle>& style) {
             InputText instance(view, id, defaultValue, label, style);
             return std::make_unique<InputText>(std::move(instance));
         }
@@ -58,9 +58,9 @@ class InputText final : public StyledWidget {
 
         void Patch(const json& widgetPatchDef, ReactImgui* view) override;
 
-        bool HasInternalOps();
+        bool HasInternalOps() override;
 
-        void HandleInternalOp(const json& opDef);
+        void HandleInternalOp(const json& opDef) override;
 
         void SetValue(std::string& value) {
             strncpy(m_bufferPointer.get(), value.c_str(), 99);

diff --git a/packages/dear-imgui/cpp/include/widget/item_tooltip.h b/packages/dear-imgui/cpp/include/widget/item_tooltip.h
@@ -2,7 +2,7 @@
 
 class ItemTooltip final : public StyledWidget {
 public:
-    static std::unique_ptr<ItemTooltip> makeWidget(const json& widgetDef, std::optional<BaseStyle> maybeStyle, ReactImgui* view) {
+    static std::unique_ptr<ItemTooltip> makeWidget(const json& widgetDef, std::optional<WidgetStyle> maybeStyle, ReactImgui* view) {
         if (widgetDef.is_object() && widgetDef.contains("id") && widgetDef["id"].is_number_integer()) {
             auto id = widgetDef["id"].template get<int>();
 
@@ -12,7 +12,7 @@ class ItemTooltip final : public StyledWidget {
         throw std::invalid_argument("Invalid JSON data");
     }
 
-    ItemTooltip(ReactImgui* view, int id, std::optional<BaseStyle>& style);
+    ItemTooltip(ReactImgui* view, int id, std::optional<WidgetStyle>& style);
 
     void Render(ReactImgui* view) override;
 };
diff --git a/packages/dear-imgui/cpp/include/widget/map_view.h b/packages/dear-imgui/cpp/include/widget/map_view.h
@@ -11,7 +11,7 @@ class MapView final : public StyledWidget {
     std::unordered_map<int, std::unique_ptr<Texture>> m_textures;
 
 public:
-    static std::unique_ptr<MapView> makeWidget(const json& widgetDef, std::optional<BaseStyle> maybeStyle, ReactImgui* view) {
+    static std::unique_ptr<MapView> makeWidget(const json& widgetDef, std::optional<WidgetStyle> maybeStyle, ReactImgui* view) {
         if (widgetDef.is_object() && widgetDef.contains("id") && widgetDef["id"].is_number_integer()) {
             auto id = widgetDef["id"].template get<int>();
 
@@ -25,15 +25,15 @@ class MapView final : public StyledWidget {
 
     bool HasCustomHeight() override;
 
-    MapView(ReactImgui* view, const int id, std::optional<BaseStyle>& style) : StyledWidget(view, id, style) {
+    MapView(ReactImgui* view, const int id, std::optional<WidgetStyle>& style) : StyledWidget(view, id, style) {
         m_type = "MapView";
 
         m_offset = ImVec2(0.0f, 0.0f);
     }
 
     void Render(ReactImgui* view) override;
 
-    bool HasInternalOps();
+    bool HasInternalOps() override;
 
-    void HandleInternalOp(const json& opDef);
+    void HandleInternalOp(const json& opDef) override;
 };