hypercross
/
ttrpg-tools
2
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: rotation

This commit is contained in:
hypercross 2026-03-30 12:07:28 +08:00
parent ceb2da8b1a
commit 49fca8c18f
3 changed files with 28 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/md-deck/CardLayer.tsx
View File

@ -41,16 +41,6 @@ export function CardLayer(props: CardLayerProps) {
const getFrameBounds = (layer: LayerConfig) => { const getFrameBounds = (layer: LayerConfig) => {
const dims = dimensions(); 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 left = (layer.x1 - 1) * dims.cellWidth;
const top = (layer.y1 - 1) * dims.cellHeight; const top = (layer.y1 - 1) * dims.cellHeight;
const width = (layer.x2 - layer.x1 + 1) * dims.cellWidth; const width = (layer.x2 - layer.x1 + 1) * dims.cellWidth;

112
src/components/md-deck/hooks/deckStore.ts
View File

@ -266,106 +266,46 @@ export function createDeckStore(
if (!layer) return; if (!layer) return;
const grid = startGrid ?? { x1: layer.x1, y1: layer.y1, x2: layer.x2, y2: layer.y2 }; 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, {
updateLayerConfig(layerProp, { x1: grid.x1 + dxGrid,
x1: grid.x1 + dyGrid, x2: grid.x2 + dxGrid,
x2: grid.x2 + dyGrid, y1: grid.y1 + dyGrid,
y1: grid.y1 + dxGrid, y2: grid.y2 + dyGrid
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 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 layer = getLayerConfig(layerProp);
if (!layer) return; if (!layer) return;
const orientation = layer.orientation || 'n'; const updates: Partial<LayerConfig> = {};
if (anchor === 'nw') {
if (orientation === 'e') { updates.x1 = Math.min(startGrid.x2, startGrid.x1 + dxGrid);
const gridAnchorMap: Record<string, { xKey: string; yKey: string }> = { updates.y1 = Math.min(startGrid.y2, startGrid.y1 + dyGrid);
'nw': { xKey: 'y1', yKey: 'x1' }, } else if (anchor === 'ne') {
'ne': { xKey: 'y1', yKey: 'x2' }, updates.x2 = Math.max(startGrid.x1, startGrid.x2 + dxGrid);
'sw': { xKey: 'y2', yKey: 'x1' }, updates.y1 = Math.min(startGrid.y2, startGrid.y1 + dyGrid);
'se': { xKey: 'y2', yKey: 'x2' } } else if (anchor === 'sw') {
}; updates.x1 = Math.min(startGrid.x2, startGrid.x1 + dxGrid);
const { xKey, yKey } = gridAnchorMap[anchor]; updates.y2 = Math.max(startGrid.y1, startGrid.y2 + dyGrid);
const updates: Partial<LayerConfig> = {}; } else if (anchor === 'se') {
if (xKey === 'y1') updates.y1 = Math.min(startGrid.y2, startGrid.y1 + dxGrid); updates.x2 = Math.max(startGrid.x1, startGrid.x2 + dxGrid);
if (xKey === 'y2') updates.y2 = Math.max(startGrid.y1, startGrid.y2 + dxGrid); updates.y2 = Math.max(startGrid.y1, startGrid.y2 + dyGrid);
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);
} }
updateLayerConfig(layerProp, updates);
}; };
const resizeLayerEdge = (layerProp: string, edge: 'n' | 's' | 'e' | 'w', delta: number, startGrid: { x1: number; y1: number; x2: number; y2: number }) => { 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 layer = getLayerConfig(layerProp);
if (!layer) return; if (!layer) return;
const orientation = layer.orientation || 'n'; const updates: Partial<LayerConfig> = {};
if (edge === 'n') updates.y1 = Math.min(startGrid.y2, Math.max(1, startGrid.y1 + delta));
if (orientation === 'e' || orientation === 'w') { if (edge === 's') updates.y2 = Math.max(startGrid.y1, Math.min(state.gridH, startGrid.y2 + delta));
const edgeMap: Record<string, { key: string }> = { if (edge === 'w') updates.x1 = Math.min(startGrid.x2, Math.max(1, startGrid.x1 + delta));
'n': { key: 'y1' }, if (edge === 'e') updates.x2 = Math.max(startGrid.x1, Math.min(state.gridW, startGrid.x2 + delta));
's': { key: 'y2' }, updateLayerConfig(layerProp, updates);
'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 = '') => { const loadCardsFromPath = async (path: string, rawSrc: string, layersStr: string = '', backLayersStr: string = '') => {

22
src/components/md-deck/hooks/useLayerInteraction.ts
View File

@ -45,16 +45,6 @@ export function useLayerInteraction(store: DeckStore): LayerInteractionHandlers
}; };
const isPointInLayer = (gridX: number, gridY: number, layer: LayerConfig): boolean => { 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; 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 deltaGridX = deltaMmX / dims.cellWidth;
const deltaGridY = deltaMmY / dims.cellHeight; 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; const startGrid = dragging.startGrid;
if (dragging.action === 'drag') { if (dragging.action === 'drag') {
const moveDx = Math.round(deltaGridX); store.actions.moveLayer(dragging.layer, Math.round(deltaGridX), Math.round(deltaGridY), startGrid);
const moveDy = Math.round(deltaGridY);
store.actions.moveLayer(dragging.layer, moveDx, moveDy, startGrid);
} else if (dragging.action === 'resize-corner' && dragging.anchor) { } else if (dragging.action === 'resize-corner' && dragging.anchor) {
store.actions.resizeLayerCorner(dragging.layer, dragging.anchor, Math.round(deltaGridX), Math.round(deltaGridY), startGrid); store.actions.resizeLayerCorner(dragging.layer, dragging.anchor, Math.round(deltaGridX), Math.round(deltaGridY), startGrid);
} else if (dragging.action === 'resize-edge' && dragging.edge) { } else if (dragging.action === 'resize-edge' && dragging.edge) {
const delta = orientation === 'e' || orientation === 'w' const delta = dragging.edge === 'n' || dragging.edge === 's' ? Math.round(deltaGridY) : Math.round(deltaGridX);
? (dragging.edge === 'n' || dragging.edge === 's' ? Math.round(deltaGridX) : Math.round(deltaGridY))
: (dragging.edge === 'n' || dragging.edge === 's' ? Math.round(deltaGridY) : Math.round(deltaGridX));
store.actions.resizeLayerEdge(dragging.layer, dragging.edge, delta, startGrid); store.actions.resizeLayerEdge(dragging.layer, dragging.edge, delta, startGrid);
} }
}; };