chpark/vexplor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

메뉴 삭제

Browse Source
This commit is contained in:
kjs
2025-09-09 16:14:21 +09:00
parent 49c8f9a2dd
commit 85a1e0c68a
6 changed files with 144 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
frontend/lib/utils/gridUtils.ts
View File

@@ -50,11 +50,12 @@ export function snapToGrid(position: Position, gridInfo: GridInfo, gridSettings:
// 격자 기준으로 위치 계산
const gridX = Math.round((position.x - padding) / (columnWidth + gap));
const gridY = Math.round((position.y - padding) / 20); // 20px 단위로 세로 스냅
const rowHeight = Math.max(20, gap); // gap과 최소 20px 중 큰 값으로 행 높이 설정
const gridY = Math.round((position.y - padding) / rowHeight); // 동적 행 높이로 세로 스냅
// 실제 픽셀 위치로 변환
const snappedX = Math.max(padding, padding + gridX * (columnWidth + gap));
const snappedY = Math.max(padding, padding + gridY * 20);
const snappedY = Math.max(padding, padding + gridY * rowHeight);
return {
x: snappedX,
@@ -90,8 +91,9 @@ export function snapSizeToGrid(size: Size, gridInfo: GridInfo, gridSettings: Gri
const snappedWidth = gridColumns * columnWidth + (gridColumns - 1) * gap;
// 높이는 20px 단위로 스냅
const snappedHeight = Math.max(40, Math.round(size.height / 20) * 20);
// 높이는 동적 행 높이 단위로 스냅
const rowHeight = Math.max(20, gap);
const snappedHeight = Math.max(40, Math.round(size.height / rowHeight) * rowHeight);
console.log(
`📏 크기 스냅: ${size.width}px → ${snappedWidth}px (${gridColumns}컬럼, 컬럼너비:${columnWidth}px, 간격:${gap}px)`,
@@ -185,9 +187,10 @@ export function generateGridLines(
// 우측 경계선
verticalLines.push(containerWidth - padding);
// 가로 격자선 (20px 단위)
// 가로 격자선 (동적 행 높이 단위)
const rowHeight = Math.max(20, gap);
const horizontalLines: number[] = [];
for (let y = padding; y < containerHeight; y += 20) {
for (let y = padding; y < containerHeight; y += rowHeight) {
horizontalLines.push(y);
}
@@ -253,16 +256,17 @@ export function alignGroupChildrenToGrid(
const columnIndex = Math.round(effectiveX / (columnWidth + gap));
const snappedX = padding + columnIndex * (columnWidth + gap);
// Y 좌표는 20px 단위로 스냅
// Y 좌표는 동적 행 높이 단위로 스냅
const rowHeight = Math.max(20, gap);
const effectiveY = child.position.y - padding;
const rowIndex = Math.round(effectiveY / 20);
const snappedY = padding + rowIndex * 20;
const rowIndex = Math.round(effectiveY / rowHeight);
const snappedY = padding + rowIndex * rowHeight;
// 크기는 외부 격자와 동일하게 스냅 (columnWidth + gap 사용)
const fullColumnWidth = columnWidth + gap; // 외부 격자와 동일한 크기
const widthInColumns = Math.max(1, Math.round(child.size.width / fullColumnWidth));
const snappedWidth = widthInColumns * fullColumnWidth - gap; // gap 제거하여 실제 컴포넌트 크기
const snappedHeight = Math.max(40, Math.round(child.size.height / 20) * 20);
const snappedHeight = Math.max(40, Math.round(child.size.height / rowHeight) * rowHeight);
const snappedChild = {
...child,