Fix control description sheets after Vite migration

perliedman · Dec 27, 2024 · 3ce9a25 · 3ce9a25
1 parent 52edd21
commit 3ce9a25
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 22 deletions.
diff --git a/src/ControlDescriptionLayer.jsx b/src/ControlDescriptionLayer.jsx
@@ -2,10 +2,7 @@ import ImageLayer from "ol/layer/Image";
 import Static from "ol/source/ImageStatic";
 import { useEffect, useState } from "react";
 import { svgToUrl } from "./services/svg-to-bitmap";
-import {
-  courseDefinitionToSvg,
-  getControlDescriptionExtent,
-} from "./services/create-svg";
+import { courseDefinitionToSvg } from "./services/create-svg";
 import { transformExtent } from "./services/coordinates";
 
 export function useControlDescriptions(

diff --git a/src/ControlDescriptionSheet.jsx b/src/ControlDescriptionSheet.jsx
@@ -1,9 +1,10 @@
-import React, { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { controlDistance } from "./models/control";
 import { courseDistance } from "./models/course";
 import DefinitionTexts from "svg-control-descriptions/symbols/lang.json";
 import Button from "./ui/Button";
 import { useHotkeys } from "react-hotkeys-hook";
+import { descriptionSymbols } from "./services/fetch-symbol-svg";
 
 export default function ControlDescriptionSheet({
   eventName,
@@ -156,8 +157,8 @@ function DescriptionSymbol({ symbol }) {
   const [svg, setSvg] = useState();
 
   useEffect(() => {
-    if (symbol) {
-      import(`svg-control-descriptions/symbols/${symbol}.svg`).then(setSvg);
+    if (symbol && symbol in descriptionSymbols) {
+      descriptionSymbols[symbol]().then(setSvg);
     } else {
       setSvg(null);
     }

diff --git a/src/services/create-svg.js b/src/services/create-svg.js
@@ -332,18 +332,18 @@ export async function courseDefinitionToSvg(eventName, course, mapScale) {
                     cellSize - 1 // TODO: LOL
                   ),
                   text(
-                    Math.round(
-                      ((controlDistance(
-                        course.controls[index - 1],
-                        course.controls[index]
-                      ) /
-                        1000) *
-                        // TODO: Use correct map scale
-                        mapScale) /
-                        10
-                    ) *
-                      10 +
-                      " m",
+                    (index > 0
+                      ? Math.round(
+                          ((controlDistance(
+                            course.controls[index - 1],
+                            course.controls[index]
+                          ) /
+                            1000) *
+                            // TODO: Use correct map scale
+                            mapScale) /
+                            10
+                        ) * 10
+                      : 0) + " m",
                     cellSize * 4 + cellSize / 2,
                     baseLine,
                     "black",

diff --git a/src/services/fetch-symbol-svg.js b/src/services/fetch-symbol-svg.js
@@ -1,10 +1,18 @@
 import fetch from "./fetch";
 import { getSvgDimensions } from "./svg-utils";
 
+const symbols = import.meta.glob(
+  "../../node_modules/svg-control-descriptions/symbols/*.svg"
+);
+
+export const descriptionSymbols = {};
+for (const path in symbols) {
+  const symbol = /symbols\/(.*)\.svg/.exec(path)[1];
+  descriptionSymbols[symbol] = symbols[path];
+}
+
 export default async function fetchSymbolSvg(symbol) {
-  const svgUrl = (
-    await import(`svg-control-descriptions/symbols/${symbol}.svg`)
-  ).default;
+  const svgUrl = (await descriptionSymbols[symbol]()).default;
   const symbolXml = await fetch(svgUrl, null, { format: "text" });
   const svg = new window.DOMParser().parseFromString(
     symbolXml,