fix: validate transform data before storage

During testing I accidentally managed to submit `NaN` as a pan
coordinate. This had the unfortunate side effect of bricking the
editor.

Given the serverity of an accidental `NaN` and that `NaN`s are not
impossible considering the amount of math involved in mouse move
operations, this commit introduces a simple validation step.

The new validation step should additionally be able to unstuck
anyone who have happened into this state by accident already.

Author: FelixZY

src/components/EditorCanvas/Canvas.jsx

@@ -139,8 +139,8 @@ export default function Canvas() {
       const rect = canvas.current.getBoundingClientRect();
       setLinkingLine({
         ...linkingLine,
-        endX: (e.clientX - rect.left - transform.pan?.x) / transform.zoom,
-        endY: (e.clientY - rect.top - transform.pan?.y) / transform.zoom,
+        endX: (e.clientX - rect.left - transform.pan.x) / transform.zoom,
+        endY: (e.clientY - rect.top - transform.pan.y) / transform.zoom,
       });
     } else if (
       panning.isPanning &&
@@ -154,7 +154,7 @@ export default function Canvas() {
       const dy = e.clientY - panning.dy;
       setTransform((prev) => ({
         ...prev,
-        pan: { x: prev.pan?.x + dx, y: prev.pan?.y + dy },
+        pan: { x: prev.pan.x + dx, y: prev.pan.y + dy },
       }));
       setPanning((prev) => ({ ...prev, dx: e.clientX, dy: e.clientY }));
     } else if (dragging.element === ObjectType.TABLE && dragging.id >= 0) {
@@ -258,7 +258,7 @@ export default function Canvas() {
   };
 
   const didPan = () =>
-    !(transform.pan?.x === panning.x && transform.pan?.y === panning.y);
+    !(transform.pan.x === panning.x && transform.pan.y === panning.y);
 
   const getMovedElementDetails = () => {
     switch (dragging.element) {
@@ -477,7 +477,7 @@ export default function Canvas() {
           )}
           <g
             style={{
-              transform: `translate(${transform.pan?.x}px, ${transform.pan?.y}px) scale(${transform.zoom})`,
+              transform: `translate(${transform.pan.x}px, ${transform.pan.y}px) scale(${transform.zoom})`,
               transformOrigin: "top left",
             }}
             id="diagram"

src/context/TransformContext.jsx

@@ -1,13 +1,42 @@
-import { createContext, useState } from "react";
+import { createContext, useCallback, useState } from "react";
 
 export const TransformContext = createContext(null);
 
 export default function TransformContextProvider({ children }) {
-  const [transform, setTransform] = useState({
+  const [transform, setTransformInternal] = useState({
     zoom: 1,
     pan: { x: 0, y: 0 },
   });
 
+  /**
+   * @type {typeof setTransformInternal}
+   */
+  const setTransform = useCallback(
+    (actionOrValue) => {
+      const findFirstNumber = (...values) =>
+        values.find((value) => typeof value === "number" && !isNaN(value));
+
+      setTransformInternal((prev) => {
+        if (typeof actionOrValue === "function") {
+          actionOrValue = actionOrValue(prev);
+        }
+
+        return {
+          zoom: clamp(
+            findFirstNumber(actionOrValue.zoom, prev.zoom, 1),
+            0.02,
+            5,
+          ),
+          pan: {
+            x: findFirstNumber(actionOrValue.pan?.x, prev.pan?.x, 0),
+            y: findFirstNumber(actionOrValue.pan?.y, prev.pan?.y, 0),
+          },
+        };
+      });
+    },
+    [setTransformInternal],
+  );
+
   return (
     <TransformContext.Provider value={{ transform, setTransform }}>
       {children}