kjs
/
ERP-node
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

그리드 수정

This commit is contained in:
leeheejin 2025-10-22 10:13:59 +09:00
parent e290076708
commit 01f92d6132
2 changed files with 11 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
frontend/components/admin/dashboard/CanvasElement.tsx
View File

@ -280,19 +280,9 @@ export function CanvasElement({
const maxX = canvasWidth - element.size.width;
rawX = Math.min(rawX, maxX);
// 드래그 중 실시간 스냅 (마그네틱 스냅)
const gridSize = cellSize + 5; // GAP 포함한 실제 그리드 크기
const magneticThreshold = 15; // 큰 그리드에 끌리는 거리 (px)
// X 좌표 스냅 (큰 그리드 우선, 없으면 서브그리드)
const nearestGridX = Math.round(rawX / gridSize) * gridSize;
const distToGridX = Math.abs(rawX - nearestGridX);
const snappedX = distToGridX <= magneticThreshold ? nearestGridX : Math.round(rawX / subGridSize) * subGridSize;
// Y 좌표 스냅 (큰 그리드 우선, 없으면 서브그리드)
const nearestGridY = Math.round(rawY / gridSize) * gridSize;
const distToGridY = Math.abs(rawY - nearestGridY);
const snappedY = distToGridY <= magneticThreshold ? nearestGridY : Math.round(rawY / subGridSize) * subGridSize;
// 드래그 중 실시간 스냅 (서브그리드만 사용)
const snappedX = Math.round(rawX / subGridSize) * subGridSize;
const snappedY = Math.round(rawY / subGridSize) * subGridSize;
setTempPosition({ x: snappedX, y: snappedY });
@ -342,35 +332,11 @@ export function CanvasElement({
const maxWidth = canvasWidth - newX;
newWidth = Math.min(newWidth, maxWidth);
// 리사이즈 중 실시간 스냅 (마그네틱 스냅)
const gridSize = cellSize + 5; // GAP 포함한 실제 그리드 크기
const magneticThreshold = 15;
// 위치 스냅
const nearestGridX = Math.round(newX / gridSize) * gridSize;
const distToGridX = Math.abs(newX - nearestGridX);
const snappedX = distToGridX <= magneticThreshold ? nearestGridX : Math.round(newX / subGridSize) * subGridSize;
const nearestGridY = Math.round(newY / gridSize) * gridSize;
const distToGridY = Math.abs(newY - nearestGridY);
const snappedY = distToGridY <= magneticThreshold ? nearestGridY : Math.round(newY / subGridSize) * subGridSize;
// 크기 스냅 (그리드 칸 단위로 스냅하되, 마지막 GAP은 제외)
// 예: 1칸 = cellSize, 2칸 = cellSize*2 + GAP, 3칸 = cellSize*3 + GAP*2
const calculateGridWidth = (cells: number) => cells * cellSize + Math.max(0, cells - 1) * 5;
// 가장 가까운 그리드 칸 수 계산
const nearestWidthCells = Math.round(newWidth / gridSize);
const nearestGridWidth = calculateGridWidth(nearestWidthCells);
const distToGridWidth = Math.abs(newWidth - nearestGridWidth);
const snappedWidth =
distToGridWidth <= magneticThreshold ? nearestGridWidth : Math.round(newWidth / subGridSize) * subGridSize;
const nearestHeightCells = Math.round(newHeight / gridSize);
const nearestGridHeight = calculateGridWidth(nearestHeightCells);
const distToGridHeight = Math.abs(newHeight - nearestGridHeight);
const snappedHeight =
distToGridHeight <= magneticThreshold ? nearestGridHeight : Math.round(newHeight / subGridSize) * subGridSize;
// 리사이즈 중 실시간 스냅 (서브그리드만 사용)
const snappedX = Math.round(newX / subGridSize) * subGridSize;
const snappedY = Math.round(newY / subGridSize) * subGridSize;
const snappedWidth = Math.round(newWidth / subGridSize) * subGridSize;
const snappedHeight = Math.round(newHeight / subGridSize) * subGridSize;
// 임시 크기/위치 저장 (스냅됨)
setTempPosition({ x: Math.max(0, snappedX), y: Math.max(0, snappedY) });

6
frontend/components/admin/dashboard/DashboardCanvas.tsx
View File

@ -420,8 +420,8 @@ export const DashboardCanvas = forwardRef<HTMLDivElement, DashboardCanvasProps>(
onClick={handleCanvasClick}
onMouseDown={handleMouseDown}
>
{/* 12개 컬럼 메인 구분선 */}
{columnLines.map((x, i) => (
{/* 12개 컬럼 메인 구분선 - 주석 처리 (서브그리드만 사용) */}
{/* {columnLines.map((x, i) => (
<div
key={`col-${i}`}
className="pointer-events-none absolute top-0 h-full"
@ -432,7 +432,7 @@ export const DashboardCanvas = forwardRef<HTMLDivElement, DashboardCanvasProps>(
zIndex: 0,
}}
/>
))}
))} */}
{/* 배치된 요소들 렌더링 */}
{elements.length === 0 && (
<div className="pointer-events-none absolute inset-0 flex items-center justify-center text-gray-400">