refactor(editor-panel): extract LayerRow and layer crud logic

src/components/md-deck/hooks/deckStore.ts

@@ -1,11 +1,8 @@
 import { createStore } from "solid-js/store";
 import { calculateDimensions } from "./dimensions";
 import { loadCSV, CSV } from "../../utils/csv-loader";
-import {
-  initLayerConfigs,
-  formatLayers,
-  initLayerConfigsForSide,
-} from "./layer-parser";
+import { formatLayers, initLayerConfigsForSide } from "./layer-parser";
+import * as layerCrud from "./layer-crud";
 import type {
   CardData,
   LayerConfig,
@@ -290,53 +287,41 @@ export function createDeckStore(initialSrc: string = ""): DeckStore {
   };
 
   const addLayer = (side: CardSide, prop: string) => {
-    const newLayer: LayerConfig = {
-      prop,
-      visible: true,
-      x1: 1,
-      y1: 1,
-      x2: 2,
-      y2: 2,
-    };
     const configs = getLayerConfigs(side);
-    setLayerConfigs(side, [...configs, newLayer]);
+    setLayerConfigs(side, layerCrud.addLayer(configs, prop));
+    setState({
+      selectedLayer: layerCrud.adjustSelectedLayer(
+        state.selectedLayer,
+        "add",
+        configs.length,
+      ),
+    });
   };
 
   const removeLayer = (side: CardSide, index: number) => {
-    const configs = getLayerConfigs(side);
-    setLayerConfigs(
-      side,
-      configs.filter((_, i) => i !== index),
-    );
-    if (state.selectedLayer === index) {
-      setState({ selectedLayer: null });
-    } else if (
-      state.selectedLayer !== null &&
-      (state.selectedLayer as number) > index
-    ) {
-      setState({ selectedLayer: (state.selectedLayer as number) - 1 });
-    }
+    setLayerConfigs(side, layerCrud.removeLayer(getLayerConfigs(side), index));
+    setState({
+      selectedLayer: layerCrud.adjustSelectedLayer(
+        state.selectedLayer,
+        "remove",
+        index,
+      ),
+    });
   };
 
-  const reorderLayers = (
-    side: CardSide,
-    fromIndex: number,
-    toIndex: number,
-  ) => {
-    const configs = [...getLayerConfigs(side)];
-    const [item] = configs.splice(fromIndex, 1);
-    configs.splice(toIndex, 0, item);
-    setLayerConfigs(side, configs);
-    if (state.selectedLayer === fromIndex) {
-      setState({ selectedLayer: toIndex });
-    } else if (state.selectedLayer !== null) {
-      const sel = state.selectedLayer as number;
-      if (fromIndex < toIndex && sel > fromIndex && sel <= toIndex) {
-        setState({ selectedLayer: sel - 1 });
-      } else if (fromIndex > toIndex && sel >= toIndex && sel < fromIndex) {
-        setState({ selectedLayer: sel + 1 });
-      }
-    }
+  const reorderLayers = (side: CardSide, from: number, to: number) => {
+    setLayerConfigs(
+      side,
+      layerCrud.reorderLayers(getLayerConfigs(side), from, to),
+    );
+    setState({
+      selectedLayer: layerCrud.adjustSelectedLayer(
+        state.selectedLayer,
+        "reorder",
+        from,
+        to,
+      ),
+    });
   };
 
   const setIsEditing = (editing: boolean) => setState({ isEditing: editing });