#nullable enable using System; using UnityEngine; using UnityEngine.UIElements; namespace UVC.UIToolkit { /// /// 숫자 입력 필드에 위/아래 스테퍼 버튼이 붙은 컴포넌트. /// TextInput 오른쪽에 위, 아래 버튼이 세로로 배치됩니다. /// 키보드 화살표, 마우스 휠, 버튼 클릭으로 값을 조절할 수 있습니다. /// /// /// UTKNumberStepper란? /// 숫자를 편리하게 증감할 수 있는 입력 컴포넌트입니다. /// /// 버튼 클릭: ▲/▼ 버튼으로 값 증감 /// 키보드: ↑/↓ 화살표 키로 값 증감 /// 마우스 휠: 호버 상태에서 휠로 값 조절 /// 직접 입력: 텍스트 필드에 숫자 직접 입력 /// /// 주요 기능: /// /// 최소/최대값 제한 (MinValue, MaxValue) /// 증감 단위 설정 (Step) /// 순환 모드 (WrapAround) - 최대에서 최소로, 최소에서 최대로 /// /// /// /// C# 코드에서 사용: /// /// // 기본 스테퍼 생성 /// var stepper = new UTKNumberStepper(); /// stepper.MinValue = 0; /// stepper.MaxValue = 100; /// stepper.Value = 50; /// stepper.Step = 5; // 5씩 증감 /// /// // 값 변경 이벤트 /// stepper.OnValueChanged += (value) => { /// Debug.Log($"현재 값: {value}"); /// }; /// /// // 범위와 초기값을 지정하는 생성자 /// var volumeStepper = new UTKNumberStepper(0, 100, 80, 10); // min, max, initial, step /// /// // 순환 모드 활성화 (100 → 0, 0 → 100) /// stepper.WrapAround = true; /// /// // 프로그래밍 방식으로 값 변경 /// stepper.Increment(); // Step만큼 증가 /// stepper.Decrement(); // Step만큼 감소 /// stepper.SetValue(75); // 직접 설정 /// /// UXML에서 사용: /// /// /// /// /// /// /// /// /// ]]> /// 실제 활용 예시 (월 선택기): /// /// // 월 선택 스테퍼 (1~12 순환) /// var monthStepper = new UTKNumberStepper(1, 12, DateTime.Now.Month, 1); /// monthStepper.WrapAround = true; // 12월 다음 1월, 1월 이전 12월 /// monthStepper.OnValueChanged += (month) => { /// UpdateCalendar(month); /// }; /// /// [UxmlElement] public partial class UTKNumberStepper : VisualElement { #region Constants private const string USS_PATH = "UIToolkit/Input/UTKNumberStepper"; #endregion #region UXML Attributes [UxmlAttribute("value")] public int Value { get => _value; set => SetValue(value); } [UxmlAttribute("min-value")] public int MinValue { get => _minValue; set { _minValue = value; ClampValue(); } } [UxmlAttribute("max-value")] public int MaxValue { get => _maxValue; set { _maxValue = value; ClampValue(); } } [UxmlAttribute("step")] public int Step { get => _step; set => _step = Math.Max(1, value); } [UxmlAttribute("wrap-around")] public bool WrapAround { get => _wrapAround; set => _wrapAround = value; } #endregion #region Fields private int _value; private int _minValue = int.MinValue; private int _maxValue = int.MaxValue; private int _step = 1; private bool _wrapAround; private bool _isUpdating; private bool _isHovered; private TextField? _textField; private Button? _upButton; private Button? _downButton; #endregion #region Events /// 값이 변경될 때 발생 public event Action? OnValueChanged; /// Tab 키가 눌렸을 때 발생 (다음 요소로 포커스 이동용) public event Action? OnTabPressed; /// Shift+Tab 키가 눌렸을 때 발생 (이전 요소로 포커스 이동용) public event Action? OnShiftTabPressed; #endregion #region Constructor public UTKNumberStepper() { UTKThemeManager.Instance.ApplyThemeToElement(this); LoadStyleSheet(); CreateUI(); SetupEvents(); SubscribeToThemeChanges(); } public UTKNumberStepper(int minValue, int maxValue, int initialValue = 0, int step = 1) { _minValue = minValue; _maxValue = maxValue; _step = Math.Max(1, step); _value = Mathf.Clamp(initialValue, minValue, maxValue); UTKThemeManager.Instance.ApplyThemeToElement(this); LoadStyleSheet(); CreateUI(); SetupEvents(); SubscribeToThemeChanges(); UpdateDisplay(); } private void LoadStyleSheet() { var uss = Resources.Load(USS_PATH); if (uss != null) { styleSheets.Add(uss); } } private void SubscribeToThemeChanges() { UTKThemeManager.Instance.OnThemeChanged += OnThemeChanged; // 패널에서 분리될 때 이벤트 구독 해제 RegisterCallback(_ => { UTKThemeManager.Instance.OnThemeChanged -= OnThemeChanged; }); } private void OnThemeChanged(UTKTheme theme) { UTKThemeManager.Instance.ApplyThemeToElement(this); } #endregion #region Public Methods public void SetValue(int newValue, bool notify = true) { int clampedValue = ClampValueInternal(newValue); if (_value != clampedValue) { _value = clampedValue; UpdateDisplay(); if (notify) { OnValueChanged?.Invoke(_value); } } } public void Increment() { if (_wrapAround && _value + _step > _maxValue) { SetValue(_minValue); } else { SetValue(_value + _step); } } public void Decrement() { if (_wrapAround && _value - _step < _minValue) { SetValue(_maxValue); } else { SetValue(_value - _step); } } public void SetRange(int min, int max) { _minValue = min; _maxValue = max; ClampValue(); } /// 컴포넌트의 활성화 상태를 설정합니다. public new void SetEnabled(bool enabled) { base.SetEnabled(enabled); EnableInClassList("utk-number-stepper--disabled", !enabled); } /// 텍스트 필드에 포커스를 설정합니다. public new void Focus() { _textField?.Focus(); } #endregion #region Private Methods - UI Creation private void CreateUI() { AddToClassList("utk-number-stepper"); // Text Field _textField = new TextField { name = "stepper-input" }; _textField.AddToClassList("utk-number-stepper__input"); // TextField 내부 input 스타일링 _textField.RegisterCallback(_ => { var input = _textField.Q("unity-text-input"); if (input != null) { input.AddToClassList("utk-number-stepper__text-input"); } }); Add(_textField); // Button Container (위/아래 버튼을 세로로 배치) var buttonContainer = new VisualElement { name = "stepper-buttons" }; buttonContainer.AddToClassList("utk-number-stepper__buttons"); // Up Button _upButton = new Button { name = "stepper-up", text = UTKMaterialIcons.KeyboardArrowUp }; _upButton.AddToClassList("utk-number-stepper__btn"); _upButton.AddToClassList("utk-number-stepper__btn--up"); UTKMaterialIcons.ApplyIconStyle(_upButton, 14); buttonContainer.Add(_upButton); // Down Button _downButton = new Button { name = "stepper-down", text = UTKMaterialIcons.KeyboardArrowDown }; _downButton.AddToClassList("utk-number-stepper__btn"); _downButton.AddToClassList("utk-number-stepper__btn--down"); UTKMaterialIcons.ApplyIconStyle(_downButton, 14); buttonContainer.Add(_downButton); Add(buttonContainer); UpdateDisplay(); } private void SetupEvents() { _upButton?.RegisterCallback(_ => Increment()); _downButton?.RegisterCallback(_ => Decrement()); _textField?.RegisterValueChangedCallback(evt => { if (_isUpdating) return; if (int.TryParse(evt.newValue, out int parsed)) { SetValue(parsed); } else { // 유효하지 않은 입력이면 이전 값으로 복원 UpdateDisplay(); } }); // 키보드 이벤트 (위/아래 화살표) _textField?.RegisterCallback(evt => { if (evt.keyCode == KeyCode.UpArrow) { Increment(); evt.StopPropagation(); } else if (evt.keyCode == KeyCode.DownArrow) { Decrement(); evt.StopPropagation(); } }); // Tab 키 이벤트 - TrickleDown으로 먼저 캡처 _textField?.RegisterCallback(evt => { if (evt.keyCode == KeyCode.Tab) { if (evt.shiftKey && OnShiftTabPressed != null) { // Shift+Tab: 이전 요소로 이동 OnShiftTabPressed.Invoke(); evt.StopImmediatePropagation(); } else if (!evt.shiftKey && OnTabPressed != null) { // Tab: 다음 요소로 이동 OnTabPressed.Invoke(); evt.StopImmediatePropagation(); } } }, TrickleDown.TrickleDown); // 마우스 호버 상태 추적 RegisterCallback(_ => _isHovered = true); RegisterCallback(_ => _isHovered = false); // 마우스 휠 이벤트 (호버 상태에서만) RegisterCallback(evt => { if (!_isHovered) return; if (evt.delta.y < 0) { Increment(); } else if (evt.delta.y > 0) { Decrement(); } evt.StopPropagation(); }); } #endregion #region Private Methods - Logic private void UpdateDisplay() { if (_textField == null) return; _isUpdating = true; _textField.value = _value.ToString(); _isUpdating = false; } private void ClampValue() { SetValue(_value, notify: false); } private int ClampValueInternal(int value) { return Mathf.Clamp(value, _minValue, _maxValue); } #endregion } }