Improved fractional input

src/lib/Form.svelte

@@ -14,7 +14,6 @@
     } from "$lib/stores"
     import { frac } from "$lib/frac"
     import FracInput from "$lib/FracInput.svelte"
-    import FracRange from "$lib/FracRange.svelte"
 </script>
 
 <h2>Inputs</h2>
@@ -27,7 +26,7 @@
 
     <label for="frame-width"> Frame width </label>
 
-    <FracRange
+    <FracInput
         id="frame-width"
         bind:value={$frameWidth}
         max={$frameWidthMax}
@@ -36,7 +35,7 @@
         required
     />
     <label for="rabbet-width"> Rabbet width </label>
-    <FracRange
+    <FracInput
         id="rabbet-width"
         bind:value={$rabbetWidth}
         max={$rabbetWidthMax}
@@ -57,7 +56,7 @@
 
 <div class="outputs">
     <label for="linear-stock">Linear stock </label>
-    <output id="linear-stock">{frac($stockLength)}"</output>
+    <output id="linear-stock">{frac($stockLength)}</output>
 </div>
 
 <style>

src/lib/FracInput.svelte

@@ -27,12 +27,13 @@
     export let value: number
     export let min: number | null = null
     export let max: number | null = null
+    export let step: number | null = null // TODO: Add step buttons
     export let required: boolean = false
 
     let focused: boolean = false
     let input: HTMLInputElement
     let rawValue = frac(value)
-    let displayValue = frac(value) + '"'
+    let displayValue = frac(value)
 
     $: {
         // Round to the nearest 1⁄32nd to match the masked value.
@@ -41,7 +42,7 @@
         if (input) {
             if (validate(input, v, min, max)) {
                 value = v
-                displayValue = frac(v) + '"'
+                displayValue = frac(v)
             } else {
                 displayValue = rawValue
             }
@@ -66,9 +67,29 @@
             focused = false
         }}
     />
+    {#if step !== null}
+        <button
+            disabled={min == null || value - step < min}
+            on:click={() => {
+                value -= step
+                rawValue = frac(value)
+            }}>-{frac(step)}</button
+        >
+        <button
+            disabled={max == null || value + step > max}
+            on:click={() => {
+                value += step
+                rawValue = frac(value)
+            }}>+{frac(step)}</button
+        >
+    {/if}
 </span>
 
 <style>
+    .range {
+        display: flex;
+        gap: 0.2rem;
+    }
     input {
         box-sizing: border-box;
         width: 100%;
@@ -82,4 +103,24 @@
     input:invalid {
         border-bottom-color: var(--invalid-color);
     }
+
+    button {
+        box-sizing: border-box;
+        padding: 0 0.2rem;
+        line-height: 1;
+        border: 1px outset black; /* so pretty ✨ */
+        border-radius: 3px;
+        background: white;
+    }
+    button:active {
+        border-style: inset; /* even prettier ✨ */
+    }
+    button:disabled {
+        opacity: 0.5;
+    }
+    @media print {
+        button {
+            display: none;
+        }
+    }
 </style>

src/lib/PartList.svelte

@@ -52,7 +52,7 @@
         {#each $parts as part}
             <tr>
                 <td>{part.count}</td>
-                <td>{frac(part.width)}" × {frac(part.length)}"</td>
+                <td>{frac(part.width)} × {frac(part.length)}</td>
                 <td>{part.material.name}</td>
             </tr>
         {/each}

src/lib/frac.test.ts

@@ -3,19 +3,19 @@ import { frac, parseFrac } from "$lib/frac"
 
 describe("frac renders numbers as mixed fractions", () => {
     const cases: [number, string][] = [
-        [-1 - 3 / 8, "-1\u20093⁄8"],
-        [-1, "-1"],
-        [0, "0"],
-        [1, "1"],
-        [1.5, "1\u20091⁄2"],
-        [12.25, "12\u20091⁄4"],
-        [-6.125, "-6\u20091⁄8"],
-        [1 / 4, "1⁄4"],
-        [7 / 8, "7⁄8"],
-        [15 / 16, "15⁄16"],
-        [1 + 17 / 32, "1\u200917⁄32"],
-        [23 / 32, "23⁄32"],
-        [3 + 61.5 / 64, "3\u200931⁄32"],
+        [-1 - 3 / 8, '-1\u20093⁄8"'],
+        [-1, '-1"'],
+        [0, '0"'],
+        [1, '1"'],
+        [1.5, '1\u20091⁄2"'],
+        [12.25, '12\u20091⁄4"'],
+        [-6.125, '-6\u20091⁄8"'],
+        [1 / 4, '1⁄4"'],
+        [7 / 8, '7⁄8"'],
+        [15 / 16, '15⁄16"'],
+        [1 + 17 / 32, '1\u200917⁄32"'],
+        [23 / 32, '23⁄32"'],
+        [3 + 61.5 / 64, '3\u200931⁄32"'],
     ]
     test.for(cases)("renders %d as %s", ([n, s]) => {
         expect(frac(n)).toEqual(s)
@@ -57,6 +57,20 @@ describe("parseFrac converts strings to numbers", () => {
         [" 123", NaN],
         ["123 ", NaN],
         ["1/2.3", NaN],
+        // " is allowed following the number
+        ['8"', 8],
+        ['8" 1/2"', 8.5],
+        ['6" + 1/2" - 0.25 + 1/2"', 6.75],
+        ['1"/2', NaN],
+        // ' following the number multiplies by 12 (feet to inches)
+        ["1'", 12],
+        ["1'2", 14], // No whitespace necessary
+        ["1' 2", 14],
+        ["1' 2\"", 14],
+        ["1' + 2", 14],
+        ["1'+2\"", 14],
+        ["1/2' +12\"", 18],
+        ["3'4'5'6'1/2'", (3 + 4 + 5 + 6 + 0.5) * 12],
     ]
     test.for(cases)("parses %j as %d", ([s, n]) => {
         expect(parseFrac(s)).toEqual(n)

src/lib/frac.ts

@@ -1,5 +1,5 @@
 /**
- * Present a number as a mixed fraction.
+ * Present a number as a mixed fraction, in inches.
  *
  * The value is rounded to the nearest 1⁄32nd, and the
  * denominator is one of 32, 16, 8, or 4, as on a measuring tape.
@@ -35,7 +35,7 @@ export function frac(n: number): string {
         s += `${num}\u2044${denom}`
     }
 
-    return s
+    return s + '"'
 }
 
 /**
@@ -44,7 +44,7 @@ export function frac(n: number): string {
 export function parseFrac(s: string): number {
     const matches = [
         ...s.matchAll(
-            /((?:[+-]\s*)?)(\.\d+|\d+(?:\.\d*)?)(?:[/\u2044](\d+))?(\s+|$|(?=[+-]))/dg
+            /((?:[+-]\s*)?)(\.\d+|\d+(?:\.\d*)?)(?:[/\u2044](\d+))?(["']?)(\s+|$|(?=[+-])|(?<=["'])(?=\d))/dg
         ),
     ]
     if (matches.length === 0 || matches[0].index !== 0) {
@@ -58,9 +58,13 @@ export function parseFrac(s: string): number {
         let sign = m[1].substring(0, 1)
         let v = parseFloat(m[2])
         const denom = m[3]
+        const unit = m[4]
         if (denom) {
             v /= parseFloat(denom)
         }
+        if (unit === "'") {
+            v *= 12 // Feet to inches
+        }
         if (!sign) {
             sign = lastSign
         }
@@ -73,7 +77,7 @@ export function parseFrac(s: string): number {
         }
     }
 
-    const [lastStart] = matches[matches.length - 1].indices![4]
+    const [lastStart] = matches[matches.length - 1].indices![5]
     if (lastStart !== s.length) {
         // Failure to match, or trailing whitespace or other gunk.
         return NaN