thepaperpilot/Profectus
1
0
Fork 0
forked from profectus/Profectus
Code Pull requests Activity Actions

Fixed fonts causing shifts in Node positions on firefox

Browse source
This commit is contained in:
thepaperpilot 2022-08-22 00:39:59 -05:00
parent 3042d5ebb6
commit ad613d06d4
3 changed files with 14 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/components/Context.vue
View file

@ -12,6 +12,7 @@ import {
} from "game/layers"; } from "game/layers";
import type { FeatureNode } from "game/layers"; import type { FeatureNode } from "game/layers";
import { nextTick, onMounted, provide, ref } from "vue"; import { nextTick, onMounted, provide, ref } from "vue";
import { globalBus } from "game/events";
const emit = defineEmits<{ const emit = defineEmits<{
(e: "updateNodes", nodes: Record<string, FeatureNode | undefined>): void; (e: "updateNodes", nodes: Record<string, FeatureNode | undefined>): void;
@ -31,7 +32,7 @@ onMounted(() => {
let isDirty = true; let isDirty = true;
let boundingRect = ref(resizeListener.value?.getBoundingClientRect()); let boundingRect = ref(resizeListener.value?.getBoundingClientRect());
function updateBounds() { function updateBounds() {
if (resizeListener.value != null && isDirty) { if (isDirty) {
isDirty = false; isDirty = false;
nextTick(() => { nextTick(() => {
boundingRect.value = resizeListener.value?.getBoundingClientRect(); boundingRect.value = resizeListener.value?.getBoundingClientRect();
@ -43,7 +44,7 @@ function updateBounds() {
}); });
} }
} }
document.fonts.ready.then(updateBounds); globalBus.on("fontsLoaded", updateBounds);
const observerOptions = { const observerOptions = {
attributes: false, attributes: false,

8
src/features/particles/Particles.vue
View file

@ -10,6 +10,7 @@
<script lang="tsx"> <script lang="tsx">
import { Application } from "@pixi/app"; import { Application } from "@pixi/app";
import type { StyleValue } from "features/feature"; import type { StyleValue } from "features/feature";
import { globalBus } from "game/events";
import "lib/pixi"; import "lib/pixi";
import { processedPropType } from "util/vue"; import { processedPropType } from "util/vue";
import type { PropType } from "vue"; import type { PropType } from "vue";
@ -63,15 +64,14 @@ export default defineComponent({
if (isDirty) { if (isDirty) {
isDirty = false; isDirty = false;
nextTick(() => { nextTick(() => {
if (resizeListener.value != null && props.onContainerResized) { if (resizeListener.value != null) {
props.onContainerResized(resizeListener.value.getBoundingClientRect()); props.onContainerResized?.(resizeListener.value.getBoundingClientRect());
app.value?.resize();
} }
isDirty = true; isDirty = true;
}); });
} }
} }
document.fonts.ready.then(updateBounds); globalBus.on("fontsLoaded", updateBounds);
return { return {
unref, unref,

7
src/game/events.ts
View file

@ -50,6 +50,11 @@ export interface GlobalEvents {
* Happens when the page is opened and upon switching saves in the saves manager. * Happens when the page is opened and upon switching saves in the saves manager.
*/ */
onLoad: VoidFunction; 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}. */ /** A global event bus for hooking into {@link GlobalEvents}. */
@ -152,3 +157,5 @@ export async function startGameLoop() {
intervalID = setInterval(update, 50); intervalID = setInterval(update, 50);
} }
} }
document.fonts.onloadingdone = () => globalBus.emit("fontsLoaded");