feat: add debug coordinate overlay

Makes debugging issues in conversion from screen space
to diagram space easier.

Only adding english translations as I do not speak the
other languages.

src/components/EditorCanvas/Canvas.jsx

@@ -433,6 +433,7 @@ export default function Canvas() {
   const theme = localStorage.getItem("theme");
 
   return (
+    <>
       <div className="flex-grow h-full touch-none" id="canvas">
         <div ref={canvas} className="w-full h-full">
           <svg
@@ -442,7 +443,8 @@ export default function Canvas() {
             className="w-full h-full"
             style={{
               cursor: cursor,
-            backgroundColor: theme === "dark" ? "rgba(22, 22, 26, 1)" : "white",
+              backgroundColor:
+                theme === "dark" ? "rgba(22, 22, 26, 1)" : "white",
             }}
           >
             {settings.showGrid && (
@@ -527,6 +529,77 @@ export default function Canvas() {
             </g>
           </svg>
         </div>
+        {settings.showDebugCoordinates && (
+          <div className="fixed flex flex-col flex-wrap gap-6 bg-[rgba(var(--semi-grey-1),var(--tw-bg-opacity))]/40 border border-color bottom-4 right-4 p-4 rounded-xl backdrop-blur-sm pointer-events-none select-none">
+            <table className="table-auto grow">
+              <thead>
+                <tr>
+                  <th className="text-left" colSpan={3}>
+                    {t("transform")}
+                  </th>
+                </tr>
+                <tr className="italic [&_th]:font-normal [&_th]:text-right">
+                  <th>pan x</th>
+                  <th>pan y</th>
+                  <th>scale</th>
+                </tr>
+              </thead>
+              <tbody className="[&_td]:text-right [&_td]:min-w-[8ch]">
+                <tr>
+                  <td>{transform.pan.x.toFixed(2)}</td>
+                  <td>{transform.pan.y.toFixed(2)}</td>
+                  <td>{transform.zoom.toFixed(4)}</td>
+                </tr>
+              </tbody>
+            </table>
+            <table className="table-auto grow [&_th]:text-left [&_th:not(:first-of-type)]:text-right [&_td:not(:first-of-type)]:text-right [&_td]:min-w-[8ch]">
+              <thead>
+                <tr>
+                  <th colSpan={4}>{t("viewbox")}</th>
+                </tr>
+                <tr className="italic [&_th]:font-normal">
+                  <th>left</th>
+                  <th>top</th>
+                  <th>width</th>
+                  <th>height</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>TODO</td>
+                  <td>TODO</td>
+                  <td>TODO</td>
+                  <td>TODO</td>
+                </tr>
+              </tbody>
+            </table>
+            <table className="table-auto grow [&_th]:text-left [&_th:not(:first-of-type)]:text-right [&_td:not(:first-of-type)]:text-right [&_td]:min-w-[8ch]">
+              <thead>
+                <tr>
+                  <th colSpan={3}>{t("cursor_coordinates")}</th>
+                </tr>
+                <tr className="italic [&_th]:font-normal">
+                  <th>{t("coordinate_space")}</th>
+                  <th>x</th>
+                  <th>y</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>{t("coordinate_space_screen")}</td>
+                  <td>TODO</td>
+                  <td>TODO</td>
+                </tr>
+                <tr>
+                  <td>{t("coordinate_space_diagram")}</td>
+                  <td>TODO</td>
+                  <td>TODO</td>
+                </tr>
+              </tbody>
+            </table>
           </div>
+        )}
+      </div>
+    </>
   );
 }

src/components/EditorHeader/ControlPanel.jsx

@@ -1158,6 +1158,18 @@ export default function ControlPanel({
             showCardinality: !prev.showCardinality,
           })),
       },
+      show_debug_coordinates: {
+        state: settings.showDebugCoordinates ? (
+          <i className="bi bi-toggle-on" />
+        ) : (
+          <i className="bi bi-toggle-off" />
+        ),
+        function: () =>
+          setSettings((prev) => ({
+            ...prev,
+            showDebugCoordinates: !prev.showDebugCoordinates,
+          })),
+      },
       theme: {
         children: [
           {

src/context/SettingsContext.jsx

@@ -13,6 +13,7 @@ export default function SettingsContextProvider({ children }) {
     panning: true,
     showCardinality: true,
     tableWidth: tableWidth,
+    showCursorCoordinates: false,
   });
 
   return (

src/i18n/locales/en.js

@@ -59,6 +59,13 @@ const en = {
     show_timeline: "Show timeline",
     autosave: "Autosave",
     panning: "Panning",
+    show_debug_coordinates: "Show debug coordinates",
+    transform: "Transform",
+    viewbox: "View Box",
+    cursor_coordinates: "Cursor Coordinates",
+    coordinate_space: "Space",
+    coordinate_space_screen: "Screen",
+    coordinate_space_diagram: "Diagram",
     table_width: "Table width",
     language: "Language",
     flush_storage: "Flush storage",