Add Skia input fields to UI Layouts

Author: LazyDuchess

Assets/Scripts/OpenTS2/UI/Skia/SkiaInputField.cs

@@ -12,16 +12,32 @@ namespace OpenTS2.UI.Skia
 {
     public class SkiaInputField : Selectable, IUpdateSelectedHandler
     {
+        public string Text
+        {
+            get
+            {
+                return Label.Text;
+            }
+
+            set
+            {
+                Label.Text = value;
+            }
+        }
         private bool Selected => EventSystem.current != null && EventSystem.current.currentSelectedGameObject == gameObject;
-        [SerializeField]
-        private RectTransform _caret;
-        [SerializeField]
-        private SkiaLabel _label;
+        public RectTransform Caret;
+        public SkiaLabel Label;
 
         private int _selectedCharacter = -1;
         private float _caretTimer = 0f;
         private float CaretTime => WinUtils.GetCaretBlinkTimer();
         private Event _processingEvent = new Event();
+        public Action OnTextEdited;
+
+        private void FireTextEdited()
+        {
+            OnTextEdited?.Invoke();
+        }
 
         private void Update()
         {
@@ -34,8 +50,8 @@ private void Update()
 
         private void DeselectedUpdate()
         {
-            if (_caret.gameObject.activeSelf)
-                _caret.gameObject.SetActive(false);
+            if (Caret.gameObject.activeSelf)
+                Caret.gameObject.SetActive(false);
         }
 
         private void OnGUI()
@@ -106,24 +122,25 @@ private void DoCaretAnimation()
 
             if (_caretTimer > caretTime)
             {
-                if (_caret.gameObject.activeSelf)
-                    _caret.gameObject.SetActive(false);
+                if (Caret.gameObject.activeSelf)
+                    Caret.gameObject.SetActive(false);
             }
             else
             {
-                if (!_caret.gameObject.activeSelf)
-                    _caret.gameObject.SetActive(true);
+                if (!Caret.gameObject.activeSelf)
+                    Caret.gameObject.SetActive(true);
             }
         }
 
         private void TypeString(string str)
         {
             _caretTimer = 0f;
-            var strBuilder = new StringBuilder(_label.Text);
+            var strBuilder = new StringBuilder(Label.Text);
             var pointInsertion = _selectedCharacter + 1;
             strBuilder.Insert(pointInsertion, str);
-            _label.Text = strBuilder.ToString();
+            Label.Text = strBuilder.ToString();
             _selectedCharacter += str.Length;
+            FireTextEdited();
         }
 
         private void PasteClipboard()
@@ -136,10 +153,11 @@ private void Backspace()
         {
             if (_selectedCharacter >= 0)
             {
-                var strBuilder = new StringBuilder(_label.Text);
+                var strBuilder = new StringBuilder(Label.Text);
                 strBuilder.Remove(_selectedCharacter, 1);
-                _label.Text = strBuilder.ToString();
+                Label.Text = strBuilder.ToString();
                 MoveCaretLeft();
+                FireTextEdited();
             }
         }
 
@@ -157,26 +175,32 @@ private void MoveCaretRight()
         {
             _caretTimer = 0f;
             _selectedCharacter++;
-            if (_selectedCharacter >= _label.Text.Length)
-                _selectedCharacter = _label.Text.Length - 1;
+            if (_selectedCharacter >= Label.Text.Length)
+                _selectedCharacter = Label.Text.Length - 1;
         }
 
         private void UpdateCaretPosition()
         {
-            _caret.sizeDelta = new Vector2(1, _label.FontSize + ((_label.LineSpacing - 1f) * _label.FontSize));
+            Caret.sizeDelta = new Vector2(1, Label.FontSize + ((Label.LineSpacing - 1f) * Label.FontSize));
             if (_selectedCharacter < 0)
             {
-                var firstLineY = -_label.GetLineY(0) + _label.FontSize;
-                _caret.anchoredPosition = new Vector2(0f, firstLineY);
+                var firstLineY = -Label.GetLineY(0) + Label.FontSize;
+                Caret.anchoredPosition = new Vector2(0f, firstLineY);
                 return;
             }
-            var rect = _label.GetCharacterRect(_selectedCharacter);
-            _caret.anchoredPosition = new Vector2(rect.Rect.x + rect.Rect.width, rect.Rect.y);
+            var rect = Label.GetCharacterRect(_selectedCharacter);
+            Caret.anchoredPosition = new Vector2(rect.Rect.x + rect.Rect.width, rect.Rect.y);
         }
 
         private void ValidateSelection()
         {
-            _selectedCharacter = Mathf.Clamp(_selectedCharacter, -1, _label.Text.Length - 1);
+            _selectedCharacter = Mathf.Clamp(_selectedCharacter, -1, Label.Text.Length - 1);
+        }
+
+        public override void OnSelect(BaseEventData eventData)
+        {
+            base.OnSelect(eventData);
+            _selectedCharacter = Label.Text.Length - 1;
         }
 
         public void OnUpdateSelected(BaseEventData eventData)

Assets/Scripts/OpenTS2/UI/UITextEditComponent.cs

@@ -1,4 +1,5 @@
-using System;
+using OpenTS2.UI.Skia;
+using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Text;
@@ -10,32 +11,23 @@ namespace OpenTS2.UI
 {
     public class UITextEditComponent : UITextComponent
     {
-        private string _originalText;
         public Action<string> OnTextEdited;
-        public InputField Input => GetComponent<InputField>();
+        public SkiaInputField Input => GetComponent<SkiaInputField>();
         public override string Text
         {
             get
             {
-                return "";
-                return Input.text;
+                return Input.Text;
             }
             set
             {
-                return;
-                Input.text = value;
-                _originalText = value;
+                Input.Text = value;
             }
         }
 
-        public void CheckTextEdited()
+        public void FireTextEdited()
         {
-            if (Text != _originalText)
-            {
-                Debug.Log($"TEXT EDITED! ({_originalText}) => ({Text})");
-                OnTextEdited?.Invoke(Text);
-                _originalText = Text;
-            }
+            OnTextEdited?.Invoke(Input.Text);
         }
     }
 }

Assets/Scripts/OpenTS2/UI/UITextEditElement.cs

@@ -1,4 +1,5 @@
-using System;
+using OpenTS2.UI.Skia;
+using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Text;
@@ -20,10 +21,21 @@ public override void ParseProperties(UIProperties properties)
         public override UIComponent Instantiate(Transform parent)
         {
             var component = base.Instantiate(parent) as UITextEditComponent;
+            var inputField = component.gameObject.AddComponent<SkiaInputField>();
+            inputField.Label = component.TextComponent;
+
+            var caret = new GameObject("Caret");
+            caret.transform.parent = component.transform;
+            var rawImage = caret.AddComponent<RawImage>();
+            rawImage.color = ForeColor;
+            rawImage.raycastTarget = false;
+
+            inputField.Caret = caret.GetComponent<RectTransform>();
+            inputField.Caret.anchorMin = new Vector2(0f, 1f);
+            inputField.Caret.anchorMax = new Vector2(0f, 1f);
+            inputField.Caret.pivot = new Vector2(0.5f, 1f);
+            inputField.OnTextEdited += component.FireTextEdited;
             /*
-            var inputField = component.gameObject.AddComponent<InputField>();
-            component.TextComponent.supportRichText = false;
-            inputField.textComponent = component.TextComponent;
             if (SingleLine)
                 inputField.lineType = InputField.LineType.MultiLineSubmit;
             else