Dropdown popup 스타일 가이드 적용 및 다중 선택 Dropdown 추가

This commit is contained in:
logonkhi
2026-02-06 19:54:11 +09:00
parent 18af2fc9c6
commit a7fc12f32f
44 changed files with 3477 additions and 326 deletions

View File

@@ -33,6 +33,7 @@
justify-content: center;
transition-duration: var(--anim-fast);
transition-property: border-color, background-color;
cursor: resource('UIToolkit/Images/cursor_point_white_32') 14 5; /* 클릭 가능 커서 */
}
.utk-checkbox:hover .utk-checkbox__box {
@@ -43,6 +44,7 @@
.utk-checkbox--indeterminate .utk-checkbox__box {
border-color: var(--color-btn-primary);
background-color: var(--color-btn-primary);
cursor: resource('UIToolkit/Images/cursor_point_white_32') 14 5; /* 클릭 가능 커서 */
}
/* ===================================
@@ -53,7 +55,7 @@
width: 14px;
height: 14px;
font-size: 12px;
color: var(--color-text-on-primary);
color: var(--color-base-01);
-unity-text-align: middle-center;
-unity-font-style: bold;
opacity: 0;
@@ -65,6 +67,7 @@
left: 50%;
top: 50%;
translate: -50% -50%;
cursor: resource('UIToolkit/Images/cursor_point_white_32') 14 5; /* 클릭 가능 커서 */
}
.utk-checkbox--checked .utk-checkbox__icon,
@@ -80,6 +83,7 @@
margin-left: var(--space-m);
font-size: var(--font-size-body2);
color: var(--color-text-primary);
cursor: resource('UIToolkit/Images/cursor_point_white_32') 14 5; /* 클릭 가능 커서 */
}
/* ===================================

View File

@@ -1,110 +0,0 @@
/*
* ===================================
* UTKDropdown.uss
* Unity DropdownField 래핑 스타일
* ===================================
*/
/* ===================================
Base Container
=================================== */
.utk-dropdown {
flex-direction: row;
align-items: center;
}
/* ===================================
Label
=================================== */
.utk-dropdown > .unity-label {
min-width: 60px;
margin-right: var(--space-m);
font-size: var(--font-size-body2);
color: var(--color-text-primary);
}
/* ===================================
Dropdown Input (Button)
=================================== */
.utk-dropdown > .unity-popup-field__input {
flex-direction: row;
align-items: center;
justify-content: space-between;
min-width: 120px;
height: var(--size-input-height);
padding-top: 0px;
padding-bottom: 0px;
padding-left: var(--space-m);
padding-right: var(--space-m);
background-color: var(--color-bg-input);
border-width: var(--border-width);
border-color: var(--color-border);
border-radius: var(--radius-s);
cursor: resource('UIToolkit/Images/cursor_point_white_32') 14 5;
transition-duration: var(--anim-fast);
transition-property: border-color, background-color;
}
.utk-dropdown > .unity-popup-field__input:hover {
border-color: var(--color-btn-primary);
}
.utk-dropdown:focus > .unity-popup-field__input {
border-color: var(--color-border-focus);
}
/* ===================================
Selected Text
=================================== */
.utk-dropdown .unity-text-element {
flex-grow: 1;
font-size: var(--font-size-body2);
color: var(--color-text-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ===================================
Arrow Icon
=================================== */
.utk-dropdown .unity-base-popup-field__arrow {
width: 10px;
height: 8px;
-unity-background-image-tint-color: var(--color-text-secondary);
margin-left: var(--space-s);
}
/* ===================================
Disabled State
=================================== */
.utk-dropdown--disabled {
cursor: arrow;
}
.utk-dropdown--disabled > .unity-popup-field__input {
background-color: var(--color-btn-disabled);
cursor: arrow;
}
.utk-dropdown--disabled > .unity-popup-field__input:hover {
border-color: var(--color-border);
}
.utk-dropdown--disabled .unity-text-element {
color: var(--color-text-disabled);
}
.utk-dropdown--disabled .unity-base-popup-field__arrow {
-unity-background-image-tint-color: var(--color-text-disabled);
}
.utk-dropdown--disabled > .unity-label {
color: var(--color-text-disabled);
}

View File

@@ -0,0 +1,211 @@
/*
* ===================================
* UTKDropdown.uss
* 단일 선택 드롭다운 스타일
* ===================================
*/
/* ===================================
Base Container
=================================== */
.utk-dropdown {
flex-direction: row;
align-items: center;
position: relative;
overflow: visible;
}
/* ===================================
Label
=================================== */
.utk-dropdown__label {
min-width: 60px;
margin-right: var(--space-m);
font-size: var(--font-size-body2);
color: var(--color-text-primary);
-unity-font-style: normal;
}
/* ===================================
Input Container (Display Field)
=================================== */
.utk-dropdown__input {
flex-direction: row;
align-items: center;
justify-content: space-between;
min-width: 120px;
flex-grow: 1;
height: var(--size-input-height);
padding-top: 0px;
padding-bottom: 0px;
padding-left: var(--space-m);
padding-right: 0;
background-color: var(--color-bg-input);
border-width: var(--border-width);
border-color: var(--color-border);
border-radius: var(--radius-s);
cursor: resource('UIToolkit/Images/cursor_point_white_32') 14 5;
transition-duration: var(--anim-fast);
transition-property: border-color, background-color;
}
.utk-dropdown__input:hover {
border-color: var(--color-btn-primary);
}
.utk-dropdown--open .utk-dropdown__input {
border-color: var(--color-border-focus);
}
/* ===================================
Display Label
=================================== */
.utk-dropdown__display {
flex-grow: 1;
flex-shrink: 1;
min-width: 0;
font-size: var(--font-size-body2);
color: var(--color-text-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
-unity-text-align: middle-left;
}
.utk-dropdown__display--placeholder {
color: var(--color-text-secondary);
}
/* ===================================
Dropdown Icon Container
=================================== */
.utk-dropdown__icon-container {
flex-shrink: 0;
width: 24px;
height: 24px;
margin-left: var(--space-s);
margin-right: 0;
align-items: center;
justify-content: center;
}
/* ===================================
Dropdown Icon
=================================== */
.utk-dropdown__icon {
width: 100%;
height: 100%;
font-size: 18px;
color: var(--color-text-secondary);
-unity-text-align: middle-center;
}
/* ===================================
Popup Container
=================================== */
.utk-dropdown__popup {
max-height: 300px;
background-color: var(--color-bg-elevated);
border-width: var(--border-width);
border-color: var(--color-border);
border-radius: var(--radius-s);
padding: var(--space-xs);
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}
/* ===================================
Options ScrollView
=================================== */
.utk-dropdown__options {
max-height: 280px;
}
.utk-dropdown__options > .unity-scroll-view__content-container {
flex-direction: column;
}
/* ===================================
Option Item
=================================== */
.utk-dropdown__option {
position: relative;
flex-direction: row;
align-items: center;
padding: var(--space-xs) var(--space-s);
padding-left: 36px; /* 체크 아이콘 공간 확보: 8px(padding) + 20px(icon) + 8px(gap) */
border-radius: var(--radius-s);
transition-duration: var(--anim-fast);
transition-property: background-color;
cursor: resource('UIToolkit/Images/cursor_point_white_32') 14 5;
}
.utk-dropdown__option:hover,
.utk-dropdown__option--hover {
background-color: var(--color-bg-hover);
}
/* ===================================
Check Icon (Selected Indicator)
=================================== */
.utk-dropdown__check-icon {
position: absolute;
left: 8px;
width: 20px;
height: 20px;
font-size: 16px;
color: var(--color-btn-primary);
-unity-text-align: middle-center;
cursor: resource('UIToolkit/Images/cursor_point_white_32') 14 5; /* 클릭 가능 커서 */
}
/* ===================================
Option Label
=================================== */
.utk-dropdown__option-label {
flex-grow: 1;
font-size: var(--font-size-body2);
color: var(--color-text-primary);
margin-left: 0;
padding-left: 0;
cursor: resource('UIToolkit/Images/cursor_point_white_32') 14 5; /* 클릭 가능 커서 */
}
/* ===================================
Disabled State
=================================== */
.utk-dropdown--disabled {
cursor: arrow;
}
.utk-dropdown--disabled .utk-dropdown__label {
color: var(--color-text-disabled);
}
.utk-dropdown--disabled .utk-dropdown__input {
background-color: var(--color-btn-disabled);
cursor: arrow;
}
.utk-dropdown--disabled .utk-dropdown__input:hover {
border-color: var(--color-border);
}
.utk-dropdown--disabled .utk-dropdown__display {
color: var(--color-text-disabled);
}
.utk-dropdown--disabled .utk-dropdown__icon {
color: var(--color-text-disabled);
}

View File

@@ -1,5 +1,5 @@
fileFormatVersion: 2
guid: 11125bf6e9398df479a3ca01d6b286a9
guid: 2320c89b336d59c45b16b935c4f311b4
ScriptedImporter:
internalIDToNameTable: []
externalObjects: {}

View File

@@ -1,110 +0,0 @@
/*
* ===================================
* UTKEnumDropDown.uss
* Unity EnumField 래핑 스타일
* ===================================
*/
/* ===================================
Base Container
=================================== */
.utk-enum-dropdown {
flex-direction: row;
align-items: center;
}
/* ===================================
Label
=================================== */
.utk-enum-dropdown > .unity-label {
min-width: 60px;
margin-right: var(--space-m);
font-size: var(--font-size-body2);
color: var(--color-text-primary);
}
/* ===================================
Dropdown Input (Button)
=================================== */
.utk-enum-dropdown > .unity-enum-field__input {
flex-direction: row;
align-items: center;
justify-content: space-between;
min-width: 120px;
height: var(--size-input-height);
padding-top: 0px;
padding-bottom: 0px;
padding-left: var(--space-m);
padding-right: var(--space-m);
background-color: var(--color-bg-input);
border-width: var(--border-width);
border-color: var(--color-border);
border-radius: var(--radius-s);
cursor: resource('UIToolkit/Images/cursor_point_white_32') 14 5;
transition-duration: var(--anim-fast);
transition-property: border-color, background-color;
}
.utk-enum-dropdown > .unity-enum-field__input:hover {
border-color: var(--color-btn-primary);
}
.utk-enum-dropdown:focus > .unity-enum-field__input {
border-color: var(--color-border-focus);
}
/* ===================================
Selected Text
=================================== */
.utk-enum-dropdown .unity-text-element {
flex-grow: 1;
font-size: var(--font-size-body2);
color: var(--color-text-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ===================================
Arrow Icon
=================================== */
.utk-enum-dropdown .unity-enum-field__arrow {
width: 10px;
height: 8px;
-unity-background-image-tint-color: var(--color-text-secondary);
margin-left: var(--space-s);
}
/* ===================================
Disabled State
=================================== */
.utk-enum-dropdown--disabled {
cursor: arrow;
}
.utk-enum-dropdown--disabled > .unity-enum-field__input {
background-color: var(--color-btn-disabled);
cursor: arrow;
}
.utk-enum-dropdown--disabled > .unity-enum-field__input:hover {
border-color: var(--color-border);
}
.utk-enum-dropdown--disabled .unity-text-element {
color: var(--color-text-disabled);
}
.utk-enum-dropdown--disabled .unity-enum-field__arrow {
-unity-background-image-tint-color: var(--color-text-disabled);
}
.utk-enum-dropdown--disabled > .unity-label {
color: var(--color-text-disabled);
}

View File

@@ -0,0 +1,211 @@
/*
* ===================================
* UTKEnumDropDown.uss
* Enum 선택 드롭다운 스타일
* ===================================
*/
/* ===================================
Base Container
=================================== */
.utk-enum-dropdown {
flex-direction: row;
align-items: center;
position: relative;
overflow: visible;
}
/* ===================================
Label
=================================== */
.utk-enum-dropdown__label {
min-width: 60px;
margin-right: var(--space-m);
font-size: var(--font-size-body2);
color: var(--color-text-primary);
-unity-font-style: normal;
}
/* ===================================
Input Container (Display Field)
=================================== */
.utk-enum-dropdown__input {
flex-direction: row;
align-items: center;
justify-content: space-between;
min-width: 120px;
flex-grow: 1;
height: var(--size-input-height);
padding-top: 0px;
padding-bottom: 0px;
padding-left: var(--space-m);
padding-right: 0;
background-color: var(--color-bg-input);
border-width: var(--border-width);
border-color: var(--color-border);
border-radius: var(--radius-s);
cursor: resource('UIToolkit/Images/cursor_point_white_32') 14 5;
transition-duration: var(--anim-fast);
transition-property: border-color, background-color;
}
.utk-enum-dropdown__input:hover {
border-color: var(--color-btn-primary);
}
.utk-enum-dropdown--open .utk-enum-dropdown__input {
border-color: var(--color-border-focus);
}
/* ===================================
Display Label
=================================== */
.utk-enum-dropdown__display {
flex-grow: 1;
flex-shrink: 1;
min-width: 0;
font-size: var(--font-size-body2);
color: var(--color-text-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
-unity-text-align: middle-left;
}
.utk-enum-dropdown__display--placeholder {
color: var(--color-text-secondary);
}
/* ===================================
Dropdown Icon Container
=================================== */
.utk-enum-dropdown__icon-container {
flex-shrink: 0;
width: 24px;
height: 24px;
margin-left: var(--space-s);
margin-right: 0;
align-items: center;
justify-content: center;
}
/* ===================================
Dropdown Icon
=================================== */
.utk-enum-dropdown__icon {
width: 100%;
height: 100%;
font-size: 18px;
color: var(--color-text-secondary);
-unity-text-align: middle-center;
}
/* ===================================
Popup Container
=================================== */
.utk-enum-dropdown__popup {
max-height: 300px;
background-color: var(--color-bg-elevated);
border-width: var(--border-width);
border-color: var(--color-border);
border-radius: var(--radius-s);
padding: var(--space-xs);
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}
/* ===================================
Options ScrollView
=================================== */
.utk-enum-dropdown__options {
max-height: 280px;
}
.utk-enum-dropdown__options > .unity-scroll-view__content-container {
flex-direction: column;
}
/* ===================================
Option Item
=================================== */
.utk-enum-dropdown__option {
position: relative;
flex-direction: row;
align-items: center;
padding: var(--space-xs) var(--space-s);
padding-left: 36px; /* 체크 아이콘 공간 확보: 8px(padding) + 20px(icon) + 8px(gap) */
border-radius: var(--radius-s);
transition-duration: var(--anim-fast);
transition-property: background-color;
cursor: resource('UIToolkit/Images/cursor_point_white_32') 14 5;
}
.utk-enum-dropdown__option:hover,
.utk-enum-dropdown__option--hover {
background-color: var(--color-bg-hover);
}
/* ===================================
Check Icon (Selected Indicator)
=================================== */
.utk-enum-dropdown__check-icon {
position: absolute;
left: 8px;
width: 20px;
height: 20px;
font-size: 16px;
color: var(--color-btn-primary);
-unity-text-align: middle-center;
cursor: resource('UIToolkit/Images/cursor_point_white_32') 14 5; /* 클릭 가능 커서 */
}
/* ===================================
Option Label
=================================== */
.utk-enum-dropdown__option-label {
flex-grow: 1;
font-size: var(--font-size-body2);
color: var(--color-text-primary);
margin-left: 0;
padding-left: 0;
cursor: resource('UIToolkit/Images/cursor_point_white_32') 14 5; /* 클릭 가능 커서 */
}
/* ===================================
Disabled State
=================================== */
.utk-enum-dropdown--disabled {
cursor: arrow;
}
.utk-enum-dropdown--disabled .utk-enum-dropdown__label {
color: var(--color-text-disabled);
}
.utk-enum-dropdown--disabled .utk-enum-dropdown__input {
background-color: var(--color-btn-disabled);
cursor: arrow;
}
.utk-enum-dropdown--disabled .utk-enum-dropdown__input:hover {
border-color: var(--color-border);
}
.utk-enum-dropdown--disabled .utk-enum-dropdown__display {
color: var(--color-text-disabled);
}
.utk-enum-dropdown--disabled .utk-enum-dropdown__icon {
color: var(--color-text-disabled);
}

View File

@@ -1,5 +1,5 @@
fileFormatVersion: 2
guid: 428a9bf8ee8e97946a076de9f9ae9ac2
guid: 9e84333091e1fc440853703013572ea1
ScriptedImporter:
internalIDToNameTable: []
externalObjects: {}

View File

@@ -0,0 +1,214 @@
/*
* ===================================
* UTKMultiSelectDropdown.uss
* 다중 선택 드롭다운 스타일
* ===================================
*/
/* ===================================
Base Container
=================================== */
.utk-multiselect-dropdown {
flex-direction: row;
align-items: center;
position: relative;
overflow: visible;
}
/* ===================================
Label
=================================== */
.utk-multiselect-dropdown__label {
min-width: 60px;
margin-right: var(--space-m);
font-size: var(--font-size-body2);
color: var(--color-text-primary);
-unity-font-style: normal;
}
/* ===================================
Input Container (Display Field)
=================================== */
.utk-multiselect-dropdown__input {
flex-direction: row;
align-items: center;
justify-content: space-between;
min-width: 120px;
flex-grow: 1;
height: var(--size-input-height);
padding-top: 0px;
padding-bottom: 0px;
padding-left: var(--space-m);
padding-right: 0;
background-color: var(--color-bg-input);
border-width: var(--border-width);
border-color: var(--color-border);
border-radius: var(--radius-s);
cursor: resource('UIToolkit/Images/cursor_point_white_32') 14 5;
transition-duration: var(--anim-fast);
transition-property: border-color, background-color;
}
.utk-multiselect-dropdown__input:hover {
border-color: var(--color-btn-primary);
}
.utk-multiselect-dropdown--open .utk-multiselect-dropdown__input {
border-color: var(--color-border-focus);
}
/* ===================================
Display Label
=================================== */
.utk-multiselect-dropdown__display {
flex-grow: 1;
flex-shrink: 1;
min-width: 0;
font-size: var(--font-size-body2);
color: var(--color-text-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
-unity-text-align: middle-left;
}
.utk-multiselect-dropdown__display--placeholder {
color: var(--color-text-secondary);
}
/* ===================================
Dropdown Icon Container
=================================== */
.utk-multiselect-dropdown__icon-container {
flex-shrink: 0;
width: 24px;
height: 24px;
margin-left: var(--space-s);
margin-right: 0;
align-items: center;
justify-content: center;
}
/* ===================================
Dropdown Icon
=================================== */
.utk-multiselect-dropdown__icon {
width: 100%;
height: 100%;
font-size: 18px;
color: var(--color-text-secondary);
-unity-text-align: middle-center;
}
/* ===================================
Popup Container
=================================== */
.utk-multiselect-dropdown__popup {
max-height: 300px;
background-color: var(--color-bg-elevated);
border-width: var(--border-width);
border-color: var(--color-border);
border-radius: var(--radius-s);
padding: var(--space-xs);
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}
/* ===================================
Options ScrollView
=================================== */
.utk-multiselect-dropdown__options {
max-height: 280px;
}
.utk-multiselect-dropdown__options > .unity-scroll-view__content-container {
flex-direction: column;
}
/* ===================================
Option Item
=================================== */
.utk-multiselect-dropdown__option {
flex-direction: row;
align-items: center;
padding: var(--space-xs) var(--space-s);
border-radius: var(--radius-s);
transition-duration: var(--anim-fast);
transition-property: background-color;
}
.utk-multiselect-dropdown__option:hover,
.utk-multiselect-dropdown__option--hover {
background-color: var(--color-bg-hover);
}
/* ===================================
Toggle (Checkbox)
=================================== */
.utk-multiselect-dropdown__toggle {
flex-grow: 1;
margin: 0;
}
.utk-multiselect-dropdown__toggle > .unity-label {
font-size: var(--font-size-body2);
color: var(--color-text-primary);
padding-left: var(--space-s);
flex-grow: 1;
}
.utk-multiselect-dropdown__toggle > .unity-toggle__input {
flex-shrink: 0;
}
.utk-multiselect-dropdown__toggle > .unity-toggle__input > .unity-toggle__checkmark {
width: 16px;
height: 16px;
border-width: var(--border-width);
border-color: var(--color-border);
border-radius: var(--radius-xs);
background-color: var(--color-bg-input);
}
.utk-multiselect-dropdown__toggle:checked > .unity-toggle__input > .unity-toggle__checkmark {
background-color: var(--color-btn-primary);
border-color: var(--color-btn-primary);
}
/* ===================================
Disabled State
=================================== */
.utk-multiselect-dropdown--disabled {
cursor: arrow;
}
.utk-multiselect-dropdown--disabled .utk-multiselect-dropdown__label {
color: var(--color-text-disabled);
}
.utk-multiselect-dropdown--disabled .utk-multiselect-dropdown__input {
background-color: var(--color-btn-disabled);
cursor: arrow;
}
.utk-multiselect-dropdown--disabled .utk-multiselect-dropdown__input:hover {
border-color: var(--color-border);
}
.utk-multiselect-dropdown--disabled .utk-multiselect-dropdown__display {
color: var(--color-text-disabled);
}
.utk-multiselect-dropdown--disabled .utk-multiselect-dropdown__icon {
color: var(--color-text-disabled);
}

View File

@@ -0,0 +1,11 @@
fileFormatVersion: 2
guid: ac92d6de4f479c345969f036e1e56cf2
ScriptedImporter:
internalIDToNameTable: []
externalObjects: {}
serializedVersion: 2
userData:
assetBundleName:
assetBundleVariant:
script: {fileID: 12385, guid: 0000000000000000e000000000000000, type: 0}
disableValidation: 0

View File

@@ -12,6 +12,7 @@
.utk-vector2-field {
flex-direction: row;
align-items: center;
margin-right: 0;
}
/* ===================================
@@ -56,6 +57,11 @@
margin-right: 0;
}
.utk-vector2-field #unity-y-input #unity-text-input {
padding-right: 0;
}
/* Unity USS does not support :last-child pseudo-class */
/* .utk-vector2-field .unity-float-field:last-child {
margin-right: 0;

View File

@@ -12,6 +12,7 @@
.utk-vector3-field {
flex-direction: row;
align-items: center;
margin-right: 0;
}
/* ===================================

View File

@@ -1,5 +1,4 @@
<?xml version="1.0" encoding="utf-8"?>
<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:utk="UVC.UIToolkit">
<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:utk="UVC.UIToolkit" editor-extension-mode="False">
<ui:VisualElement name="container" class="utk-property-item-view-container">
<utk:UTKLabel name="label" text="Label" class="utk-property-item-view__label" />
<ui:VisualElement name="value-container" class="utk-property-item-view__value">

View File

@@ -1,13 +1,16 @@
<?xml version="1.0" encoding="utf-8"?>
<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:utk="UVC.UIToolkit">
<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:utk="UVC.UIToolkit" editor-extension-mode="False">
<ui:VisualElement name="container" class="utk-property-item-view-container">
<utk:UTKLabel name="label" text="Label" class="utk-property-item-view__label" />
<ui:VisualElement name="value-container" class="utk-property-item-view__value">
<utk:UTKInputField name="start-field" class="utk-property-item-view__field" />
<utk:UTKButton name="start-picker-btn" text="..." class="utk-property-item-view__picker-btn" />
<ui:VisualElement name="value-container" class="utk-property-item-view__value" style="flex-direction: column;">
<ui:VisualElement style="flex-grow: 1; flex-direction: row;">
<utk:UTKInputField name="start-field" class="utk-property-item-view__field" />
<utk:UTKButton name="start-picker-btn" text="..." class="utk-property-item-view__picker-btn" />
</ui:VisualElement>
<utk:UTKLabel text="~" class="utk-property-item-view__range-separator" />
<utk:UTKInputField name="end-field" class="utk-property-item-view__field" />
<utk:UTKButton name="end-picker-btn" text="..." class="utk-property-item-view__picker-btn" />
<ui:VisualElement style="flex-grow: 1; flex-direction: row;">
<utk:UTKInputField name="end-field" class="utk-property-item-view__field" />
<utk:UTKButton name="end-picker-btn" text="..." class="utk-property-item-view__picker-btn" />
</ui:VisualElement>
</ui:VisualElement>
</ui:VisualElement>
</ui:UXML>

View File

@@ -19,5 +19,6 @@
.utk-property-item-view--date-range .utk-property-item-view__range-separator {
margin: 0 8px;
justify-content: center;
-unity-text-align: middle-center;
}

View File

@@ -1,13 +1,16 @@
<?xml version="1.0" encoding="utf-8"?>
<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:utk="UVC.UIToolkit">
<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:utk="UVC.UIToolkit" editor-extension-mode="False">
<ui:VisualElement name="container" class="utk-property-item-view-container">
<utk:UTKLabel name="label" text="Label" class="utk-property-item-view__label" />
<ui:VisualElement name="value-container" class="utk-property-item-view__value">
<utk:UTKInputField name="start-field" class="utk-property-item-view__field" />
<utk:UTKButton name="start-picker-btn" text="..." class="utk-property-item-view__picker-btn" />
<ui:VisualElement name="value-container" class="utk-property-item-view__value" style="flex-grow: 1;flex-direction: column;">
<ui:VisualElement style="flex-grow: 1; flex-direction: row;">
<utk:UTKInputField name="start-field" class="utk-property-item-view__field" />
<utk:UTKButton name="start-picker-btn" text="..." class="utk-property-item-view__picker-btn" />
</ui:VisualElement>
<utk:UTKLabel text="~" class="utk-property-item-view__range-separator" />
<utk:UTKInputField name="end-field" class="utk-property-item-view__field" />
<utk:UTKButton name="end-picker-btn" text="..." class="utk-property-item-view__picker-btn" />
<ui:VisualElement style="flex-grow: 1; flex-direction: row;">
<utk:UTKInputField name="end-field" class="utk-property-item-view__field" />
<utk:UTKButton name="end-picker-btn" text="..." class="utk-property-item-view__picker-btn" />
</ui:VisualElement>
</ui:VisualElement>
</ui:VisualElement>
</ui:UXML>

View File

@@ -19,5 +19,6 @@
.utk-property-item-view--datetime-range .utk-property-item-view__range-separator {
margin: 0 8px;
justify-content: center;
-unity-text-align: middle-center;
}

View File

@@ -9,4 +9,6 @@
.utk-property-item-view--dropdown .utk-property-item-view__dropdown {
flex-grow: 1;
margin-left: 0;
margin-right: 0;
}

View File

@@ -9,4 +9,6 @@
.utk-property-item-view--enum .utk-property-item-view__dropdown {
flex-grow: 1;
margin-left: 0;
margin-right: 0;
}

View File

@@ -8,7 +8,7 @@
}
.utk-property-item-view--radio .utk-property-item-view__radio-container {
flex-direction: row;
flex-direction: column;
flex-wrap: wrap;
flex-grow: 1;
}

View File

@@ -141,6 +141,7 @@
--color-bg-modal: var(--color-base-18);
--color-bg-panel: var(--color-base-20);
--color-bg-input: var(--color-base-19);
--color-bg-hover: var(--color-base-16);
--color-bg-tooltip: rgba(38, 38, 38, 0.95);
--color-bg-overlay: rgba(0, 0, 0, 0.5);

View File

@@ -148,6 +148,7 @@
--color-bg-modal: var(--color-base-02);
--color-bg-panel: var(--color-base-01);
--color-bg-input: var(--color-base-01);
--color-bg-hover: var(--color-base-04);
--color-bg-tooltip: rgba(50, 50, 50, 0.95);
--color-bg-overlay: rgba(0, 0, 0, 0.3);

View File

@@ -0,0 +1,653 @@
%YAML 1.1
%TAG !u! tag:unity3d.com,2011:
--- !u!29 &1
OcclusionCullingSettings:
m_ObjectHideFlags: 0
serializedVersion: 2
m_OcclusionBakeSettings:
smallestOccluder: 5
smallestHole: 0.25
backfaceThreshold: 100
m_SceneGUID: 00000000000000000000000000000000
m_OcclusionCullingData: {fileID: 0}
--- !u!104 &2
RenderSettings:
m_ObjectHideFlags: 0
serializedVersion: 10
m_Fog: 0
m_FogColor: {r: 0.5, g: 0.5, b: 0.5, a: 1}
m_FogMode: 3
m_FogDensity: 0.01
m_LinearFogStart: 0
m_LinearFogEnd: 300
m_AmbientSkyColor: {r: 0.212, g: 0.227, b: 0.259, a: 1}
m_AmbientEquatorColor: {r: 0.114, g: 0.125, b: 0.133, a: 1}
m_AmbientGroundColor: {r: 0.047, g: 0.043, b: 0.035, a: 1}
m_AmbientIntensity: 1
m_AmbientMode: 0
m_SubtractiveShadowColor: {r: 0.42, g: 0.478, b: 0.627, a: 1}
m_SkyboxMaterial: {fileID: 10304, guid: 0000000000000000f000000000000000, type: 0}
m_HaloStrength: 0.5
m_FlareStrength: 1
m_FlareFadeSpeed: 3
m_HaloTexture: {fileID: 0}
m_SpotCookie: {fileID: 10001, guid: 0000000000000000e000000000000000, type: 0}
m_DefaultReflectionMode: 0
m_DefaultReflectionResolution: 128
m_ReflectionBounces: 1
m_ReflectionIntensity: 1
m_CustomReflection: {fileID: 0}
m_Sun: {fileID: 0}
m_UseRadianceAmbientProbe: 0
--- !u!157 &3
LightmapSettings:
m_ObjectHideFlags: 0
serializedVersion: 13
m_BakeOnSceneLoad: 0
m_GISettings:
serializedVersion: 2
m_BounceScale: 1
m_IndirectOutputScale: 1
m_AlbedoBoost: 1
m_EnvironmentLightingMode: 0
m_EnableBakedLightmaps: 1
m_EnableRealtimeLightmaps: 0
m_LightmapEditorSettings:
serializedVersion: 12
m_Resolution: 2
m_BakeResolution: 40
m_AtlasSize: 1024
m_AO: 0
m_AOMaxDistance: 1
m_CompAOExponent: 1
m_CompAOExponentDirect: 0
m_ExtractAmbientOcclusion: 0
m_Padding: 2
m_LightmapParameters: {fileID: 0}
m_LightmapsBakeMode: 1
m_TextureCompression: 1
m_ReflectionCompression: 2
m_MixedBakeMode: 2
m_BakeBackend: 1
m_PVRSampling: 1
m_PVRDirectSampleCount: 32
m_PVRSampleCount: 512
m_PVRBounces: 2
m_PVREnvironmentSampleCount: 256
m_PVREnvironmentReferencePointCount: 2048
m_PVRFilteringMode: 1
m_PVRDenoiserTypeDirect: 1
m_PVRDenoiserTypeIndirect: 1
m_PVRDenoiserTypeAO: 1
m_PVRFilterTypeDirect: 0
m_PVRFilterTypeIndirect: 0
m_PVRFilterTypeAO: 0
m_PVREnvironmentMIS: 1
m_PVRCulling: 1
m_PVRFilteringGaussRadiusDirect: 1
m_PVRFilteringGaussRadiusIndirect: 1
m_PVRFilteringGaussRadiusAO: 1
m_PVRFilteringAtrousPositionSigmaDirect: 0.5
m_PVRFilteringAtrousPositionSigmaIndirect: 2
m_PVRFilteringAtrousPositionSigmaAO: 1
m_ExportTrainingData: 0
m_TrainingDataDestination: TrainingData
m_LightProbeSampleCountMultiplier: 4
m_LightingDataAsset: {fileID: 20201, guid: 0000000000000000f000000000000000, type: 0}
m_LightingSettings: {fileID: 0}
--- !u!196 &4
NavMeshSettings:
serializedVersion: 2
m_ObjectHideFlags: 0
m_BuildSettings:
serializedVersion: 3
agentTypeID: 0
agentRadius: 0.5
agentHeight: 2
agentSlope: 45
agentClimb: 0.4
ledgeDropHeight: 0
maxJumpAcrossDistance: 0
minRegionArea: 2
manualCellSize: 0
cellSize: 0.16666667
manualTileSize: 0
tileSize: 256
buildHeightMesh: 0
maxJobWorkers: 0
preserveTilesOutsideBounds: 0
debug:
m_Flags: 0
m_NavMeshData: {fileID: 0}
--- !u!1 &1097328750
GameObject:
m_ObjectHideFlags: 0
m_CorrespondingSourceObject: {fileID: 0}
m_PrefabInstance: {fileID: 0}
m_PrefabAsset: {fileID: 0}
serializedVersion: 6
m_Component:
- component: {fileID: 1097328752}
- component: {fileID: 1097328754}
- component: {fileID: 1097328755}
m_Layer: 0
m_Name: Sample
m_TagString: Untagged
m_Icon: {fileID: 0}
m_NavMeshLayer: 0
m_StaticEditorFlags: 0
m_IsActive: 1
--- !u!4 &1097328752
Transform:
m_ObjectHideFlags: 0
m_CorrespondingSourceObject: {fileID: 0}
m_PrefabInstance: {fileID: 0}
m_PrefabAsset: {fileID: 0}
m_GameObject: {fileID: 1097328750}
serializedVersion: 2
m_LocalRotation: {x: 0, y: 0, z: 0, w: 1}
m_LocalPosition: {x: 0, y: 0, z: 0}
m_LocalScale: {x: 1, y: 1, z: 1}
m_ConstrainProportionsScale: 0
m_Children: []
m_Father: {fileID: 0}
m_LocalEulerAnglesHint: {x: 0, y: 0, z: 0}
--- !u!114 &1097328754
MonoBehaviour:
m_ObjectHideFlags: 0
m_CorrespondingSourceObject: {fileID: 0}
m_PrefabInstance: {fileID: 0}
m_PrefabAsset: {fileID: 0}
m_GameObject: {fileID: 1097328750}
m_Enabled: 1
m_EditorHideFlags: 0
m_Script: {fileID: 19102, guid: 0000000000000000e000000000000000, type: 0}
m_Name:
m_EditorClassIdentifier: UnityEngine.dll::UnityEngine.UIElements.UIDocument
m_PanelSettings: {fileID: 11400000, guid: 5ad7007b08a97b54d927c352279a18b6, type: 2}
m_ParentUI: {fileID: 0}
sourceAsset: {fileID: 9197481963319205126, guid: 7811bd1f07a45124d9706c043c3c1ee6, type: 3}
m_SortingOrder: 0
m_Position: 0
m_WorldSpaceSizeMode: 1
m_WorldSpaceWidth: 1920
m_WorldSpaceHeight: 1080
m_PivotReferenceSize: 0
m_Pivot: 0
m_WorldSpaceCollider: {fileID: 0}
--- !u!114 &1097328755
MonoBehaviour:
m_ObjectHideFlags: 0
m_CorrespondingSourceObject: {fileID: 0}
m_PrefabInstance: {fileID: 0}
m_PrefabAsset: {fileID: 0}
m_GameObject: {fileID: 1097328750}
m_Enabled: 1
m_EditorHideFlags: 0
m_Script: {fileID: 11500000, guid: ce8c9286a85a9bd4b8dc349cac435424, type: 3}
m_Name:
m_EditorClassIdentifier: Assembly-CSharp::UTKMultiSelectDropdownSample
--- !u!1 &1192809690
GameObject:
m_ObjectHideFlags: 0
m_CorrespondingSourceObject: {fileID: 0}
m_PrefabInstance: {fileID: 0}
m_PrefabAsset: {fileID: 0}
serializedVersion: 6
m_Component:
- component: {fileID: 1192809694}
- component: {fileID: 1192809693}
- component: {fileID: 1192809692}
- component: {fileID: 1192809691}
m_Layer: 0
m_Name: Plane
m_TagString: Untagged
m_Icon: {fileID: 0}
m_NavMeshLayer: 0
m_StaticEditorFlags: 0
m_IsActive: 1
--- !u!64 &1192809691
MeshCollider:
m_ObjectHideFlags: 0
m_CorrespondingSourceObject: {fileID: 0}
m_PrefabInstance: {fileID: 0}
m_PrefabAsset: {fileID: 0}
m_GameObject: {fileID: 1192809690}
m_Material: {fileID: 0}
m_IncludeLayers:
serializedVersion: 2
m_Bits: 0
m_ExcludeLayers:
serializedVersion: 2
m_Bits: 0
m_LayerOverridePriority: 0
m_IsTrigger: 0
m_ProvidesContacts: 0
m_Enabled: 1
serializedVersion: 5
m_Convex: 0
m_CookingOptions: 30
m_Mesh: {fileID: 10209, guid: 0000000000000000e000000000000000, type: 0}
--- !u!23 &1192809692
MeshRenderer:
m_ObjectHideFlags: 0
m_CorrespondingSourceObject: {fileID: 0}
m_PrefabInstance: {fileID: 0}
m_PrefabAsset: {fileID: 0}
m_GameObject: {fileID: 1192809690}
m_Enabled: 1
m_CastShadows: 1
m_ReceiveShadows: 1
m_DynamicOccludee: 1
m_StaticShadowCaster: 0
m_MotionVectors: 1
m_LightProbeUsage: 1
m_ReflectionProbeUsage: 1
m_RayTracingMode: 2
m_RayTraceProcedural: 0
m_RayTracingAccelStructBuildFlagsOverride: 0
m_RayTracingAccelStructBuildFlags: 1
m_SmallMeshCulling: 1
m_ForceMeshLod: -1
m_MeshLodSelectionBias: 0
m_RenderingLayerMask: 1
m_RendererPriority: 0
m_Materials:
- {fileID: 2100000, guid: 31321ba15b8f8eb4c954353edc038b1d, type: 2}
m_StaticBatchInfo:
firstSubMesh: 0
subMeshCount: 0
m_StaticBatchRoot: {fileID: 0}
m_ProbeAnchor: {fileID: 0}
m_LightProbeVolumeOverride: {fileID: 0}
m_ScaleInLightmap: 1
m_ReceiveGI: 1
m_PreserveUVs: 0
m_IgnoreNormalsForChartDetection: 0
m_ImportantGI: 0
m_StitchLightmapSeams: 1
m_SelectedEditorRenderState: 3
m_MinimumChartSize: 4
m_AutoUVMaxDistance: 0.5
m_AutoUVMaxAngle: 89
m_LightmapParameters: {fileID: 0}
m_GlobalIlluminationMeshLod: 0
m_SortingLayerID: 0
m_SortingLayer: 0
m_SortingOrder: 0
m_AdditionalVertexStreams: {fileID: 0}
--- !u!33 &1192809693
MeshFilter:
m_ObjectHideFlags: 0
m_CorrespondingSourceObject: {fileID: 0}
m_PrefabInstance: {fileID: 0}
m_PrefabAsset: {fileID: 0}
m_GameObject: {fileID: 1192809690}
m_Mesh: {fileID: 10209, guid: 0000000000000000e000000000000000, type: 0}
--- !u!4 &1192809694
Transform:
m_ObjectHideFlags: 0
m_CorrespondingSourceObject: {fileID: 0}
m_PrefabInstance: {fileID: 0}
m_PrefabAsset: {fileID: 0}
m_GameObject: {fileID: 1192809690}
serializedVersion: 2
m_LocalRotation: {x: 0, y: 0, z: 0, w: 1}
m_LocalPosition: {x: 0, y: 0, z: 0}
m_LocalScale: {x: 10, y: 10, z: 10}
m_ConstrainProportionsScale: 0
m_Children: []
m_Father: {fileID: 0}
m_LocalEulerAnglesHint: {x: 0, y: 0, z: 0}
--- !u!1 &1331954412
GameObject:
m_ObjectHideFlags: 0
m_CorrespondingSourceObject: {fileID: 0}
m_PrefabInstance: {fileID: 0}
m_PrefabAsset: {fileID: 0}
serializedVersion: 6
m_Component:
- component: {fileID: 1331954415}
- component: {fileID: 1331954414}
- component: {fileID: 1331954413}
m_Layer: 0
m_Name: EventSystem
m_TagString: Untagged
m_Icon: {fileID: 0}
m_NavMeshLayer: 0
m_StaticEditorFlags: 0
m_IsActive: 1
--- !u!114 &1331954413
MonoBehaviour:
m_ObjectHideFlags: 0
m_CorrespondingSourceObject: {fileID: 0}
m_PrefabInstance: {fileID: 0}
m_PrefabAsset: {fileID: 0}
m_GameObject: {fileID: 1331954412}
m_Enabled: 1
m_EditorHideFlags: 0
m_Script: {fileID: 11500000, guid: 01614664b831546d2ae94a42149d80ac, type: 3}
m_Name:
m_EditorClassIdentifier:
m_SendPointerHoverToParent: 1
m_MoveRepeatDelay: 0.5
m_MoveRepeatRate: 0.1
m_XRTrackingOrigin: {fileID: 0}
m_ActionsAsset: {fileID: -944628639613478452, guid: ca9f5fa95ffab41fb9a615ab714db018, type: 3}
m_PointAction: {fileID: -1654692200621890270, guid: ca9f5fa95ffab41fb9a615ab714db018, type: 3}
m_MoveAction: {fileID: -8784545083839296357, guid: ca9f5fa95ffab41fb9a615ab714db018, type: 3}
m_SubmitAction: {fileID: 392368643174621059, guid: ca9f5fa95ffab41fb9a615ab714db018, type: 3}
m_CancelAction: {fileID: 7727032971491509709, guid: ca9f5fa95ffab41fb9a615ab714db018, type: 3}
m_LeftClickAction: {fileID: 3001919216989983466, guid: ca9f5fa95ffab41fb9a615ab714db018, type: 3}
m_MiddleClickAction: {fileID: -2185481485913320682, guid: ca9f5fa95ffab41fb9a615ab714db018, type: 3}
m_RightClickAction: {fileID: -4090225696740746782, guid: ca9f5fa95ffab41fb9a615ab714db018, type: 3}
m_ScrollWheelAction: {fileID: 6240969308177333660, guid: ca9f5fa95ffab41fb9a615ab714db018, type: 3}
m_TrackedDevicePositionAction: {fileID: 6564999863303420839, guid: ca9f5fa95ffab41fb9a615ab714db018, type: 3}
m_TrackedDeviceOrientationAction: {fileID: 7970375526676320489, guid: ca9f5fa95ffab41fb9a615ab714db018, type: 3}
m_DeselectOnBackgroundClick: 1
m_PointerBehavior: 0
m_CursorLockBehavior: 0
m_ScrollDeltaPerTick: 6
--- !u!114 &1331954414
MonoBehaviour:
m_ObjectHideFlags: 0
m_CorrespondingSourceObject: {fileID: 0}
m_PrefabInstance: {fileID: 0}
m_PrefabAsset: {fileID: 0}
m_GameObject: {fileID: 1331954412}
m_Enabled: 1
m_EditorHideFlags: 0
m_Script: {fileID: 11500000, guid: 76c392e42b5098c458856cdf6ecaaaa1, type: 3}
m_Name:
m_EditorClassIdentifier:
m_FirstSelected: {fileID: 0}
m_sendNavigationEvents: 1
m_DragThreshold: 10
--- !u!4 &1331954415
Transform:
m_ObjectHideFlags: 0
m_CorrespondingSourceObject: {fileID: 0}
m_PrefabInstance: {fileID: 0}
m_PrefabAsset: {fileID: 0}
m_GameObject: {fileID: 1331954412}
serializedVersion: 2
m_LocalRotation: {x: 0, y: 0, z: 0, w: 1}
m_LocalPosition: {x: 0, y: 0, z: 0}
m_LocalScale: {x: 1, y: 1, z: 1}
m_ConstrainProportionsScale: 0
m_Children: []
m_Father: {fileID: 0}
m_LocalEulerAnglesHint: {x: 0, y: 0, z: 0}
--- !u!1 &1414861612
GameObject:
m_ObjectHideFlags: 0
m_CorrespondingSourceObject: {fileID: 0}
m_PrefabInstance: {fileID: 0}
m_PrefabAsset: {fileID: 0}
serializedVersion: 6
m_Component:
- component: {fileID: 1414861614}
- component: {fileID: 1414861613}
- component: {fileID: 1414861615}
m_Layer: 0
m_Name: Directional Light
m_TagString: Untagged
m_Icon: {fileID: 0}
m_NavMeshLayer: 0
m_StaticEditorFlags: 0
m_IsActive: 1
--- !u!108 &1414861613
Light:
m_ObjectHideFlags: 0
m_CorrespondingSourceObject: {fileID: 0}
m_PrefabInstance: {fileID: 0}
m_PrefabAsset: {fileID: 0}
m_GameObject: {fileID: 1414861612}
m_Enabled: 1
serializedVersion: 11
m_Type: 1
m_Color: {r: 1, g: 0.95686275, b: 0.8392157, a: 1}
m_Intensity: 1
m_Range: 10
m_SpotAngle: 30
m_InnerSpotAngle: 21.80208
m_CookieSize: 10
m_Shadows:
m_Type: 2
m_Resolution: -1
m_CustomResolution: -1
m_Strength: 1
m_Bias: 0.05
m_NormalBias: 0.4
m_NearPlane: 0.2
m_CullingMatrixOverride:
e00: 1
e01: 0
e02: 0
e03: 0
e10: 0
e11: 1
e12: 0
e13: 0
e20: 0
e21: 0
e22: 1
e23: 0
e30: 0
e31: 0
e32: 0
e33: 1
m_UseCullingMatrixOverride: 0
m_Cookie: {fileID: 0}
m_DrawHalo: 0
m_Flare: {fileID: 0}
m_RenderMode: 0
m_CullingMask:
serializedVersion: 2
m_Bits: 4294967295
m_RenderingLayerMask: 1
m_Lightmapping: 4
m_LightShadowCasterMode: 0
m_AreaSize: {x: 1, y: 1}
m_BounceIntensity: 1
m_ColorTemperature: 6570
m_UseColorTemperature: 0
m_BoundingSphereOverride: {x: 0, y: 0, z: 0, w: 0}
m_UseBoundingSphereOverride: 0
m_UseViewFrustumForShadowCasterCull: 1
m_ForceVisible: 0
m_ShadowRadius: 0
m_ShadowAngle: 0
m_LightUnit: 1
m_LuxAtDistance: 1
m_EnableSpotReflector: 1
--- !u!4 &1414861614
Transform:
m_ObjectHideFlags: 0
m_CorrespondingSourceObject: {fileID: 0}
m_PrefabInstance: {fileID: 0}
m_PrefabAsset: {fileID: 0}
m_GameObject: {fileID: 1414861612}
serializedVersion: 2
m_LocalRotation: {x: 0.40821788, y: -0.23456968, z: 0.10938163, w: 0.8754261}
m_LocalPosition: {x: 0, y: 3, z: 0}
m_LocalScale: {x: 1, y: 1, z: 1}
m_ConstrainProportionsScale: 0
m_Children: []
m_Father: {fileID: 0}
m_LocalEulerAnglesHint: {x: 50, y: -30, z: 0}
--- !u!114 &1414861615
MonoBehaviour:
m_ObjectHideFlags: 0
m_CorrespondingSourceObject: {fileID: 0}
m_PrefabInstance: {fileID: 0}
m_PrefabAsset: {fileID: 0}
m_GameObject: {fileID: 1414861612}
m_Enabled: 1
m_EditorHideFlags: 0
m_Script: {fileID: 11500000, guid: 474bcb49853aa07438625e644c072ee6, type: 3}
m_Name:
m_EditorClassIdentifier:
m_UsePipelineSettings: 1
m_AdditionalLightsShadowResolutionTier: 2
m_CustomShadowLayers: 0
m_LightCookieSize: {x: 1, y: 1}
m_LightCookieOffset: {x: 0, y: 0}
m_SoftShadowQuality: 0
m_RenderingLayersMask:
serializedVersion: 0
m_Bits: 1
m_ShadowRenderingLayersMask:
serializedVersion: 0
m_Bits: 1
m_Version: 4
m_LightLayerMask: 1
m_ShadowLayerMask: 1
m_RenderingLayers: 1
m_ShadowRenderingLayers: 1
--- !u!1 &2136621999
GameObject:
m_ObjectHideFlags: 0
m_CorrespondingSourceObject: {fileID: 0}
m_PrefabInstance: {fileID: 0}
m_PrefabAsset: {fileID: 0}
serializedVersion: 6
m_Component:
- component: {fileID: 2136622002}
- component: {fileID: 2136622001}
- component: {fileID: 2136622000}
- component: {fileID: 2136622003}
m_Layer: 0
m_Name: Main Camera
m_TagString: MainCamera
m_Icon: {fileID: 0}
m_NavMeshLayer: 0
m_StaticEditorFlags: 0
m_IsActive: 1
--- !u!81 &2136622000
AudioListener:
m_ObjectHideFlags: 0
m_CorrespondingSourceObject: {fileID: 0}
m_PrefabInstance: {fileID: 0}
m_PrefabAsset: {fileID: 0}
m_GameObject: {fileID: 2136621999}
m_Enabled: 1
--- !u!20 &2136622001
Camera:
m_ObjectHideFlags: 0
m_CorrespondingSourceObject: {fileID: 0}
m_PrefabInstance: {fileID: 0}
m_PrefabAsset: {fileID: 0}
m_GameObject: {fileID: 2136621999}
m_Enabled: 1
serializedVersion: 2
m_ClearFlags: 1
m_BackGroundColor: {r: 0.19215687, g: 0.3019608, b: 0.4745098, a: 0}
m_projectionMatrixMode: 1
m_GateFitMode: 2
m_FOVAxisMode: 0
m_Iso: 200
m_ShutterSpeed: 0.005
m_Aperture: 16
m_FocusDistance: 10
m_FocalLength: 50
m_BladeCount: 5
m_Curvature: {x: 2, y: 11}
m_BarrelClipping: 0.25
m_Anamorphism: 0
m_SensorSize: {x: 36, y: 24}
m_LensShift: {x: 0, y: 0}
m_NormalizedViewPortRect:
serializedVersion: 2
x: 0
y: 0
width: 1
height: 1
near clip plane: 0.3
far clip plane: 1000
field of view: 60
orthographic: 0
orthographic size: 5
m_Depth: -1
m_CullingMask:
serializedVersion: 2
m_Bits: 4294967295
m_RenderingPath: -1
m_TargetTexture: {fileID: 0}
m_TargetDisplay: 0
m_TargetEye: 3
m_HDR: 1
m_AllowMSAA: 1
m_AllowDynamicResolution: 0
m_ForceIntoRT: 0
m_OcclusionCulling: 1
m_StereoConvergence: 10
m_StereoSeparation: 0.022
--- !u!4 &2136622002
Transform:
m_ObjectHideFlags: 0
m_CorrespondingSourceObject: {fileID: 0}
m_PrefabInstance: {fileID: 0}
m_PrefabAsset: {fileID: 0}
m_GameObject: {fileID: 2136621999}
serializedVersion: 2
m_LocalRotation: {x: 0.42261827, y: 0, z: 0, w: 0.9063079}
m_LocalPosition: {x: 0, y: 40, z: -50}
m_LocalScale: {x: 1, y: 1, z: 1}
m_ConstrainProportionsScale: 0
m_Children: []
m_Father: {fileID: 0}
m_LocalEulerAnglesHint: {x: 50, y: 0, z: 0}
--- !u!114 &2136622003
MonoBehaviour:
m_ObjectHideFlags: 0
m_CorrespondingSourceObject: {fileID: 0}
m_PrefabInstance: {fileID: 0}
m_PrefabAsset: {fileID: 0}
m_GameObject: {fileID: 2136621999}
m_Enabled: 1
m_EditorHideFlags: 0
m_Script: {fileID: 11500000, guid: a79441f348de89743a2939f4d699eac1, type: 3}
m_Name:
m_EditorClassIdentifier: Unity.RenderPipelines.Universal.Runtime::UnityEngine.Rendering.Universal.UniversalAdditionalCameraData
m_RenderShadows: 1
m_RequiresDepthTextureOption: 2
m_RequiresOpaqueTextureOption: 2
m_CameraType: 0
m_Cameras: []
m_RendererIndex: -1
m_VolumeLayerMask:
serializedVersion: 2
m_Bits: 1
m_VolumeTrigger: {fileID: 0}
m_VolumeFrameworkUpdateModeOption: 2
m_RenderPostProcessing: 0
m_Antialiasing: 0
m_AntialiasingQuality: 2
m_StopNaN: 0
m_Dithering: 0
m_ClearDepth: 1
m_AllowXRRendering: 1
m_AllowHDROutput: 1
m_UseScreenCoordOverride: 0
m_ScreenSizeOverride: {x: 0, y: 0, z: 0, w: 0}
m_ScreenCoordScaleBias: {x: 0, y: 0, z: 0, w: 0}
m_RequiresDepthTexture: 0
m_RequiresColorTexture: 0
m_TaaSettings:
m_Quality: 3
m_FrameInfluence: 0.1
m_JitterScale: 1
m_MipBias: 0
m_VarianceClampScale: 0.9
m_ContrastAdaptiveSharpening: 0
m_Version: 2
--- !u!1660057539 &9223372036854775807
SceneRoots:
m_ObjectHideFlags: 0
m_Roots:
- {fileID: 2136622002}
- {fileID: 1414861614}
- {fileID: 1331954415}
- {fileID: 1097328752}
- {fileID: 1192809694}

View File

@@ -0,0 +1,7 @@
fileFormatVersion: 2
guid: 32c05d2a3d319574982705435757c865
DefaultImporter:
externalObjects: {}
userData:
assetBundleName:
assetBundleVariant:

View File

@@ -0,0 +1,593 @@
#nullable enable
using System;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UIElements;
using UVC.UIToolkit;
/// <summary>
/// UTKMultiSelectDropdown 컴포넌트 샘플
/// UXML 파일을 로드하여 쿼리 방식으로 사용하는 예제
/// </summary>
[RequireComponent(typeof(UIDocument))]
public class UTKMultiSelectDropdownSample : MonoBehaviour
{
#region Enums
/// <summary>게임 난이도</summary>
public enum Difficulty
{
Easy,
Normal,
Hard,
Expert
}
/// <summary>품질 설정</summary>
public enum QualityLevel
{
Low,
Medium,
High,
Ultra
}
/// <summary>파일 형식</summary>
public enum FileFormat
{
PNG,
JPG,
GIF,
BMP,
TIFF
}
/// <summary>정렬 방식</summary>
public enum SortOrder
{
Ascending,
Descending
}
#endregion
#region Fields
[SerializeField]
[Tooltip("UI를 표시할 UIDocument 컴포넌트")]
public UIDocument? _uiDocument;
[SerializeField]
[Tooltip("시작 시 적용할 테마")]
private UTKTheme initialTheme = UTKTheme.Dark;
private UTKToggle _themeToggle;
private VisualElement? _root;
// 다중 선택 드롭다운 참조
private UTKMultiSelectDropdown? _dropdownBasic;
private UTKMultiSelectDropdown? _dropdownDefault;
private UTKMultiSelectDropdown? _dropdownCategory;
private UTKMultiSelectDropdown? _dropdownTag;
private UTKMultiSelectDropdown? _dropdownSelectAll;
private UTKMultiSelectDropdown? _dropdownDisabled;
// 다중 선택 결과 라벨 참조
private Label? _resultBasic;
private Label? _resultDefault;
private Label? _resultCategory;
private Label? _resultTag;
private Label? _resultSelectAll;
// 버튼 참조
private UTKButton? _btnSelectAll;
private UTKButton? _btnClear;
// 단일 선택 드롭다운 참조
private UTKDropdown? _dropdownSingleBasic;
private UTKDropdown? _dropdownSingleDefault;
private UTKDropdown? _dropdownSingleSort;
private UTKDropdown? _dropdownSingleDisabled;
// 단일 선택 결과 라벨 참조
private Label? _dropdownResultBasic;
private Label? _dropdownResultDefault;
private Label? _dropdownResultSort;
// Enum 드롭다운 참조
private UTKEnumDropDown? _enumDropdownDifficulty;
private UTKEnumDropDown? _enumDropdownQuality;
private UTKEnumDropDown? _enumDropdownFormat;
private UTKEnumDropDown? _enumDropdownDisabled;
// Enum 결과 라벨 참조
private Label? _enumResultDifficulty;
private Label? _enumResultQuality;
private Label? _enumResultFormat;
#endregion
#region Unity Lifecycle
private void Start()
{
var doc = GetComponent<UIDocument>();
if (doc == null)
{
Debug.LogError("UIDocument가 할당되지 않았습니다.");
return;
}
_uiDocument = doc;
var toggle = _uiDocument.rootVisualElement.Q<UTKToggle>("toggle");
if (toggle == null)
{
Debug.LogError("UXML에서 UTKToggle을 찾을 수 없습니다.");
return;
}
_themeToggle = toggle;
UTKThemeManager.Instance.RegisterRoot(_uiDocument.rootVisualElement);
UTKThemeManager.Instance.SetTheme(initialTheme);
_themeToggle.OnValueChanged += (isOn) =>
{
UTKThemeManager.Instance.SetTheme(!isOn ? UTKTheme.Dark : UTKTheme.Light);
};
LoadUIFromUXML();
}
private void OnDestroy()
{
UnregisterEvents();
}
#endregion
#region Setup
private void LoadUIFromUXML()
{
// UIDocument 참조 확인
var doc = GetComponent<UIDocument>();
if (doc == null)
{
Debug.LogError("UIDocument가 할당되지 않았습니다.");
return;
}
_uiDocument = doc;
// UI 생성
_root = _uiDocument.rootVisualElement;
// 요소 쿼리
QueryElements();
// 초기 설정
SetupInitialValues();
// 이벤트 등록
RegisterEvents();
}
private void QueryElements()
{
if (_root == null) return;
// 다중 선택 드롭다운 쿼리
_dropdownBasic = _root.Q<UTKMultiSelectDropdown>("dropdown-basic");
_dropdownDefault = _root.Q<UTKMultiSelectDropdown>("dropdown-default");
_dropdownCategory = _root.Q<UTKMultiSelectDropdown>("dropdown-category");
_dropdownTag = _root.Q<UTKMultiSelectDropdown>("dropdown-tag");
_dropdownSelectAll = _root.Q<UTKMultiSelectDropdown>("dropdown-selectall");
_dropdownDisabled = _root.Q<UTKMultiSelectDropdown>("dropdown-disabled");
// 다중 선택 결과 라벨 쿼리
_resultBasic = _root.Q<Label>("result-basic");
_resultDefault = _root.Q<Label>("result-default");
_resultCategory = _root.Q<Label>("result-category");
_resultTag = _root.Q<Label>("result-tag");
_resultSelectAll = _root.Q<Label>("result-selectall");
// 버튼 쿼리
_btnSelectAll = _root.Q<UTKButton>("btn-selectall");
_btnClear = _root.Q<UTKButton>("btn-clear");
// 단일 선택 드롭다운 쿼리
_dropdownSingleBasic = _root.Q<UTKDropdown>("dropdown-single-basic");
_dropdownSingleDefault = _root.Q<UTKDropdown>("dropdown-single-default");
_dropdownSingleSort = _root.Q<UTKDropdown>("dropdown-single-sort");
_dropdownSingleDisabled = _root.Q<UTKDropdown>("dropdown-single-disabled");
// 단일 선택 결과 라벨 쿼리
_dropdownResultBasic = _root.Q<Label>("dropdown-result-basic");
_dropdownResultDefault = _root.Q<Label>("dropdown-result-default");
_dropdownResultSort = _root.Q<Label>("dropdown-result-sort");
// Enum 드롭다운 쿼리
_enumDropdownDifficulty = _root.Q<UTKEnumDropDown>("enum-dropdown-difficulty");
_enumDropdownQuality = _root.Q<UTKEnumDropDown>("enum-dropdown-quality");
_enumDropdownFormat = _root.Q<UTKEnumDropDown>("enum-dropdown-format");
_enumDropdownDisabled = _root.Q<UTKEnumDropDown>("enum-dropdown-disabled");
// Enum 결과 라벨 쿼리
_enumResultDifficulty = _root.Q<Label>("enum-result-difficulty");
_enumResultQuality = _root.Q<Label>("enum-result-quality");
_enumResultFormat = _root.Q<Label>("enum-result-format");
}
private void SetupInitialValues()
{
// [다중 선택] 샘플 2: 기본값 설정 (한국어, English 선택)
_dropdownDefault?.SetSelectedIndices(new List<int> { 0, 1 }, notify: false);
if (_resultDefault != null && _dropdownDefault != null)
{
_resultDefault.text = $"선택 언어: {string.Join(", ", _dropdownDefault.SelectedValues)}";
}
// [다중 선택] 샘플 6: 비활성화 드롭다운 기본값 설정
_dropdownDisabled?.SetSelectedIndices(new List<int> { 0, 2 }, notify: false);
// [단일 선택] 샘플 2: 기본값 설정 (한국어 선택)
if (_dropdownResultDefault != null && _dropdownSingleDefault != null)
{
_dropdownResultDefault.text = $"선택 언어: {_dropdownSingleDefault.SelectedValue}";
}
// [Enum] 샘플 1: 난이도 드롭다운 초기화
_enumDropdownDifficulty?.Init(Difficulty.Normal);
if (_enumResultDifficulty != null && _enumDropdownDifficulty != null)
{
_enumResultDifficulty.text = $"선택 난이도: {_enumDropdownDifficulty.Value}";
}
// [Enum] 샘플 2: 품질 드롭다운 초기화
_enumDropdownQuality?.Init(QualityLevel.High);
// [Enum] 샘플 3: 파일 형식 드롭다운 초기화
_enumDropdownFormat?.Init(FileFormat.PNG);
if (_enumResultFormat != null && _enumDropdownFormat != null)
{
_enumResultFormat.text = $"선택 형식: {_enumDropdownFormat.Value}";
}
// [Enum] 샘플 4: 비활성화 드롭다운 초기화
_enumDropdownDisabled?.Init(SortOrder.Ascending);
}
private void RegisterEvents()
{
// [다중 선택] 샘플 1: 기본 다중 선택 드롭다운
if (_dropdownBasic != null && _resultBasic != null)
{
_dropdownBasic.OnSelectionChanged += OnBasicSelectionChanged;
}
// [다중 선택] 샘플 2: 기본값이 있는 드롭다운
if (_dropdownDefault != null && _resultDefault != null)
{
_dropdownDefault.OnSelectionChanged += OnDefaultSelectionChanged;
}
// [다중 선택] 샘플 3: 카테고리 필터
if (_dropdownCategory != null && _resultCategory != null)
{
_dropdownCategory.OnSelectionChanged += OnCategorySelectionChanged;
}
// [다중 선택] 샘플 4: 태그 선택기
if (_dropdownTag != null && _resultTag != null)
{
_dropdownTag.OnSelectionChanged += OnTagSelectionChanged;
}
// [다중 선택] 샘플 5: 전체 선택/해제
if (_dropdownSelectAll != null && _resultSelectAll != null)
{
_dropdownSelectAll.OnSelectionChanged += OnSelectAllSelectionChanged;
}
if (_btnSelectAll != null)
{
_btnSelectAll.OnClicked += OnSelectAllButtonClicked;
}
if (_btnClear != null)
{
_btnClear.OnClicked += OnClearButtonClicked;
}
// [단일 선택] 샘플 1: 기본 단일 선택 드롭다운
if (_dropdownSingleBasic != null && _dropdownResultBasic != null)
{
_dropdownSingleBasic.OnSelectionChanged += OnDropdownBasicSelectionChanged;
}
// [단일 선택] 샘플 2: 기본값이 있는 드롭다운
if (_dropdownSingleDefault != null && _dropdownResultDefault != null)
{
_dropdownSingleDefault.OnSelectionChanged += OnDropdownDefaultSelectionChanged;
}
// [단일 선택] 샘플 3: 정렬 옵션
if (_dropdownSingleSort != null && _dropdownResultSort != null)
{
_dropdownSingleSort.OnSelectionChanged += OnDropdownSortSelectionChanged;
}
// [Enum] 샘플 1: 난이도 선택
if (_enumDropdownDifficulty != null && _enumResultDifficulty != null)
{
_enumDropdownDifficulty.OnValueChanged += OnEnumDifficultyChanged;
}
// [Enum] 샘플 2: 품질 선택
if (_enumDropdownQuality != null && _enumResultQuality != null)
{
_enumDropdownQuality.OnValueChanged += OnEnumQualityChanged;
}
// [Enum] 샘플 3: 파일 형식 선택
if (_enumDropdownFormat != null && _enumResultFormat != null)
{
_enumDropdownFormat.OnValueChanged += OnEnumFormatChanged;
}
}
private void UnregisterEvents()
{
if (_dropdownBasic != null)
{
_dropdownBasic.OnSelectionChanged -= OnBasicSelectionChanged;
}
if (_dropdownDefault != null)
{
_dropdownDefault.OnSelectionChanged -= OnDefaultSelectionChanged;
}
if (_dropdownCategory != null)
{
_dropdownCategory.OnSelectionChanged -= OnCategorySelectionChanged;
}
if (_dropdownTag != null)
{
_dropdownTag.OnSelectionChanged -= OnTagSelectionChanged;
}
if (_dropdownSelectAll != null)
{
_dropdownSelectAll.OnSelectionChanged -= OnSelectAllSelectionChanged;
}
if (_btnSelectAll != null)
{
_btnSelectAll.OnClicked -= OnSelectAllButtonClicked;
}
if (_btnClear != null)
{
_btnClear.OnClicked -= OnClearButtonClicked;
}
// [단일 선택] 이벤트 해제
if (_dropdownSingleBasic != null)
{
_dropdownSingleBasic.OnSelectionChanged -= OnDropdownBasicSelectionChanged;
}
if (_dropdownSingleDefault != null)
{
_dropdownSingleDefault.OnSelectionChanged -= OnDropdownDefaultSelectionChanged;
}
if (_dropdownSingleSort != null)
{
_dropdownSingleSort.OnSelectionChanged -= OnDropdownSortSelectionChanged;
}
// [Enum] 이벤트 해제
if (_enumDropdownDifficulty != null)
{
_enumDropdownDifficulty.OnValueChanged -= OnEnumDifficultyChanged;
}
if (_enumDropdownQuality != null)
{
_enumDropdownQuality.OnValueChanged -= OnEnumQualityChanged;
}
if (_enumDropdownFormat != null)
{
_enumDropdownFormat.OnValueChanged -= OnEnumFormatChanged;
}
}
#endregion
#region Event Handlers
private void OnBasicSelectionChanged(List<int> indices, List<string> values)
{
if (_resultBasic == null) return;
Debug.Log($"[기본 샘플] 선택된 개수: {values.Count}");
Debug.Log($"[기본 샘플] 선택 항목: {string.Join(", ", values)}");
_resultBasic.text = values.Count > 0
? $"선택 결과: {string.Join(", ", values)}"
: "선택 결과: 없음";
}
private void OnDefaultSelectionChanged(List<int> indices, List<string> values)
{
if (_resultDefault == null) return;
Debug.Log($"[기본값 샘플] 선택 언어: {string.Join(", ", values)}");
_resultDefault.text = values.Count > 0
? $"선택 언어: {string.Join(", ", values)}"
: "선택 언어: 없음";
}
private void OnCategorySelectionChanged(List<int> indices, List<string> values)
{
if (_resultCategory == null) return;
var categoryText = values.Count > 0
? string.Join(", ", values)
: "전체";
Debug.Log($"[카테고리 필터] 선택된 카테고리: {categoryText}");
// 실제로는 여기서 필터링 로직 수행
_resultCategory.text = values.Count > 0
? $"필터링된 항목: {values.Count * 15}개 (예시)"
: "필터링된 항목: 전체 120개";
}
private void OnTagSelectionChanged(List<int> indices, List<string> values)
{
if (_resultTag == null) return;
_resultTag.text = values.Count > 0
? $"적용된 태그: [{string.Join("] [", values)}]"
: "적용된 태그: 없음";
}
private void OnSelectAllSelectionChanged(List<int> indices, List<string> values)
{
if (_resultSelectAll == null) return;
_resultSelectAll.text = values.Count > 0
? $"선택된 권한: {string.Join(", ", values)}"
: "선택된 권한: 없음";
}
private void OnSelectAllButtonClicked()
{
_dropdownSelectAll?.SelectAll();
Debug.Log("[전체 선택] 모든 권한 선택됨");
}
private void OnClearButtonClicked()
{
_dropdownSelectAll?.ClearSelection();
Debug.Log("[전체 해제] 모든 권한 해제됨");
}
// [단일 선택] 이벤트 핸들러
private void OnDropdownBasicSelectionChanged(int index, string value)
{
if (_dropdownResultBasic == null) return;
Debug.Log($"[단일 선택 - 기본] 선택: [{index}] {value}");
_dropdownResultBasic.text = !string.IsNullOrEmpty(value)
? $"선택 결과: {value}"
: "선택 결과: 없음";
}
private void OnDropdownDefaultSelectionChanged(int index, string value)
{
if (_dropdownResultDefault == null) return;
Debug.Log($"[단일 선택 - 기본값] 선택 언어: {value}");
_dropdownResultDefault.text = !string.IsNullOrEmpty(value)
? $"선택 언어: {value}"
: "선택 언어: 없음";
}
private void OnDropdownSortSelectionChanged(int index, string value)
{
if (_dropdownResultSort == null) return;
Debug.Log($"[단일 선택 - 정렬] 정렬 방식: {value}");
// 실제로는 여기서 정렬 로직 수행
_dropdownResultSort.text = !string.IsNullOrEmpty(value)
? $"정렬 방식: {value}"
: "정렬 방식: 없음";
}
// [Enum] 이벤트 핸들러
private void OnEnumDifficultyChanged(Enum? value)
{
if (_enumResultDifficulty == null) return;
if (value is Difficulty difficulty)
{
Debug.Log($"[Enum - 난이도] 선택: {difficulty}");
_enumResultDifficulty.text = $"선택 난이도: {difficulty}";
// 실제로는 여기서 난이도 적용 로직 수행
switch (difficulty)
{
case Difficulty.Easy:
Debug.Log("쉬운 난이도 적용");
break;
case Difficulty.Normal:
Debug.Log("보통 난이도 적용");
break;
case Difficulty.Hard:
Debug.Log("어려운 난이도 적용");
break;
case Difficulty.Expert:
Debug.Log("전문가 난이도 적용");
break;
}
}
else
{
_enumResultDifficulty.text = "선택 난이도: 없음";
}
}
private void OnEnumQualityChanged(Enum? value)
{
if (_enumResultQuality == null) return;
if (value is QualityLevel quality)
{
Debug.Log($"[Enum - 품질] 선택: {quality}");
_enumResultQuality.text = $"선택 품질: {quality}";
// 실제로는 여기서 품질 설정 로직 수행
switch (quality)
{
case QualityLevel.Low:
Debug.Log("낮은 품질 적용");
break;
case QualityLevel.Medium:
Debug.Log("중간 품질 적용");
break;
case QualityLevel.High:
Debug.Log("높은 품질 적용");
break;
case QualityLevel.Ultra:
Debug.Log("최고 품질 적용");
break;
}
}
else
{
_enumResultQuality.text = "선택 품질: 없음";
}
}
private void OnEnumFormatChanged(Enum? value)
{
if (_enumResultFormat == null) return;
if (value is FileFormat format)
{
Debug.Log($"[Enum - 파일 형식] 선택: {format}");
_enumResultFormat.text = $"선택 형식: {format}";
// 실제로는 여기서 파일 형식 설정 로직 수행
Debug.Log($"파일을 {format} 형식으로 저장합니다.");
}
else
{
_enumResultFormat.text = "선택 형식: 없음";
}
}
#endregion
}

View File

@@ -0,0 +1,2 @@
fileFormatVersion: 2
guid: ce8c9286a85a9bd4b8dc349cac435424

View File

@@ -0,0 +1,97 @@
<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:utk="UVC.UIToolkit" editor-extension-mode="False">
<Style src="project://database/Assets/Sample/UIToolkit/UTKMultiSelectDropdownSampleUss.uss?fileID=7433441132597879392&amp;guid=446b732074b6c7e438d1ae942f153f63&amp;type=3#UTKMultiSelectDropdownSampleUss" />
<ui:VisualElement name="root" style="padding: 20px; background-color: rgb(51, 51, 51); flex-grow: 1;">
<ui:VisualElement style="flex-grow: 1; flex-direction: row;">
<ui:VisualElement name="UTKMultiSelectDropdownRoot" style="padding: 20px; background-color: rgb(51, 51, 51); flex-grow: 1;">
<ui:Label text="UTKMultiSelectDropdown Samples" style="font-size: 18px; margin-bottom: 20px; color: white;" />
<ui:VisualElement style="flex-grow: 1; width: 300px;">
<ui:VisualElement name="section-basic" class="sample-section">
<ui:Label text="기본 다중 선택 드롭다운" class="section-title" />
<utk:UTKMultiSelectDropdown name="dropdown-basic" label="과일 선택" choices="사과,바나나,오렌지,포도,딸기,수박" />
<ui:Label name="result-basic" text="선택 결과: 없음" class="result-label" />
</ui:VisualElement>
<ui:VisualElement name="section-default" class="sample-section">
<ui:Label text="기본값이 있는 드롭다운" class="section-title" />
<utk:UTKMultiSelectDropdown name="dropdown-default" label="언어 선택" choices="한국어,English,日本語,中文,Español" />
<ui:Label name="result-default" text="선택 언어: 없음" class="result-label" />
</ui:VisualElement>
<ui:VisualElement name="section-category" class="sample-section">
<ui:Label text="카테고리 필터" class="section-title" />
<utk:UTKMultiSelectDropdown name="dropdown-category" label="카테고리" choices="전자제품,의류,식품,가구,도서,스포츠,완구,화장품" />
<ui:Label name="result-category" text="필터링된 항목: 전체 120개" class="result-label-info" />
</ui:VisualElement>
<ui:VisualElement name="section-tag" class="sample-section">
<ui:Label text="태그 선택기" class="section-title" />
<utk:UTKMultiSelectDropdown name="dropdown-tag" label="태그" placeholder="태그를 선택하세요" choices="중요,긴급,검토 필요,완료,진행 중,대기,보류,취소" />
<ui:Label name="result-tag" text="적용된 태그: 없음" class="result-label-warning" />
</ui:VisualElement>
<ui:VisualElement name="section-selectall" class="sample-section">
<ui:Label text="전체 선택/해제 기능" class="section-title" />
<utk:UTKMultiSelectDropdown name="dropdown-selectall" label="권한 설정" choices="읽기,쓰기,수정,삭제,실행,관리" />
<ui:VisualElement name="button-container" style="flex-direction: row; margin-top: 10px;">
<utk:UTKButton name="btn-selectall" text="전체 선택" variant="Primary" style="margin-right: 10px;" />
<utk:UTKButton name="btn-clear" text="전체 해제" variant="Normal" />
</ui:VisualElement>
<ui:Label name="result-selectall" text="선택된 권한: 없음" class="result-label" />
</ui:VisualElement>
<ui:VisualElement name="section-disabled" class="sample-section">
<ui:Label text="비활성화 상태" class="section-title" />
<utk:UTKMultiSelectDropdown name="dropdown-disabled" label="설정 (비활성화)" choices="옵션1,옵션2,옵션3" is-enabled="false" />
<ui:Label text="※ 비활성화된 드롭다운은 클릭할 수 없습니다." class="note-label" />
</ui:VisualElement>
</ui:VisualElement>
</ui:VisualElement>
<ui:VisualElement name="UTKDropdownRoot" style="padding: 20px; background-color: rgb(51, 51, 51); flex-grow: 1;">
<ui:Label text="UTKDropdown Samples" style="font-size: 18px; margin-bottom: 20px; color: white;" />
<ui:VisualElement style="flex-grow: 1; width: 300px;">
<ui:VisualElement name="dropdown-section-basic" class="sample-section">
<ui:Label text="기본 단일 선택 드롭다운" class="section-title" />
<utk:UTKDropdown name="dropdown-single-basic" label="과일 선택" choices="사과,바나나,오렌지,포도,딸기,수박" />
<ui:Label name="dropdown-result-basic" text="선택 결과: 없음" class="result-label" />
</ui:VisualElement>
<ui:VisualElement name="dropdown-section-default" class="sample-section">
<ui:Label text="기본값이 있는 드롭다운" class="section-title" />
<utk:UTKDropdown name="dropdown-single-default" label="언어 선택" choices="한국어,English,日本語,中文,Español" index="0" />
<ui:Label name="dropdown-result-default" text="선택 언어: 없음" class="result-label" />
</ui:VisualElement>
<ui:VisualElement name="dropdown-section-sort" class="sample-section">
<ui:Label text="정렬 옵션" class="section-title" />
<utk:UTKDropdown name="dropdown-single-sort" label="정렬" choices="이름순,날짜순,크기순,최신순" />
<ui:Label name="dropdown-result-sort" text="정렬 방식: 없음" class="result-label-info" />
</ui:VisualElement>
<ui:VisualElement name="dropdown-section-disabled" class="sample-section">
<ui:Label text="비활성화 상태" class="section-title" />
<utk:UTKDropdown name="dropdown-single-disabled" label="설정 (비활성화)" choices="옵션1,옵션2,옵션3" index="1" is-enabled="false" />
<ui:Label text="※ 비활성화된 드롭다운은 클릭할 수 없습니다." class="note-label" />
</ui:VisualElement>
</ui:VisualElement>
</ui:VisualElement>
<ui:VisualElement name="UTKEnumDropdownRoot" style="padding: 20px; background-color: rgb(51, 51, 51); flex-grow: 1;">
<ui:Label text="UTKEnumDropDown Samples" style="font-size: 18px; margin-bottom: 20px; color: white;" />
<ui:VisualElement style="flex-grow: 1; width: 300px;">
<ui:VisualElement name="enum-section-difficulty" class="sample-section">
<ui:Label text="게임 난이도 선택" class="section-title" />
<utk:UTKEnumDropDown name="enum-dropdown-difficulty" label="난이도" />
<ui:Label name="enum-result-difficulty" text="선택 난이도: 없음" class="result-label" />
</ui:VisualElement>
<ui:VisualElement name="enum-section-quality" class="sample-section">
<ui:Label text="품질 설정" class="section-title" />
<utk:UTKEnumDropDown name="enum-dropdown-quality" label="품질" placeholder="품질을 선택하세요" />
<ui:Label name="enum-result-quality" text="선택 품질: 없음" class="result-label" />
</ui:VisualElement>
<ui:VisualElement name="enum-section-format" class="sample-section">
<ui:Label text="파일 형식" class="section-title" />
<utk:UTKEnumDropDown name="enum-dropdown-format" label="형식" />
<ui:Label name="enum-result-format" text="선택 형식: 없음" class="result-label-info" />
</ui:VisualElement>
<ui:VisualElement name="enum-section-disabled" class="sample-section">
<ui:Label text="비활성화 상태" class="section-title" />
<utk:UTKEnumDropDown name="enum-dropdown-disabled" label="정렬 (비활성화)" is-enabled="false" />
<ui:Label text="※ 비활성화된 드롭다운은 클릭할 수 없습니다." class="note-label" />
</ui:VisualElement>
</ui:VisualElement>
</ui:VisualElement>
</ui:VisualElement>
</ui:VisualElement>
<utk:UTKToggle name="toggle" label="테마 변경" style="position: absolute; top: 10px; right: 10px;" />
</ui:UXML>

View File

@@ -0,0 +1,10 @@
fileFormatVersion: 2
guid: 7811bd1f07a45124d9706c043c3c1ee6
ScriptedImporter:
internalIDToNameTable: []
externalObjects: {}
serializedVersion: 2
userData:
assetBundleName:
assetBundleVariant:
script: {fileID: 13804, guid: 0000000000000000e000000000000000, type: 0}

View File

@@ -0,0 +1,47 @@
/*
* UTKMultiSelectDropdownSample 스타일
*/
/* 샘플 섹션 */
.sample-section {
margin-bottom: 30px;
padding: 15px;
background-color: rgb(38, 38, 38);
border-top-left-radius: 8px;
border-top-right-radius: 8px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
/* 섹션 타이틀 */
.section-title {
font-size: 16px;
margin-bottom: 15px;
color: rgb(77, 179, 255);
-unity-font-style: bold;
}
/* 결과 라벨 (기본) */
.result-label {
margin-top: 10px;
color: rgb(204, 204, 204);
}
/* 결과 라벨 (정보) */
.result-label-info {
margin-top: 10px;
color: rgb(128, 204, 255);
}
/* 결과 라벨 (경고) */
.result-label-warning {
margin-top: 10px;
color: rgb(255, 204, 128);
}
/* 참고 라벨 */
.note-label {
margin-top: 10px;
font-size: 12px;
color: rgb(153, 153, 153);
}

View File

@@ -0,0 +1,11 @@
fileFormatVersion: 2
guid: 446b732074b6c7e438d1ae942f153f63
ScriptedImporter:
internalIDToNameTable: []
externalObjects: {}
serializedVersion: 2
userData:
assetBundleName:
assetBundleVariant:
script: {fileID: 12385, guid: 0000000000000000e000000000000000, type: 0}
disableValidation: 0

View File

@@ -8,8 +8,8 @@ namespace UVC.UIToolkit
{
/// <summary>
/// 드롭다운 메뉴 컴포넌트.
/// Unity DropdownField를 래핑하여 커스텀 스타일을 적용합니다.
/// 여러 옵션 중 하나를 선택할 수 있는 UI 컨트롤입니다.
/// 선택된 항목은 체크 아이콘으로 표시됩니다.
/// </summary>
/// <remarks>
/// <para><b>드롭다운(Dropdown)이란?</b></para>
@@ -21,20 +21,27 @@ namespace UVC.UIToolkit
///
/// <para><b>주요 속성:</b></para>
/// <list type="bullet">
/// <item><description><c>choices</c> - 선택 가능한 옵션 목록 (List<string>)</description></item>
/// <item><description><c>index</c> - 현재 선택된 인덱스 (0부터 시작)</description></item>
/// <item><description><c>value</c> - 현재 선택된 텍스트 값</description></item>
/// <item><description><c>SelectedIndex</c> - index의 별칭</description></item>
/// <item><description><c>SelectedValue</c> - value의 별칭 (읽기 전용)</description></item>
/// <item><description><c>Label</c> - 드롭다운 라벨 텍스트</description></item>
/// <item><description><c>Choices</c> - 선택 가능한 옵션 목록 (쉼표로 구분된 문자열)</description></item>
/// <item><description><c>SelectedIndex</c> - 현재 선택된 인덱스 (0부터 시작, -1은 선택 안 됨)</description></item>
/// <item><description><c>SelectedValue</c> - 현재 선택된 텍스트 값 (읽기 전용)</description></item>
/// <item><description><c>Placeholder</c> - 선택되지 않았을 때 표시되는 텍스트</description></item>
/// <item><description><c>IsEnabled</c> - 활성화/비활성화 상태</description></item>
/// </list>
///
/// <para><b>주요 메서드:</b></para>
/// <list type="bullet">
/// <item><description><c>SetOptions(List<string>)</c> - 전체 옵션 목록 교체</description></item>
/// <item><description><c>AddOption(string)</c> - 옵션 하나 추가</description></item>
/// <item><description><c>SetSelectedIndex(int, bool)</c> - 인덱스로 선택 (notify: 이벤트 발생 여부)</description></item>
/// <item><description><c>SetSelectedValue(string, bool)</c> - 값으로 선택 (notify: 이벤트 발생 여부)</description></item>
/// </list>
///
/// <para><b>주요 이벤트:</b></para>
/// <list type="bullet">
/// <item><description><c>OnSelectionChanged</c> - 선택 변경 시 발생 (인덱스, 값 전달)</description></item>
/// </list>
///
/// <para><b>실제 활용 예시:</b></para>
/// <list type="bullet">
/// <item><description>정렬 옵션 - 이름순, 날짜순, 크기순</description></item>
@@ -49,7 +56,7 @@ namespace UVC.UIToolkit
/// <code>
/// // 국가 선택 드롭다운
/// var countryDropdown = new UTKDropdown();
/// countryDropdown.label = "국가 선택";
/// countryDropdown.Label = "국가 선택";
/// countryDropdown.SetOptions(new List<string> { "한국", "미국", "일본", "중국" });
///
/// // 선택 변경 이벤트 (인덱스와 값 모두 전달)
@@ -61,7 +68,7 @@ namespace UVC.UIToolkit
/// var sortDropdown = new UTKDropdown("정렬", new List<string> { "이름", "날짜", "크기" });
///
/// // 기본값 설정 (인덱스로)
/// sortDropdown.index = 0; // 첫 번째 항목 선택
/// sortDropdown.SelectedIndex = 0; // 첫 번째 항목 선택
///
/// // 기본값 설정 (값으로)
/// sortDropdown.SetSelectedValue("날짜");
@@ -82,38 +89,111 @@ namespace UVC.UIToolkit
/// choices="한국어,English,日本語"
/// index="0" />
///
/// <!-- 플레이스홀더 사용 -->
/// <utk:UTKDropdown label="국가"
/// choices="한국,미국,일본,중국"
/// placeholder="국가를 선택하세요" />
///
/// <!-- 비활성화 상태 -->
/// <utk:UTKDropdown label="선택" is-enabled="false"
/// choices="옵션1,옵션2,옵션3" />
/// choices="옵션1,옵션2,옵션3"
/// index="1" />
/// </code>
/// </example>
[UxmlElement]
public partial class UTKDropdown : DropdownField, IDisposable
public partial class UTKDropdown : VisualElement, IDisposable
{
#region Constants
private const string USS_PATH = "UIToolkit/Dropdown/UTKDropdown";
private const string USS_PATH = "UIToolkit/Dropdown/UTKDropdownUss";
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;
private VisualElement? _popupContainer;
private ScrollView? _optionsScrollView;
private string _label = "";
private List<string> _choices = new();
private int _selectedIndex = -1;
private string _placeholder = DEFAULT_PLACEHOLDER;
private bool _isEnabled = true;
private bool _isPopupOpen;
private readonly StyleSheet? _loadedUss;
// 옵션 항목과 체크 아이콘 추적
private readonly List<(VisualElement container, UTKLabel checkIcon)> _optionItems = new();
#endregion
#region Events
/// <summary>선택 변경 이벤트</summary>
/// <summary>선택 변경 이벤트 (선택된 인덱스, 선택된 값)</summary>
public event Action<int, string>? OnSelectionChanged;
#endregion
#region Properties
/// <summary>선택된 인덱스</summary>
public int SelectedIndex
/// <summary>라벨 텍스트</summary>
[UxmlAttribute("label")]
public string Label
{
get => index;
set => index = value;
get => _label;
set
{
_label = value;
if (_labelElement != null)
{
_labelElement.text = value;
_labelElement.style.display = string.IsNullOrEmpty(value) ? DisplayStyle.None : DisplayStyle.Flex;
}
}
}
/// <summary>선택된 값</summary>
public string? SelectedValue => value;
/// <summary>선택 가능한 옵션 목록</summary>
[UxmlAttribute("choices")]
public string Choices
{
get => string.Join(",", _choices);
set
{
if (string.IsNullOrEmpty(value))
{
_choices.Clear();
}
else
{
_choices = new List<string>(value.Split(','));
}
RebuildOptions();
}
}
/// <summary>선택된 인덱스</summary>
[UxmlAttribute("index")]
public int SelectedIndex
{
get => _selectedIndex;
set => SetSelectedIndex(value, true);
}
/// <summary>선택된 값 (읽기 전용)</summary>
public string? SelectedValue => _selectedIndex >= 0 && _selectedIndex < _choices.Count ? _choices[_selectedIndex] : null;
/// <summary>플레이스홀더 텍스트</summary>
[UxmlAttribute("placeholder")]
public string Placeholder
{
get => _placeholder;
set
{
_placeholder = value;
UpdateDisplayText();
}
}
/// <summary>활성화 상태</summary>
[UxmlAttribute("is-enabled")]
@@ -138,32 +218,76 @@ namespace UVC.UIToolkit
if (uss != null)
{
styleSheets.Add(uss);
_loadedUss = uss;
}
SetupStyles();
CreateUI();
SetupEvents();
SubscribeToThemeChanges();
}
public UTKDropdown(string label, List<string>? options = null) : this()
{
this.label = label;
Label = label;
if (options != null)
{
choices = options;
SetOptions(options);
}
}
#endregion
#region Setup
private void SetupStyles()
#region UI Creation
private void CreateUI()
{
AddToClassList("utk-dropdown");
focusable = true;
// 라벨
_labelElement = new Label();
_labelElement.AddToClassList("utk-dropdown__label");
Add(_labelElement);
// 입력 컨테이너
_inputContainer = new VisualElement();
_inputContainer.AddToClassList("utk-dropdown__input");
Add(_inputContainer);
// 표시 라벨
_displayLabel = new Label(_placeholder);
_displayLabel.AddToClassList("utk-dropdown__display");
_displayLabel.AddToClassList("utk-dropdown__display--placeholder");
_inputContainer.Add(_displayLabel);
// 드롭다운 아이콘 컨테이너
_dropdownIconContainer = new VisualElement();
_dropdownIconContainer.AddToClassList("utk-dropdown__icon-container");
_inputContainer.Add(_dropdownIconContainer);
// 드롭다운 아이콘
_dropdownIcon = new UTKLabel(UTKMaterialIcons.ArrowDropDown, 24);
_dropdownIcon.AddToClassList("utk-dropdown__icon");
_dropdownIconContainer.Add(_dropdownIcon);
// 팝업 컨테이너
_popupContainer = new VisualElement();
_popupContainer.AddToClassList("utk-dropdown__popup");
_popupContainer.style.display = DisplayStyle.None;
Add(_popupContainer);
// 옵션 스크롤뷰
_optionsScrollView = new ScrollView(ScrollViewMode.Vertical);
_optionsScrollView.AddToClassList("utk-dropdown__options");
_popupContainer.Add(_optionsScrollView);
}
private void SetupEvents()
{
RegisterCallback<ChangeEvent<string>>(OnDropdownValueChanged);
// 입력 컨테이너 클릭 시 팝업 토글
_inputContainer?.RegisterCallback<ClickEvent>(OnInputClicked);
// 외부 클릭 감지를 위한 루트 패널 이벤트
RegisterCallback<AttachToPanelEvent>(OnAttachedToPanel);
RegisterCallback<DetachFromPanelEvent>(OnDetachedFromPanel);
}
private void SubscribeToThemeChanges()
@@ -182,9 +306,129 @@ namespace UVC.UIToolkit
#endregion
#region Event Handlers
private void OnDropdownValueChanged(ChangeEvent<string> evt)
private void OnInputClicked(ClickEvent evt)
{
OnSelectionChanged?.Invoke(index, evt.newValue);
if (!_isEnabled) return;
_isPopupOpen = !_isPopupOpen;
if (_popupContainer != null)
{
if (_isPopupOpen)
{
OpenPopup();
}
else
{
ClosePopup();
}
}
EnableInClassList("utk-dropdown--open", _isPopupOpen);
evt.StopPropagation();
}
private void OpenPopup()
{
if (_popupContainer == null || _inputContainer == null || panel == null) return;
// 아이콘 변경
if (_dropdownIcon is UTKLabel iconLabel)
{
iconLabel.SetMaterialIcon(UTKMaterialIcons.ArrowDropUp);
}
// 팝업을 루트로 이동
if (_popupContainer.parent != panel.visualTree)
{
_popupContainer.RemoveFromHierarchy();
panel.visualTree.Add(_popupContainer);
UTKThemeManager.Instance.ApplyThemeToElement(_popupContainer);
if (_loadedUss != null)
{
_popupContainer.styleSheets.Add(_loadedUss);
}
}
// 드롭다운의 월드 위치 계산
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;
_popupContainer.style.display = DisplayStyle.Flex;
}
private void ClosePopup()
{
_isPopupOpen = false;
// 아이콘 복원
if (_dropdownIcon is UTKLabel iconLabel)
{
iconLabel.SetMaterialIcon(UTKMaterialIcons.ArrowDropDown);
}
if (_popupContainer != null)
{
_popupContainer.style.display = DisplayStyle.None;
// 팝업을 원래 위치(드롭다운 내부)로 되돌림
if (_popupContainer.parent != this)
{
_popupContainer.RemoveFromHierarchy();
Add(_popupContainer);
}
}
EnableInClassList("utk-dropdown--open", false);
}
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 OnOptionClicked(int index)
{
SetSelectedIndex(index, true);
ClosePopup();
}
#endregion
@@ -194,7 +438,8 @@ namespace UVC.UIToolkit
/// </summary>
public void SetOptions(List<string> options)
{
choices = options ?? new List<string>();
_choices = options ?? new List<string>();
RebuildOptions();
}
/// <summary>
@@ -202,8 +447,26 @@ namespace UVC.UIToolkit
/// </summary>
public void AddOption(string option)
{
var list = new List<string>(choices) { option };
choices = list;
_choices.Add(option);
RebuildOptions();
}
/// <summary>
/// 선택된 인덱스 설정
/// </summary>
public void SetSelectedIndex(int index, bool notify)
{
if (index < -1 || index >= _choices.Count) return;
if (_selectedIndex == index) return;
_selectedIndex = index;
UpdateDisplayText();
UpdateCheckIcons();
if (notify && _selectedIndex >= 0)
{
OnSelectionChanged?.Invoke(_selectedIndex, _choices[_selectedIndex]);
}
}
/// <summary>
@@ -213,21 +476,87 @@ namespace UVC.UIToolkit
{
if (selectedValue == null)
{
index = -1;
SetSelectedIndex(-1, notify);
return;
}
var idx = choices.IndexOf(selectedValue);
var idx = _choices.IndexOf(selectedValue);
if (idx >= 0)
{
if (notify)
SetSelectedIndex(idx, notify);
}
}
private void RebuildOptions()
{
if (_optionsScrollView == null) return;
_optionItems.Clear();
_optionsScrollView.Clear();
for (int i = 0; i < _choices.Count; i++)
{
var index = i; // 클로저 캡처 방지
var optionContainer = new VisualElement();
optionContainer.AddToClassList("utk-dropdown__option");
// 체크 아이콘 (선택된 항목 표시)
var checkIcon = new UTKLabel(UTKMaterialIcons.Check, 16);
checkIcon.AddToClassList("utk-dropdown__check-icon");
checkIcon.style.display = _selectedIndex == i ? DisplayStyle.Flex : DisplayStyle.None;
optionContainer.Add(checkIcon);
// 옵션 라벨
var optionLabel = new Label(_choices[i]);
optionLabel.AddToClassList("utk-dropdown__option-label");
optionContainer.Add(optionLabel);
// 클릭 이벤트
optionContainer.RegisterCallback<ClickEvent>(evt =>
{
index = idx;
}
else
OnOptionClicked(index);
evt.StopPropagation();
});
// 마우스 호버 이벤트
optionContainer.RegisterCallback<MouseEnterEvent>(_ =>
{
SetValueWithoutNotify(selectedValue);
}
optionContainer.AddToClassList("utk-dropdown__option--hover");
});
optionContainer.RegisterCallback<MouseLeaveEvent>(_ =>
{
optionContainer.RemoveFromClassList("utk-dropdown__option--hover");
});
_optionItems.Add((optionContainer, checkIcon));
_optionsScrollView.Add(optionContainer);
}
UpdateDisplayText();
}
private void UpdateDisplayText()
{
if (_displayLabel == null) return;
if (_selectedIndex < 0 || _selectedIndex >= _choices.Count)
{
_displayLabel.text = _placeholder;
_displayLabel.AddToClassList("utk-dropdown__display--placeholder");
}
else
{
_displayLabel.text = _choices[_selectedIndex];
_displayLabel.RemoveFromClassList("utk-dropdown__display--placeholder");
}
}
private void UpdateCheckIcons()
{
for (int i = 0; i < _optionItems.Count; i++)
{
var (_, checkIcon) = _optionItems[i];
checkIcon.style.display = _selectedIndex == i ? DisplayStyle.Flex : DisplayStyle.None;
}
}
#endregion
@@ -240,7 +569,15 @@ namespace UVC.UIToolkit
UTKThemeManager.Instance.OnThemeChanged -= OnThemeChanged;
OnSelectionChanged = null;
UnregisterCallback<ChangeEvent<string>>(OnDropdownValueChanged);
_inputContainer?.UnregisterCallback<ClickEvent>(OnInputClicked);
if (panel != null)
{
panel.visualTree.UnregisterCallback<PointerDownEvent>(OnPanelPointerDown);
}
_optionItems.Clear();
}
#endregion
}

View File

@@ -1,5 +1,6 @@
#nullable enable
using System;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UIElements;
@@ -7,8 +8,8 @@ namespace UVC.UIToolkit
{
/// <summary>
/// Enum 선택 드롭다운 컴포넌트.
/// Unity EnumField를 래핑하여 커스텀 스타일을 적용합니다.
/// C# Enum 타입을 자동으로 드롭다운 옵션으로 변환합니다.
/// 여러 옵션 중 하나를 선택할 수 있는 UI 컨트롤입니다.
/// 선택된 항목은 체크 아이콘으로 표시됩니다.
/// </summary>
/// <remarks>
/// <para><b>Enum 드롭다운이란?</b></para>
@@ -31,13 +32,21 @@ namespace UVC.UIToolkit
///
/// <para><b>주요 속성:</b></para>
/// <list type="bullet">
/// <item><description><c>Label</c> - 드롭다운 라벨 텍스트</description></item>
/// <item><description><c>Value</c> - 현재 선택된 Enum 값</description></item>
/// <item><description><c>Placeholder</c> - 선택되지 않았을 때 표시되는 텍스트</description></item>
/// <item><description><c>IsEnabled</c> - 활성화/비활성화 상태</description></item>
/// </list>
///
/// <para><b>중요한 메서드:</b></para>
/// <para><b>주요 메서드:</b></para>
/// <list type="bullet">
/// <item><description><c>Init(Enum)</c> - Enum 타입과 기본값으로 초기화 (필수!)</description></item>
/// <item><description><c>SetValue(Enum, bool)</c> - 값 설정 (notify: 이벤트 발생 여부)</description></item>
/// </list>
///
/// <para><b>주요 이벤트:</b></para>
/// <list type="bullet">
/// <item><description><c>OnValueChanged</c> - 선택 변경 시 발생 (Enum 값 전달)</description></item>
/// </list>
///
/// <para><b>UXML 사용 시 주의:</b></para>
@@ -67,7 +76,7 @@ namespace UVC.UIToolkit
/// <code>
/// // 난이도 선택 드롭다운
/// var difficultyDropdown = new UTKEnumDropDown();
/// difficultyDropdown.label = "난이도";
/// difficultyDropdown.Label = "난이도";
/// difficultyDropdown.Init(Difficulty.Normal); // 기본값: Normal
///
/// // 값 변경 이벤트
@@ -88,8 +97,8 @@ namespace UVC.UIToolkit
/// </code>
/// <para><b>UXML에서 사용:</b></para>
/// <code>
/// <!-- UXML에서는 name만 지정 -->
/// <utk:UTKEnumDropDown name="difficulty-dropdown" label="난이도" />
/// <!-- UXML에서는 name과 label만 지정 -->
/// <utk:UTKEnumDropDown name="difficulty-dropdown" label="난이도" placeholder="난이도를 선택하세요" />
/// <utk:UTKEnumDropDown name="quality-dropdown" label="품질" />
/// </code>
/// <para><b>UXML 로드 후 C#에서 초기화:</b></para>
@@ -103,28 +112,78 @@ namespace UVC.UIToolkit
/// </code>
/// </example>
[UxmlElement]
public partial class UTKEnumDropDown : EnumField, IDisposable
public partial class UTKEnumDropDown : VisualElement, IDisposable
{
#region Constants
private const string USS_PATH = "UIToolkit/Dropdown/UTKEnumDropDown";
private const string USS_PATH = "UIToolkit/Dropdown/UTKEnumDropDownUss";
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;
private VisualElement? _popupContainer;
private ScrollView? _optionsScrollView;
private string _label = "";
private Type? _enumType;
private Enum? _value;
private string _placeholder = DEFAULT_PLACEHOLDER;
private bool _isEnabled = true;
private bool _isPopupOpen;
private readonly StyleSheet? _loadedUss;
// 옵션 항목과 체크 아이콘 추적
private readonly List<(VisualElement container, UTKLabel checkIcon, Enum enumValue)> _optionItems = new();
#endregion
#region Events
/// <summary>값 변경 이벤트</summary>
/// <summary>값 변경 이벤트 (선택된 Enum 값)</summary>
public event Action<Enum?>? OnValueChanged;
#endregion
#region Properties
/// <summary>현재 값</summary>
/// <summary>라벨 텍스트</summary>
[UxmlAttribute("label")]
public string Label
{
get => _label;
set
{
_label = value;
if (_labelElement != null)
_labelElement.text = value;
}
}
/// <summary>현재 선택된 Enum 값</summary>
public Enum? Value
{
get => value;
set => this.value = value;
get => _value;
set
{
if (_value?.Equals(value) == true) return;
_value = value;
UpdateDisplayText();
UpdateCheckIcons();
}
}
/// <summary>플레이스홀더 텍스트 (선택되지 않았을 때 표시)</summary>
[UxmlAttribute("placeholder")]
public string Placeholder
{
get => _placeholder;
set
{
_placeholder = value;
UpdateDisplayText();
}
}
/// <summary>활성화 상태</summary>
@@ -146,33 +205,69 @@ namespace UVC.UIToolkit
{
UTKThemeManager.Instance.ApplyThemeToElement(this);
var uss = Resources.Load<StyleSheet>(USS_PATH);
if (uss != null)
_loadedUss = Resources.Load<StyleSheet>(USS_PATH);
if (_loadedUss != null)
{
styleSheets.Add(uss);
styleSheets.Add(_loadedUss);
}
SetupStyles();
SetupEvents();
CreateUI();
SubscribeToThemeChanges();
}
public UTKEnumDropDown(string label, Enum defaultValue) : this()
{
this.label = label;
Label = label;
Init(defaultValue);
}
#endregion
#region Setup
private void SetupStyles()
private void CreateUI()
{
AddToClassList("utk-enum-dropdown");
}
private void SetupEvents()
{
RegisterCallback<ChangeEvent<Enum>>(OnFieldValueChanged);
// Label
_labelElement = new Label(_label);
_labelElement.AddToClassList("utk-enum-dropdown__label");
Add(_labelElement);
// Input Container
_inputContainer = new VisualElement();
_inputContainer.AddToClassList("utk-enum-dropdown__input");
Add(_inputContainer);
// Display Label
_displayLabel = new Label(_placeholder);
_displayLabel.AddToClassList("utk-enum-dropdown__display");
_displayLabel.AddToClassList("utk-enum-dropdown__display--placeholder");
_inputContainer.Add(_displayLabel);
// Icon Container
_dropdownIconContainer = new VisualElement();
_dropdownIconContainer.AddToClassList("utk-enum-dropdown__icon-container");
_inputContainer.Add(_dropdownIconContainer);
// Dropdown Icon
_dropdownIcon = new UTKLabel(UTKMaterialIcons.ArrowDropDown, 24);
_dropdownIcon.AddToClassList("utk-enum-dropdown__icon");
_dropdownIconContainer.Add(_dropdownIcon);
// Popup Container
_popupContainer = new VisualElement();
_popupContainer.AddToClassList("utk-enum-dropdown__popup");
_popupContainer.style.display = DisplayStyle.None;
_popupContainer.style.position = Position.Absolute;
// Options ScrollView
_optionsScrollView = new ScrollView(ScrollViewMode.Vertical);
_optionsScrollView.AddToClassList("utk-enum-dropdown__options");
_popupContainer.Add(_optionsScrollView);
// Events
_inputContainer.RegisterCallback<ClickEvent>(OnInputClicked);
RegisterCallback<AttachToPanelEvent>(OnAttachedToPanel);
RegisterCallback<DetachFromPanelEvent>(OnDetachedFromPanel);
}
private void SubscribeToThemeChanges()
@@ -188,12 +283,240 @@ namespace UVC.UIToolkit
{
UTKThemeManager.Instance.ApplyThemeToElement(this);
}
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);
}
}
#endregion
#region Event Handlers
private void OnFieldValueChanged(ChangeEvent<Enum> evt)
#region Public Methods
/// <summary>
/// Enum 타입과 기본값으로 초기화합니다.
/// </summary>
/// <param name="defaultValue">기본값으로 설정할 Enum 값</param>
public void Init(Enum defaultValue)
{
OnValueChanged?.Invoke(evt.newValue);
_enumType = defaultValue.GetType();
_value = defaultValue;
RebuildOptions();
UpdateDisplayText();
}
/// <summary>
/// 현재 값을 특정 Enum 값으로 설정합니다.
/// </summary>
/// <param name="enumValue">설정할 Enum 값</param>
/// <param name="notify">이벤트 발생 여부</param>
public void SetValue(Enum? enumValue, bool notify = true)
{
if (_value?.Equals(enumValue) == true) return;
_value = enumValue;
UpdateDisplayText();
UpdateCheckIcons();
if (notify)
{
OnValueChanged?.Invoke(_value);
}
}
#endregion
#region Private Methods
private void RebuildOptions()
{
if (_optionsScrollView == null || _enumType == null) return;
// Clear existing options
_optionsScrollView.Clear();
_optionItems.Clear();
// Get all enum values
var enumValues = Enum.GetValues(_enumType);
// Create option for each enum value
foreach (Enum enumValue in enumValues)
{
var optionContainer = new VisualElement();
optionContainer.AddToClassList("utk-enum-dropdown__option");
// Check icon
var checkIcon = new UTKLabel(UTKMaterialIcons.Check, 16);
checkIcon.AddToClassList("utk-enum-dropdown__check-icon");
checkIcon.style.display = _value?.Equals(enumValue) == true ? DisplayStyle.Flex : DisplayStyle.None;
optionContainer.Add(checkIcon);
// Option label
var optionLabel = new Label(enumValue.ToString());
optionLabel.AddToClassList("utk-enum-dropdown__option-label");
optionContainer.Add(optionLabel);
// Click event
optionContainer.RegisterCallback<ClickEvent>(evt =>
{
evt.StopPropagation();
OnOptionSelected(enumValue);
});
// 마우스 호버 이벤트
optionContainer.RegisterCallback<MouseEnterEvent>(_ =>
{
optionContainer.AddToClassList("utk-enum-dropdown__option--hover");
});
optionContainer.RegisterCallback<MouseLeaveEvent>(_ =>
{
optionContainer.RemoveFromClassList("utk-enum-dropdown__option--hover");
});
_optionsScrollView.Add(optionContainer);
_optionItems.Add((optionContainer, checkIcon, enumValue));
}
}
private void UpdateDisplayText()
{
if (_displayLabel == null) return;
if (_value != null)
{
_displayLabel.text = _value.ToString();
_displayLabel.RemoveFromClassList("utk-enum-dropdown__display--placeholder");
}
else
{
_displayLabel.text = _placeholder;
_displayLabel.AddToClassList("utk-enum-dropdown__display--placeholder");
}
}
private void UpdateCheckIcons()
{
foreach (var (_, checkIcon, enumValue) in _optionItems)
{
checkIcon.style.display = _value?.Equals(enumValue) == true ? DisplayStyle.Flex : DisplayStyle.None;
}
}
private void OnOptionSelected(Enum enumValue)
{
SetValue(enumValue, notify: true);
ClosePopup();
}
private void OnInputClicked(ClickEvent evt)
{
if (!_isEnabled) return;
_isPopupOpen = !_isPopupOpen;
if (_popupContainer != null)
{
if (_isPopupOpen)
{
OpenPopup();
}
else
{
ClosePopup();
}
}
EnableInClassList("utk-enum-dropdown--open", _isPopupOpen);
evt.StopPropagation();
}
private void OpenPopup()
{
if (_popupContainer == null || _inputContainer == null || panel == null) return;
// 아이콘 변경
if (_dropdownIcon is UTKLabel iconLabel)
{
iconLabel.SetMaterialIcon(UTKMaterialIcons.ArrowDropUp);
}
// 팝업을 루트로 이동
if (_popupContainer.parent != panel.visualTree)
{
_popupContainer.RemoveFromHierarchy();
panel.visualTree.Add(_popupContainer);
UTKThemeManager.Instance.ApplyThemeToElement(_popupContainer);
if (_loadedUss != null)
{
_popupContainer.styleSheets.Add(_loadedUss);
}
}
// 드롭다운의 월드 위치 계산
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;
_popupContainer.style.display = DisplayStyle.Flex;
}
private void ClosePopup()
{
_isPopupOpen = false;
// 아이콘 복원
if (_dropdownIcon is UTKLabel iconLabel)
{
iconLabel.SetMaterialIcon(UTKMaterialIcons.ArrowDropDown);
}
if (_popupContainer != null)
{
_popupContainer.style.display = DisplayStyle.None;
// 팝업을 원래 위치(드롭다운 내부)로 되돌림
if (_popupContainer.parent != this)
{
_popupContainer.RemoveFromHierarchy();
Add(_popupContainer);
}
}
// 포커스 상태 클래스 제거
EnableInClassList("utk-enum-dropdown--open", false);
}
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();
}
#endregion
@@ -204,8 +527,20 @@ namespace UVC.UIToolkit
_disposed = true;
UTKThemeManager.Instance.OnThemeChanged -= OnThemeChanged;
UnregisterCallback<ChangeEvent<Enum>>(OnFieldValueChanged);
OnValueChanged = null;
_inputContainer?.UnregisterCallback<ClickEvent>(OnInputClicked);
if (panel != null)
{
panel.visualTree.UnregisterCallback<PointerDownEvent>(OnPanelPointerDown);
}
foreach (var (container, checkIcon, _) in _optionItems)
{
checkIcon.Dispose();
}
_optionItems.Clear();
}
#endregion
}

View File

@@ -0,0 +1,610 @@
#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;
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);
// 팝업 컨테이너
_popupContainer = new VisualElement();
_popupContainer.AddToClassList("utk-multiselect-dropdown__popup");
_popupContainer.style.display = DisplayStyle.None;
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<DetachFromPanelEvent>(_ =>
{
UTKThemeManager.Instance.OnThemeChanged -= OnThemeChanged;
});
}
private void OnThemeChanged(UTKTheme theme)
{
UTKThemeManager.Instance.ApplyThemeToElement(this);
}
#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 (_popupContainer == null || _inputContainer == null || panel == null) return;
// 아이콘 변경 (회전 대신 다른 아이콘 사용)
if (_dropdownIcon is UTKLabel iconLabel)
{
iconLabel.SetMaterialIcon(UTKMaterialIcons.ArrowDropUp);
}
// 팝업을 루트로 이동
if (_popupContainer.parent != panel.visualTree)
{
_popupContainer.RemoveFromHierarchy();
panel.visualTree.Add(_popupContainer);
UTKThemeManager.Instance.ApplyThemeToElement(_popupContainer);
if (_loadedUss != null)
{
_popupContainer.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;
_popupContainer.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);
}
if (_popupContainer != null)
{
_popupContainer.style.display = DisplayStyle.None;
// 팝업을 원래 위치(드롭다운 내부)로 되돌림
if (_popupContainer.parent != this)
{
_popupContainer.RemoveFromHierarchy();
Add(_popupContainer);
// 원래 스타일 복원
_popupContainer.style.position = Position.Absolute;
_popupContainer.style.left = 0;
_popupContainer.style.right = 0;
_popupContainer.style.top = Length.Percent(100);
_popupContainer.style.width = StyleKeyword.Auto;
}
}
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;
OnSelectionChanged = null;
_inputContainer?.UnregisterCallback<ClickEvent>(OnInputClicked);
if (panel != null)
{
panel.visualTree.UnregisterCallback<PointerDownEvent>(OnPanelPointerDown);
}
}
#endregion
}
}

View File

@@ -0,0 +1,2 @@
fileFormatVersion: 2
guid: 8f3f5663c7d4cdd40875201e91f710bc

View File

@@ -18,7 +18,7 @@ namespace UVC.UIToolkit
/// parent.Add(view);
///
/// // UXML에서 사용
/// &lt;utk:UTKBoolPropertyItemView label="활성화" value="true" /&gt;
/// <utk:UTKBoolPropertyItemView label="활성화" value="true" />
/// </code>
/// </summary>
[UxmlElement]

View File

@@ -198,7 +198,7 @@ namespace UVC.UIToolkit
{
_colorPreview?.SetEnabled(!isReadOnly);
if (_hexField != null) _hexField.isReadOnly = isReadOnly;
if (_pickerButton != null) _pickerButton.IsEnabled = !isReadOnly;
if (_pickerButton != null) _pickerButton.style.display = isReadOnly ? DisplayStyle.None : DisplayStyle.Flex;
}
#endregion

View File

@@ -185,7 +185,7 @@ namespace UVC.UIToolkit
protected override void OnReadOnlyStateChanged(bool isReadOnly)
{
if (_pickerButton != null) _pickerButton.IsEnabled = !isReadOnly;
if (_pickerButton != null) _pickerButton.style.display = isReadOnly ? DisplayStyle.None : DisplayStyle.Flex;
if (_colorPreview != null) _colorPreview.SetEnabled(!isReadOnly);
}
#endregion

View File

@@ -176,7 +176,7 @@ namespace UVC.UIToolkit
protected override void OnReadOnlyStateChanged(bool isReadOnly)
{
if (_dateField != null) _dateField.isReadOnly = isReadOnly;
if (_pickerButton != null) _pickerButton.IsEnabled = !isReadOnly;
if (_pickerButton != null) _pickerButton.style.display = isReadOnly ? DisplayStyle.None : DisplayStyle.Flex;
}
#endregion

View File

@@ -119,8 +119,6 @@ namespace UVC.UIToolkit
// Fallback: UXML에서 못 찾으면 생성
if (_valueContainer != null)
{
_valueContainer.style.flexDirection = FlexDirection.Row;
if (_startField == null)
{
_startField = new UTKInputField { name = "start-field" };
@@ -243,8 +241,8 @@ namespace UVC.UIToolkit
{
if (_startField != null) _startField.isReadOnly = isReadOnly;
if (_endField != null) _endField.isReadOnly = isReadOnly;
if (_startPickerBtn != null) _startPickerBtn.IsEnabled = !isReadOnly;
if (_endPickerBtn != null) _endPickerBtn.IsEnabled = !isReadOnly;
if (_startPickerBtn != null) _startPickerBtn.style.display = isReadOnly ? DisplayStyle.None : DisplayStyle.Flex;
if (_endPickerBtn != null) _endPickerBtn.style.display = isReadOnly ? DisplayStyle.None : DisplayStyle.Flex;
}
#endregion

View File

@@ -176,7 +176,7 @@ namespace UVC.UIToolkit
protected override void OnReadOnlyStateChanged(bool isReadOnly)
{
if (_dateTimeField != null) _dateTimeField.isReadOnly = isReadOnly;
if (_pickerButton != null) _pickerButton.IsEnabled = !isReadOnly;
if (_pickerButton != null) _pickerButton.style.display = isReadOnly ? DisplayStyle.None : DisplayStyle.Flex;
}
#endregion

View File

@@ -119,8 +119,6 @@ namespace UVC.UIToolkit
// Fallback: UXML에서 못 찾으면 생성
if (_valueContainer != null)
{
_valueContainer.style.flexDirection = FlexDirection.Row;
if (_startField == null)
{
_startField = new UTKInputField { name = "start-field" };
@@ -243,8 +241,8 @@ namespace UVC.UIToolkit
{
if (_startField != null) _startField.isReadOnly = isReadOnly;
if (_endField != null) _endField.isReadOnly = isReadOnly;
if (_startPickerBtn != null) _startPickerBtn.IsEnabled = !isReadOnly;
if (_endPickerBtn != null) _endPickerBtn.IsEnabled = !isReadOnly;
if (_startPickerBtn != null) _startPickerBtn.style.display = isReadOnly ? DisplayStyle.None : DisplayStyle.Flex;
if (_endPickerBtn != null) _endPickerBtn.style.display = isReadOnly ? DisplayStyle.None : DisplayStyle.Flex;
}
#endregion

View File

@@ -21,7 +21,7 @@ namespace UVC.UIToolkit
/// parent.Add(view);
///
/// // UXML에서 사용
/// &lt;utk:UTKFloatPropertyItemView label="속도" value="1.5" use-slider="true" min-value="0" max-value="10" /&gt;
/// <utk:UTKFloatPropertyItemView label="속도" value="1.5" use-slider="true" min-value="0" max-value="10" />
/// </code>
///
/// <para><b>사용법 (Data 바인딩):</b></para>

View File

@@ -26,8 +26,8 @@ namespace UVC.UIToolkit
/// stepperView.Step = 5;
///
/// // UXML에서 사용
/// &lt;utk:UTKIntPropertyItemView label="수량" value="10" use-slider="true" min-value="0" max-value="100" /&gt;
/// &lt;utk:UTKIntPropertyItemView label="개수" value="1" use-stepper="true" step="1" /&gt;
/// <utk:UTKIntPropertyItemView label="수량" value="10" use-slider="true" min-value="0" max-value="100" />
/// <utk:UTKIntPropertyItemView label="개수" value="1" use-stepper="true" step="1" />
/// </code>
/// </summary>
[UxmlElement]

View File

@@ -19,7 +19,7 @@ namespace UVC.UIToolkit
/// parent.Add(view);
///
/// // UXML에서 사용
/// &lt;utk:UTKStringPropertyItemView label="이름" value="홍길동" is-multiline="false" /&gt;
/// <utk:UTKStringPropertyItemView label="이름" value="홍길동" is-multiline="false" />
/// </code>
/// </summary>
[UxmlElement]

View File

@@ -101,11 +101,11 @@ namespace UVC.UIToolkit
/// <para><b>커스텀 스타일 값 가져오기:</b></para>
/// <code>
/// // USS 변수에서 색상 값 읽기
/// var primaryColor = new CustomStyleProperty&lt;Color&gt;("--color-btn-primary");
/// var primaryColor = new CustomStyleProperty<Color>("--color-btn-primary");
/// var color = UTKThemeManager.GetColor(myElement, primaryColor, Color.blue);
///
/// // USS 변수에서 float 값 읽기
/// var spacing = new CustomStyleProperty&lt;float&gt;("--space-m");
/// var spacing = new CustomStyleProperty<float>("--space-m");
/// var value = UTKThemeManager.GetFloat(myElement, spacing, 8f);
/// </code>
///
@@ -123,7 +123,7 @@ namespace UVC.UIToolkit
/// UTKThemeManager.Instance.OnThemeChanged += OnThemeChanged;
///
/// // 패널에서 분리될 때 구독 해제
/// RegisterCallback&lt;DetachFromPanelEvent&gt;(_ =&gt;
/// RegisterCallback<DetachFromPanelEvent>(_ =>
/// {
/// UTKThemeManager.Instance.OnThemeChanged -= OnThemeChanged;
/// });
@@ -139,7 +139,7 @@ namespace UVC.UIToolkit
/// <para><b>테마 전환 버튼 구현:</b></para>
/// <code>
/// var themeToggle = new UTKButton("테마 전환", UTKButtonVariant.Secondary);
/// themeToggle.clicked += () =&gt;
/// themeToggle.clicked += () =>
/// {
/// UTKThemeManager.Instance.ToggleTheme();
/// var icon = UTKThemeManager.Instance.IsDarkTheme