Release 0.4 결과

Source: Dev.to

내가 한 일

목표는 기본 트리‑스타일 모습을:

을 탭 형태로 바꾸는 것이었습니다. 새로운 카테고리와 엔티티를 만드는 로직은 이미 존재했기 때문에, 대부분 UI 작업이었습니다.

탭 시스템 구축

핵심 로직은 PandaEditor 씬에 있습니다. Godot 에디터에서는 각 씬에 노드, 컨테이너, UI 요소 등을 추가할 수 있습니다.

먼저 씬에 TabContainer를 추가하고 숨김 상태로 설정했습니다. 설정이 선택되면 탭이 채워지고 보이게 됩니다.

설정 추가

pandora-settings는 설정을 추가하는 코드를 담고 있으므로, 탭 뷰로 전환하기 위한 불리언 토글을 추가했습니다:

const USE_CATEGORY_TABS = "pandora/use_category_tabs"

static func get_use_category_tabs() -> bool:
    return ProjectSettings.get_setting(USE_CATEGORY_TABS, false)

데이터 채우기 수정

다음으로 pandora-editor.gd에 탭 채우기 로직을 추가했습니다. 기본적으로 데이터를 처리하던 _populate_data() 함수가 있었지만, 탭 설정이 활성화됐는지 확인하도록 수정했습니다:

var use_tabs = PandoraSettings.get_use_category_tabs()

if use_tabs:
    await _populate_tabs(data)
else:
    tree.set_data(data)

루트 카테고리용 탭 만들기

데이터를 트리 대신 각 루트 카테고리마다 탭을 만들도록 _populate_tabs() 함수를 구현했습니다:

# Create tabs for root categories
for i in range(root_categories.size()):
    var tab_content = Control.new()
    category_tab_container.add_child(tab_content)
    category_tab_container.set_tab_title(i, root_categories[i].get_entity_name())

탭 변경 처리

탭이 선택될 때 해당 카테고리의 자식만 보이도록 트리를 필터링하기 위해 _on_tab_changed()를 추가했습니다:

func _populate_tabs(root_categories: Array[PandoraEntity]) -> void:
    # ... create tabs ...

    # Store root categories
    category_tab_container.set_meta("root_categories", root_categories)

    # Connect tab change signal
    category_tab_container.tab_changed.connect(_on_tab_changed)

func _on_tab_changed(tab_index: int) -> void:
    var root_categories = category_tab_container.get_meta("root_categories", []) as Array
    var selected_category = root_categories[tab_index]

    # Filter tree to show only entities in the selected category
    var filtered_data: Array[PandoraEntity] = []
    filtered_data.assign(selected_category._children)
    tree.set_data(filtered_data)

새 카테고리를 위한 “+” 탭 추가

원래 뷰에는 탭 바에서 카테고리를 만들 방법이 없었으므로, 루트 카테고리 뒤에 “+” 탭을 추가했습니다:

func _populate_tabs(root_categories: Array[PandoraEntity]) -> void:
    # ... create category tabs ...

    # Add '+' tab for creating new root categories
    var add_tab_content = Control.new()
    add_tab_content.name = "+"
    category_tab_container.add_child(add_tab_content)

그 후 _on_tab_changed()를 업데이트하여 “+” 탭이 클릭될 때 새 루트 카테고리를 생성하도록 했습니다:

func _on_tab_changed(tab_index: int) -> void:
    var root_categories = category_tab_container.get_meta("root_categories", []) as Array

    # Create new root category if '+' tab is selected
    if tab_index >= root_categories.size():
        _create_root_category()
        return

    # Existing handling for regular tabs...

이름 변경 / 삭제를 위한 컨텍스트 메뉴

카테고리 이름을 바꾸고 삭제할 수 있도록 탭 바에 오른쪽 클릭 컨텍스트 메뉴를 추가했습니다:

func _on_tab_bar_input(event: InputEvent) -> void:
    if event is InputEventMouseButton and event.button_index == MOUSE_BUTTON_RIGHT and event.pressed:
        var tab_bar = category_tab_container.get_tab_bar()
        var clicked_tab = tab_bar.get_tab_idx_at_point(event.position)

        if clicked_tab >= 0:
            var root_categories = category_tab_container.get_meta("root_categories", []) as Array

            # Don't show menu for '+' tab
            if clicked_tab >= root_categories.size():
                return

            # Store which tab was clicked
            category_tab_container.set_meta("context_menu_tab", clicked_tab)

            # Show context menu
            tab_context_menu.position = tab_bar.get_screen_position() + event.position
            tab_context_menu.popup()

func _on_tab_context_menu_pressed(id: int) -> void:
    var clicked_tab = category_tab_container.get_meta("context_menu_tab", -1)
    if clicked_tab = root_categories.size():
        return

    var category = root_categories[clicked_tab]

    match id:
        0:  # Rename
            _show_rename_dialog(category, clicked_tab)
        1:  # Delete
            _show_delete_confirmation(category, clicked_tab)

최종 뷰

탭, “+” 버튼, 컨텍스트 메뉴가 모두 구현된 후 에디터는 다음과 같이 보입니다:

그리고 설정 토글이 프로젝트 설정에 나타납니다:

남은 유일한 문제는 설정이 프로젝트를 다시 로드할 때까지 적용되지 않는 것이었습니다. 설정이 변경될 때 간단한 리로드 루틴을 추가하여 해결했습니다.