Make return proxyRefs

Author: AdRiley

app/gui/src/project-view/components/GraphEditor/GraphNode.vue

@@ -454,12 +454,7 @@ const contextMenuActions = computed<DisplayableActionName[]>(() =>
   nodeSelection.selected.size > 1 ? multiSelectionMenuActions : nodeMenuActions,
 )
 
-const {
-  menuOpen: alignmentMenuOpen,
-  menuOpenModel: alignmentMenuOpenModel,
-  handleMenuEnter: handleAlignmentMenuEnter,
-  handleMenuLeave: handleAlignmentMenuLeave,
-} = useHoverMenu()
+const alignmentMenu = useHoverMenu()
 
 const contextMenuTrigger = ref<InstanceType<typeof ContextMenuTrigger>>()
 const alignmentMenuTrigger = ref<HTMLElement>()
@@ -475,13 +470,16 @@ const { floatingStyles: alignmentMenuStyles, update: updateAlignmentMenu } = use
   },
 )
 
-watch(alignmentMenuOpen, (open) => {
+watch(
+  () => alignmentMenu.menuOpen,
+  (open) => {
   if (open) nextTick(updateAlignmentMenu)
-})
+  },
+)
 
 function closeAllMenus() {
   // Close both menus
-  alignmentMenuOpen.value = false
+  alignmentMenu.menuOpen = false
   contextMenuTrigger.value?.close()
 }
 
@@ -546,29 +544,29 @@ resizeHandles.onResizeHeight((value) => emit('update:height', value))
       ref="contextMenuTrigger"
       :actions="contextMenuActions"
       @contextmenu="ensureSelected"
-      @hidden="(alignmentMenuOpen = false)"
+      @hidden="(alignmentMenu.menuOpen = false)"
     >
       <template #menuElements>
         <div v-if="nodeSelection.selected.size > 1">
           <div
             ref="alignmentMenuTrigger"
             class="alignmentSubmenuTrigger"
-            @pointerenter="handleAlignmentMenuEnter"
-            @pointerleave="handleAlignmentMenuLeave"
+            @pointerenter="alignmentMenu.handleMenuEnter"
+            @pointerleave="alignmentMenu.handleMenuLeave"
           >
-            <MenuButton v-model="alignmentMenuOpenModel" class="alignmentSubmenuEntry">
+            <MenuButton v-model="alignmentMenu.menuOpenModel" class="alignmentSubmenuEntry">
               <SvgIcon name="align_left" class="rowIcon" />
               <span>Align</span>
               <SvgIcon name="arrow_right_head_only" class="submenuArrow" />
             </MenuButton>
           </div>
           <div
-            v-if="alignmentMenuOpen"
+            v-if="alignmentMenu.menuOpen"
             ref="alignmentMenuPanel"
             class="alignmentSubmenuPanel"
             :style="alignmentMenuStyles"
-            @pointerenter="handleAlignmentMenuEnter"
-            @pointerleave="handleAlignmentMenuLeave"
+            @pointerenter="alignmentMenu.handleMenuEnter"
+            @pointerleave="alignmentMenu.handleMenuLeave"
           >
             <ActionMenu class="alignmentMenu" :actions="alignmentMenuActions" @close="closeAllMenus" />
           </div>

app/gui/src/project-view/components/SelectionMenu.vue

@@ -28,12 +28,7 @@ watch(
   },
 )
 
-const {
-  menuOpen: alignmentMenuOpen,
-  menuOpenModel: alignmentMenuOpenModel,
-  handleMenuEnter: handleAlignmentMenuEnter,
-  handleMenuLeave: handleAlignmentMenuLeave,
-} = useHoverMenu()
+const alignmentMenu = useHoverMenu()
 </script>
 
 <template>
@@ -51,31 +46,31 @@ const {
       />
     </span>
     <DropdownMenu
-      v-model:open="alignmentMenuOpenModel"
+      v-model:open="alignmentMenu.menuOpenModel"
       placement="bottom-start"
       title="Align"
       alwaysShowArrow
-      @pointerenter="handleAlignmentMenuEnter"
-      @pointerleave="handleAlignmentMenuLeave"
+      @pointerenter="alignmentMenu.handleMenuEnter"
+      @pointerleave="alignmentMenu.handleMenuLeave"
     >
       <template #button>
         <SvgIcon name="align_left" />
       </template>
       <template #menu>
         <div
           class="alignmentMenuHover"
-          @pointerenter="handleAlignmentMenuEnter"
-          @pointerleave="handleAlignmentMenuLeave"
+          @pointerenter="alignmentMenu.handleMenuEnter"
+          @pointerleave="alignmentMenu.handleMenuLeave"
         >
           <MenuPanel class="alignmentMenu">
             <div class="alignmentMenuRow horizontal">
-              <ActionButton action="components.alignLeft" @click="alignmentMenuOpen = false" />
-              <ActionButton action="components.alignCenter" @click="alignmentMenuOpen = false" />
-              <ActionButton action="components.alignRight" @click="alignmentMenuOpen = false" />
+              <ActionButton action="components.alignLeft" @click="alignmentMenu.menuOpen = false" />
+              <ActionButton action="components.alignCenter" @click="alignmentMenu.menuOpen = false" />
+              <ActionButton action="components.alignRight" @click="alignmentMenu.menuOpen = false" />
             </div>
             <div class="alignmentMenuRow vertical">
-              <ActionButton action="components.alignTop" @click="alignmentMenuOpen = false" />
-              <ActionButton action="components.alignBottom" @click="alignmentMenuOpen = false" />
+              <ActionButton action="components.alignTop" @click="alignmentMenu.menuOpen = false" />
+              <ActionButton action="components.alignBottom" @click="alignmentMenu.menuOpen = false" />
             </div>
           </MenuPanel>
         </div>

app/gui/src/project-view/composables/hoverMenu.ts

@@ -1,4 +1,5 @@
-import { computed, onUnmounted, ref, type Ref } from 'vue'
+import { proxyRefs } from '$/utils/reactivity'
+import { computed, onUnmounted, ref } from 'vue'
 
 const HOVER_OPEN_DELAY_MS = 200
 const HOVER_CLOSE_DELAY_MS = 150
@@ -103,14 +104,14 @@ export function useHoverMenu(options: UseHoverMenuOptions = {}) {
     clearMenuCloseTimeout()
   })
 
-  return {
+  return proxyRefs({
     /** Whether the menu is currently open */
-    menuOpen: menuOpen as Ref<boolean>,
+    menuOpen,
     /** Two-way binding model for v-model:open that respects hover state */
     menuOpenModel,
     /** Call this when pointer enters the hover area */
     handleMenuEnter,
     /** Call this when pointer leaves the hover area */
     handleMenuLeave,
-  }
+  })
 }

app/gui/tsconfig.app.json

@@ -725,6 +725,7 @@
     "./src/project-view/composables/dragging.ts",
     "./src/project-view/composables/events.ts",
     "./src/project-view/composables/focus.ts",
+    "./src/project-view/composables/hoverMenu.ts",
     "./src/project-view/composables/keyboard.ts",
     "./src/project-view/composables/navigator.ts",
     "./src/project-view/composables/nodeColors.ts",