EnglewoodLAB/Assets/Sample/UIToolkit/UTKSideBarSample.cs

#nullable enable
using UnityEngine;
using UnityEngine.UIElements;
using UVC.UIToolkit;

/// <summary>
/// UTKSideBar 4방향 사용 예제.
/// Left / Right / Top / Bottom 사이드바를 화면 4면에 절대 위치로 배치합니다.
/// </summary>
public class UTKSideBarSample : MonoBehaviour
{
    [SerializeField] private UIDocument? _uiDocument;

    private UTKSideBar? _sidebarLeft;
    private UTKSideBar? _sidebarRight;
    private UTKSideBar? _sidebarTop;
    private UTKSideBar? _sidebarBottom;

    private void Start()
    {
        if (_uiDocument == null)
        {
            Debug.LogError("[UTKSideBarSample] UIDocument가 연결되지 않았습니다.");
            return;
        }

        var rootVe = _uiDocument.rootVisualElement;
        UTKThemeManager.Instance.RegisterRoot(rootVe);

        var container = rootVe.Q<VisualElement>("root") ?? rootVe;

        // container를 relative 기준으로 설정해 absolute 자식이 이를 기준으로 배치됨
        container.style.position = Position.Relative;
        container.style.flexGrow = 1;

        _sidebarLeft   = SetupSideBar(container, UTKSideBar.SideBarPlacement.Left,   "Left");
        _sidebarRight  = SetupSideBar(container, UTKSideBar.SideBarPlacement.Right,  "Right");
        _sidebarTop    = SetupSideBar(container, UTKSideBar.SideBarPlacement.Top,    "Top");
        _sidebarBottom = SetupSideBar(container, UTKSideBar.SideBarPlacement.Bottom, "Bottom");
    }

    private UTKSideBar SetupSideBar(VisualElement container, UTKSideBar.SideBarPlacement placement, string label)
    {
        bool isVertical = placement == UTKSideBar.SideBarPlacement.Left
                       || placement == UTKSideBar.SideBarPlacement.Right;
        bool isRight = placement == UTKSideBar.SideBarPlacement.Right;

        var sidebar = new UTKSideBar
        {
            Placement           = placement,
            ButtonPaddingTop    = isVertical ? 16 : 0,
            ButtonPaddingBottom = isVertical ? 8 : 0,
            ButtonPaddingLeft   = isVertical ? 0 : 16,
            ButtonPaddingRight  = isVertical ? 0 : 8,
            ButtonGap           = 0,
            TailPaddingTop      = isVertical ? 8 : 0,
            TailPaddingBottom   = isVertical ? 16 : 0,
            TailPaddingLeft     = isVertical ? 0 : 8,
            TailPaddingRight    = isVertical ? 0 : 16,
            TailGap             = 4,
            BarSize             = isRight ? 28 : 48,
        };
        if(isRight) {
            sidebar.ShowActiveBar = false; // Right 사이드바는 활성 아이템 표시 바 숨김
            sidebar.ButtonGap = 10; // 버튼 간격 추가
            sidebar.TailGap = 10; // Tail 버튼 간격 추가
        }

        // 4면 절대 위치 배치: container 기준으로 각 면에 고정
        sidebar.style.position = Position.Absolute;
        switch (placement)
        {
            case UTKSideBar.SideBarPlacement.Left:
                sidebar.style.left   = 0;
                sidebar.style.top    = 0;
                sidebar.style.bottom = 0;
                sidebar.style.right  = StyleKeyword.Auto;
                break;
            case UTKSideBar.SideBarPlacement.Right:
                sidebar.style.right  = 0;
                sidebar.style.top    = 0;
                sidebar.style.bottom = 0;
                sidebar.style.left   = StyleKeyword.Auto;
                break;
            case UTKSideBar.SideBarPlacement.Top:
                sidebar.style.top    = 0;
                sidebar.style.left   = 400;
                sidebar.style.right  = 400;
                sidebar.style.bottom = StyleKeyword.Auto;
                break;
            case UTKSideBar.SideBarPlacement.Bottom:
                sidebar.style.bottom = 0;
                sidebar.style.left   = 400;
                sidebar.style.right  = 400;
                sidebar.style.top    = StyleKeyword.Auto;
                break;
        }

        // 메인 아이템 1: 탐색기
        var content1 = new UTKAccordionListWindow { Title = $"[{label}] 탐색기" };
        if (isRight)
        {
            // Right: UTKImageToggleButton 사용 (On/Off 아이콘 전환)
            content1.style.left = StyleKeyword.Auto;
            content1.style.right = 0;
            var toggleBtn1 = new UTKImageToggleButton(
                onIcon:  UTKMaterialIcons.FolderOpen,
                offIcon: UTKMaterialIcons.Folder,
                iconSize: 16
            ) { Size = new Vector2Int(20, 20) };
            sidebar.AddItem(toggleBtn1, content1);
        }
        else
        {
            var btn1 = new UTKButton("", UTKMaterialIcons.FolderOpen, UTKButton.ButtonVariant.Text, 24)
            {
                IconOnly = true,
                IconOnlyRadius = "0px",
                SizeVector = new Vector2Int(48, 48),
            };
            sidebar.AddItem(btn1, content1);
        }

        // 메인 아이템 2: 컴포넌트
        var content2 = new UTKComponentListWindow();
        if (isRight)
        {
            // Right: UTKImageToggleButton 사용 (UTKImageIcons - On/Off 아이콘 전환)
            var toggleBtn2 = new UTKImageToggleButton(
                onIcon:  UTKImageIcons.IconEye22x16,
                offIcon: UTKImageIcons.IconEyeClose22x16,
                iconSize: 16
            ) { Size = new Vector2Int(20, 20) };
            sidebar.AddItem(toggleBtn2, content2);
        }
        else
        {
            var btn2 = new UTKButton("", UTKMaterialIcons.WidgetMedium, UTKButton.ButtonVariant.Text, 24)
            {
                IconOnly = true,
                IconOnlyRadius = "0px",
                SizeVector = new Vector2Int(48, 48),
            };
            sidebar.AddItem(btn2, content2);
        }

        // Tail 버튼: 설정
        var settingsBtn = new UTKButton("", UTKMaterialIcons.Settings, UTKButton.ButtonVariant.Text, isRight ? 12 : 20)
        {
            IconOnly = true,
            SizeVector = isRight ? new Vector2Int(16, 16) : new Vector2Int(26, 26),
        };
        settingsBtn.OnClicked += () => Debug.Log($"[UTKSideBarSample] [{label}] 설정 클릭");
        sidebar.AddTailItem(settingsBtn);

        // Tail 버튼: 테마 토글
        var themeBtn = new UTKButton("", UTKMaterialIcons.DarkMode, UTKButton.ButtonVariant.Text, isRight ? 12 : 20)
        {
            IconOnly = true,
            SizeVector = isRight ? new Vector2Int(16, 16) : new Vector2Int(26, 26),
        };
        themeBtn.OnClicked += OnThemeToggleClicked;
        sidebar.AddTailItem(themeBtn);

        sidebar.OnItemActivated   += index => Debug.Log($"[UTKSideBarSample] [{label}] 활성화: {index}");
        sidebar.OnItemDeactivated += index => Debug.Log($"[UTKSideBarSample] [{label}] 비활성화: {index}");
        if(isRight) sidebar.ActivateItem(0); // Right 사이드바는 토글 버튼이므로 초기 활성화 상태 설정
        container.Add(sidebar);
        return sidebar;
    }

    private void OnThemeToggleClicked()
    {
        UTKThemeManager.Instance.ToggleTheme();
        Debug.Log($"[UTKSideBarSample] 테마 전환: {UTKThemeManager.Instance.CurrentTheme}");
    }

    private void OnDestroy()
    {
        _sidebarLeft?.Dispose();
        _sidebarRight?.Dispose();
        _sidebarTop?.Dispose();
        _sidebarBottom?.Dispose();
    }
}