refactor: layer transform controls

2026-03-31 22:32:53 +08:00
parent 56cabea109
commit ceb2da8b1a
6 changed files with 558 additions and 197 deletions
@@ -1,12 +1,9 @@
-import { createStore } from 'solid-js/store';
+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,
  SIZE_H: 86,
@@ -17,8 +14,17 @@ export const DECK_DEFAULTS = {
  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';
+  startX: number;
+  startY: number;
+  startGrid: { x1: number; y1: number; x2: number; y2: number };
+}
+
 export interface DeckState {
-  // 基本属性
  sizeW: number;
  sizeH: number;
  gridW: number;
@@ -29,41 +35,33 @@ export interface DeckState {
  shape: CardShape;
  fixed: boolean;
  src: string;
-  rawSrc: string; // 原始 CSV 路径（用于生成代码时保持相对路径）
+  rawSrc: string;

-  // 解析后的尺寸
  dimensions: Dimensions | null;

-  // 卡牌数据
  cards: CSV<CardData>;
  activeTab: number;

-  // 图层配置
  frontLayerConfigs: LayerConfig[];
  backLayerConfigs: LayerConfig[];

-  // 编辑状态
  isEditing: boolean;
-  editingLayer: string | null;
+  selectedLayer: string | null;
  activeSide: CardSide;

-  // 框选状态
  isSelecting: boolean;
  selectStart: { x: number; y: number } | null;
  selectEnd: { x: number; y: number } | null;

-  // 加载状态
-  isLoading: boolean;
+  draggingState: DraggingState | null;

-  // 错误状态
+  isLoading: boolean;
  error: string | null;

-  // 导出状态
  isExporting: boolean;
-  exportProgress: number; // 0-100
+  exportProgress: number;
  exportError: string | null;

-  // 打印设置
  printOrientation: 'portrait' | 'landscape';
  printFrontOddPageOffsetX: number;
  printFrontOddPageOffsetY: number;
@@ -71,7 +69,6 @@ export interface DeckState {
 }

 export interface DeckActions {
-  // 基本属性设置
  setSizeW: (size: number) => void;
  setSizeH: (size: number) => void;
  setGridW: (grid: number) => void;
@@ -81,50 +78,45 @@ export interface DeckActions {
  setCornerRadius: (cornerRadius: number) => void;
  setShape: (shape: CardShape) => void;

-  // 数据设置
  setCards: (cards: CSV<CardData>) => void;
  setActiveTab: (index: number) => void;
  updateCardData: (index: number, key: string, value: string) => void;

-  // 图层操作 - 正面
  setFrontLayerConfigs: (configs: LayerConfig[]) => void;
  updateFrontLayerConfig: (prop: string, updates: Partial<LayerConfig>) => void;
  toggleFrontLayerVisible: (prop: string) => void;

-  // 图层操作 - 背面
  setBackLayerConfigs: (configs: LayerConfig[]) => void;
  updateBackLayerConfig: (prop: string, updates: Partial<LayerConfig>) => void;
  toggleBackLayerVisible: (prop: string) => void;

-  // 编辑状态
  setIsEditing: (editing: boolean) => void;
-  setEditingLayer: (layer: string | null) => void;
-  updateLayerPosition: (x1: number, y1: number, x2: number, y2: number) => void;
+  setSelectedLayer: (layer: string | null) => void;
  setActiveSide: (side: CardSide) => void;

-  // 框选操作
  setIsSelecting: (selecting: boolean) => void;
  setSelectStart: (pos: { x: number; y: number } | null) => void;
  setSelectEnd: (pos: { x: number; y: number } | null) => void;
  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;
+
  loadCardsFromPath: (path: string, rawSrc: string, layersStr?: string, backLayersStr?: string) => Promise<void>;
  setError: (error: string | null) => void;
  clearError: () => void;

-  // 生成代码
  generateCode: (backLayersStr?: string) => string;
  copyCode: (backLayersStr?: string) => Promise<void>;

-  // 导出操作
  setExporting: (exporting: boolean) => void;
  exportDeck: () => void;
  setExportProgress: (progress: number) => void;
  setExportError: (error: string | null) => void;
  clearExportError: () => void;

-  // 打印设置
  setPrintOrientation: (orientation: 'portrait' | 'landscape') => void;
  setPrintFrontOddPageOffsetX: (offset: number) => void;
  setPrintFrontOddPageOffsetY: (offset: number) => void;
@@ -136,9 +128,6 @@ export interface DeckStore {
  actions: DeckActions;
 }

-/**
- * 创建 deck store
- */
 export function createDeckStore(
  initialSrc: string = '',
 ): DeckStore {
@@ -160,11 +149,12 @@ export function createDeckStore(
    frontLayerConfigs: [],
    backLayerConfigs: [],
    isEditing: false,
-    editingLayer: null,
+    selectedLayer: null,
    activeSide: 'front',
    isSelecting: false,
    selectStart: null,
    selectEnd: null,
+    draggingState: null,
    isLoading: false,
    error: null,
    isExporting: false,
@@ -176,7 +166,6 @@ export function createDeckStore(
    printDoubleSided: false
  });

-  // 更新尺寸并重新计算 dimensions
  const updateDimensions = () => {
    const dims = calculateDimensions({
      sizeW: state.sizeW,
@@ -226,7 +215,6 @@ export function createDeckStore(
    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));
@@ -237,7 +225,6 @@ export function createDeckStore(
    ));
  };

-  // 背面图层操作
  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));
@@ -249,20 +236,8 @@ export function createDeckStore(
  };

  const setIsEditing = (editing: boolean) => setState({ isEditing: editing });
-  const setEditingLayer = (layer: string | null) => setState({ editingLayer: layer });
+  const setSelectedLayer = (layer: string | null) => setState({ selectedLayer: layer });
  const setActiveSide = (side: CardSide) => setState({ activeSide: side });
-  
-  const updateLayerPosition = (x1: number, y1: number, x2: number, y2: number) => {
-    const layer = state.editingLayer;
-    if (!layer) return;
-    const currentSide = state.activeSide;
-    const configs = currentSide === 'front' ? state.frontLayerConfigs : state.backLayerConfigs;
-    const setter = currentSide === 'front' ? setFrontLayerConfigs : setBackLayerConfigs;
-    setter(configs.map((config) =>
-      config.prop === layer ? { ...config, x1, y1, x2, y2 } : config
-    ));
-    setState({ editingLayer: null });
-  };

  const setIsSelecting = (selecting: boolean) => setState({ isSelecting: selecting });
  const setSelectStart = (pos: { x: number; y: number } | null) => setState({ selectStart: pos });
@@ -271,7 +246,128 @@ export function createDeckStore(
    setState({ isSelecting: false, selectStart: null, selectEnd: null });
  };

-  // 加载卡牌数据（核心逻辑）
+  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 updateLayerConfig = (layerProp: string, updates: Partial<LayerConfig>) => {
+    if (state.activeSide === 'front') {
+      updateFrontLayerConfig(layerProp, updates);
+    } else {
+      updateBackLayerConfig(layerProp, updates);
+    }
+  };
+
+  const moveLayer = (layerProp: string, dxGrid: number, dyGrid: number, startGrid?: { x1: number; y1: number; x2: number; y2: number }) => {
+    const layer = getLayerConfig(layerProp);
+    if (!layer) return;
+
+    const grid = startGrid ?? { x1: layer.x1, y1: layer.y1, x2: layer.x2, y2: layer.y2 };
+    const orientation = layer.orientation || 'n';
+    
+    if (orientation === 'e' || orientation === 'w') {
+      updateLayerConfig(layerProp, {
+        x1: grid.x1 + dyGrid,
+        x2: grid.x2 + dyGrid,
+        y1: grid.y1 + dxGrid,
+        y2: grid.y2 + dxGrid
+      });
+    } else {
+      updateLayerConfig(layerProp, {
+        x1: grid.x1 + dxGrid,
+        x2: grid.x2 + dxGrid,
+        y1: grid.y1 + 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);
+    if (!layer) return;
+
+    const orientation = layer.orientation || 'n';
+    
+    if (orientation === 'e') {
+      const gridAnchorMap: Record<string, { xKey: string; yKey: string }> = {
+        'nw': { xKey: 'y1', yKey: 'x1' },
+        'ne': { xKey: 'y1', yKey: 'x2' },
+        'sw': { xKey: 'y2', yKey: 'x1' },
+        'se': { xKey: 'y2', yKey: 'x2' }
+      };
+      const { xKey, yKey } = gridAnchorMap[anchor];
+      const updates: Partial<LayerConfig> = {};
+      if (xKey === 'y1') updates.y1 = Math.min(startGrid.y2, startGrid.y1 + dxGrid);
+      if (xKey === 'y2') updates.y2 = Math.max(startGrid.y1, startGrid.y2 + dxGrid);
+      if (yKey === 'x1') updates.x1 = Math.min(startGrid.x2, startGrid.x1 + dyGrid);
+      if (yKey === 'x2') updates.x2 = Math.max(startGrid.x1, startGrid.x2 + dyGrid);
+      updateLayerConfig(layerProp, updates);
+    } else if (orientation === 'w') {
+      const gridAnchorMap: Record<string, { xKey: string; yKey: string }> = {
+        'nw': { xKey: 'y2', yKey: 'x2' },
+        'ne': { xKey: 'y2', yKey: 'x1' },
+        'sw': { xKey: 'y1', yKey: 'x2' },
+        'se': { xKey: 'y1', yKey: 'x1' }
+      };
+      const { xKey, yKey } = gridAnchorMap[anchor];
+      const updates: Partial<LayerConfig> = {};
+      if (xKey === 'y1') updates.y1 = Math.max(1, Math.min(startGrid.y2, startGrid.y1 - dxGrid));
+      if (xKey === 'y2') updates.y2 = Math.max(startGrid.y1, Math.min(state.gridH, startGrid.y2 - dxGrid));
+      if (yKey === 'x1') updates.x1 = Math.max(1, Math.min(startGrid.x2, startGrid.x1 - dyGrid));
+      if (yKey === 'x2') updates.x2 = Math.max(startGrid.x1, Math.min(state.gridW, startGrid.x2 - dyGrid));
+      updateLayerConfig(layerProp, updates);
+    } else {
+      const updates: Partial<LayerConfig> = {};
+      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') {
+        updates.x2 = Math.max(startGrid.x1, startGrid.x2 + dxGrid);
+        updates.y1 = Math.min(startGrid.y2, startGrid.y1 + dyGrid);
+      } 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') {
+        updates.x2 = Math.max(startGrid.x1, startGrid.x2 + dxGrid);
+        updates.y2 = Math.max(startGrid.y1, startGrid.y2 + dyGrid);
+      }
+      updateLayerConfig(layerProp, 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);
+    if (!layer) return;
+
+    const orientation = layer.orientation || 'n';
+    
+    if (orientation === 'e' || orientation === 'w') {
+      const edgeMap: Record<string, { key: string }> = {
+        'n': { key: 'y1' },
+        's': { key: 'y2' },
+        'e': { key: 'x2' },
+        'w': { key: 'x1' }
+      };
+      const { key } = edgeMap[edge];
+      const updates: Partial<LayerConfig> = {};
+      if (key === 'y1') updates.y1 = Math.min(startGrid.y2, Math.max(1, startGrid.y1 + delta));
+      if (key === 'y2') updates.y2 = Math.max(startGrid.y1, Math.min(state.gridH, startGrid.y2 + delta));
+      if (key === 'x1') updates.x1 = Math.min(startGrid.x2, Math.max(1, startGrid.x1 + delta));
+      if (key === 'x2') updates.x2 = Math.max(startGrid.x1, Math.min(state.gridW, startGrid.x2 + delta));
+      updateLayerConfig(layerProp, updates);
+    } else {
+      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);
+    }
+  };
+
  const loadCardsFromPath = async (path: string, rawSrc: string, layersStr: string = '', backLayersStr: string = '') => {
    if (!path) {
      setState({ error: '未指定 CSV 文件路径' });
@@ -319,7 +415,6 @@ export function createDeckStore(
      `grid="${state.gridW}x${state.gridH}" `
    ];

-    // 仅在非默认值时添加 bleed 和 padding
    if (state.bleed !== DECK_DEFAULTS.BLEED) {
      parts.push(`bleed="${state.bleed}" `);
    }
@@ -396,13 +491,16 @@ export function createDeckStore(
    updateBackLayerConfig,
    toggleBackLayerVisible,
    setIsEditing,
-    setEditingLayer,
-    updateLayerPosition,
+    setSelectedLayer,
    setActiveSide,
    setIsSelecting,
    setSelectStart,
    setSelectEnd,
    cancelSelection,
+    setDraggingState,
+    moveLayer,
+    resizeLayerCorner,
+    resizeLayerEdge,
    loadCardsFromPath,
    setError,
    clearError,
@@ -420,4 +518,4 @@ export function createDeckStore(
  };

  return { state, actions };
-}
+}