move useContext SvgAssetsContext to gzmtr-int-2024

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>

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}`));