Updated TextEditComponent to scale properly on high resolution diplays.

Also changed to SVG graphic files for the text input box frame in order to look smoother at higher resolutions.

es-core/src/components/TextEditComponent.cpp

@@ -20,7 +20,7 @@
 TextEditComponent::TextEditComponent(
         Window* window)
         : GuiComponent(window),
-        mBox(window, ":/graphics/textinput_ninepatch.png"),
+        mBox(window, ":/graphics/textinput.svg"),
         mFocused(false),
         mScrollOffset(0.0f, 0.0f),
         mCursor(0), mEditing(false),
@@ -29,24 +29,26 @@ TextEditComponent::TextEditComponent(
 {
     addChild(&mBox);
     onFocusLost();
-    setSize(4096, mFont->getHeight() + TEXT_PADDING_VERT);
+    mResolutionAdjustment = -(34 * Renderer::getScreenWidthModifier() - 34);
+    setSize(4096, mFont->getHeight() + (TEXT_PADDING_VERT * Renderer::getScreenHeightModifier()));
 }
 
 void TextEditComponent::onFocusGained()
 {
     mFocused = true;
-    mBox.setImagePath(":/graphics/textinput_ninepatch_active.png");
+    mBox.setImagePath(":/graphics/textinput_focused.svg");
 }
 
 void TextEditComponent::onFocusLost()
 {
     mFocused = false;
-    mBox.setImagePath(":/graphics/textinput_ninepatch.png");
+    mBox.setImagePath(":/graphics/textinput.svg");
 }
 
 void TextEditComponent::onSizeChanged()
 {
-    mBox.fitTo(mSize, Vector3f::Zero(), Vector2f(-34, -32 - TEXT_PADDING_VERT));
+    mBox.fitTo(mSize, Vector3f::Zero(), Vector2f(-34 + mResolutionAdjustment, -32 -
+            (TEXT_PADDING_VERT * Renderer::getScreenHeightModifier())));
     onTextChanged(); // Wrap point probably changed.
 }
 
@@ -308,8 +310,8 @@ void TextEditComponent::render(const Transform4x4f& parentTrans)
         }
 
         float cursorHeight = mFont->getHeight() * 0.8f;
-        Renderer::drawRect(cursorPos.x(), cursorPos.y() + (mFont->getHeight() -
+        Renderer::drawRect(cursorPos.x(), cursorPos.y() + (mFont->getHeight() - cursorHeight) / 2,
-                cursorHeight) / 2, 2.0f, cursorHeight, 0x000000FF, 0x000000FF);
+                2.0f * Renderer::getScreenWidthModifier(), cursorHeight, 0x000000FF, 0x000000FF);
     }
 }
 
@@ -320,12 +322,16 @@ bool TextEditComponent::isMultiline()
 
 Vector2f TextEditComponent::getTextAreaPos() const
 {
-    return Vector2f(TEXT_PADDING_HORIZ / 2.0f, TEXT_PADDING_VERT / 2.0f);
+    return Vector2f((-mResolutionAdjustment +
+            (TEXT_PADDING_HORIZ * Renderer::getScreenWidthModifier())) / 2.0f,
+            (TEXT_PADDING_VERT * Renderer::getScreenHeightModifier()) / 2.0f);
 }
 
 Vector2f TextEditComponent::getTextAreaSize() const
 {
-    return Vector2f(mSize.x() - TEXT_PADDING_HORIZ, mSize.y() - TEXT_PADDING_VERT);
+    return Vector2f(mSize.x() + mResolutionAdjustment -
+            (TEXT_PADDING_HORIZ * Renderer::getScreenWidthModifier()), mSize.y() -
+            (TEXT_PADDING_VERT * Renderer::getScreenHeightModifier()));
 }
 
 std::vector<HelpPrompt> TextEditComponent::getHelpPrompts()

es-core/src/components/TextEditComponent.h

@@ -67,6 +67,7 @@ private:
     Vector2f mScrollOffset;
 
     NinePatchComponent mBox;
+    float mResolutionAdjustment;
 
     std::shared_ptr<Font> mFont;
     std::unique_ptr<TextCache> mTextCache;

resources/graphics/textinput.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="48" height="48" version="1.1" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+  <path
+     style="fill:#ffffff;fill-opacity:1;stroke:#c7c7c7;stroke-width:2.04549718;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
+     d="M 4.4839437,1.0227489 H 43.516056 c 1.917503,0 3.461197,1.5436938 3.461197,3.4611967 V 43.516054 c 0,1.917503 -1.543694,3.461197 -3.461197,3.461197 H 4.4839437 c -1.9175029,0 -3.4611967,-1.543694 -3.4611967,-3.461197 V 4.4839456 c 0,-1.9175029 1.5436938,-3.4611967 3.4611967,-3.4611967 z"/>
+</svg>

resources/graphics/textinput_focused.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="48" height="48" version="1.1" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+  <path
+     style="fill:#ffffff;fill-opacity:1;stroke:#777777;stroke-width:2.04549718;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
+     d="M 4.4839437,1.0227489 H 43.516056 c 1.917503,0 3.461197,1.5436938 3.461197,3.4611967 V 43.516054 c 0,1.917503 -1.543694,3.461197 -3.461197,3.461197 H 4.4839437 c -1.9175029,0 -3.4611967,-1.543694 -3.4611967,-3.461197 V 4.4839456 c 0,-1.9175029 1.5436938,-3.4611967 3.4611967,-3.4611967 z"/>
+</svg>