다중선택 및 정렬기능 구현

This commit is contained in:
kjs
2025-09-01 16:40:24 +09:00
parent e18c78f40d
commit 984dd70505
4 changed files with 423 additions and 77 deletions

View File

@@ -15,15 +15,15 @@ export function createGroupComponent(
boundingBox?: { width: number; height: number },
style?: any,
): GroupComponent {
// 격자 기반 크기 계산
const gridWidth = Math.max(6, Math.ceil(boundingBox?.width / 80) + 2); // 최소 6 그리드, 여백 2
const gridHeight = Math.max(100, (boundingBox?.height || 200) + 40); // 최소 100px, 여백 40px
// 픽셀 기반 크기 계산 (격자 제거)
const groupWidth = Math.max(200, (boundingBox?.width || 200) + 40); // 최소 200px, 여백 40px
const groupHeight = Math.max(100, (boundingBox?.height || 200) + 40); // 최소 100px, 여백 40px
return {
id: generateComponentId(),
type: "group",
position,
size: { width: gridWidth, height: gridHeight },
size: { width: groupWidth, height: groupHeight },
label: title, // title 대신 label 사용
backgroundColor: "#f8f9fa",
border: "1px solid #dee2e6",
@@ -39,7 +39,7 @@ export function createGroupComponent(
};
}
// 선택된 컴포넌트들의 경계 박스 계산 (격자 기반)
// 선택된 컴포넌트들의 경계 박스 계산 (픽셀 기반)
export function calculateBoundingBox(components: ComponentData[]): {
minX: number;
minY: number;
@@ -54,7 +54,7 @@ export function calculateBoundingBox(components: ComponentData[]): {
const minX = Math.min(...components.map((c) => c.position.x));
const minY = Math.min(...components.map((c) => c.position.y));
const maxX = Math.max(...components.map((c) => c.position.x + c.size.width * 80));
const maxX = Math.max(...components.map((c) => c.position.x + c.size.width)); // 격자 계산 제거
const maxY = Math.max(...components.map((c) => c.position.y + c.size.height));
return {