Files
EnglewoodLAB/Assets/Scripts/UVC/UIToolkit/Dropdown/UTKMultiSelectDropdown.cs

633 lines
22 KiB
C#

#nullable enable
using System;
using System.Collections.Generic;
using System.Linq;
using UnityEngine;
using UnityEngine.UIElements;
namespace UVC.UIToolkit
{
/// <summary>
/// 다중 선택 드롭다운 컴포넌트.
/// 체크박스를 통해 여러 항목을 동시에 선택할 수 있는 드롭다운입니다.
/// </summary>
/// <remarks>
/// <para><b>다중 선택 드롭다운이란?</b></para>
/// <para>
/// 일반 드롭다운과 달리 여러 옵션을 동시에 선택할 수 있는 UI 컴포넌트입니다.
/// 각 옵션에 체크박스가 있어 다중 선택을 직관적으로 표현합니다.
/// 선택된 항목들은 메인 필드에 쉼표로 구분되어 표시됩니다.
/// </para>
///
/// <para><b>주요 속성:</b></para>
/// <list type="bullet">
/// <item><description><c>Choices</c> - 선택 가능한 옵션 목록 (List<string>)</description></item>
/// <item><description><c>SelectedIndices</c> - 선택된 항목들의 인덱스 목록</description></item>
/// <item><description><c>SelectedValues</c> - 선택된 항목들의 값 목록</description></item>
/// <item><description><c>Placeholder</c> - 아무것도 선택되지 않았을 때 표시할 텍스트</description></item>
/// </list>
///
/// <para><b>주요 메서드:</b></para>
/// <list type="bullet">
/// <item><description><c>SetOptions(List<string>)</c> - 전체 옵션 목록 교체</description></item>
/// <item><description><c>SetSelectedIndices(List<int>)</c> - 인덱스로 선택 설정</description></item>
/// <item><description><c>SetSelectedValues(List<string>)</c> - 값으로 선택 설정</description></item>
/// <item><description><c>SelectAll()</c> - 모든 항목 선택</description></item>
/// <item><description><c>ClearSelection()</c> - 모든 선택 해제</description></item>
/// </list>
///
/// <para><b>실제 활용 예시:</b></para>
/// <list type="bullet">
/// <item><description>필터 선택 - 여러 카테고리 동시 필터링</description></item>
/// <item><description>태그 선택 - 여러 태그 동시 적용</description></item>
/// <item><description>권한 설정 - 여러 권한 동시 부여</description></item>
/// <item><description>레이어 선택 - 여러 레이어 동시 표시/숨김</description></item>
/// </list>
/// </remarks>
/// <example>
/// <para><b>C# 코드에서 사용:</b></para>
/// <code>
/// // 기본 사용
/// var categoryDropdown = new UTKMultiSelectDropdown();
/// categoryDropdown.Label = "카테고리 선택";
/// categoryDropdown.SetOptions(new List<string> { "과일", "채소", "육류", "유제품" });
///
/// // 선택 변경 이벤트
/// categoryDropdown.OnSelectionChanged += (indices, values) => {
/// Debug.Log($"선택된 개수: {values.Count}");
/// Debug.Log($"선택 항목: {string.Join(", ", values)}");
/// };
///
/// // 생성자로 한 번에 설정
/// var tagDropdown = new UTKMultiSelectDropdown(
/// "태그",
/// new List<string> { "중요", "긴급", "검토 필요", "완료" }
/// );
///
/// // 기본값 설정 (인덱스로)
/// tagDropdown.SetSelectedIndices(new List<int> { 0, 1 });
///
/// // 기본값 설정 (값으로)
/// tagDropdown.SetSelectedValues(new List<string> { "중요", "긴급" });
///
/// // 전체 선택/해제
/// tagDropdown.SelectAll();
/// tagDropdown.ClearSelection();
/// </code>
/// <para><b>UXML에서 사용:</b></para>
/// <code>
/// <!-- 기본 드롭다운 -->
/// <utk:UTKMultiSelectDropdown label="카테고리"
/// choices="과일,채소,육류,유제품" />
///
/// <!-- 기본값 지정 (인덱스로) -->
/// <utk:UTKMultiSelectDropdown label="태그"
/// choices="중요,긴급,검토 필요,완료"
/// selected-indices="0,1" />
///
/// <!-- Placeholder 지정 -->
/// <utk:UTKMultiSelectDropdown label="옵션"
/// choices="옵션1,옵션2,옵션3"
/// placeholder="선택하세요" />
/// </code>
/// </code>
/// </example>
[UxmlElement]
public partial class UTKMultiSelectDropdown : VisualElement, IDisposable
{
#region Constants
private const string USS_PATH = "UIToolkit/Dropdown/UTKMultiSelectDropdownUss";
private const string DEFAULT_PLACEHOLDER = "Select";
#endregion
#region Fields
private bool _disposed;
private Label? _labelElement;
private VisualElement? _inputContainer;
private Label? _displayLabel;
private VisualElement? _dropdownIconContainer;
private UTKLabel? _dropdownIcon;
// _popupLayer: 화면 전체를 덮는 레이어 (panel.visualTree에 추가).
// pickingMode 기본값(Position) 유지로 이벤트 경로에 포함되어
// UI Toolkit 패널 내 어디를 클릭해도 OnPanelPointerDown이 발화됨.
private VisualElement? _popupLayer;
private VisualElement? _popupContainer;
private ScrollView? _optionsScrollView;
private string _label = "";
private List<string> _choices = new();
private HashSet<int> _selectedIndices = new();
private string _placeholder = DEFAULT_PLACEHOLDER;
private bool _isEnabled = true;
private bool _isPopupOpen;
private StyleSheet? _loadedUss;
// 메모리 누수 방지: 생성된 체크박스와 핸들러 추적
private readonly List<(UTKCheckBox checkBox, Action<bool> handler)> _checkBoxHandlers = new();
#endregion
#region Events
/// <summary>선택 변경 이벤트 (선택된 인덱스 목록, 선택된 값 목록)</summary>
public event Action<List<int>, List<string>>? OnSelectionChanged;
#endregion
#region Properties
/// <summary>라벨 텍스트</summary>
[UxmlAttribute("label")]
public string Label
{
get => _label;
set
{
_label = value;
if (_labelElement != null)
{
_labelElement.text = value;
_labelElement.style.display = string.IsNullOrEmpty(value)
? DisplayStyle.None
: DisplayStyle.Flex;
}
}
}
/// <summary>선택 가능한 옵션 목록</summary>
[UxmlAttribute("choices")]
public List<string> Choices
{
get => _choices;
set
{
_choices = value ?? new List<string>();
_selectedIndices.Clear();
RebuildOptions();
UpdateDisplayText();
}
}
/// <summary>선택된 인덱스 목록</summary>
public List<int> SelectedIndices
{
get => _selectedIndices.OrderBy(x => x).ToList();
}
/// <summary>선택된 값 목록</summary>
public List<string> SelectedValues
{
get => _selectedIndices
.OrderBy(x => x)
.Where(i => i >= 0 && i < _choices.Count)
.Select(i => _choices[i])
.ToList();
}
/// <summary>아무것도 선택되지 않았을 때 표시할 텍스트</summary>
[UxmlAttribute("placeholder")]
public string Placeholder
{
get => _placeholder;
set
{
_placeholder = value;
UpdateDisplayText();
}
}
/// <summary>활성화 상태</summary>
[UxmlAttribute("is-enabled")]
public bool IsEnabled
{
get => _isEnabled;
set
{
_isEnabled = value;
SetEnabled(value);
EnableInClassList("utk-multiselect-dropdown--disabled", !value);
}
}
#endregion
#region Constructor
public UTKMultiSelectDropdown() : base()
{
UTKThemeManager.Instance.ApplyThemeToElement(this);
_loadedUss = Resources.Load<StyleSheet>(USS_PATH);
if (_loadedUss != null)
{
styleSheets.Add(_loadedUss);
}
CreateUI();
SetupEvents();
SubscribeToThemeChanges();
}
public UTKMultiSelectDropdown(string label, List<string>? choices = null) : this()
{
Label = label;
if (choices != null)
{
Choices = choices;
}
}
#endregion
#region Setup
private void CreateUI()
{
AddToClassList("utk-multiselect-dropdown");
// 라벨
_labelElement = new Label(_label);
_labelElement.AddToClassList("utk-multiselect-dropdown__label");
_labelElement.style.display = string.IsNullOrEmpty(_label)
? DisplayStyle.None
: DisplayStyle.Flex;
Add(_labelElement);
// 입력 컨테이너
_inputContainer = new VisualElement();
_inputContainer.AddToClassList("utk-multiselect-dropdown__input");
Add(_inputContainer);
// 표시 라벨
_displayLabel = new Label(_placeholder);
_displayLabel.AddToClassList("utk-multiselect-dropdown__display");
_inputContainer.Add(_displayLabel);
// 드롭다운 아이콘 컨테이너 (회전 시 위치 고정용)
_dropdownIconContainer = new VisualElement();
_dropdownIconContainer.AddToClassList("utk-multiselect-dropdown__icon-container");
_inputContainer.Add(_dropdownIconContainer);
// 드롭다운 아이콘 (Material Icons 사용)
_dropdownIcon = new UTKLabel(UTKMaterialIcons.ArrowDropDown, 24);
_dropdownIcon.AddToClassList("utk-multiselect-dropdown__icon");
_dropdownIconContainer.Add(_dropdownIcon);
// 팝업 레이어: 화면 전체를 덮는 컨테이너 (OpenPopup 시 panel.visualTree에 추가)
// pickingMode 기본값(Position) 유지 — 이벤트 경로에 포함되어야
// UI Toolkit 패널 내 어디를 클릭해도 OnPanelPointerDown이 발화됨
_popupLayer = new VisualElement();
_popupLayer.name = "utk-multiselect-dropdown-layer";
_popupLayer.style.position = Position.Absolute;
_popupLayer.style.left = 0;
_popupLayer.style.top = 0;
_popupLayer.style.right = 0;
_popupLayer.style.bottom = 0;
_popupLayer.style.display = DisplayStyle.None;
// 팝업 컨테이너 (실제 옵션 목록이 표시되는 영역)
_popupContainer = new VisualElement();
_popupContainer.AddToClassList("utk-multiselect-dropdown__popup");
_popupLayer.Add(_popupContainer);
// 옵션 스크롤뷰
_optionsScrollView = new ScrollView(ScrollViewMode.Vertical);
_optionsScrollView.AddToClassList("utk-multiselect-dropdown__options");
_popupContainer.Add(_optionsScrollView);
}
private void SetupEvents()
{
// 입력 컨테이너 클릭 시 팝업 토글
_inputContainer?.RegisterCallback<ClickEvent>(OnInputClicked);
// 외부 클릭 감지를 위한 루트 패널 이벤트
RegisterCallback<AttachToPanelEvent>(OnAttachedToPanel);
RegisterCallback<DetachFromPanelEvent>(OnDetachedFromPanel);
}
private void SubscribeToThemeChanges()
{
UTKThemeManager.Instance.OnThemeChanged += OnThemeChanged;
RegisterCallback<AttachToPanelEvent>(OnAttachToPanelForTheme);
RegisterCallback<DetachFromPanelEvent>(OnDetachFromPanelForTheme);
}
private void OnAttachToPanelForTheme(AttachToPanelEvent evt)
{
UTKThemeManager.Instance.OnThemeChanged -= OnThemeChanged;
UTKThemeManager.Instance.OnThemeChanged += OnThemeChanged;
UTKThemeManager.Instance.ApplyThemeToElement(this);
}
private void OnDetachFromPanelForTheme(DetachFromPanelEvent evt)
{
UTKThemeManager.Instance.OnThemeChanged -= OnThemeChanged;
}
private void OnThemeChanged(UTKTheme theme)
{
UTKThemeManager.Instance.ApplyThemeToElement(this);
if (_popupLayer != null && _isPopupOpen)
{
UTKThemeManager.Instance.ApplyThemeToElement(_popupLayer);
}
}
#endregion
#region Event Handlers
private void OnInputClicked(ClickEvent evt)
{
if (!_isEnabled) return;
_isPopupOpen = !_isPopupOpen;
if (_popupContainer != null)
{
if (_isPopupOpen)
{
OpenPopup();
}
else
{
ClosePopup();
}
}
EnableInClassList("utk-multiselect-dropdown--open", _isPopupOpen);
evt.StopPropagation();
}
private void OpenPopup()
{
if (_popupLayer == null || _popupContainer == null || _inputContainer == null || panel == null) return;
// 아이콘 변경 (회전 대신 다른 아이콘 사용)
if (_dropdownIcon is UTKLabel iconLabel)
{
iconLabel.SetMaterialIcon(UTKMaterialIcons.ArrowDropUp);
}
// _popupLayer를 panel.visualTree에 추가 (한 번만 수행)
if (_popupLayer.parent != panel.visualTree)
{
_popupLayer.RemoveFromHierarchy();
panel.visualTree.Add(_popupLayer);
UTKThemeManager.Instance.ApplyThemeToElement(_popupLayer);
if (_loadedUss != null && !_popupLayer.styleSheets.Contains(_loadedUss))
{
_popupLayer.styleSheets.Add(_loadedUss);
}
foreach (var (checkBox, handler) in _checkBoxHandlers)
{
UTKThemeManager.Instance.ApplyThemeToElement(checkBox);
}
}
// 드롭다운의 월드 위치 계산
var inputBounds = _inputContainer.worldBound;
_popupContainer.style.position = Position.Absolute;
_popupContainer.style.left = inputBounds.x;
_popupContainer.style.top = inputBounds.yMax + 2; // 2px 간격
_popupContainer.style.width = inputBounds.width;
_popupLayer.style.display = DisplayStyle.Flex;
}
private void OnAttachedToPanel(AttachToPanelEvent evt)
{
if (panel != null)
{
panel.visualTree.RegisterCallback<PointerDownEvent>(OnPanelPointerDown, TrickleDown.TrickleDown);
}
}
private void OnDetachedFromPanel(DetachFromPanelEvent evt)
{
if (panel != null)
{
panel.visualTree.UnregisterCallback<PointerDownEvent>(OnPanelPointerDown, TrickleDown.TrickleDown);
}
}
private void OnPanelPointerDown(PointerDownEvent evt)
{
if (!_isPopupOpen) return;
var target = evt.target as VisualElement;
if (target == null) return;
// 입력 컨테이너 클릭 확인
if (_inputContainer != null && target.FindCommonAncestor(_inputContainer) == _inputContainer)
{
return; // 입력 영역 클릭이면 무시
}
// 팝업 컨테이너 클릭 확인 (팝업이 루트로 이동했으므로 직접 확인)
if (_popupContainer != null && target.FindCommonAncestor(_popupContainer) == _popupContainer)
{
return; // 팝업 내부 클릭이면 무시
}
// 외부 클릭이면 팝업 닫기
ClosePopup();
}
private void OnOptionToggled(int index, bool isChecked)
{
if (isChecked)
{
_selectedIndices.Add(index);
}
else
{
_selectedIndices.Remove(index);
}
UpdateDisplayText();
OnSelectionChanged?.Invoke(SelectedIndices, SelectedValues);
}
#endregion
#region Methods
/// <summary>
/// 옵션 목록 설정
/// </summary>
public void SetOptions(List<string> options)
{
Choices = options;
}
/// <summary>
/// 인덱스로 선택 설정 (알림 발생)
/// </summary>
public void SetSelectedIndices(List<int> indices, bool notify = true)
{
_selectedIndices.Clear();
foreach (var index in indices)
{
if (index >= 0 && index < _choices.Count)
{
_selectedIndices.Add(index);
}
}
RebuildOptions();
UpdateDisplayText();
if (notify)
{
OnSelectionChanged?.Invoke(SelectedIndices, SelectedValues);
}
}
/// <summary>
/// 값으로 선택 설정 (알림 발생)
/// </summary>
public void SetSelectedValues(List<string> values, bool notify = true)
{
var indices = new List<int>();
foreach (var value in values)
{
var index = _choices.IndexOf(value);
if (index >= 0)
{
indices.Add(index);
}
}
SetSelectedIndices(indices, notify);
}
/// <summary>
/// 모든 항목 선택
/// </summary>
public void SelectAll()
{
var allIndices = Enumerable.Range(0, _choices.Count).ToList();
SetSelectedIndices(allIndices, notify: true);
}
/// <summary>
/// 모든 선택 해제
/// </summary>
public void ClearSelection()
{
SetSelectedIndices(new List<int>(), notify: true);
}
private void ClosePopup()
{
_isPopupOpen = false;
// 아이콘 복원
if (_dropdownIcon is UTKLabel iconLabel)
{
iconLabel.SetMaterialIcon(UTKMaterialIcons.ArrowDropDown);
}
// 레이어를 숨김 처리 (DisplayStyle 토글 — 레이아웃 재계산 최소화)
if (_popupLayer != null)
{
_popupLayer.style.display = DisplayStyle.None;
}
EnableInClassList("utk-multiselect-dropdown--open", false);
}
private void RebuildOptions()
{
if (_optionsScrollView == null) return;
// 기존 체크박스 이벤트 정리 및 Dispose
ClearCheckBoxes();
_optionsScrollView.Clear();
for (int i = 0; i < _choices.Count; i++)
{
var index = i; // 클로저 캡처 방지
var optionContainer = new VisualElement();
optionContainer.AddToClassList("utk-multiselect-dropdown__option");
var checkBox = new UTKCheckBox(_choices[i], _selectedIndices.Contains(i));
checkBox.AddToClassList("utk-multiselect-dropdown__toggle");
// 핸들러 생성 및 등록
Action<bool> handler = (isOn) =>
{
OnOptionToggled(index, isOn);
};
checkBox.OnValueChanged += handler;
// 체크박스와 핸들러를 함께 추적
_checkBoxHandlers.Add((checkBox, handler));
// 마우스 호버 이벤트
optionContainer.RegisterCallback<MouseEnterEvent>(_ =>
{
optionContainer.AddToClassList("utk-multiselect-dropdown__option--hover");
});
optionContainer.RegisterCallback<MouseLeaveEvent>(_ =>
{
optionContainer.RemoveFromClassList("utk-multiselect-dropdown__option--hover");
});
optionContainer.Add(checkBox);
_optionsScrollView.Add(optionContainer);
}
}
private void ClearCheckBoxes()
{
foreach (var (checkBox, handler) in _checkBoxHandlers)
{
checkBox.OnValueChanged -= handler;
checkBox.Dispose();
}
_checkBoxHandlers.Clear();
}
private void UpdateDisplayText()
{
if (_displayLabel == null) return;
if (_selectedIndices.Count == 0)
{
_displayLabel.text = _placeholder;
_displayLabel.AddToClassList("utk-multiselect-dropdown__display--placeholder");
}
else
{
var selectedValues = SelectedValues;
_displayLabel.text = string.Join(", ", selectedValues);
_displayLabel.RemoveFromClassList("utk-multiselect-dropdown__display--placeholder");
}
}
#endregion
#region IDisposable
public void Dispose()
{
if (_disposed) return;
_disposed = true;
// 체크박스 이벤트 정리
ClearCheckBoxes();
UTKThemeManager.Instance.OnThemeChanged -= OnThemeChanged;
UnregisterCallback<AttachToPanelEvent>(OnAttachToPanelForTheme);
UnregisterCallback<DetachFromPanelEvent>(OnDetachFromPanelForTheme);
OnSelectionChanged = null;
_inputContainer?.UnregisterCallback<ClickEvent>(OnInputClicked);
if (panel != null)
{
panel.visualTree.UnregisterCallback<PointerDownEvent>(OnPanelPointerDown);
}
// 팝업 레이어 정리
_popupLayer?.RemoveFromHierarchy();
}
#endregion
}
}