feat: Add smooth slide-up animation to SelectionToolbox (#4832)

src/components/graph/SelectionOverlay.vue

@@ -14,12 +14,13 @@
 
 <script setup lang="ts">
 import { whenever } from '@vueuse/core'
-import { ref, watch } from 'vue'
+import { provide, readonly, ref, watch } from 'vue'
 
 import { useSelectedLiteGraphItems } from '@/composables/canvas/useSelectedLiteGraphItems'
 import { useAbsolutePosition } from '@/composables/element/useAbsolutePosition'
 import { createBounds } from '@/lib/litegraph/src/litegraph'
 import { useCanvasStore } from '@/stores/graphStore'
+import { SelectionOverlayInjectionKey } from '@/types/selectionOverlayTypes'
 
 const canvasStore = useCanvasStore()
 const { style, updatePosition } = useAbsolutePosition()
@@ -27,6 +28,13 @@ const { getSelectableItems } = useSelectedLiteGraphItems()
 
 const visible = ref(false)
 const showBorder = ref(false)
+// Increment counter to notify child components of position/visibility change
+// This does not include viewport changes.
+const overlayUpdateCount = ref(0)
+provide(SelectionOverlayInjectionKey, {
+  visible: readonly(visible),
+  updateCount: readonly(overlayUpdateCount)
+})
 
 const positionSelectionOverlay = () => {
   const selectableItems = getSelectableItems()
@@ -52,6 +60,7 @@ whenever(
   () => {
     requestAnimationFrame(() => {
       positionSelectionOverlay()
+      overlayUpdateCount.value++
       canvasStore.getCanvas().state.selectionChanged = false
     })
   },
@@ -71,6 +80,7 @@ watch(
       requestAnimationFrame(() => {
         visible.value = true
         positionSelectionOverlay()
+        overlayUpdateCount.value++
       })
     } else {
       // Selection change update to visible state is delayed by a frame. Here
@@ -78,6 +88,7 @@ watch(
       // the initial selection and dragging happens at the same time.
       requestAnimationFrame(() => {
         visible.value = false
+        overlayUpdateCount.value++
       })
     }
   }

src/components/graph/SelectionToolbox.vue

@@ -1,6 +1,7 @@
 <template>
   <Panel
     class="selection-toolbox absolute left-1/2 rounded-lg"
+    :class="{ 'animate-slide-up': shouldAnimate }"
     :pt="{
       header: 'hidden',
       content: 'p-0 flex flex-row'
@@ -27,7 +28,7 @@
 
 <script setup lang="ts">
 import Panel from 'primevue/panel'
-import { computed } from 'vue'
+import { computed, inject } from 'vue'
 
 import BypassButton from '@/components/graph/selectionToolbox/BypassButton.vue'
 import ColorPickerButton from '@/components/graph/selectionToolbox/ColorPickerButton.vue'
@@ -40,16 +41,24 @@ import HelpButton from '@/components/graph/selectionToolbox/HelpButton.vue'
 import MaskEditorButton from '@/components/graph/selectionToolbox/MaskEditorButton.vue'
 import PinButton from '@/components/graph/selectionToolbox/PinButton.vue'
 import RefreshSelectionButton from '@/components/graph/selectionToolbox/RefreshSelectionButton.vue'
+import { useRetriggerableAnimation } from '@/composables/element/useRetriggerableAnimation'
 import { useCanvasInteractions } from '@/composables/graph/useCanvasInteractions'
 import { useExtensionService } from '@/services/extensionService'
 import { type ComfyCommandImpl, useCommandStore } from '@/stores/commandStore'
 import { useCanvasStore } from '@/stores/graphStore'
+import { SelectionOverlayInjectionKey } from '@/types/selectionOverlayTypes'
 
 const commandStore = useCommandStore()
 const canvasStore = useCanvasStore()
 const extensionService = useExtensionService()
 const canvasInteractions = useCanvasInteractions()
 
+const selectionOverlayState = inject(SelectionOverlayInjectionKey)
+const { shouldAnimate } = useRetriggerableAnimation(
+  selectionOverlayState?.updateCount,
+  { animateOnMount: true }
+)
+
 const extensionToolboxCommands = computed<ComfyCommandImpl[]>(() => {
   const commandIds = new Set<string>(
     canvasStore.selectedItems
@@ -71,4 +80,20 @@ const extensionToolboxCommands = computed<ComfyCommandImpl[]>(() => {
 .selection-toolbox {
   transform: translateX(-50%) translateY(-120%);
 }
+
+/* Slide up animation using CSS animation */
+@keyframes slideUp {
+  from {
+    transform: translateX(-50%) translateY(-100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(-50%) translateY(-120%);
+    opacity: 1;
+  }
+}
+
+.animate-slide-up {
+  animation: slideUp 0.3s ease-out;
+}
 </style>