From da8adfa07a7e6df061f791bef7dc45eb9ebd2784 Mon Sep 17 00:00:00 2001
From: Ilya Bogdanov <fumlead@gmail.com>
Date: Fri, 2 Feb 2024 19:15:01 +0400
Subject: [PATCH 1/2] Add a small arrow for dropdowns

---
 .../GraphEditor/widgets/WidgetSelection.vue   | 15 ++++++++++++++-
 app/gui2/src/composables/events.ts            | 19 +++++++++++++++----
 2 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/app/gui2/src/components/GraphEditor/widgets/WidgetSelection.vue b/app/gui2/src/components/GraphEditor/widgets/WidgetSelection.vue
index 68ac35ae3cfb..b0b441fc3939 100644
--- a/app/gui2/src/components/GraphEditor/widgets/WidgetSelection.vue
+++ b/app/gui2/src/components/GraphEditor/widgets/WidgetSelection.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import NodeWidget from '@/components/GraphEditor/NodeWidget.vue'
+import SvgIcon from '@/components/SvgIcon.vue'
 import DropdownWidget from '@/components/widgets/DropdownWidget.vue'
+import { useResizeObserver } from '@/composables/events'
 import { Score, WidgetInput, defineWidget, widgetProps } from '@/providers/widgetRegistry'
 import {
   functionCallConfiguration,
@@ -129,6 +131,10 @@ watch(selectedIndex, (_index) => {
   })
   showDropdownWidget.value = false
 })
+
+const childWidgetRef = ref<HTMLElement>()
+const childSize = useResizeObserver(childWidgetRef)
+const arrowPos = computed(() => (childSize.value != null ? childSize.value.x / 2 : 0))
 </script>
 
 <script lang="ts">
@@ -144,7 +150,8 @@ export const widgetDefinition = defineWidget(WidgetInput.isAstOrPlaceholder, {
 
 <template>
   <div class="WidgetSelection" @pointerdown.stop="toggleDropdownWidget">
-    <NodeWidget :input="innerWidgetInput" />
+    <NodeWidget ref="childWidgetRef" :input="innerWidgetInput" />
+    <SvgIcon name="arrow_right_head_only" class="arrow" :style="{ left: arrowPos }" />
     <DropdownWidget
       v-if="showDropdownWidget"
       class="dropdownContainer"
@@ -162,4 +169,10 @@ export const widgetDefinition = defineWidget(WidgetInput.isAstOrPlaceholder, {
   display: flex;
   flex-direction: row;
 }
+
+.arrow {
+  position: absolute;
+  bottom: -6px;
+  rotate: 90deg;
+}
 </style>
diff --git a/app/gui2/src/composables/events.ts b/app/gui2/src/composables/events.ts
index 45fab4e2deb5..5e55dc2219c2 100644
--- a/app/gui2/src/composables/events.ts
+++ b/app/gui2/src/composables/events.ts
@@ -2,12 +2,14 @@
 
 import type { Opt } from '@/util/data/opt'
 import { Vec2 } from '@/util/data/vec2'
+import type { VueInstance } from '@vueuse/core'
 import {
   computed,
   onScopeDispose,
   proxyRefs,
   ref,
   shallowRef,
+  toValue,
   watch,
   watchEffect,
   type Ref,
@@ -129,6 +131,14 @@ export function modKey(e: KeyboardEvent): boolean {
   return isMacLike ? e.metaKey : e.ctrlKey
 }
 
+/** A helper for getting Element out of VueInstance, it allows using `useResizeObserver` with Vue components. */
+function unrefElement(
+  element: Ref<Element | undefined | null | VueInstance>,
+): Element | undefined | null {
+  const plain = toValue(element)
+  return (plain as VueInstance)?.$el ?? plain
+}
+
 /**
  * Get DOM node size and keep it up to date.
  *
@@ -140,7 +150,7 @@ export function modKey(e: KeyboardEvent): boolean {
  * @returns Reactive value with the DOM node size.
  */
 export function useResizeObserver(
-  elementRef: Ref<Element | undefined | null>,
+  elementRef: Ref<Element | undefined | null | VueInstance>,
   useContentRect = true,
 ): Ref<Vec2> {
   const sizeRef = shallowRef<Vec2>(Vec2.Zero)
@@ -148,7 +158,7 @@ export function useResizeObserver(
     // Fallback implementation for browsers/test environment that do not support ResizeObserver:
     // Grab the size of the element every time the ref is assigned, or when the page is resized.
     function refreshSize() {
-      const element = elementRef.value
+      const element = unrefElement(elementRef)
       if (element != null) {
         const rect = element.getBoundingClientRect()
         sizeRef.value = new Vec2(rect.width, rect.height)
@@ -160,8 +170,9 @@ export function useResizeObserver(
   }
   const observer = new ResizeObserver((entries) => {
     let rect: { width: number; height: number } | null = null
+    const target = unrefElement(elementRef)
     for (const entry of entries) {
-      if (entry.target === elementRef.value) {
+      if (entry.target === target) {
         if (useContentRect) {
           rect = entry.contentRect
         } else {
@@ -175,7 +186,7 @@ export function useResizeObserver(
   })
 
   watchEffect((onCleanup) => {
-    const element = elementRef.value
+    const element = unrefElement(elementRef)
     if (element != null) {
       observer.observe(element)
       onCleanup(() => {

From 8532a94c3c34e43f19197a5a83dad5eea04e3f73 Mon Sep 17 00:00:00 2001
From: Ilya Bogdanov <fumlead@gmail.com>
Date: Wed, 7 Feb 2024 17:22:28 +0400
Subject: [PATCH 2/2] use CSS positioning

---
 .../components/GraphEditor/widgets/WidgetSelection.vue | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/app/gui2/src/components/GraphEditor/widgets/WidgetSelection.vue b/app/gui2/src/components/GraphEditor/widgets/WidgetSelection.vue
index 7c576f88754a..d52022724fdc 100644
--- a/app/gui2/src/components/GraphEditor/widgets/WidgetSelection.vue
+++ b/app/gui2/src/components/GraphEditor/widgets/WidgetSelection.vue
@@ -2,7 +2,6 @@
 import NodeWidget from '@/components/GraphEditor/NodeWidget.vue'
 import SvgIcon from '@/components/SvgIcon.vue'
 import DropdownWidget from '@/components/widgets/DropdownWidget.vue'
-import { useResizeObserver } from '@/composables/events'
 import { Score, WidgetInput, defineWidget, widgetProps } from '@/providers/widgetRegistry'
 import {
   functionCallConfiguration,
@@ -134,10 +133,6 @@ watch(selectedIndex, (_index) => {
   })
   showDropdownWidget.value = false
 })
-
-const childWidgetRef = ref<HTMLElement>()
-const childSize = useResizeObserver(childWidgetRef)
-const arrowPos = computed(() => (childSize.value != null ? childSize.value.x / 2 : 0))
 </script>
 
 <script lang="ts">
@@ -154,7 +149,7 @@ export const widgetDefinition = defineWidget(WidgetInput.isAstOrPlaceholder, {
 <template>
   <div class="WidgetSelection" @pointerdown.stop="toggleDropdownWidget">
     <NodeWidget ref="childWidgetRef" :input="innerWidgetInput" />
-    <SvgIcon name="arrow_right_head_only" class="arrow" :style="{ left: arrowPos }" />
+    <SvgIcon name="arrow_right_head_only" class="arrow" />
     <DropdownWidget
       v-if="showDropdownWidget"
       class="dropdownContainer"
@@ -176,6 +171,7 @@ export const widgetDefinition = defineWidget(WidgetInput.isAstOrPlaceholder, {
 .arrow {
   position: absolute;
   bottom: -6px;
-  rotate: 90deg;
+  left: 50%;
+  transform: translateX(-50%) rotate(90deg);
 }
 </style>