UiToolkit/MultiSelectChips/IMultiSelectChipItem.cs

@@ -0,0 +1,11 @@
+using System.Collections;
+using UnityEngine;
+
+namespace NEG.Utils.UiToolkits
+{
+    public interface IMultiSelectChipItem
+    {
+        string Name { get; }
+        Color Color { get; }
+    }
+}

UiToolkit/MultiSelectChips/IMultiSelectChipItem.cs.meta

@@ -0,0 +1,11 @@
+fileFormatVersion: 2
+guid: f032e3d346d243d458c929d4046f0a1e
+MonoImporter:
+  externalObjects: {}
+  serializedVersion: 2
+  defaultReferences: []
+  executionOrder: 0
+  icon: {instanceID: 0}
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 

UiToolkit/MultiSelectChips/MultiSelectChipItem.cs

@@ -0,0 +1,24 @@
+using System.Collections;
+using UnityEngine;
+using UnityEngine.UIElements;
+
+namespace NEG.Utils.UiToolkits
+{
+    public class MultiSelectChipItem
+    {
+        public VisualElement VisualElement { get; }    
+        public IMultiSelectChipItem ChipItem { get; }
+
+        private readonly MultiSelectChips parent;
+
+        public MultiSelectChipItem(VisualElement visualElement, IMultiSelectChipItem element, MultiSelectChips multiSelectChips) 
+        { 
+            VisualElement = visualElement;
+            ChipItem = element;
+            parent = multiSelectChips;
+            visualElement.Q<Label>("Name").text = element.Name;
+            visualElement.Q<VisualElement>("Color").style.backgroundColor = element.Color;
+            visualElement.Q<Button>("RemoveBtn").clicked += () => parent.TryRemoveItem(element);
+        }
+    }
+}

UiToolkit/MultiSelectChips/MultiSelectChipItem.cs.meta

@@ -0,0 +1,11 @@
+fileFormatVersion: 2
+guid: 1906fa5e31f79fe48a6edda94b9c1b4d
+MonoImporter:
+  externalObjects: {}
+  serializedVersion: 2
+  defaultReferences: []
+  executionOrder: 0
+  icon: {instanceID: 0}
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 

UiToolkit/MultiSelectChips/MultiSelectChipItem.uxml

@@ -0,0 +1,7 @@
+<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" xsi="http://www.w3.org/2001/XMLSchema-instance" engine="UnityEngine.UIElements" editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../../../../../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
+    <ui:VisualElement name="VisualElement" class="unity-button" style="min-height: 21px; flex-shrink: 1; flex-direction: row; flex-wrap: wrap; align-items: center;">
+        <ui:VisualElement name="Color" style="min-height: 15px; min-width: 15px; border-top-left-radius: 22px; border-bottom-left-radius: 22px; border-top-right-radius: 22px; border-bottom-right-radius: 22px; border-left-width: 0; border-right-width: 0; border-top-width: 0; border-bottom-width: 0; border-left-color: rgba(0, 0, 125, 255); border-right-color: rgba(0, 0, 125, 255); border-top-color: rgba(0, 0, 125, 255); border-bottom-color: rgba(0, 0, 125, 255); background-color: rgba(255, 0, 0, 255); max-height: 15px; justify-content: center; align-items: center;" />
+        <ui:Label text="Name" display-tooltip-when-elided="true" name="Name" style="padding-left: 7px; padding-right: 5px;" />
+        <ui:Button text="X" display-tooltip-when-elided="true" name="RemoveBtn" />
+    </ui:VisualElement>
+</ui:UXML>

UiToolkit/MultiSelectChips/MultiSelectChipItem.uxml.meta

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

UiToolkit/MultiSelectChips/MultiSelectChips.cs

@@ -1,14 +1,22 @@
 #if ADDRESSABLES && UI_ELEMENTS
 using UnityEngine;
 using UnityEngine.UIElements;
-using System;
-using System.Collections;
-using System.ComponentModel;
 using UnityEngine.AddressableAssets;
 using UnityEngine.ResourceManagement.AsyncOperations;
+using System.Collections.Generic;
+using System;
+using System.IO;
+#if UNITY_EDITOR
+using UnityEditor;
+#endif
 
-public class MultiSelectChips : VisualElement
+namespace NEG.Utils.UiToolkits
 {
+    public class MultiSelectChips : VisualElement
+    {
+        public event Action<IMultiSelectChipItem> OnTryingToRemoveItem;
+        public event Action<Rect> OnTryingToAddItem;
+
         public string LabelText
         {
             get => label.text;
@@ -31,7 +39,7 @@ public class MultiSelectChips : VisualElement
             }
         }
 
-    public IList ItemsSource
+        public ICollection<IMultiSelectChipItem> ItemsSource
         {
             get => itemsSource;
 
@@ -47,7 +55,11 @@ public class MultiSelectChips : VisualElement
 
         private VisualTreeAsset itemPrefab;
 
-    private IList itemsSource;
+        private ICollection<IMultiSelectChipItem> itemsSource;
+
+        private readonly List<MultiSelectChipItem> spawnedItems = new();
+
+        private VisualElement realItemsParent;
 
         public new class UxmlFactory : UxmlFactory<MultiSelectChips, UxmlTraits>
         {
@@ -75,16 +87,54 @@ public class MultiSelectChips : VisualElement
 
         public MultiSelectChips() : base()
         {
+#if UNITY_EDITOR
+            string path = AssetDatabase.GUIDToAssetPath(AssetDatabase.FindAssets($"t:Script {nameof(MultiSelectChips)}")[0]);
+            path = path.Remove(path.LastIndexOf('/'));
+
+            SetVisuals(AssetDatabase.LoadAssetAtPath<VisualTreeAsset>($"{path}/MultiSelectChips.uxml"));
+            itemPrefab = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>($"{path}/MultiSelectChipItem.uxml");
+#else
             uxmlHandle = Addressables.LoadAssetAsync<VisualTreeAsset>("NegUiToolkits/MultiSelectChips.uxml");
-        itemUxmlHandle = Addressables.LoadAssetAsync<VisualTreeAsset>("NegUiToolkits/MultiSelectChipsItem.uxml");
+            itemUxmlHandle = Addressables.LoadAssetAsync<VisualTreeAsset>("NegUiToolkits/MultiSelectChipItem.uxml");
             uxmlHandle.Completed += OnUxmlLoaded;
             itemUxmlHandle.Completed += OnItemUxmlLoaded;
+#endif
         }
 
         public void UpdateItems()
         {
-        if (itemPrefab == null)
+            if (itemPrefab == null || itemsSource == null || realItemsParent == null)
                 return;
+
+            List<MultiSelectChipItem> itemsToDestroy = new List<MultiSelectChipItem>(spawnedItems);
+
+            itemsToDestroy.RemoveAll((x) => itemsSource.Contains(x.ChipItem));
+
+            foreach (var item in itemsToDestroy)
+            {
+                realItemsParent.Remove(item.VisualElement);
+                spawnedItems.Remove(item);
+            }
+
+            List<IMultiSelectChipItem> itemsToAdd = new(itemsSource);
+
+            foreach (var item in spawnedItems)
+            {
+                if (itemsToAdd.Contains(item.ChipItem))
+                    itemsToAdd.Remove(item.ChipItem);
+            }
+
+            foreach (var item in itemsToAdd)
+            {
+                VisualElement chipItemVisuals = itemPrefab.Instantiate();
+                realItemsParent.Insert(0, chipItemVisuals);
+                spawnedItems.Add(new MultiSelectChipItem(chipItemVisuals, item, this));
+            }
+        }
+
+        public void TryRemoveItem(IMultiSelectChipItem item)
+        {
+            OnTryingToRemoveItem?.Invoke(item);
         }
 
         private void InitLabel()
@@ -93,15 +143,16 @@ public class MultiSelectChips : VisualElement
             {
                 pickingMode = PickingMode.Ignore
             };
-        Add(label);
+            Insert(0, label);
         }
 
         private void OnUxmlLoaded(AsyncOperationHandle<VisualTreeAsset> operation)
         {
             if (operation.Status == AsyncOperationStatus.Succeeded)
             {
-            Add(operation.Result.Instantiate());
+                SetVisuals(operation.Result);
                 Addressables.Release(uxmlHandle);
+                UpdateItems();
             }
             else
             {
@@ -123,5 +174,18 @@ public class MultiSelectChips : VisualElement
                 Debug.LogError($"Asset failed to load.");
             }
         }
+
+        private void SetVisuals(VisualTreeAsset treeAsset)
+        {
+            realItemsParent = treeAsset.Instantiate();
+            Add(realItemsParent);
+
+            var button = realItemsParent.Q<Button>("AddItem");
+
+            button.clicked += () => OnTryingToAddItem?.Invoke(button.worldBound);
+
+            realItemsParent = button.parent;
+        }
+    }
 }
 #endif

UiToolkit/MultiSelectChips/MultiSelectChips.uxml

@@ -1,5 +1,4 @@
 <ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" xsi="http://www.w3.org/2001/XMLSchema-instance" engine="UnityEngine.UIElements" editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../../../../../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
-    <ui:ListView focusable="true" show-add-remove-footer="false" horizontal-scrolling="true" />
     <ui:VisualElement style="flex-direction: row; flex-wrap: wrap;">
         <ui:Button text="+" display-tooltip-when-elided="true" name="AddItem" />
     </ui:VisualElement>