feat(editor): Add dnd reordering and layer add/remove

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

@@ -1,8 +1,18 @@
-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 type { CardData, LayerConfig, Dimensions, CardSide, CardShape } from '../types';
+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 type {
+  CardData,
+  LayerConfig,
+  Dimensions,
+  CardSide,
+  CardShape,
+} from "../types";
 
 export const DECK_DEFAULTS = {
   SIZE_W: 54,
@@ -11,14 +21,14 @@ export const DECK_DEFAULTS = {
   GRID_H: 8,
   BLEED: 1,
   PADDING: 2,
-  CORNER_RADIUS: 3
+  CORNER_RADIUS: 3,
 } as const;
 
 export interface DraggingState {
-  layer: string;
-  action: 'drag' | 'resize-corner' | 'resize-edge';
-  anchor?: 'nw' | 'ne' | 'sw' | 'se';
-  edge?: 'n' | 's' | 'e' | 'w';
+  layer: number;
+  action: "drag" | "resize-corner" | "resize-edge";
+  anchor?: "nw" | "ne" | "sw" | "se";
+  edge?: "n" | "s" | "e" | "w";
   startX: number;
   startY: number;
   startGrid: { x1: number; y1: number; x2: number; y2: number };
@@ -46,7 +56,7 @@ export interface DeckState {
   backLayerConfigs: LayerConfig[];
 
   isEditing: boolean;
-  selectedLayer: string | null;
+  selectedLayer: number | null;
   activeSide: CardSide;
 
   isSelecting: boolean;
@@ -62,7 +72,7 @@ export interface DeckState {
   exportProgress: number;
   exportError: string | null;
 
-  printOrientation: 'portrait' | 'landscape';
+  printOrientation: "portrait" | "landscape";
   printFrontOddPageOffsetX: number;
   printFrontOddPageOffsetY: number;
   printDoubleSided: boolean;
@@ -83,15 +93,22 @@ export interface DeckActions {
   updateCardData: (index: number, key: string, value: string) => void;
 
   setFrontLayerConfigs: (configs: LayerConfig[]) => void;
-  updateFrontLayerConfig: (prop: string, updates: Partial<LayerConfig>) => void;
-  toggleFrontLayerVisible: (prop: string) => void;
+  updateFrontLayerConfig: (
+    index: number,
+    updates: Partial<LayerConfig>,
+  ) => void;
+  toggleFrontLayerVisible: (index: number) => void;
 
   setBackLayerConfigs: (configs: LayerConfig[]) => void;
-  updateBackLayerConfig: (prop: string, updates: Partial<LayerConfig>) => void;
-  toggleBackLayerVisible: (prop: string) => void;
+  updateBackLayerConfig: (index: number, updates: Partial<LayerConfig>) => void;
+  toggleBackLayerVisible: (index: number) => void;
+
+  addLayer: (side: CardSide, prop: string) => void;
+  removeLayer: (side: CardSide, index: number) => void;
+  reorderLayers: (side: CardSide, fromIndex: number, toIndex: number) => void;
 
   setIsEditing: (editing: boolean) => void;
-  setSelectedLayer: (layer: string | null) => void;
+  setSelectedLayer: (layer: number | null) => void;
   setActiveSide: (side: CardSide) => void;
 
   setIsSelecting: (selecting: boolean) => void;
@@ -100,11 +117,32 @@ export interface DeckActions {
   cancelSelection: () => void;
 
   setDraggingState: (state: DraggingState | null) => void;
-  moveLayer: (layerProp: string, dxGrid: number, dyGrid: number, startGrid?: { x1: number; y1: number; x2: number; y2: number }) => void;
-  resizeLayerCorner: (layerProp: string, anchor: 'nw' | 'ne' | 'sw' | 'se', dxGrid: number, dyGrid: number, startGrid: { x1: number; y1: number; x2: number; y2: number }) => void;
-  resizeLayerEdge: (layerProp: string, edge: 'n' | 's' | 'e' | 'w', delta: number, startGrid: { x1: number; y1: number; x2: number; y2: number }) => void;
+  moveLayer: (
+    index: number,
+    dxGrid: number,
+    dyGrid: number,
+    startGrid?: { x1: number; y1: number; x2: number; y2: number },
+  ) => void;
+  resizeLayerCorner: (
+    index: number,
+    anchor: "nw" | "ne" | "sw" | "se",
+    dxGrid: number,
+    dyGrid: number,
+    startGrid: { x1: number; y1: number; x2: number; y2: number },
+  ) => void;
+  resizeLayerEdge: (
+    index: number,
+    edge: "n" | "s" | "e" | "w",
+    delta: number,
+    startGrid: { x1: number; y1: number; x2: number; y2: number },
+  ) => void;
 
-  loadCardsFromPath: (path: string, rawSrc: string, layersStr?: string, backLayersStr?: string) => Promise<void>;
+  loadCardsFromPath: (
+    path: string,
+    rawSrc: string,
+    layersStr?: string,
+    backLayersStr?: string,
+  ) => Promise<void>;
   setError: (error: string | null) => void;
   clearError: () => void;
 
@@ -117,7 +155,7 @@ export interface DeckActions {
   setExportError: (error: string | null) => void;
   clearExportError: () => void;
 
-  setPrintOrientation: (orientation: 'portrait' | 'landscape') => void;
+  setPrintOrientation: (orientation: "portrait" | "landscape") => void;
   setPrintFrontOddPageOffsetX: (offset: number) => void;
   setPrintFrontOddPageOffsetY: (offset: number) => void;
   setPrintDoubleSided: (doubleSided: boolean) => void;
@@ -128,9 +166,7 @@ export interface DeckStore {
   actions: DeckActions;
 }
 
-export function createDeckStore(
-  initialSrc: string = '',
-): DeckStore {
+export function createDeckStore(initialSrc: string = ""): DeckStore {
   const [state, setState] = createStore<DeckState>({
     sizeW: DECK_DEFAULTS.SIZE_W,
     sizeH: DECK_DEFAULTS.SIZE_H,
@@ -139,7 +175,7 @@ export function createDeckStore(
     bleed: DECK_DEFAULTS.BLEED,
     padding: DECK_DEFAULTS.PADDING,
     cornerRadius: DECK_DEFAULTS.CORNER_RADIUS,
-    shape: 'rectangle',
+    shape: "rectangle",
     fixed: false,
     src: initialSrc,
     rawSrc: initialSrc,
@@ -150,7 +186,7 @@ export function createDeckStore(
     backLayerConfigs: [],
     isEditing: false,
     selectedLayer: null,
-    activeSide: 'front',
+    activeSide: "front",
     isSelecting: false,
     selectStart: null,
     selectEnd: null,
@@ -160,10 +196,10 @@ export function createDeckStore(
     isExporting: false,
     exportProgress: 0,
     exportError: null,
-    printOrientation: 'portrait',
+    printOrientation: "portrait",
     printFrontOddPageOffsetX: 0,
     printFrontOddPageOffsetY: 0,
-    printDoubleSided: false
+    printDoubleSided: false,
   });
 
   const updateDimensions = () => {
@@ -173,7 +209,7 @@ export function createDeckStore(
       gridW: state.gridW,
       gridH: state.gridH,
       bleed: state.bleed,
-      padding: state.padding
+      padding: state.padding,
     });
     setState({ dimensions: dims });
   };
@@ -212,105 +248,217 @@ export function createDeckStore(
   const setCards = (cards: CSV<CardData>) => setState({ cards, activeTab: 0 });
   const setActiveTab = (index: number) => setState({ activeTab: index });
   const updateCardData = (index: number, key: string, value: string) => {
-    setState('cards', index, key, value);
+    setState("cards", index, key, value);
   };
 
-  const setFrontLayerConfigs = (configs: LayerConfig[]) => setState({ frontLayerConfigs: configs });
-  const updateFrontLayerConfig = (prop: string, updates: Partial<LayerConfig>) => {
-    setState('frontLayerConfigs', (prev) => prev.map((config) => config.prop === prop ? { ...config, ...updates } : config));
+  const setFrontLayerConfigs = (configs: LayerConfig[]) =>
+    setState({ frontLayerConfigs: configs });
+  const updateFrontLayerConfig = (
+    index: number,
+    updates: Partial<LayerConfig>,
+  ) => {
+    setState("frontLayerConfigs", index, (config) => ({
+      ...config,
+      ...updates,
+    }));
   };
-  const toggleFrontLayerVisible = (prop: string) => {
-    setState('frontLayerConfigs', (prev) => prev.map((config) =>
-      config.prop === prop ? { ...config, visible: !config.visible } : config
-    ));
+  const toggleFrontLayerVisible = (index: number) => {
+    setState("frontLayerConfigs", index, "visible", (v) => !v);
   };
 
-  const setBackLayerConfigs = (configs: LayerConfig[]) => setState({ backLayerConfigs: configs });
-  const updateBackLayerConfig = (prop: string, updates: Partial<LayerConfig>) => {
-    setState('backLayerConfigs', (prev) => prev.map((config) => config.prop === prop ? { ...config, ...updates } : config));
+  const setBackLayerConfigs = (configs: LayerConfig[]) =>
+    setState({ backLayerConfigs: configs });
+  const updateBackLayerConfig = (
+    index: number,
+    updates: Partial<LayerConfig>,
+  ) => {
+    setState("backLayerConfigs", index, (config) => ({
+      ...config,
+      ...updates,
+    }));
   };
-  const toggleBackLayerVisible = (prop: string) => {
-    setState('backLayerConfigs', (prev) => prev.map((config) =>
-      config.prop === prop ? { ...config, visible: !config.visible } : config
-    ));
+  const toggleBackLayerVisible = (index: number) => {
+    setState("backLayerConfigs", index, "visible", (v) => !v);
+  };
+
+  const getLayerConfigs = (side: CardSide): LayerConfig[] =>
+    side === "front" ? state.frontLayerConfigs : state.backLayerConfigs;
+
+  const setLayerConfigs = (side: CardSide, configs: LayerConfig[]) => {
+    if (side === "front") setFrontLayerConfigs(configs);
+    else setBackLayerConfigs(configs);
+  };
+
+  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]);
+  };
+
+  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 });
+    }
+  };
+
+  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 setIsEditing = (editing: boolean) => setState({ isEditing: editing });
-  const setSelectedLayer = (layer: string | null) => setState({ selectedLayer: layer });
+  const setSelectedLayer = (layer: number | null) =>
+    setState({ selectedLayer: layer });
   const setActiveSide = (side: CardSide) => setState({ activeSide: side });
 
-  const setIsSelecting = (selecting: boolean) => setState({ isSelecting: selecting });
-  const setSelectStart = (pos: { x: number; y: number } | null) => setState({ selectStart: pos });
-  const setSelectEnd = (pos: { x: number; y: number } | null) => setState({ selectEnd: pos });
+  const setIsSelecting = (selecting: boolean) =>
+    setState({ isSelecting: selecting });
+  const setSelectStart = (pos: { x: number; y: number } | null) =>
+    setState({ selectStart: pos });
+  const setSelectEnd = (pos: { x: number; y: number } | null) =>
+    setState({ selectEnd: pos });
   const cancelSelection = () => {
     setState({ isSelecting: false, selectStart: null, selectEnd: null });
   };
 
-  const setDraggingState = (draggingState: DraggingState | null) => setState({ draggingState });
+  const setDraggingState = (draggingState: DraggingState | null) =>
+    setState({ draggingState });
 
-  const getLayerConfig = (layerProp: string): LayerConfig | undefined => {
-    const configs = state.activeSide === 'front' ? state.frontLayerConfigs : state.backLayerConfigs;
-    return configs.find(c => c.prop === layerProp);
+  const getLayerConfig = (index: number): LayerConfig | undefined => {
+    const configs =
+      state.activeSide === "front"
+        ? state.frontLayerConfigs
+        : state.backLayerConfigs;
+    return configs[index];
   };
 
-  const updateLayerConfig = (layerProp: string, updates: Partial<LayerConfig>) => {
-    if (state.activeSide === 'front') {
-      updateFrontLayerConfig(layerProp, updates);
+  const updateLayerConfig = (index: number, updates: Partial<LayerConfig>) => {
+    if (state.activeSide === "front") {
+      updateFrontLayerConfig(index, updates);
     } else {
-      updateBackLayerConfig(layerProp, updates);
+      updateBackLayerConfig(index, updates);
     }
   };
 
-  const moveLayer = (layerProp: string, dxGrid: number, dyGrid: number, startGrid?: { x1: number; y1: number; x2: number; y2: number }) => {
-    const layer = getLayerConfig(layerProp);
+  const moveLayer = (
+    index: number,
+    dxGrid: number,
+    dyGrid: number,
+    startGrid?: { x1: number; y1: number; x2: number; y2: number },
+  ) => {
+    const layer = getLayerConfig(index);
     if (!layer) return;
 
-    const grid = startGrid ?? { x1: layer.x1, y1: layer.y1, x2: layer.x2, y2: layer.y2 };
-    
-    updateLayerConfig(layerProp, {
+    const grid = startGrid ?? {
+      x1: layer.x1,
+      y1: layer.y1,
+      x2: layer.x2,
+      y2: layer.y2,
+    };
+
+    updateLayerConfig(index, {
       x1: grid.x1 + dxGrid,
       x2: grid.x2 + dxGrid,
       y1: grid.y1 + dyGrid,
-      y2: grid.y2 + dyGrid
+      y2: grid.y2 + dyGrid,
     });
   };
 
-  const resizeLayerCorner = (layerProp: string, anchor: 'nw' | 'ne' | 'sw' | 'se', dxGrid: number, dyGrid: number, startGrid: { x1: number; y1: number; x2: number; y2: number }) => {
-    const layer = getLayerConfig(layerProp);
+  const resizeLayerCorner = (
+    index: number,
+    anchor: "nw" | "ne" | "sw" | "se",
+    dxGrid: number,
+    dyGrid: number,
+    startGrid: { x1: number; y1: number; x2: number; y2: number },
+  ) => {
+    const layer = getLayerConfig(index);
     if (!layer) return;
 
     const updates: Partial<LayerConfig> = {};
-    if (anchor === 'nw') {
+    if (anchor === "nw") {
       updates.x1 = Math.min(startGrid.x2, startGrid.x1 + dxGrid);
       updates.y1 = Math.min(startGrid.y2, startGrid.y1 + dyGrid);
-    } else if (anchor === 'ne') {
+    } else if (anchor === "ne") {
       updates.x2 = Math.max(startGrid.x1, startGrid.x2 + dxGrid);
       updates.y1 = Math.min(startGrid.y2, startGrid.y1 + dyGrid);
-    } else if (anchor === 'sw') {
+    } else if (anchor === "sw") {
       updates.x1 = Math.min(startGrid.x2, startGrid.x1 + dxGrid);
       updates.y2 = Math.max(startGrid.y1, startGrid.y2 + dyGrid);
-    } else if (anchor === 'se') {
+    } else if (anchor === "se") {
       updates.x2 = Math.max(startGrid.x1, startGrid.x2 + dxGrid);
       updates.y2 = Math.max(startGrid.y1, startGrid.y2 + dyGrid);
     }
-    updateLayerConfig(layerProp, updates);
+    updateLayerConfig(index, updates);
   };
 
-  const resizeLayerEdge = (layerProp: string, edge: 'n' | 's' | 'e' | 'w', delta: number, startGrid: { x1: number; y1: number; x2: number; y2: number }) => {
-    const layer = getLayerConfig(layerProp);
+  const resizeLayerEdge = (
+    index: number,
+    edge: "n" | "s" | "e" | "w",
+    delta: number,
+    startGrid: { x1: number; y1: number; x2: number; y2: number },
+  ) => {
+    const layer = getLayerConfig(index);
     if (!layer) return;
 
     const updates: Partial<LayerConfig> = {};
-    if (edge === 'n') updates.y1 = Math.min(startGrid.y2, Math.max(1, startGrid.y1 + delta));
-    if (edge === 's') updates.y2 = Math.max(startGrid.y1, Math.min(state.gridH, startGrid.y2 + delta));
-    if (edge === 'w') updates.x1 = Math.min(startGrid.x2, Math.max(1, startGrid.x1 + delta));
-    if (edge === 'e') updates.x2 = Math.max(startGrid.x1, Math.min(state.gridW, startGrid.x2 + delta));
-    updateLayerConfig(layerProp, updates);
+    if (edge === "n")
+      updates.y1 = Math.min(startGrid.y2, Math.max(1, startGrid.y1 + delta));
+    if (edge === "s")
+      updates.y2 = Math.max(
+        startGrid.y1,
+        Math.min(state.gridH, startGrid.y2 + delta),
+      );
+    if (edge === "w")
+      updates.x1 = Math.min(startGrid.x2, Math.max(1, startGrid.x1 + delta));
+    if (edge === "e")
+      updates.x2 = Math.max(
+        startGrid.x1,
+        Math.min(state.gridW, startGrid.x2 + delta),
+      );
+    updateLayerConfig(index, updates);
   };
 
-  const loadCardsFromPath = async (path: string, rawSrc: string, layersStr: string = '', backLayersStr: string = '') => {
+  const loadCardsFromPath = async (
+    path: string,
+    rawSrc: string,
+    layersStr: string = "",
+    backLayersStr: string = "",
+  ) => {
     if (!path) {
-      setState({ error: '未指定 CSV 文件路径' });
+      setState({ error: "未指定 CSV 文件路径" });
       return;
     }
 
@@ -322,7 +470,7 @@ export function createDeckStore(
       if (data.length === 0) {
         setState({
           error: `CSV ${path} 文件为空或格式不正确`,
-          isLoading: false
+          isLoading: false,
         });
         return;
       }
@@ -332,13 +480,13 @@ export function createDeckStore(
         activeTab: 0,
         frontLayerConfigs: initLayerConfigsForSide(data, layersStr),
         backLayerConfigs: initLayerConfigsForSide(data, backLayersStr),
-        isLoading: false
+        isLoading: false,
       });
       updateDimensions();
     } catch (err) {
       setState({
-        error: `加载 CSV ${path} 失败：${err instanceof Error ? err.message : '未知错误'}`,
-        isLoading: false
+        error: `加载 CSV ${path} 失败：${err instanceof Error ? err.message : "未知错误"}`,
+        isLoading: false,
       });
     }
   };
@@ -348,11 +496,12 @@ export function createDeckStore(
 
   const generateCode = (backLayersStr?: string) => {
     const frontLayersStr = formatLayers(state.frontLayerConfigs);
-    const backLayersString = backLayersStr || formatLayers(state.backLayerConfigs);
+    const backLayersString =
+      backLayersStr || formatLayers(state.backLayerConfigs);
     const parts = [
       `:md-deck[${state.rawSrc || state.src}]`,
       `{size="${state.sizeW}x${state.sizeH}" `,
-      `grid="${state.gridW}x${state.gridH}" `
+      `grid="${state.gridW}x${state.gridH}" `,
     ];
 
     if (state.bleed !== DECK_DEFAULTS.BLEED) {
@@ -361,7 +510,7 @@ export function createDeckStore(
     if (state.padding !== DECK_DEFAULTS.PADDING) {
       parts.push(`padding="${state.padding}" `);
     }
-    if (state.shape !== 'rectangle') {
+    if (state.shape !== "rectangle") {
       parts.push(`shape="${state.shape}" `);
     }
 
@@ -369,34 +518,37 @@ export function createDeckStore(
     if (backLayersString) {
       parts.push(`back-layers="${backLayersString}" `);
     }
-    parts.push('}');
-    return parts.join('');
+    parts.push("}");
+    return parts.join("");
   };
 
   const copyCode = async (backLayersStr?: string) => {
     const code = generateCode(backLayersStr);
     try {
       await navigator.clipboard.writeText(code);
-      alert('已复制到剪贴板！');
+      alert("已复制到剪贴板！");
     } catch (err) {
-      console.error('复制失败:', err);
-      alert('复制失败，请手动复制');
+      console.error("复制失败:", err);
+      alert("复制失败，请手动复制");
     }
   };
 
-  const setExporting = (exporting: boolean) => setState({ isExporting: exporting });
+  const setExporting = (exporting: boolean) =>
+    setState({ isExporting: exporting });
 
   const exportDeck = () => {
     setState({ isExporting: true, exportProgress: 0, exportError: null });
   };
 
-  const setExportProgress = (progress: number) => setState({ exportProgress: progress });
+  const setExportProgress = (progress: number) =>
+    setState({ exportProgress: progress });
 
-  const setExportError = (error: string | null) => setState({ exportError: error });
+  const setExportError = (error: string | null) =>
+    setState({ exportError: error });
 
   const clearExportError = () => setState({ exportError: null });
 
-  const setPrintOrientation = (orientation: 'portrait' | 'landscape') => {
+  const setPrintOrientation = (orientation: "portrait" | "landscape") => {
     setState({ printOrientation: orientation });
   };
 
@@ -430,6 +582,9 @@ export function createDeckStore(
     setBackLayerConfigs,
     updateBackLayerConfig,
     toggleBackLayerVisible,
+    addLayer,
+    removeLayer,
+    reorderLayers,
     setIsEditing,
     setSelectedLayer,
     setActiveSide,
@@ -454,8 +609,8 @@ export function createDeckStore(
     setPrintOrientation,
     setPrintFrontOddPageOffsetX,
     setPrintFrontOddPageOffsetY,
-    setPrintDoubleSided
+    setPrintDoubleSided,
   };
 
   return { state, actions };
-}
+}