Slowly but surely getting the text components to work flawlessly

CMakeLists.txt

@@ -154,7 +154,8 @@ endif ()
 
 # LIBRARY
 
-set(SOURCE_FILES ${LIBPSYCHIC_UI_EXTRA_SOURCE}
+set(SOURCE_FILES
+    ${LIBPSYCHIC_UI_EXTRA_SOURCE}
     ${YOGA_SOURCES}
     psychic-ui/components/Button.cpp
     psychic-ui/components/Button.hpp
@@ -241,8 +242,12 @@ set(SOURCE_FILES ${LIBPSYCHIC_UI_EXTRA_SOURCE}
     psychic-ui/skins/DefaultSkin.hpp
     psychic-ui/components/TextInput.cpp
     psychic-ui/components/TextInput.hpp
+    psychic-ui/components/TextArea.cpp
+    psychic-ui/components/TextArea.hpp
     psychic-ui/skins/DefaultTextInputSkin.cpp
     psychic-ui/skins/DefaultTextInputSkin.hpp
+    psychic-ui/skins/DefaultTextAreaSkin.cpp
+    psychic-ui/skins/DefaultTextAreaSkin.hpp
     psychic-ui/utils/TextBox.cpp
     psychic-ui/utils/TextBox.hpp
     psychic-ui/components/Text.cpp

example/demo-stylesheet.hpp

@@ -29,6 +29,9 @@ class DemoStyleSheet : public StyleSheet {
         manager->style("Buttons Button")
                ->set(margin, 12);
 
+        manager->style("TextInputs TextArea")
+               ->set(height, 120);
+
         manager->style("Ranges Range")
                ->set(margin, 12);
 

example/demo.cpp

@@ -1,6 +1,6 @@
 #include <iostream>
 #include "demo.hpp"
-#include "example/components/DemoWindow.hpp"
+#include "example/demo/DemoWindow.hpp"
 
 #ifdef USE_GLFW
 #include <psychic-ui/applications/GLFWApplication.hpp>

example/components/DemoWindow.hpp → example/demo/DemoWindow.hpp

@@ -17,7 +17,7 @@
 #include "TextInputs.hpp"
 #include "Buttons.hpp"
 #include "Divs.hpp"
-#include "Scroller.hpp"
+#include "Scrollers.hpp"
 #include "Ranges.hpp"
 #include "Colors.hpp"
 #include "../demo-stylesheet.hpp"

example/demo/Scrollers.hpp

@@ -0,0 +1,45 @@
+#pragma once
+
+#include <psychic-ui/Div.hpp>
+#include <psychic-ui/components/Label.hpp>
+#include <psychic-ui/components/Text.hpp>
+#include <psychic-ui/components/Scroller.hpp>
+#include <example/demo.hpp>
+
+namespace psychic_ui {
+
+    class Scrollers : public Div {
+    public:
+        Scrollers();
+    };
+
+    Scrollers::Scrollers() : Div() {
+        setTag("Scroller");
+        setClassNames({"demo-panel"});
+
+        style()
+            ->set(padding, 48);
+
+        auto contents = std::make_shared<Text>(lorem + '\n' + lorem + '\n' + lorem);
+        contents->style()
+                ->set(padding, 12);
+        auto scroller = add<Scroller>(contents);
+        scroller->style()
+                ->set(margin, 12)
+                ->set(border, 1)
+                ->set(borderColor, BASE_00);
+
+        auto contents2 = std::make_shared<Text>(lorem + "\n" + lorem + "\n" + lorem);
+        contents2->style()
+                 ->set(grow, 1)
+                 ->set(padding, 12);
+        auto scroller2 = add<Scroller>(contents2);
+        scroller2->viewport()->style()->set(flexDirection, "row");
+        scroller2->style()
+                 ->set(margin, 12)
+                 ->set(border, 1)
+                 ->set(borderColor, BASE_00);
+    }
+
+}
+

example/components/TextInputs.hpp → example/demo/TextInputs.hpp

@@ -5,6 +5,7 @@
 #include <psychic-ui/components/Box.hpp>
 #include <psychic-ui/components/Label.hpp>
 #include <psychic-ui/components/TextInput.hpp>
+#include <psychic-ui/components/TextArea.hpp>
 
 namespace psychic_ui {
 
@@ -51,7 +52,7 @@ namespace psychic_ui {
                 ->set(basis, 0) // Both columns needs to be considered the same size
                 ->set(gap, 6);
 
-            left->add<Label>("Single Line")
+            left->add<Label>("Single Line Inputs")
                 ->addClassName("h1");
 
             left->add<TextInput>();
@@ -68,9 +69,14 @@ namespace psychic_ui {
                 ->set(basis, 0) // Both columns needs to be considered the same size
                 ->set(gap, 6);
 
-            right->add<Label>("Multiline")
+            right->add<Label>("Multiline Text Areas")
                  ->addClassName("h1");
 
+            right->add<TextArea>();
+            right->add<TextArea>();
+            right->add<TextArea>();
+            right->add<TextArea>();
+
         }
     }
 

example/components/Typography.hpp → example/demo/Typography.hpp

@@ -168,6 +168,7 @@ namespace psychic_ui {
             right->add<Text>(lorem + "\n" + lorem)
                  ->setEditable(true)
                  ->style()
+                 ->set(padding, 12)
                  ->set(fontSize, 10)
                  ->set(lineHeight, 12);
 

psychic-ui/Component.hpp

@@ -45,13 +45,15 @@ namespace psychic_ui {
     Component<T> *Component<T>::setSkin(std::shared_ptr<T> skin) {
         if (skin != _skin) {
             if (_skin) {
+                _skin->removedFromComponent();
                 this->remove(_skin);
             }
             _skin = skin;
             if (_skin) {
                 // Skin is always in the back so the component can add more
                 // children if need be (ie: TextInput overlays its text)
                 this->add(0, _skin);
+                _skin->addedToComponent();
             }
             skinChanged();
         }

psychic-ui/Div.cpp

@@ -1535,6 +1535,7 @@ namespace psychic_ui {
         }
 
         if (ret != Handled && _computedStyle->get(overflow) == "scroll") {
+            // TODO: Cancel if already handled, we can't scroll two divs at the same time
             scroll(scrollX, scrollY);
         }
 

psychic-ui/Skin.hpp

@@ -6,6 +6,9 @@ namespace psychic_ui {
 
     namespace internal {
         class SkinBase : public Div {
+        public:
+            virtual void addedToComponent() {};
+            virtual void removedFromComponent() {};
         protected:
             SkinBase();
             const InheritableValues inheritableValues() const override;

psychic-ui/TextBase.cpp

@@ -30,7 +30,7 @@ namespace psychic_ui {
         return this;
     }
 
-    bool TextBase::subpixelText() const {
+    bool TextBase::subPixelText() const {
         return _subPixelText;
     }
 
@@ -42,12 +42,16 @@ namespace psychic_ui {
         return this;
     }
 
+    unsigned int TextBase::getLineHeight() const {
+        return static_cast<unsigned int>(std::ceil(_lineHeight));
+    }
+
     void TextBase::styleUpdated() {
         Div::styleUpdated();
 
-        bool  antiAlias = _computedStyle->get(textAntiAlias);
-        _fontSize      = _computedStyle->get(fontSize);
-        _lineHeight   = _computedStyle->get(lineHeight);
+        bool antiAlias = _computedStyle->get(textAntiAlias);
+        _fontSize   = _computedStyle->get(fontSize);
+        _lineHeight = _computedStyle->get(lineHeight);
         if (std::isnan(_lineHeight)) {
             _lineHeight = _fontSize * 1.5f;
         }
@@ -59,8 +63,11 @@ namespace psychic_ui {
         _textPaint.setTextSize(_fontSize);
         _textPaint.setColor(_computedStyle->get(color));
 
-        float mh = _computedStyle->get(minHeight);
-        _defaultStyle->set(minHeight, std::isnan(mh) ? _lineHeight : std::max(mh, _lineHeight));
+        // If we don't have a percentage based min height use the line height
+        if (!_computedStyle->has(minHeightPercent)) {
+            float mh = _computedStyle->get(minHeight);
+            _defaultStyle->set(minHeight, std::isnan(mh) ? _lineHeight : std::max(mh, std::max(_lineHeight, std::ceil(_textPaint.getFontSpacing()))));
+        }
     }
 
 

psychic-ui/TextBase.hpp

@@ -16,8 +16,9 @@ namespace psychic_ui {
         virtual TextBase *setText(const std::string &text) = 0;
         bool lcdRender() const;
         TextBase *setLcdRender(bool lcdRender);
-        bool subpixelText() const;
+        bool subPixelText() const;
         TextBase *setSubPixelText(bool subPixelText);
+        unsigned int getLineHeight() const;
 
     protected:
         bool    _lcdRender{true};

psychic-ui/components/Scroller.cpp

@@ -1,14 +1,12 @@
 #include "Scroller.hpp"
 
-#include <utility>
-
 namespace psychic_ui {
 
-    Scroller::Scroller() : Scroller(std::make_shared<Div>()) {}
-
-    Scroller::Scroller(std::shared_ptr<Div> viewport) :
+    Scroller::Scroller(std::shared_ptr<Div> content) :
         Div(),
-        _viewport(std::move(viewport)) {
+        _content(std::move(content)),
+        _viewport(std::make_shared<Div>()) {
+        _viewport->add(_content);
         _viewport->style()
                  ->set(widthPercent, 1.0f)
                  ->set(heightPercent, 1.0f)
@@ -21,7 +19,11 @@ namespace psychic_ui {
                  ->set(heightPercent, 1.0f);
         container->add(_viewport);
 
-        _verticalScrollBar   = container->add<ScrollBar>(_viewport);
+        _verticalScrollBar   = container->add<ScrollBar>(_viewport, ScrollDirection::Vertical);
         _horizontalScrollBar = add<ScrollBar>(_viewport, ScrollDirection::Horizontal);
     }
+
+    Div *Scroller::viewport() {
+        return _viewport.get();
+    }
 }

psychic-ui/components/Scroller.hpp

@@ -5,14 +5,15 @@
 #include <psychic-ui/Div.hpp>
 
 namespace psychic_ui {
-    class Scroller: public Div {
+    class Scroller : public Div {
     public:
-        Scroller();
-        explicit Scroller(std::shared_ptr<Div> viewport);
+        explicit Scroller(std::shared_ptr<Div> content);
+        Div *viewport();
     protected:
-        std::shared_ptr<Div> _viewport{};
-        std::shared_ptr<ScrollBar> _horizontalScrollBar{};
-        std::shared_ptr<ScrollBar> _verticalScrollBar{};
+        std::shared_ptr<Div>       _content{nullptr};
+        std::shared_ptr<Div>       _viewport{nullptr};
+        std::shared_ptr<ScrollBar> _horizontalScrollBar{nullptr};
+        std::shared_ptr<ScrollBar> _verticalScrollBar{nullptr};
     };
 }