Beta

CHANGELOG.md

@@ -7,6 +7,28 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- Input line length and angle using textboxes
+- Português (Brasil), Suomi, and 简体中文 translations
+- Opened file name shows in the stitch menu
+- Screenshot testing
+
+### Fixed
+
+- Menus will not hide when inputting text
+- Able to drag ends of lines on touch devices
+- Pressing C resets & recenters the pattern
+- App crashing from large width/height inputs by setting the limit to 1000
+- Bright instead of pale green lines for SVGs when the green theme is enabled
+
+### Changed
+
+- Line measurement labels match the theme
+- Enabled measuring when magnified for precision measuring
+- Pressing an arrow button once will move the pattern by 1/8" or 2mm
+- Slow down speed of pattern movement with arrow keys
+
 ## [1.3.0] - 2025-06-25
 
 ### Added

app/[locale]/calibrate/page.tsx

@@ -30,7 +30,7 @@ import {
   themeFilter,
   Theme,
 } from "@/_lib/display-settings";
-import { getPtDensity, IN } from "@/_lib/unit";
+import { getPtDensity, Unit } from "@/_lib/unit";
 import { visible } from "@/_components/theme/css-functions";
 import { useTranslations } from "next-intl";
 import MeasureCanvas from "@/_components/canvases/measure-canvas";
@@ -87,6 +87,7 @@ export default function Page() {
   // Default dimensions should be available on most cutting mats and large enough to get an accurate calibration
   const defaultWidthDimensionValue = "24";
   const defaultHeightDimensionValue = "16";
+  const maxDimensionValue = 1000; // Prevents crashing from excessive grid lines #410
 
   const maxPoints = 4; // One point per vertex in rectangle
 
@@ -115,7 +116,7 @@ export default function Page() {
   const [restoreTransforms, setRestoreTransforms] =
     useState<RestoreTransforms | null>(null);
   const [pageCount, setPageCount] = useState<number>(0);
-  const [unitOfMeasure, setUnitOfMeasure] = useState(IN);
+  const [unitOfMeasure, setUnitOfMeasure] = useState<Unit>(Unit.IN);
   const [layoutWidth, setLayoutWidth] = useState<number>(0);
   const [layoutHeight, setLayoutHeight] = useState<number>(0);
   const [lineThickness, setLineThickness] = useState<number>(0);
@@ -267,14 +268,14 @@ export default function Page() {
 
   // Save valid calibration grid height in localStorage
   function handleHeightChange(e: ChangeEvent<HTMLInputElement>) {
-    const h = removeNonDigits(e.target.value, heightInput);
+    const h = removeNonDigits(e.target.value, heightInput, maxDimensionValue);
     setHeightInput(h);
     updateLocalSettings({ height: h });
   }
 
   // Save valid calibration grid width in localStorage
   function handleWidthChange(e: ChangeEvent<HTMLInputElement>) {
-    const w = removeNonDigits(e.target.value, widthInput);
+    const w = removeNonDigits(e.target.value, widthInput, maxDimensionValue);
     setWidthInput(w);
     updateLocalSettings({ width: w });
   }
@@ -521,6 +522,7 @@ export default function Page() {
     <main
       onPointerDown={handlePointerDown}
       onPointerMove={handlePointerMove}
+      onKeyDown={resetIdle}
       ref={noZoomRefCallback}
       className={`${menusHidden && "cursor-none"} ${isDarkTheme(displaySettings.theme) && "dark bg-black"} w-screen h-screen absolute overflow-hidden touch-none`}
     >
@@ -530,11 +532,11 @@ export default function Page() {
           className="bg-white dark:bg-black transition-all duration-500 w-screen h-screen"
         >
           {showCalibrationAlert ? (
-            <div className="flex flex-col items-center gap-4 absolute left-1/4 top-1/2 -translate-y-1/2 w-1/2 bg-white dark:bg-black dark:text-white z-[150] p-4 rounded border-2 border-black dark:border-white">
+            <div className="flex flex-col items-center gap-4 absolute left-1/4 top-1/2 -translate-y-1/2 w-1/2 bg-white dark:bg-black dark:text-white z-[150] p-4 rounded border-2 border-black dark:border-white pointer-events-none">
               <WarningIcon ariaLabel="warning" />
               <p>{t("calibrationAlert")}</p>
               <Button
-                className="flex items-center justify-center"
+                className="flex items-center justify-center pointer-events-auto"
                 onClick={() => toggleFullScreen(fullScreenHandle)}
               >
                 <span className="mr-1 -mt-1.5 w-4 h-4">
@@ -604,6 +606,7 @@ export default function Page() {
               magnifying={magnifying}
               menusHidden={menusHidden}
               menuStates={menuStates}
+              isDarkTheme={isDarkTheme(displaySettings.theme)}
             >
               <Draggable
                 className={`absolute ${menusHidden && "!cursor-none"} `}

app/[locale]/page.tsx

@@ -36,6 +36,7 @@ import { Button } from "@/_components/buttons/button";
 import { ButtonStyle } from "@/_components/theme/styles";
 import ZoomInIcon from "@/_icons/zoom-in-icon";
 import TuneIcon from "@/_icons/tune-icon";
+import InlineInput from "@/_components/inline-input";
 
 const DynamicInstallButton = dynamic(
   () => import("@/_components/buttons/install-button"),
@@ -67,7 +68,7 @@ export default function Home() {
         </menu>
       </nav>
       <article className="prose lg:prose-xl m-auto">
-        <h1>{t("welcome.title")}</h1>
+        <h1 data-testid="welcome-title">{t("welcome.title")}</h1>
         <p>
           {t.rich("welcome.description", {
             changeLogLink: (chunks) => (
@@ -149,8 +150,14 @@ export default function Home() {
           </li>
           <li>{t("calibration.start")}</li>
           <li>
-            {t("calibration.fullscreen")}
-            <FullScreenIcon ariaLabel="" />
+            {t.rich("calibration.fullscreen", {
+              fullscreenIcon: () => (
+                <FullScreenIcon
+                  className="inline-block align-middle"
+                  ariaLabel=""
+                />
+              ),
+            })}
           </li>
           <li>{t("calibration.drag")}</li>
           <li>
@@ -176,7 +183,13 @@ export default function Home() {
         <ol>
           <li>
             {t.rich("project.open", {
-              pdficon: () => <PdfIcon fill="#000" ariaLabel="" />,
+              pdficon: () => (
+                <PdfIcon
+                  fill="#000"
+                  ariaLabel=""
+                  className="inline-block align-middle"
+                />
+              ),
             })}
           </li>
           <li>{t("project.move")}</li>
@@ -389,6 +402,61 @@ export default function Home() {
             {t("lineTool.move.description")}
             <p>{t("lineTool.move.use")}</p>
           </Definition>
+          <Definition
+            icon={
+              <InlineInput
+                className="relative flex flex-col w-20"
+                disabled={true}
+                handleChange={() => {}}
+                inputClassName="pl-1.5 pr-7 !border-2 !border-black dark:!border-white"
+                id="distance"
+                labelRight={"in"}
+                name="distance"
+                value={"10"}
+                type="string"
+              />
+            }
+            title={t("lineTool.length.title")}
+          >
+            {t("lineTool.length.description")}
+            <p>
+              {t.rich("lineTool.length.use", {
+                lineToolVideoLink: (chunks) => (
+                  <a href="https://youtu.be/TH8tY9BoxfM?si=VTC1QRnNzBfG555Z&t=709">
+                    {chunks}
+                  </a>
+                ),
+              })}
+            </p>
+          </Definition>
+          <Definition
+            icon={
+              <InlineInput
+                className="relative flex flex-col w-20"
+                disabled={true}
+                handleChange={() => {}}
+                inputClassName="pl-1.5 pr-7 !border-2 !border-black dark:!border-white"
+                id="distance"
+                labelRight={"°"}
+                name="distance"
+                value={"45"}
+                type="string"
+              />
+            }
+            title={t("lineTool.angle.title")}
+          >
+            {t("lineTool.angle.description")}
+            <p>
+              {t.rich("lineTool.angle.use", {
+                alignIcon: () => (
+                  <RotateToHorizontalIcon
+                    className="inline-block align-middle"
+                    ariaLabel=""
+                  />
+                ),
+              })}
+            </p>
+          </Definition>
         </dl>
 
         <a href="#faq">

app/_components/canvases/calibration-canvas.tsx

@@ -21,6 +21,7 @@ import { PointAction } from "@/_reducers/pointsReducer";
 import { FullScreenHandle } from "react-full-screen";
 import Matrix from "ml-matrix";
 import { getCalibrationContextUpdatedWithEvent } from "@/_lib/calibration-context";
+import { Unit } from "@/_lib/unit";
 
 const maxPoints = 4; // One point per vertex in rectangle
 const cornerMargin = 96;
@@ -44,7 +45,7 @@ export default function CalibrationCanvas({
   width: number;
   height: number;
   isCalibrating: boolean;
-  unitOfMeasure: string;
+  unitOfMeasure: Unit;
   displaySettings: DisplaySettings;
   corners: Set<number>;
   setCorners: Dispatch<SetStateAction<Set<number>>>;
@@ -246,6 +247,7 @@ export default function CalibrationCanvas({
 
   return (
     <canvas
+      data-testid="calibration-canvas"
       tabIndex={0}
       ref={canvasRef}
       className={`${className} outline-none`}