From 1efeda7c7821603a07fa0cea873927f1635d6ac5 Mon Sep 17 00:00:00 2001
From: thekingofcity <3353040+thekingofcity@users.noreply.github.com>
Date: Sun, 19 Jan 2025 22:08:24 +0800
Subject: [PATCH] move useContext SvgAssetsContext to gzmtr-int-2024

---
 src/components/svg-wrapper.tsx                  | 9 ++-------
 src/components/svgs/stations/gzmtr-int-2024.tsx | 9 +++++++++
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/components/svg-wrapper.tsx b/src/components/svg-wrapper.tsx
index 94b3f340..494e6767 100644
--- a/src/components/svg-wrapper.tsx
+++ b/src/components/svg-wrapper.tsx
@@ -1,5 +1,5 @@
 import rmgRuntime from '@railmapgen/rmg-runtime';
-import { SvgAssetsContext, SvgAssetsContextProvider } from '@railmapgen/svg-assets/utils';
+import { SvgAssetsContextProvider } from '@railmapgen/svg-assets/utils';
 import { nanoid } from 'nanoid';
 import React from 'react';
 import useEvent from 'react-use-event-hook';
@@ -73,12 +73,6 @@ const SvgWrapper = () => {
             // only type is needed
             .forEach(([type]) => loadFontCss(type as NodeType));
     }, [refreshNodes]);
-    // Update all components that requires a bbox after fonts are loaded.
-    // bbox calculated before fonts are loaded will be incorrect.
-    const { update } = React.useContext(SvgAssetsContext);
-    React.useEffect(() => {
-        document.fonts.load('12px Arial', 'ABCDEFG123456').finally(() => setTimeout(update, 100));
-    }, []);
 
     // select related
     const [selectStart, setSelectStart] = React.useState({ x: 0, y: 0 }); // pos in the svg user coordinate system
@@ -391,6 +385,7 @@ const SvgWrapper = () => {
             tabIndex={0}
             onKeyDown={handleKeyDown}
         >
+            {/* Provide SvgAssetsContext for components with imperative handle. (fonts bbox after load)  */}
             <SvgAssetsContextProvider>
                 <SvgCanvas />
             </SvgAssetsContextProvider>
diff --git a/src/components/svgs/stations/gzmtr-int-2024.tsx b/src/components/svgs/stations/gzmtr-int-2024.tsx
index 7da12c91..7c4e5f67 100644
--- a/src/components/svgs/stations/gzmtr-int-2024.tsx
+++ b/src/components/svgs/stations/gzmtr-int-2024.tsx
@@ -2,6 +2,7 @@ import { Button, FormLabel, VStack } from '@chakra-ui/react';
 import { RmgFields, RmgFieldsField, RmgLabel } from '@railmapgen/rmg-components';
 import { MonoColour } from '@railmapgen/rmg-palette-resources';
 import { Coordinates, InterchangeStation2024, InterchangeStation2024Handle } from '@railmapgen/svg-assets/gzmtr';
+import { SvgAssetsContext } from '@railmapgen/svg-assets/utils';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { MdAdd, MdRemove } from 'react-icons/md';
@@ -76,6 +77,14 @@ const GzmtrInt2024Station = (props: StationComponentProps) => {
         y2: (borderBox?.y ?? 0) + (borderBox?.height ?? 0) + translate[1],
     };
 
+    // Update all components that requires a bbox after fonts are loaded.
+    // bbox calculated before fonts are loaded will be incorrect.
+    // Also see SvgAssetsContextProvider in src/components/svg-wrapper.tsx
+    const { update } = React.useContext(SvgAssetsContext);
+    React.useEffect(() => {
+        document.fonts.load('12px Arial', 'ABCDEFG123456').finally(() => setTimeout(update, 100));
+    }, []);
+
     // temporary fix for the missing id on the top element of the station
     const iconEl = React.useRef<SVGGElement | null>(null);
     iconEl.current?.querySelectorAll('path')?.forEach(elem => elem.setAttribute('id', `stn_core_${id}`));