Add support for feature dimensions

Fixes #9
perliedman · Dec 30, 2024 · f11dcac · f11dcac
1 parent 32c51ff
commit f11dcac
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 38 deletions.
diff --git a/src/ControlDescriptionSheet.jsx b/src/ControlDescriptionSheet.jsx
@@ -15,6 +15,7 @@ import {
   useInteractions,
 } from "@floating-ui/react";
 import { autoPlacement } from "@floating-ui/dom";
+import Input from "./ui/Input";
 
 export default function ControlDescriptionSheet({
   eventName,
@@ -42,12 +43,7 @@ export default function ControlDescriptionSheet({
   });
   const role = useRole(context);
 
-  // Merge all the interactions into prop getters
-  const { getReferenceProps, getFloatingProps } = useInteractions([
-    click,
-    dismiss,
-    role,
-  ]);
+  const { getFloatingProps } = useInteractions([click, dismiss, role]);
 
   return (
     <div ref={containerRef}>
@@ -117,7 +113,11 @@ export default function ControlDescriptionSheet({
                         className="w-full focus:outline-none"
                         style={{ height: "32px" }} // TODO: yuck
                       >
-                        <DescriptionSymbol symbol={c.description[column]} />
+                        {typeof c.description[column] === "string" ? (
+                          <DescriptionSymbol symbol={c.description[column]} />
+                        ) : (
+                          c.description[column]?.value
+                        )}
                       </button>
                     </td>
                   ))}
@@ -161,6 +161,7 @@ export default function ControlDescriptionSheet({
                 }
                 coordinates={descriptionSelector.coordinates}
                 column={descriptionSelector.column}
+                allowValue={descriptionSelector.column === "F"}
                 onSelect={(symbol) => {
                   onChangeDescription(descriptionSelector.control.id, {
                     ...descriptionSelector.control.description,
@@ -197,7 +198,7 @@ function DescriptionSymbol({ symbol }) {
   const [svg, setSvg] = useState();
 
   useEffect(() => {
-    if (symbol && symbol in descriptionSymbols) {
+    if (symbol && typeof symbol === "string" && symbol in descriptionSymbols) {
       descriptionSymbols[symbol]().then(setSvg);
     } else {
       setSvg(null);
@@ -206,7 +207,7 @@ function DescriptionSymbol({ symbol }) {
   return svg ? <img src={svg.default} alt={symbol} /> : null;
 }
 
-function DescriptionSelector({ selected, column, onSelect }) {
+function DescriptionSelector({ selected, column, allowValue, onSelect }) {
   const [tempSelection, setTempSelection] = useState(selected);
   useHotkeys("escape", () => onSelect(selected));
 
@@ -230,6 +231,16 @@ function DescriptionSelector({ selected, column, onSelect }) {
               <DescriptionSymbol symbol={tempSelection} />
             </div>
           </div>
+          {allowValue ? (
+            <>
+              <label htmlFor="description-value">Feature dimension</label>
+              <Input
+                id="description-value"
+                value={tempSelection?.value || ""}
+                onChange={(e) => setTempSelection({ value: e.target.value })}
+              />
+            </>
+          ) : null}
           <div className="border-t border-gray-600 mt-2">
             <Button
               type="primary"

diff --git a/src/models/control.ts b/src/models/control.ts
@@ -47,16 +47,18 @@ export function clone(control: Control): Control {
   };
 }
 
+type DescriptionColumn = string | { value: string };
+
 export interface Description {
-  A?: string;
-  B?: string;
-  C?: string;
-  D?: string;
-  E?: string;
-  F?: string;
-  G?: string;
-  H?: string;
-  all?: string;
+  A?: DescriptionColumn;
+  B?: DescriptionColumn;
+  C?: DescriptionColumn;
+  D?: DescriptionColumn;
+  E?: DescriptionColumn;
+  F?: DescriptionColumn;
+  G?: DescriptionColumn;
+  H?: DescriptionColumn;
+  all?: DescriptionColumn;
 }
 
 export interface Control {
@@ -81,14 +83,31 @@ export function toPpen(c: Control) {
       },
       ...(c.code ? [{ type: "code", text: c.code.toString() }] : []),
       ...Object.keys(c.description)
-        .filter((box) => c.description[box as keyof Description])
-        .map((box) => ({
-          type: "description",
-          attrs: {
-            box,
-            "iof-2004-ref": c.description[box as keyof Description],
-          },
-        })),
+        .filter(
+          (box): box is keyof Description =>
+            !!c.description[box as keyof Description]
+        )
+        .map((box) => {
+          const d = c.description[box];
+
+          if (typeof d === "string") {
+            return {
+              type: "description",
+              attrs: {
+                box,
+                "iof-2004-ref": d,
+              },
+            };
+          } else {
+            return {
+              type: "description",
+              attrs: {
+                box,
+              },
+              text: d?.value,
+            };
+          }
+        }),
     ],
   };
 }
diff --git a/src/services/create-svg.js b/src/services/create-svg.js
@@ -355,11 +355,21 @@ export async function courseDefinitionToSvg(eventName, course, mapScale) {
                   await Promise.all(
                     ["C", "D", "E", "F", "G", "H"].map(
                       async (column, colIndex) => [
-                        await descriptionSymbol(
-                          description[column],
-                          index + 2,
-                          colIndex + 2
-                        ),
+                        description[column]
+                          ? typeof description[column] === "string"
+                            ? await descriptionSymbol(
+                                description[column],
+                                index + 2,
+                                colIndex + 2
+                              )
+                            : text(
+                                description[column].value,
+                                cellSize * (colIndex + 2) + cellSize / 2,
+                                baseLine,
+                                "black",
+                                fontSize
+                              )
+                          : null,
                         colLine(
                           colIndex + 2,
                           index + 2,

diff --git a/src/services/ppen.js b/src/services/ppen.js
@@ -103,13 +103,17 @@ export function parsePPen(doc) {
       kind: tag.getAttribute("kind"),
       code: codeTag ? codeTag.textContent : undefined,
       coordinates: parseLocation(tag.getElementsByTagName("location")[0]),
-      description: Array.from(tag.getElementsByTagName("description")).reduce(
-        (a, dtag) => {
-          a[dtag.getAttribute("box")] = dtag.getAttribute("iof-2004-ref");
-          return a;
-        },
-        {}
-      ),
+      description: {
+        ...Array.from(tag.getElementsByTagName("description")).reduce(
+          (a, dtag) => {
+            a[dtag.getAttribute("box")] = dtag.getAttribute("iof-2004-ref") || {
+              value: dtag.textContent,
+            };
+            return a;
+          },
+          {}
+        ),
+      },
     });
   }