다중선택 및 정렬기능 구현
This commit is contained in:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user