Fixed nodes not being accessible on tabs that weren't initially visible

src/components/Context.vue

@@ -13,6 +13,10 @@ import {
 } from "game/layers";
 import { nextTick, onMounted, provide, ref } from "vue";
 
+const emit = defineEmits<{
+    (e: "updateNodes", nodes: Record<string, FeatureNode | undefined>): void;
+}>();
+
 const nodes = ref<Record<string, FeatureNode | undefined>>({});
 
 const resizeObserver = new ResizeObserver(updateBounds);
@@ -34,14 +38,13 @@ function updateBounds() {
             (Object.values(nodes.value) as FeatureNode[])
                 .filter(n => n) // Sometimes the values become undefined
                 .forEach(node => (node.rect = node.element.getBoundingClientRect()));
+            emit("updateNodes", nodes.value);
             isDirty = true;
         });
     }
 }
 document.fonts.ready.then(updateBounds);
 
-defineExpose({ nodes, boundingRect });
-
 const observerOptions = {
     attributes: true,
     childList: true,
@@ -52,11 +55,13 @@ provide(RegisterNodeInjectionKey, (id, element) => {
     const observer = new MutationObserver(() => updateNode(id));
     observer.observe(element, observerOptions);
     nodes.value[id] = { element, observer, rect: element.getBoundingClientRect() };
+    emit("updateNodes", nodes.value);
     nextTick(() => updateNode(id));
 });
 provide(UnregisterNodeInjectionKey, id => {
     nodes.value[id]?.observer.disconnect();
     nodes.value[id] = undefined;
+    emit("updateNodes", nodes.value);
 });
 provide(NodesInjectionKey, nodes);
 provide(BoundsInjectionKey, boundingRect);
@@ -67,6 +72,7 @@ function updateNode(id: string) {
         return;
     }
     node.rect = node.element.getBoundingClientRect();
+    emit("updateNodes", nodes.value);
 }
 </script>
 

src/components/Layer.vue

@@ -5,7 +5,7 @@
             <div>{{ unref(name) }}</div>
         </button>
         <div class="layer-tab" :class="{ showGoBack }" v-else>
-            <Context ref="contextRef">
+            <Context @update-nodes="updateNodes">
                 <component :is="component" />
             </Context>
         </div>
@@ -22,7 +22,7 @@ import { FeatureNode } from "game/layers";
 import { Persistent } from "game/persistence";
 import player from "game/player";
 import { computeComponent, processedPropType, wrapRef } from "util/vue";
-import { computed, defineComponent, nextTick, PropType, Ref, ref, toRefs, unref, watch } from "vue";
+import { computed, defineComponent, nextTick, PropType, Ref, toRefs, unref, watch } from "vue";
 import Context from "./Context.vue";
 
 export default defineComponent({
@@ -76,15 +76,9 @@ export default defineComponent({
             updateTab(minimized, minWidth)
         );
 
-        const contextRef = ref<typeof Context | null>(null);
-        watch(
-            () => contextRef.value?.nodes,
-            nodes => {
-                if (nodes) {
-                    props.nodes.value = nodes;
-                }
-            }
-        );
+        function updateNodes(nodes: Record<string, FeatureNode | undefined>) {
+            props.nodes.value = nodes;
+        }
 
         function updateTab(minimized: boolean, minWidth: number | string) {
             const width =
@@ -112,7 +106,7 @@ export default defineComponent({
         return {
             component,
             showGoBack,
-            contextRef,
+            updateNodes,
             unref,
             goBack
         };