#6 Implement number input function

Projects/Editor/Source/GUI/Controls/CNumberInput.cpp

@@ -24,6 +24,7 @@ This file is part of the "Skylicht Engine".
 
 #include "pch.h"
 #include "CNumberInput.h"
+#include "GUI/Theme/CThemeConfig.h"
 
 namespace Skylicht
 {
@@ -32,16 +33,79 @@ namespace Skylicht
 		namespace GUI
 		{
 			CNumberInput::CNumberInput(CBase* base) :
-				CTextBox(base)
+				CTextBox(base),
+				m_mouseDownX(0.0f),
+				m_mouseDownY(0.0f),
+				m_focusTextbox(false)
 			{
 				m_textContainer->setTextAlignment(ETextAlign::TextCenter);
+				setCursor(ECursorType::SizeWE);
 			}
 
 			CNumberInput::~CNumberInput()
 			{
 
 			}
 
+			void CNumberInput::renderUnder()
+			{
+				CTextBox::renderUnder();
+
+				if (m_drawTextbox && isHovered() && !m_focusTextbox)
+				{
+					CTheme* theme = CTheme::getTheme();
+					const SRect& r = getRenderBounds();
+
+					theme->drawTexboxButton(r, CThemeConfig::TextBoxButtonColor, CThemeConfig::White, true, true);
+				}
+			}
+
+			void CNumberInput::onKeyboardFocus()
+			{
+				// disable default textbox focus
+			}
+
+			void CNumberInput::onLostKeyboardFocus()
+			{
+				CTextBox::onLostKeyboardFocus();
+
+				m_focusTextbox = false;
+				setCursor(ECursorType::SizeWE);
+				setCaretToEnd();
+			}
+
+			void CNumberInput::onMouseClickLeft(float x, float y, bool down)
+			{
+				if (m_focusTextbox == true)
+				{
+					// default textbox function
+					CTextBox::onMouseClickLeft(x, y, down);
+				}
+				else
+				{
+					// check state drag to adjust number value
+					if (down)
+					{
+						m_mouseDownX = x;
+						m_mouseDownY = y;
+					}
+					else
+					{
+						if (fabsf(x - m_mouseDownX) <= 1 && fabsf(y - m_mouseDownY) <= 1.0f)
+						{
+							CTextBox::onKeyboardFocus();
+							CTextBox::onMouseClickLeft(x, y, true);
+							CTextBox::onMouseClickLeft(x, y, false);
+
+							onSelectAll(this);
+
+							m_focusTextbox = true;
+							setCursor(ECursorType::Beam);
+						}
+					}
+				}
+			}
+
 			bool CNumberInput::onChar(u32 c)
 			{
 				if ((c >= '0' && c <= '9') || c == '.' || c == '\b')

Projects/Editor/Source/GUI/Controls/CNumberInput.h

@@ -33,11 +33,24 @@ namespace Skylicht
 		{
 			class CNumberInput : public CTextBox
 			{
+			protected:
+				float m_mouseDownX;
+				float m_mouseDownY;
+				bool m_focusTextbox;
+
 			public:
 				CNumberInput(CBase* base);
 
 				virtual ~CNumberInput();
 
+				virtual void renderUnder();
+
+				virtual void onKeyboardFocus();
+
+				virtual void onLostKeyboardFocus();
+
+				virtual void onMouseClickLeft(float x, float y, bool down);
+
 				virtual bool onChar(u32 c);
 			};
 		}

Projects/Editor/Source/GUI/Controls/CTextBox.cpp

@@ -438,6 +438,20 @@ namespace Skylicht
 				}
 			}
 
+			void CTextBox::setCaretToEnd()
+			{
+				u32 totalLine = m_textContainer->getNumLine();
+
+				u32 line = totalLine - 1;
+				u32 pos = m_textContainer->getLine(line)->getLengthNoNewLine();
+
+				m_textContainer->setCaretBegin(line, pos);
+				m_textContainer->setCaretEnd(line, pos);
+				m_textContainer->resetCaretBlink();
+
+				scrollToLine(line, pos);
+			}
+
 			void CTextBox::setEditable(bool b)
 			{
 				m_editable = b;

Projects/Editor/Source/GUI/Controls/CTextBox.h

@@ -115,6 +115,8 @@ namespace Skylicht
 
 				void scrollToLine(u32 line, u32 pos);
 
+				void setCaretToEnd();
+
 				inline const std::wstring& getString()
 				{
 					return m_textContainer->getString();

Projects/Editor/Source/GUI/Theme/CSkylichtTheme.cpp

@@ -71,6 +71,11 @@ namespace Skylicht
 				m_textboxShadow = m_sprite->addFrame("draw_textbox_shadow", "Editor/GUI/draw_textbox_shadow.png");
 				m_textbox = m_sprite->addFrame("draw_textbox", "Editor/GUI/draw_textbox.png");
 				m_textboxBorder = m_sprite->addFrame("draw_textbox_border", "Editor/GUI/draw_textbox_border.png");
+				m_textboxButtonLeft = m_sprite->addFrame("draw_textbox_button_left", "Editor/GUI/draw_textbox_button_left.png");
+				m_textboxButtonRight = m_sprite->addFrame("draw_textbox_button_right", "Editor/GUI/draw_textbox_button_right.png");
+				m_textboxButtonArrowLeft = m_sprite->addFrame("draw_textbox_button_arrow_left", "Editor/GUI/draw_textbox_button_arrow_left.png");
+				m_textboxButtonArrowRight = m_sprite->addFrame("draw_textbox_button_arrow_right", "Editor/GUI/draw_textbox_button_arrow_right.png");
+				m_textboxButtonArrowDown = m_sprite->addFrame("draw_textbox_button_arrow_down", "Editor/GUI/draw_textbox_button_arrow_down.png");
 
 				// add font text
 				m_renderer->initFont(m_sprite);
@@ -195,7 +200,7 @@ namespace Skylicht
 				addSystemIcon(ESystemIcon::FileImage, "file-image.png");
 			}
 
-			void CSkylichtTheme::addSystemIcon(ESystemIcon type, const char *name)
+			void CSkylichtTheme::addSystemIcon(ESystemIcon type, const char* name)
 			{
 				char path[512];
 				std::string nameNoExt = CPath::getFileNameNoExt(name);
@@ -209,9 +214,9 @@ namespace Skylicht
 				m_systemIcon32[type] = m_sprite->addFrame(nameNoExt.c_str(), path);
 			}
 
-			void CSkylichtTheme::drawIcon(const SRect &r, ESystemIcon icon, const SGUIColor& color, bool use32Bit)
+			void CSkylichtTheme::drawIcon(const SRect& r, ESystemIcon icon, const SGUIColor& color, bool use32Bit)
 			{
-				SFrame *frame = NULL;
+				SFrame* frame = NULL;
 
 				if (use32Bit == true)
 					frame = m_systemIcon32[icon];
@@ -224,9 +229,9 @@ namespace Skylicht
 				m_graphics->addFrameBatch(frame, getColor(color), m_renderer->getWorldTransform(), m_materialID);
 			}
 
-			void CSkylichtTheme::drawDockHintIcon(const SRect &r, EDockHintIcon icon, const SGUIColor& color)
+			void CSkylichtTheme::drawDockHintIcon(const SRect& r, EDockHintIcon icon, const SGUIColor& color)
 			{
-				SFrame *frame = m_dockIcon[icon];
+				SFrame* frame = m_dockIcon[icon];
 
 				if (frame == NULL)
 					return;
@@ -236,7 +241,7 @@ namespace Skylicht
 
 			void CSkylichtTheme::drawGUIModule(SFrame* frame, const SRect& rect, const SGUIColor& color, float left, float top, float right, float bottom, float cornerRadius)
 			{
-				SModuleOffset *module = &frame->ModuleOffset[0];
+				SModuleOffset* module = &frame->ModuleOffset[0];
 
 				core::rectf r = getRect(rect);
 				r.UpperLeftCorner.X = r.UpperLeftCorner.X - left + cornerRadius;
@@ -309,6 +314,61 @@ namespace Skylicht
 				drawGUIModule(m_textbox, rect, color, left, top, right, bottom, radius);
 			}
 
+			void CSkylichtTheme::drawTexboxButton(const SRect& rect, const SGUIColor& color, const SGUIColor& iconColor, bool left, bool right)
+			{
+				if (left == true)
+				{
+					SModuleOffset* module = &m_textboxButtonLeft->ModuleOffset[0];
+
+					core::rectf r = getRect(rect);
+					r.UpperLeftCorner.X = r.UpperLeftCorner.X;
+					r.UpperLeftCorner.Y = r.UpperLeftCorner.Y + 1;
+					r.LowerRightCorner.X = r.UpperLeftCorner.X + module->Module->W;
+					r.LowerRightCorner.Y = r.UpperLeftCorner.Y + module->Module->H;
+
+					m_graphics->addModuleBatch(
+						module,
+						getColor(color),
+						m_renderer->getWorldTransform(),
+						r,
+						m_materialID);
+
+					module = &m_textboxButtonArrowLeft->ModuleOffset[0];
+					m_graphics->addModuleBatch(
+						module,
+						getColor(iconColor),
+						m_renderer->getWorldTransform(),
+						r,
+						m_materialID);
+				}
+
+				if (right == true)
+				{
+					SModuleOffset* module = &m_textboxButtonRight->ModuleOffset[0];
+
+					core::rectf r = getRect(rect);
+					r.UpperLeftCorner.X = r.LowerRightCorner.X - module->Module->W;
+					r.UpperLeftCorner.Y = r.UpperLeftCorner.Y + 1;
+					r.LowerRightCorner.X = r.UpperLeftCorner.X + module->Module->W;
+					r.LowerRightCorner.Y = r.UpperLeftCorner.Y + module->Module->H;
+
+					m_graphics->addModuleBatch(
+						module,
+						getColor(color),
+						m_renderer->getWorldTransform(),
+						r,
+						m_materialID);
+
+					module = &m_textboxButtonArrowRight->ModuleOffset[0];
+					m_graphics->addModuleBatch(
+						module,
+						getColor(iconColor),
+						m_renderer->getWorldTransform(),
+						r,
+						m_materialID);
+				}
+			}
+
 			void CSkylichtTheme::drawTextboxBorder(const SRect& rect, const SGUIColor& color)
 			{
 				float left = 5.0f;
@@ -341,7 +401,7 @@ namespace Skylicht
 				float right = 4.0f;
 				float bottom = 8.0f;
 				float radius = 3.0f;
-				SFrame *frame = m_scrollbarV;
+				SFrame* frame = m_scrollbarV;
 
 				if (isHorizontal == true)
 				{

Projects/Editor/Source/GUI/Theme/CSkylichtTheme.h

@@ -40,33 +40,38 @@ namespace Skylicht
 			class CSkylichtTheme : public CTheme
 			{
 			protected:
-				CSpriteAtlas *m_sprite;
+				CSpriteAtlas* m_sprite;
 
-				SFrame *m_empty;
+				SFrame* m_empty;
 
-				SFrame *m_window;
-				SFrame *m_windowShadow;
+				SFrame* m_window;
+				SFrame* m_windowShadow;
 
-				SFrame *m_button;
-				SFrame *m_buttonShadow;
+				SFrame* m_button;
+				SFrame* m_buttonShadow;
 
-				SFrame *m_tabButton;
-				SFrame *m_tabButtonFocus;
+				SFrame* m_tabButton;
+				SFrame* m_tabButtonFocus;
 
-				SFrame *m_scrollbarH;
-				SFrame *m_scrollbarV;
+				SFrame* m_scrollbarH;
+				SFrame* m_scrollbarV;
 
-				SFrame *m_textboxShadow;
-				SFrame *m_textbox;
-				SFrame *m_textboxBorder;
+				SFrame* m_textboxShadow;
+				SFrame* m_textbox;
+				SFrame* m_textboxBorder;
+				SFrame* m_textboxButtonLeft;
+				SFrame* m_textboxButtonRight;
+				SFrame* m_textboxButtonArrowLeft;
+				SFrame* m_textboxButtonArrowRight;
+				SFrame* m_textboxButtonArrowDown;
 
-				SFrame *m_dockIcon[NumDockIcon];
+				SFrame* m_dockIcon[NumDockIcon];
 
-				SFrame *m_systemIcon16[NumSystemIcon];
-				SFrame *m_systemIcon32[NumSystemIcon];
+				SFrame* m_systemIcon16[NumSystemIcon];
+				SFrame* m_systemIcon32[NumSystemIcon];
 
-				CGraphics2D *m_graphics;
-				CSkylichtRenderer *m_renderer;
+				CGraphics2D* m_graphics;
+				CSkylichtRenderer* m_renderer;
 
 				int m_materialID;
 
@@ -75,9 +80,9 @@ namespace Skylicht
 
 				virtual ~CSkylichtTheme();
 
-				virtual void drawIcon(const SRect &r, ESystemIcon icon, const SGUIColor& color, bool use32Bit);
+				virtual void drawIcon(const SRect& r, ESystemIcon icon, const SGUIColor& color, bool use32Bit);
 
-				virtual void drawDockHintIcon(const SRect &r, EDockHintIcon icon, const SGUIColor& color);
+				virtual void drawDockHintIcon(const SRect& r, EDockHintIcon icon, const SGUIColor& color);
 
 				virtual void drawWindowShadow(const SRect& rect);
 
@@ -89,6 +94,8 @@ namespace Skylicht
 
 				virtual void drawTextbox(const SRect& rect, const SGUIColor& color);
 
+				virtual void drawTexboxButton(const SRect& rect, const SGUIColor& color, const SGUIColor& iconColor, bool left, bool right);
+
 				virtual void drawTextboxBorder(const SRect& rect, const SGUIColor& color);
 
 				virtual void drawTabButton(const SRect& rect, const SGUIColor& color, const SGUIColor& focusColor, bool focus);
@@ -123,7 +130,7 @@ namespace Skylicht
 
 				void initSystemIcon();
 
-				void addSystemIcon(ESystemIcon type, const char *name);
+				void addSystemIcon(ESystemIcon type, const char* name);
 
 				void drawGUIModule(SFrame* frame, const SRect& rect, const SGUIColor& color, float left, float top, float right, float bottom, float cornerRadius);
 

Projects/Editor/Source/GUI/Theme/CTheme.h

@@ -43,9 +43,9 @@ namespace Skylicht
 
 				virtual ~CTheme();
 
-				virtual void drawIcon(const SRect &r, ESystemIcon icon, const SGUIColor& color, bool use32Bit) {}
+				virtual void drawIcon(const SRect& r, ESystemIcon icon, const SGUIColor& color, bool use32Bit) {}
 
-				virtual void drawDockHintIcon(const SRect &r, EDockHintIcon icon, const SGUIColor& color) {}
+				virtual void drawDockHintIcon(const SRect& r, EDockHintIcon icon, const SGUIColor& color) {}
 
 				virtual void drawWindowShadow(const SRect& rect) {}
 
@@ -57,6 +57,8 @@ namespace Skylicht
 
 				virtual void drawTextbox(const SRect& rect, const SGUIColor& color) {}
 
+				virtual void drawTexboxButton(const SRect& rect, const SGUIColor& color, const SGUIColor& iconColor, bool left, bool right) {}
+
 				virtual void drawTextboxBorder(const SRect& rect, const SGUIColor& color) {}
 
 				virtual void drawTabButton(const SRect& rect, const SGUIColor& color, const SGUIColor& focusColor, bool focus) {}

Projects/Editor/Source/GUI/Theme/CThemeConfig.cpp

@@ -51,6 +51,7 @@ namespace Skylicht
 			SGUIColor CThemeConfig::TextSelectUnfocusColor = SGUIColor(255, 60, 60, 60);
 			SGUIColor CThemeConfig::TextBoxColor = SGUIColor(255, 44, 44, 44);
 			SGUIColor CThemeConfig::TextBoxBorderColor = SGUIColor(255, 65, 65, 65);
+			SGUIColor CThemeConfig::TextBoxButtonColor = SGUIColor(255, 110, 110, 110);
 
 			SGUIColor CThemeConfig::ButtonColor = SGUIColor(255, 88, 88, 88);
 			SGUIColor CThemeConfig::ButtonTextColor = SGUIColor(255, 250, 250, 250);