Review pt 1

app/gui2/src/components/GraphEditor/widgets/WidgetSelection.vue

@@ -9,6 +9,7 @@ import {
   type ArgumentWidgetConfiguration,
 } from '@/providers/widgetRegistry/configuration'
 import { WidgetEditHandler } from '@/providers/widgetRegistry/editHandler'
+import { injectWidgetTree } from '@/providers/widgetTree.ts'
 import { useGraphStore } from '@/stores/graph'
 import { requiredImports, type RequiredImport } from '@/stores/graph/imports.ts'
 import { useSuggestionDbStore } from '@/stores/suggestionDatabase'
@@ -27,6 +28,9 @@ import { computed, ref, watch, type ComponentInstance } from 'vue'
 const props = defineProps(widgetProps(widgetDefinition))
 const suggestions = useSuggestionDbStore()
 const graph = useGraphStore()
+
+const tree = injectWidgetTree()
+
 const widgetRoot = ref<HTMLElement>()
 const dropdownElement = ref<ComponentInstance<typeof DropdownWidget>>()
 
@@ -252,6 +256,17 @@ watch(selectedIndex, (_index) => {
   }
   props.onUpdate({ edit, portUpdate: { value, origin: props.input.portId } })
 })
+
+let endClippingInhibition: (() => void) | undefined
+watch(dropdownVisible, (visible) => {
+  if (visible) {
+    const { unregister } = tree.inhibitClipping()
+    endClippingInhibition = unregister
+  } else {
+    endClippingInhibition?.()
+    endClippingInhibition = undefined
+  }
+})
 </script>
 
 <script lang="ts">

app/gui2/src/components/widgets/DropdownWidget.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import SvgIcon from '@/components/SvgIcon.vue'
-import { injectWidgetTree } from '@/providers/widgetTree'
 import type { Icon } from '@/util/iconName'
-import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { computed, ref } from 'vue'
 
 enum SortDirection {
   none = 'none',
@@ -13,14 +12,6 @@ enum SortDirection {
 const props = defineProps<{ color: string; selectedValue: string | undefined; values: string[] }>()
 const emit = defineEmits<{ click: [index: number, keepOpen: boolean] }>()
 
-const tree = injectWidgetTree()
-
-let endClippingInhibition: (() => void) | undefined
-onMounted(() => {
-  endClippingInhibition = tree.inhibitClipping()
-})
-onUnmounted(() => endClippingInhibition?.())
-
 const sortDirection = ref<SortDirection>(SortDirection.none)
 
 const sortedValuesAndIndices = computed(() => {

app/gui2/src/providers/widgetTree.ts

@@ -8,14 +8,18 @@ import { computed, proxyRefs, type Ref } from 'vue'
 function makeExistenceRegistry(onChange: (anyExist: boolean) => void) {
   const registered = new Set<number>()
   let nextId = 0
-  return () => {
-    const id = nextId++
-    if (registered.size === 0) onChange(true)
-    registered.add(id)
-    return () => {
-      registered.delete(id)
-      if (registered.size === 0) onChange(false)
-    }
+  return {
+    register: () => {
+      const id = nextId++
+      if (registered.size === 0) onChange(true)
+      registered.add(id)
+      return {
+        unregister: () => {
+          registered.delete(id)
+          if (registered.size === 0) onChange(false)
+        },
+      }
+    },
   }
 }
 
@@ -35,7 +39,7 @@ const { provideFn, injectFn } = createContextStore(
   ) => {
     const graph = useGraphStore()
     const nodeSpanStart = computed(() => graph.moduleSource.getSpan(astRoot.value.id)![0])
-    const inhibitClipping = makeExistenceRegistry(clippingInhibitorsChanged)
+    const { register: inhibitClipping } = makeExistenceRegistry(clippingInhibitorsChanged)
     return proxyRefs({
       astRoot,
       nodeId,