some cleanup

Author: kalmanbalint

Assets/Prefabs/UI/UIToolkit/UXML/MessageFeed.uxml

@@ -1,6 +1,6 @@
 <engine:UXML xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:engine="UnityEngine.UIElements" xmlns:editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../../../../../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
     <Style src="project://database/Assets/Prefabs/UI/UIToolkit/USS/MessageFeed.uss?fileID=7433441132597879392&amp;guid=daa8504d262853748b8d7c2a377261a3&amp;type=3#MessageFeed" />
     <engine:VisualElement name="messageFeed" style="flex-grow: 1;">
-        <engine:ListView item-template="project://database/Assets/Prefabs/UI/UIToolkit/UXML/MessageItem.uxml?fileID=9197481963319205126&amp;guid=67ec44aea0b0f484c86c6489932cfcad&amp;type=3#MessageItem" name="messageList" virtualization-method="DynamicHeight" binding-source-selection-mode="AutoAssign" class="messageList" />
+        <engine:ListView item-template="project://database/Assets/Prefabs/UI/UIToolkit/UXML/MessageItem.uxml?fileID=9197481963319205126&amp;guid=67ec44aea0b0f484c86c6489932cfcad&amp;type=3#MessageItem" name="messageList" virtualization-method="FixedHeight" binding-source-selection-mode="AutoAssign" selection-type="None" show-bound-collection-size="true" allow-remove="true" class="messageList" />
     </engine:VisualElement>
 </engine:UXML>

Assets/Prefabs/UI/UIToolkit/UXML/PostGameUICanvas.uxml

@@ -10,5 +10,7 @@
         <engine:Button text="return to menu" name="menuBtn" class="menuButton" style="left: 32%; top: 75%; position: absolute;" />
         <engine:Button text="Waiting on host &#10;to play again" name="waitOnHostBtn" class="menuButton" style="position: absolute; top: 60%; left: 32%;" />
     </engine:VisualElement>
-    <engine:Instance template="MessageFeed" />
+    <engine:Instance template="MessageFeed">
+        <AttributeOverrides element-name="messageList" virtualization-method="FixedHeight" selection-type="None" />
+    </engine:Instance>
 </engine:UXML>

Assets/Scenes/PostGame.unity

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:d4922459db3aadee573dac2532598f347248110584472a86efc56e0358e372f6
-size 32047
+oid sha256:6652ec01ec8e557093767b7c46051175c94fae8bebb2d43674b8c462c5916beb
+size 31632

Assets/Scripts/Gameplay/UI/MessageFeed.cs

@@ -12,11 +12,16 @@
 
 public class MessageFeed : MonoBehaviour
 {
+    private const string k_MessageBoxMovementClassName = "messageBoxMove";
+    private const string k_FadeOutClassName = "messageBoxFadeOut";
+    private const string k_MessageBoxClassName = "messageBox";
+    private const string k_MessageClassName = "message";
+
     [SerializeField]
     UIDocument doc;
 
     List<MessageViewModel> m_Messages;
-    List<MessageViewModel> _messagesToRemove = new List<MessageViewModel>();
+    List<MessageViewModel> m_MessagesToRemove = new List<MessageViewModel>();
 
     ListView m_MessageContainer;
 
@@ -118,19 +123,19 @@ void Start()
         {
             // Create a new message if no reusable messages are available
             var newBox = new VisualElement();
-            newBox.AddToClassList("messageBox");
+            newBox.AddToClassList(k_MessageBoxClassName);
 
             var newLabel = new Label();
-            newLabel.AddToClassList("message");
+            newLabel.AddToClassList(k_MessageClassName);
             newBox.Add(newLabel);
 
             // the event when the control get's added to the "UI Canvas"
             newBox.RegisterCallback<AttachToPanelEvent>((e) =>
             {
                 if (e.target is VisualElement element)
                 {
-                    element.RemoveFromClassList("messageBoxMove");
-                    StartCoroutine(ToggleClassWithDelay(element, "messageBoxMove", TimeSpan.FromSeconds(0.02)));
+                    element.RemoveFromClassList(k_MessageBoxMovementClassName);
+                    StartCoroutine(ToggleClassWithDelay(element, k_MessageBoxMovementClassName, TimeSpan.FromSeconds(0.02)));
                 }
             });
 
@@ -143,8 +148,6 @@ void Start()
             return newBox;
         };
 
-        listView.destroyItem += (element) => { };
-
         // use this to set bindings / values on your view components
         listView.bindItem += (element, i) =>
         {
@@ -172,28 +175,51 @@ void Update()
 
         foreach (var m in m_Messages)
         {
-            if (m.ShouldDispose() && !_messagesToRemove.Contains(m))
+            if (m.ShouldDispose() && !m_MessagesToRemove.Contains(m))
             {
-                _messagesToRemove.Add(m);
+                m_MessagesToRemove.Add(m);
             }
         }
 
-        foreach (var m in _messagesToRemove)
+        foreach (var message in m_MessagesToRemove)
         {
-            var fadeOutClassName = "messageBoxFadeOut";
+            var childQuery = m_MessageContainer.Query<VisualElement>().Class(k_MessageBoxClassName);
+            var child = childQuery.AtIndex(m_Messages.IndexOf(message));
 
-            var child = m_MessageContainer.Query<VisualElement>().Class("messageBox")
-                .AtIndex(m_Messages.IndexOf(m));
+            if (!child.ClassListContains(k_FadeOutClassName))
+            {
+                child.AddToClassList(k_FadeOutClassName);
+                child.RegisterCallback<TransitionEndEvent>(OnTransitionEndEvent);
+                child.RegisterCallback<TransitionCancelEvent>(OnTransitionCancelEvent);
+            }
 
-            if (!child.ClassListContains(fadeOutClassName))
+            void OnTransitionCancelEvent(TransitionCancelEvent e)
+            {
+                m_Messages.Remove(message);
+                m_MessagesToRemove.Remove(message);
+                if (e.target is VisualElement element)
+                {
+                    element.RemoveFromClassList(k_FadeOutClassName);
+                }
+            }
+            
+            // local event handler function
+            void OnTransitionEndEvent(TransitionEndEvent e)
             {
-                child.AddToClassList(fadeOutClassName);
-                child.RegisterCallback<TransitionEndEvent>((e) =>
+                if (e.target is VisualElement element) 
                 {
-                    m_Messages.Remove(m);
-                    _messagesToRemove.Remove(m);
-                    child.RemoveFromClassList(fadeOutClassName);
-                });
+                    // remove subscription
+                    element.UnregisterCallback<TransitionEndEvent>(OnTransitionEndEvent);
+                    
+                    element.RemoveFromClassList(k_FadeOutClassName);
+
+                    // moving the message to be the last visualized in the container
+                    // effectively stopping the list view virtualization caused animation issues
+                    m_MessageContainer.viewController.Move(m_Messages.IndexOf(message), m_Messages.Count - 1);
+                    
+                    m_Messages.Remove(message);
+                    m_MessagesToRemove.Remove(message);
+                }
             }
         }
     }