@marimo-team/frontend 0.24.1-dev2 → 0.24.1-dev20

package/src/plugins/impl/MatrixPlugin.tsx

@@ -54,6 +54,40 @@ export class MatrixPlugin implements IPlugin<T, Data> {
 }
 
 const PIXELS_PER_STEP = 10;
+const COARSE_MULTIPLIER = 10;
+const FINE_MULTIPLIER = 0.1;
+
+/** Step multiplier from modifier keys: shift = coarse, alt = fine. */
+const stepMultiplier = (e: { shiftKey: boolean; altKey: boolean }): number => {
+  if (e.shiftKey) {
+    return COARSE_MULTIPLIER;
+  }
+  if (e.altKey) {
+    return FINE_MULTIPLIER;
+  }
+  return 1;
+};
+
+/**
+ * Strip floating-point noise from step arithmetic (e.g. 3 * 0.1).
+ * The noise tolerance scales with the step so that legitimately tiny
+ * results (e.g. from a 2e-14 step) are preserved, while noise left over
+ * from arithmetic on ordinary magnitudes (e.g. the 5.55e-17 residue of
+ * 0.3 - 3 * 0.1) still snaps away.
+ */
+const cleanFloat = (x: number, step: number): number => {
+  const rounded = Number(x.toFixed(12));
+  const tolerance =
+    Number.EPSILON * Math.max(Math.abs(x), Math.abs(step)) * 100;
+  return Math.abs(x - rounded) <= tolerance ? rounded : x;
+};
+
+interface EditState {
+  row: number;
+  col: number;
+  text: string;
+  selectAll: boolean;
+}
 
 interface MatrixComponentProps extends Data {
   value: T;
@@ -80,6 +114,7 @@ const MatrixComponent = ({
     col: number;
     startX: number;
     startValue: number;
+    multiplier: number;
   } | null>(null);
   const [activeCell, setActiveCell] = useState<{
     row: number;
@@ -95,6 +130,16 @@ const MatrixComponent = ({
   }, [value]);
   const displayValue = activeCell == null ? value : draft;
 
+  // Editing state is mirrored in a ref so that the blur fired while
+  // committing (refocusing the cell unmounts the input) can't commit twice.
+  const [editing, setEditingState] = useState<EditState | null>(null);
+  const editingRef = useRef<EditState | null>(null);
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const setEditing = useCallback((edit: EditState | null) => {
+    editingRef.current = edit;
+    setEditingState(edit);
+  }, []);
+
   const formatValue = (val: number) =>
     scientific ? val.toExponential(precision) : val.toFixed(precision);
 
@@ -112,22 +157,131 @@ const MatrixComponent = ({
     [minValue, maxValue],
   );
 
+  // The single mutation chokepoint for every edit path (drag, arrow, type).
+  // Bounds are enforced here so no path can escape them. In symmetric mode
+  // the pair must stay equal *and* respect both cells' bounds, so the shared
+  // value is clamped to the intersection of the two ranges. Returns null
+  // when the clamped value is already in place, so callers can skip
+  // redundant updates.
+  const withCellValue = useCallback(
+    (base: T, row: number, col: number, newValue: number): T | null => {
+      const mirrored = symmetric && row !== col;
+      let clamped = clampValue(newValue, row, col);
+      if (mirrored) {
+        clamped = clampValue(clamped, col, row);
+      }
+      if (clamped === base[row][col]) {
+        return null;
+      }
+      const copy = base.map((r) => [...r]);
+      copy[row][col] = clamped;
+      if (mirrored) {
+        copy[col][row] = clamped;
+      }
+      return copy;
+    },
+    [symmetric, clampValue],
+  );
+
+  const startEditing = useCallback(
+    (row: number, col: number, seed?: string) => {
+      if (disabled[row][col]) {
+        return;
+      }
+      dragState.current = null;
+      setActiveCell(null);
+      setEditing({
+        row,
+        col,
+        text: seed ?? String(value[row][col]),
+        selectAll: seed == null,
+      });
+    },
+    [disabled, value, setEditing],
+  );
+
+  // Callback ref: focus the input when it mounts. When editing starts from
+  // a typed character, place the caret after the seed instead of selecting.
+  const focusInput = useCallback((el: HTMLInputElement | null) => {
+    inputRef.current = el;
+    if (el) {
+      el.focus();
+      if (editingRef.current?.selectAll) {
+        el.select();
+      } else {
+        el.setSelectionRange(el.value.length, el.value.length);
+      }
+    }
+  }, []);
+
+  const commitEdit = useCallback(
+    (refocusCell: boolean) => {
+      const edit = editingRef.current;
+      if (!edit) {
+        return;
+      }
+      const cell = refocusCell ? inputRef.current?.closest("td") : null;
+      setEditing(null);
+      const text = edit.text.trim();
+      const parsed = Number(text);
+      // Typed values are clamped to bounds but not snapped to `step`,
+      // so exact values like 2.32e7 survive.
+      if (text !== "" && Number.isFinite(parsed)) {
+        const copy = withCellValue(value, edit.row, edit.col, parsed);
+        if (copy) {
+          setDraft(copy);
+          setValue(copy);
+        }
+      }
+      cell?.focus();
+    },
+    [value, withCellValue, setValue, setEditing],
+  );
+
+  const cancelEdit = useCallback(() => {
+    const cell = inputRef.current?.closest("td");
+    setEditing(null);
+    cell?.focus();
+  }, [setEditing]);
+
+  const handleInputKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      e.stopPropagation();
+      if (e.key === "Enter") {
+        e.preventDefault();
+        commitEdit(true);
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        cancelEdit();
+      }
+    },
+    [commitEdit, cancelEdit],
+  );
+
   const handlePointerDown = useCallback(
-    (e: React.PointerEvent, row: number, col: number) => {
-      if (disabled[row][col] || !(e.target instanceof Element)) {
+    (e: React.PointerEvent<HTMLTableCellElement>, row: number, col: number) => {
+      if (
+        disabled[row][col] ||
+        editing != null ||
+        !(e.target instanceof Element)
+      ) {
         return;
       }
       e.preventDefault();
+      // preventDefault also suppresses the browser's click-to-focus, so
+      // focus the cell explicitly to keep keyboard stepping reachable.
+      e.currentTarget.focus();
       e.target.setPointerCapture(e.pointerId);
       dragState.current = {
         row,
         col,
         startX: e.clientX,
         startValue: displayValue[row][col],
+        multiplier: stepMultiplier(e),
       };
       setActiveCell({ row, col });
     },
-    [disabled, displayValue],
+    [disabled, editing, displayValue],
   );
 
   const handlePointerMove = useCallback(
@@ -136,26 +290,32 @@ const MatrixComponent = ({
       if (!state) {
         return;
       }
+      const multiplier = stepMultiplier(e);
+      if (multiplier !== state.multiplier) {
+        // Rebase so toggling a modifier mid-drag rescales future movement
+        // instead of jumping the value.
+        state.startX = e.clientX;
+        state.startValue = displayValue[state.row][state.col];
+        state.multiplier = multiplier;
+      }
       const { row, col, startX, startValue } = state;
       const dx = e.clientX - startX;
-      const cellStep = step[row][col];
+      const cellStep = step[row][col] * multiplier;
       const steps = Math.round(dx / PIXELS_PER_STEP);
-      const rawValue = startValue + steps * cellStep;
-      const newValue = clampValue(rawValue, row, col);
-
-      if (newValue !== displayValue[row][col]) {
-        const copy = displayValue.map((r) => [...r]);
-        copy[row][col] = newValue;
-        if (symmetric && row !== col) {
-          copy[col][row] = newValue;
-        }
+      const copy = withCellValue(
+        displayValue,
+        row,
+        col,
+        cleanFloat(startValue + steps * cellStep, cellStep),
+      );
+      if (copy) {
         setDraft(copy);
         if (!debounce) {
           setValue(copy);
         }
       }
     },
-    [step, clampValue, displayValue, symmetric, debounce, setValue],
+    [step, displayValue, withCellValue, debounce, setValue],
   );
 
   const handlePointerUp = useCallback(() => {
@@ -168,27 +328,61 @@ const MatrixComponent = ({
 
   const handleKeyDown = useCallback(
     (e: React.KeyboardEvent, row: number, col: number) => {
-      if (e.key === "ArrowUp" || e.key === "ArrowDown") {
-        if (disabled[row][col]) {
-          return;
-        }
+      if (disabled[row][col]) {
+        return;
+      }
+      if (e.key === "Enter" || e.key === "F2") {
         e.preventDefault();
-        const cellStep = step[row][col];
-        const delta = e.key === "ArrowUp" ? cellStep : -cellStep;
-        const newValue = clampValue(displayValue[row][col] + delta, row, col);
-
-        if (newValue !== displayValue[row][col]) {
-          const copy = displayValue.map((r) => [...r]);
-          copy[row][col] = newValue;
-          if (symmetric && row !== col) {
-            copy[col][row] = newValue;
-          }
-          setDraft(copy);
-          setValue(copy);
-        }
+        startEditing(row, col);
+        return;
+      }
+      // Typing a number starts editing, seeded with the typed character.
+      if (
+        e.key.length === 1 &&
+        /[\d.+-]/.test(e.key) &&
+        !e.ctrlKey &&
+        !e.metaKey &&
+        !e.altKey
+      ) {
+        e.preventDefault();
+        startEditing(row, col, e.key);
+        return;
+      }
+      const cellStep = step[row][col];
+      let delta: number;
+      switch (e.key) {
+        // Right/left mirror up/down, matching the horizontal drag direction
+        // (and the native slider convention).
+        case "ArrowUp":
+        case "ArrowRight":
+          delta = cellStep * stepMultiplier(e);
+          break;
+        case "ArrowDown":
+        case "ArrowLeft":
+          delta = -cellStep * stepMultiplier(e);
+          break;
+        case "PageUp":
+          delta = cellStep * COARSE_MULTIPLIER;
+          break;
+        case "PageDown":
+          delta = -cellStep * COARSE_MULTIPLIER;
+          break;
+        default:
+          return;
+      }
+      e.preventDefault();
+      const copy = withCellValue(
+        displayValue,
+        row,
+        col,
+        cleanFloat(displayValue[row][col] + delta, delta),
+      );
+      if (copy) {
+        setDraft(copy);
+        setValue(copy);
       }
     },
-    [disabled, step, displayValue, clampValue, symmetric, setValue],
+    [disabled, startEditing, step, displayValue, withCellValue, setValue],
   );
 
   const hasRowLabels = rowLabels != null && rowLabels.length > 0;
@@ -238,6 +432,10 @@ const MatrixComponent = ({
                   const isDisabled = disabled[i][j];
                   const isActive =
                     activeCell?.row === i && activeCell?.col === j;
+                  const cellEdit =
+                    editing != null && editing.row === i && editing.col === j
+                      ? editing
+                      : null;
                   const rowLabel = rowLabels?.[i] ?? `Row ${i + 1}`;
                   const colLabel = columnLabels?.[j] ?? `Column ${j + 1}`;
                   return (
@@ -247,24 +445,47 @@ const MatrixComponent = ({
                         "relative text-center min-w-14 h-8 px-2 transition-colors touch-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-hidden",
                         isDisabled
                           ? "cursor-default text-muted-foreground"
-                          : "cursor-ew-resize text-link hover:bg-accent",
-                        isActive && "bg-accent",
+                          : cellEdit
+                            ? "cursor-text"
+                            : "cursor-ew-resize text-link hover:bg-accent",
+                        (isActive || cellEdit != null) && "bg-accent",
                         j === 0 && "bracket-l",
                         j === numCols - 1 && "bracket-r",
                         i === 0 && "bracket-t",
                         i === numRows - 1 && "bracket-b",
                       )}
                       tabIndex={isDisabled ? -1 : 0}
+                      title={String(cellValue)}
                       aria-label={`${rowLabel}, ${colLabel}`}
                       aria-valuenow={cellValue}
                       aria-valuemin={minValue?.[i]?.[j]}
                       aria-valuemax={maxValue?.[i]?.[j]}
                       aria-disabled={isDisabled || undefined}
                       onPointerDown={(e) => handlePointerDown(e, i, j)}
+                      onDoubleClick={() => startEditing(i, j)}
                       onKeyDown={(e) => handleKeyDown(e, i, j)}
                       data-testid={`matrix-cell-${i}-${j}`}
                     >
-                      {formatValue(cellValue)}
+                      {cellEdit ? (
+                        <input
+                          ref={focusInput}
+                          className="bg-transparent text-center font-mono text-sm text-foreground outline-none select-text"
+                          style={{
+                            width: `${Math.max(cellEdit.text.length + 2, 6)}ch`,
+                          }}
+                          value={cellEdit.text}
+                          onChange={(e) =>
+                            setEditing({ ...cellEdit, text: e.target.value })
+                          }
+                          onKeyDown={handleInputKeyDown}
+                          onBlur={() => commitEdit(false)}
+                          onPointerDown={(e) => e.stopPropagation()}
+                          aria-label={`Edit ${rowLabel}, ${colLabel}`}
+                          data-testid={`matrix-input-${i}-${j}`}
+                        />
+                      ) : (
+                        formatValue(cellValue)
+                      )}
                     </td>
                   );
                 })}