fix(fitch): fixed from updates when adding / removing lines

src/components/fitch/FitchProofFromArrayRule.tsx

@@ -2,7 +2,7 @@ import useFitchProofStoreContext from "../../contexts/fitch";
 import fitchRuleOptions, { fitchRules } from "../../rules/fitch";
 import { FitchProofType, FitchRuleType } from "../../schemas/solve";
 import FitchProofFromSelect from "./FitchProofFromSelect";
-import { Index } from "solid-js";
+import { batch, Index } from "solid-js";
 
 interface FromArrayProps {
   index: number
@@ -19,12 +19,11 @@ const FromArrayRule = (props: FromArrayProps) => {
     target: Element;
   }) => {
     const rule = e.currentTarget.value as keyof (typeof fitchRuleOptions);
-    set(props.index, "rule" as any, e.currentTarget.value)
-    set(props.index, "from" as any, Array(fitchRuleOptions[rule].count).fill(-1))
+    set(props.index, { rule, from: Array(fitchRuleOptions[rule].count).fill(-1) })
   }
 
   return <>
-    <select onChange={onChange} class="w-32">
+    <select value={props.rule} onChange={onChange} class="w-32">
       <option hidden></option>
       <Index each={Object.entries(fitchRuleOptions)}>
         {(value) => <option value={value()[0]}>{value()[1].label}</option>}

src/components/fitch/FitchProofFromSelect.tsx

@@ -1,4 +1,4 @@
-import { createEffect, createSignal, For } from "solid-js";
+import { Index } from "solid-js";
 import useFitchProofStoreContext from "../../contexts/fitch";
 
 interface FitchProofFromSelectProps {
@@ -13,22 +13,14 @@ const FitchProofFromSelect = (props: FitchProofFromSelectProps) => {
 
   const options = () => proof.filter((_, i) => i < props.index);
 
-  const [selected, setSelected] = createSignal(proof[props.value]);
-
-  const index = () => proof.indexOf(selected())
-
-  createEffect(() => {
-    props.setValue(index())
-  })
-
-  return <select class="w-20" onChange={(e) => {
+  return <select value={props.value} class="w-20" onChange={(e) => {
     const index = parseInt(e.currentTarget.value);
-    setSelected(options()[index])
+    props.setValue(index)
   }}>
     <option hidden value={-1} />
-    <For each={options()}>
-      {(_, index) => <option value={index()}>{index() + 1}</option>}
-    </For>
+    <Index each={options()}>
+      {(_, index) => <option value={index}>{index + 1}</option>}
+    </Index>
   </select>
 }
 

src/components/fitch/FitchProofLine.tsx

@@ -9,6 +9,7 @@ import useFitchProofStoreContext from "../../contexts/fitch";
 import { produce } from "solid-js/store";
 import MinusCircle from "../icons/MinusCircle";
 import Tag from "../icons/Tag";
+import { batch } from "solid-js";
 
 interface FitchProofLineProps {
   index: number,
@@ -38,21 +39,26 @@ const FitchProofLine = (props: FitchProofLineProps) => {
         deleteCount++;
       }
     }
-    set(produce(state => {
-      state.splice(props.index, deleteCount);
-    }))
+    batch(() => {
+      set(state => state.type === "rule", "from" as any, from => from >= props.index && from < props.index + deleteCount, -1)
+      set(state => state.type === "rule", "from" as any, from => from >= props.index + deleteCount, from => from - deleteCount);
+      set(produce(state => {
+        state.splice(props.index, deleteCount);
+      }))
+    })
+
   }
 
   return <div class="group h-16 group min-w-fit flex justify-start gap-2 items-center">
     <div class="shrink-0 flex items-center w-12">{props.index + 1}</div>
     <Indent index={props.index} indentation={props.line.indentation} type={props.line.type} />
-    {props.line.type !== "abs" ? <Formula value={props.line.formula} setValue={(v) => set(props.index, "formula" as any, v)} /> : <span class="w-52 ">{"\u22A5"}</span>}
+    {props.line.type !== "abs" ? <Formula value={props.line.formula} setValue={(formula) => set(props.index, { formula })} /> : <span class="w-52 ">{"\u22A5"}</span>}
     {props.line.type === "rule" && <FromArrayRule index={props.index} from={props.line.from} rule={props.line.rule} />}
     {props.line.type === "prem" && <div>Prem.</div>}
     {props.line.type === "ass" && <div>Ass.</div>}
     {props.line.type === "abs" && <>
-      <FitchProofFromSelect index={props.index} value={props.line.from0} setValue={(v) => set(props.index, "from0" as any, v)} />
-      <FitchProofFromSelect index={props.index} value={props.line.from1} setValue={(v) => set(props.index, "from1" as any, v)} />
+      <FitchProofFromSelect index={props.index} value={props.line.from0} setValue={(from0) => set(props.index, { from0 })} />
+      <FitchProofFromSelect index={props.index} value={props.line.from1} setValue={(from1) => set(props.index, { from1 })} />
     </>}
     <IconButton title="Annotate"><Tag /></IconButton>
     <IconButton tile="Remove" onClick={remove}><MinusCircle /></IconButton>

src/components/fitch/Inserter.tsx

@@ -2,7 +2,7 @@ import { FitchProofType } from "../../schemas/solve";
 import Border from "./Border";
 import IconButton from "../IconButton";
 import useFitchProofStoreContext from "../../contexts/fitch";
-import { Index, Show } from "solid-js";
+import { batch, Index, Show } from "solid-js";
 import { produce } from "solid-js/store";
 import ArrowRightCircle from "../icons/ArrowRightCircle";
 import ArrowDownCircle from "../icons/ArrowDownCircle";
@@ -18,9 +18,14 @@ const Inserter = (props: InserterProps) => {
 
   const [store, set] = useFitchProofStoreContext();
 
-  const insert = (index: number, line: FitchProofType[number]) => set(produce(state => {
-    state.splice(index, 0, line);
-  }))
+  const insert = (index: number, line: FitchProofType[number]) => batch(() => {
+    set(produce(state => {
+      state.splice(index, 0, line);
+    }))
+    set(line => line.type === "rule", "from" as any, from => from >= index, from => from + 1)
+    set(line => line.type == "abs" && line.from0 >= index, "from0" as any, from => from + 1)
+    set(line => line.type == "abs" && line.from1 >= index, "from1" as any, from => from + 1)
+  })
 
   const nextType = () => store[props.index + 1]?.type;