From ad613d06d48d4a828036cc9966a7ec054496e770 Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Mon, 22 Aug 2022 00:39:59 -0500
Subject: [PATCH] Fixed fonts causing shifts in Node positions on firefox
---
src/components/Context.vue | 5 +++--
src/features/particles/Particles.vue | 8 ++++----
src/game/events.ts | 7 +++++++
3 files changed, 14 insertions(+), 6 deletions(-)
diff --git a/src/components/Context.vue b/src/components/Context.vue
index 21ded12..d752460 100644
--- a/src/components/Context.vue
+++ b/src/components/Context.vue
@@ -12,6 +12,7 @@ import {
} from "game/layers";
import type { FeatureNode } from "game/layers";
import { nextTick, onMounted, provide, ref } from "vue";
+import { globalBus } from "game/events";
const emit = defineEmits<{
(e: "updateNodes", nodes: Record<string, FeatureNode | undefined>): void;
@@ -31,7 +32,7 @@ onMounted(() => {
let isDirty = true;
let boundingRect = ref(resizeListener.value?.getBoundingClientRect());
function updateBounds() {
- if (resizeListener.value != null && isDirty) {
+ if (isDirty) {
isDirty = false;
nextTick(() => {
boundingRect.value = resizeListener.value?.getBoundingClientRect();
@@ -43,7 +44,7 @@ function updateBounds() {
});
}
}
-document.fonts.ready.then(updateBounds);
+globalBus.on("fontsLoaded", updateBounds);
const observerOptions = {
attributes: false,
diff --git a/src/features/particles/Particles.vue b/src/features/particles/Particles.vue
index 8a3dd2d..1f7de78 100644
--- a/src/features/particles/Particles.vue
+++ b/src/features/particles/Particles.vue
@@ -10,6 +10,7 @@
<script lang="tsx">
import { Application } from "@pixi/app";
import type { StyleValue } from "features/feature";
+import { globalBus } from "game/events";
import "lib/pixi";
import { processedPropType } from "util/vue";
import type { PropType } from "vue";
@@ -63,15 +64,14 @@ export default defineComponent({
if (isDirty) {
isDirty = false;
nextTick(() => {
- if (resizeListener.value != null && props.onContainerResized) {
- props.onContainerResized(resizeListener.value.getBoundingClientRect());
- app.value?.resize();
+ if (resizeListener.value != null) {
+ props.onContainerResized?.(resizeListener.value.getBoundingClientRect());
}
isDirty = true;
});
}
}
- document.fonts.ready.then(updateBounds);
+ globalBus.on("fontsLoaded", updateBounds);
return {
unref,
diff --git a/src/game/events.ts b/src/game/events.ts
index 3be00b7..4543e15 100644
--- a/src/game/events.ts
+++ b/src/game/events.ts
@@ -50,6 +50,11 @@ export interface GlobalEvents {
* Happens when the page is opened and upon switching saves in the saves manager.
*/
onLoad: VoidFunction;
+ /**
+ * Using document.fonts.ready returns too early on firefox, so we use document.fonts.onloadingdone instead, which doesn't accept multiple listeners.
+ * This event fires when that callback is called.
+ */
+ fontsLoaded: VoidFunction;
}
/** A global event bus for hooking into {@link GlobalEvents}. */
@@ -152,3 +157,5 @@ export async function startGameLoop() {
intervalID = setInterval(update, 50);
}
}
+
+document.fonts.onloadingdone = () => globalBus.emit("fontsLoaded");