mirror of
https://github.com/thepaperpilot/Planar-Pioneers.git
synced 2024-11-26 02:01:39 +00:00
Fixed nodes not being accessible on tabs that weren't initially visible
This commit is contained in:
parent
2568a8b3a0
commit
7398a861ed
2 changed files with 14 additions and 14 deletions
|
@ -13,6 +13,10 @@ import {
|
||||||
} from "game/layers";
|
} from "game/layers";
|
||||||
import { nextTick, onMounted, provide, ref } from "vue";
|
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 nodes = ref<Record<string, FeatureNode | undefined>>({});
|
||||||
|
|
||||||
const resizeObserver = new ResizeObserver(updateBounds);
|
const resizeObserver = new ResizeObserver(updateBounds);
|
||||||
|
@ -34,14 +38,13 @@ function updateBounds() {
|
||||||
(Object.values(nodes.value) as FeatureNode[])
|
(Object.values(nodes.value) as FeatureNode[])
|
||||||
.filter(n => n) // Sometimes the values become undefined
|
.filter(n => n) // Sometimes the values become undefined
|
||||||
.forEach(node => (node.rect = node.element.getBoundingClientRect()));
|
.forEach(node => (node.rect = node.element.getBoundingClientRect()));
|
||||||
|
emit("updateNodes", nodes.value);
|
||||||
isDirty = true;
|
isDirty = true;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
document.fonts.ready.then(updateBounds);
|
document.fonts.ready.then(updateBounds);
|
||||||
|
|
||||||
defineExpose({ nodes, boundingRect });
|
|
||||||
|
|
||||||
const observerOptions = {
|
const observerOptions = {
|
||||||
attributes: true,
|
attributes: true,
|
||||||
childList: true,
|
childList: true,
|
||||||
|
@ -52,11 +55,13 @@ provide(RegisterNodeInjectionKey, (id, element) => {
|
||||||
const observer = new MutationObserver(() => updateNode(id));
|
const observer = new MutationObserver(() => updateNode(id));
|
||||||
observer.observe(element, observerOptions);
|
observer.observe(element, observerOptions);
|
||||||
nodes.value[id] = { element, observer, rect: element.getBoundingClientRect() };
|
nodes.value[id] = { element, observer, rect: element.getBoundingClientRect() };
|
||||||
|
emit("updateNodes", nodes.value);
|
||||||
nextTick(() => updateNode(id));
|
nextTick(() => updateNode(id));
|
||||||
});
|
});
|
||||||
provide(UnregisterNodeInjectionKey, id => {
|
provide(UnregisterNodeInjectionKey, id => {
|
||||||
nodes.value[id]?.observer.disconnect();
|
nodes.value[id]?.observer.disconnect();
|
||||||
nodes.value[id] = undefined;
|
nodes.value[id] = undefined;
|
||||||
|
emit("updateNodes", nodes.value);
|
||||||
});
|
});
|
||||||
provide(NodesInjectionKey, nodes);
|
provide(NodesInjectionKey, nodes);
|
||||||
provide(BoundsInjectionKey, boundingRect);
|
provide(BoundsInjectionKey, boundingRect);
|
||||||
|
@ -67,6 +72,7 @@ function updateNode(id: string) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
node.rect = node.element.getBoundingClientRect();
|
node.rect = node.element.getBoundingClientRect();
|
||||||
|
emit("updateNodes", nodes.value);
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
@ -5,7 +5,7 @@
|
||||||
<div>{{ unref(name) }}</div>
|
<div>{{ unref(name) }}</div>
|
||||||
</button>
|
</button>
|
||||||
<div class="layer-tab" :class="{ showGoBack }" v-else>
|
<div class="layer-tab" :class="{ showGoBack }" v-else>
|
||||||
<Context ref="contextRef">
|
<Context @update-nodes="updateNodes">
|
||||||
<component :is="component" />
|
<component :is="component" />
|
||||||
</Context>
|
</Context>
|
||||||
</div>
|
</div>
|
||||||
|
@ -22,7 +22,7 @@ import { FeatureNode } from "game/layers";
|
||||||
import { Persistent } from "game/persistence";
|
import { Persistent } from "game/persistence";
|
||||||
import player from "game/player";
|
import player from "game/player";
|
||||||
import { computeComponent, processedPropType, wrapRef } from "util/vue";
|
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";
|
import Context from "./Context.vue";
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
|
@ -76,15 +76,9 @@ export default defineComponent({
|
||||||
updateTab(minimized, minWidth)
|
updateTab(minimized, minWidth)
|
||||||
);
|
);
|
||||||
|
|
||||||
const contextRef = ref<typeof Context | null>(null);
|
function updateNodes(nodes: Record<string, FeatureNode | undefined>) {
|
||||||
watch(
|
|
||||||
() => contextRef.value?.nodes,
|
|
||||||
nodes => {
|
|
||||||
if (nodes) {
|
|
||||||
props.nodes.value = nodes;
|
props.nodes.value = nodes;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
function updateTab(minimized: boolean, minWidth: number | string) {
|
function updateTab(minimized: boolean, minWidth: number | string) {
|
||||||
const width =
|
const width =
|
||||||
|
@ -112,7 +106,7 @@ export default defineComponent({
|
||||||
return {
|
return {
|
||||||
component,
|
component,
|
||||||
showGoBack,
|
showGoBack,
|
||||||
contextRef,
|
updateNodes,
|
||||||
unref,
|
unref,
|
||||||
goBack
|
goBack
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in a new issue