thepaperpilot/chromatic-lattice
1
0
Fork 0
Code Issues Pull requests Releases Activity Actions

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

Browse source
This commit is contained in:
thepaperpilot 2022-05-22 20:08:40 -05:00
parent 2568a8b3a0
commit 7398a861ed
2 changed files with 14 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/components/Context.vue
View file

@ -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>

18
src/components/Layer.vue
View file

@ -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( props.nodes.value = nodes;
() => contextRef.value?.nodes, }
nodes => {
if (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
}; };