Fix legend font initialization

neesjanvaneck · Mar 16, 2024 · 4237aa6 · 4237aa6
1 parent 11a4309
commit 4237aa6
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 4 deletions.
diff --git a/src/components/ui/ClusterColorLegend/index.js b/src/components/ui/ClusterColorLegend/index.js
@@ -16,11 +16,19 @@ const ClusterColorLegend = observer(({ showTopClustersOnly, canvasWidth, legendW
   const visualizationStore = useContext(VisualizationStoreContext);
   const canvasEl = useRef(null);
   const [ctx, setCtx] = useState(null);
-  const [font, setFont] = useState('Roboto');
+  const [font, setFont] = useState(customFont);
   const [mouseCoord, setMouseCoord] = useState([]);
 
   useEffect(() => {
-    setFont(customFont || 'Roboto');
+    if (document.fonts) {
+      document.fonts.ready.then(() => {
+        setFont(customFont || 'Roboto');
+      });
+    } else {
+      setTimeout(() => {
+        setFont(customFont || 'Roboto');
+      }, 250);
+    }
     setCtx(canvasEl.current.getContext('2d'));
     visualizationStore.setGetClusterLegendCanvasImage(() => canvasEl.current);
     select(canvasEl.current)

diff --git a/src/components/ui/ScoreColorLegend/index.js b/src/components/ui/ScoreColorLegend/index.js
@@ -13,7 +13,7 @@ const ScoreColorLegend = observer(({
   const visualizationStore = useContext(VisualizationStoreContext);
   const canvasEl = useRef(null);
   const [ctx, setCtx] = useState(null);
-  const [font, setFont] = useState('Roboto');
+  const [font, setFont] = useState(customFont);
 
   useEffect(() => {
     if (document.fonts) {

diff --git a/src/components/ui/SizeLegend/index.js b/src/components/ui/SizeLegend/index.js
@@ -15,7 +15,7 @@ const SizeLegend = observer(({ canvasWidth, canvasHeight, customFont }) => {
   const visualizationStore = useContext(VisualizationStoreContext);
   const canvasEl = useRef(null);
   const [ctx, setCtx] = useState(null);
-  const [font, setFont] = useState('Roboto');
+  const [font, setFont] = useState(customFont);
   const [ticks, setTicks] = useState([]);
 
   useEffect(() => {