From 49fca8c18f971f4df0e97fc055765988e10ae129 Mon Sep 17 00:00:00 2001 From: hypercross Date: Mon, 30 Mar 2026 12:07:28 +0800 Subject: [PATCH] fix: rotation --- src/components/md-deck/CardLayer.tsx | 10 -- src/components/md-deck/hooks/deckStore.ts | 112 ++++-------------- .../md-deck/hooks/useLayerInteraction.ts | 22 +--- 3 files changed, 28 insertions(+), 116 deletions(-) diff --git a/src/components/md-deck/CardLayer.tsx b/src/components/md-deck/CardLayer.tsx index 0a8131d..4031332 100644 --- a/src/components/md-deck/CardLayer.tsx +++ b/src/components/md-deck/CardLayer.tsx @@ -41,16 +41,6 @@ export function CardLayer(props: CardLayerProps) { const getFrameBounds = (layer: LayerConfig) => { const dims = dimensions(); - const orientation = layer.orientation || 'n'; - - if (orientation === 'e' || orientation === 'w') { - const left = (layer.y1 - 1) * dims.cellWidth; - const top = (layer.x1 - 1) * dims.cellHeight; - const width = (layer.y2 - layer.y1 + 1) * dims.cellWidth; - const height = (layer.x2 - layer.x1 + 1) * dims.cellHeight; - return { left, top, width, height }; - } - const left = (layer.x1 - 1) * dims.cellWidth; const top = (layer.y1 - 1) * dims.cellHeight; const width = (layer.x2 - layer.x1 + 1) * dims.cellWidth; diff --git a/src/components/md-deck/hooks/deckStore.ts b/src/components/md-deck/hooks/deckStore.ts index a8dbd3c..c9b6b5d 100644 --- a/src/components/md-deck/hooks/deckStore.ts +++ b/src/components/md-deck/hooks/deckStore.ts @@ -266,106 +266,46 @@ export function createDeckStore( 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 - }); - } + 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 = { - '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 = {}; - 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 = { - '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 = {}; - 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 = {}; - 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 updates: Partial = {}; + 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 = { - 'n': { key: 'y1' }, - 's': { key: 'y2' }, - 'e': { key: 'x2' }, - 'w': { key: 'x1' } - }; - const { key } = edgeMap[edge]; - const updates: Partial = {}; - 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 = {}; - 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 updates: Partial = {}; + 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 = '') => { diff --git a/src/components/md-deck/hooks/useLayerInteraction.ts b/src/components/md-deck/hooks/useLayerInteraction.ts index a8675a4..4eee2e6 100644 --- a/src/components/md-deck/hooks/useLayerInteraction.ts +++ b/src/components/md-deck/hooks/useLayerInteraction.ts @@ -45,16 +45,6 @@ export function useLayerInteraction(store: DeckStore): LayerInteractionHandlers }; const isPointInLayer = (gridX: number, gridY: number, layer: LayerConfig): boolean => { - const orientation = layer.orientation || 'n'; - - if (orientation === 'e' || orientation === 'w') { - const visualX1 = layer.y1; - const visualX2 = layer.y2; - const visualY1 = layer.x1; - const visualY2 = layer.x2; - return gridX >= visualX1 && gridX <= visualX2 && gridY >= visualY1 && gridY <= visualY2; - } - return gridX >= layer.x1 && gridX <= layer.x2 && gridY >= layer.y1 && gridY <= layer.y2; }; @@ -157,22 +147,14 @@ export function useLayerInteraction(store: DeckStore): LayerInteractionHandlers const deltaGridX = deltaMmX / dims.cellWidth; const deltaGridY = deltaMmY / dims.cellHeight; - const layer = currentLayerConfigs().find(l => l.prop === dragging.layer); - if (!layer) return; - - const orientation = layer.orientation || 'n'; const startGrid = dragging.startGrid; if (dragging.action === 'drag') { - const moveDx = Math.round(deltaGridX); - const moveDy = Math.round(deltaGridY); - store.actions.moveLayer(dragging.layer, moveDx, moveDy, startGrid); + store.actions.moveLayer(dragging.layer, Math.round(deltaGridX), Math.round(deltaGridY), startGrid); } else if (dragging.action === 'resize-corner' && dragging.anchor) { store.actions.resizeLayerCorner(dragging.layer, dragging.anchor, Math.round(deltaGridX), Math.round(deltaGridY), startGrid); } else if (dragging.action === 'resize-edge' && dragging.edge) { - const delta = orientation === 'e' || orientation === 'w' - ? (dragging.edge === 'n' || dragging.edge === 's' ? Math.round(deltaGridX) : Math.round(deltaGridY)) - : (dragging.edge === 'n' || dragging.edge === 's' ? Math.round(deltaGridY) : Math.round(deltaGridX)); + const delta = dragging.edge === 'n' || dragging.edge === 's' ? Math.round(deltaGridY) : Math.round(deltaGridX); store.actions.resizeLayerEdge(dragging.layer, dragging.edge, delta, startGrid); } };