diff --git a/src/hooks/useCanvasEvent.js b/src/hooks/useCanvasEvent.js index 7808bb5f..0c566020 100644 --- a/src/hooks/useCanvasEvent.js +++ b/src/hooks/useCanvasEvent.js @@ -15,6 +15,7 @@ export function useCanvasEvent() { const [currentObject, setCurrentObject] = useRecoilState(currentObjectState) const canvasSize = useRecoilValue(canvasSizeState) const [canvasZoom, setCanvasZoom] = useRecoilState(canvasZoomState) + const [shouldCenter, setShouldCenter] = useState(false) // 중앙 정렬 플래그 추가 const lengthTextOption = useRecoilValue(fontSelector('lengthText')) const currentMenu = useRecoilValue(currentMenuState) const { changeCorridorDimensionText } = useText() @@ -23,6 +24,17 @@ export function useCanvasEvent() { useEffect(() => { canvas?.setZoom(canvasZoom / 100) }, [canvasZoom]) + + // canvasZoom이 100으로 변경되고 shouldCenter가 true일 때만 중앙 정렬 실행 + useEffect(() => { + if (canvasZoom === 100 && canvas && shouldCenter) { + setTimeout(() => { + zoomToAllObjects() + canvas.renderAll() + setShouldCenter(false) // 실행 후 플래그 초기화 + }, 100) + } + }, [canvasZoom, shouldCenter]) useEffect(() => { attachDefaultEventOnCanvas() @@ -416,15 +428,35 @@ export function useCanvasEvent() { } const handleZoomClear = () => { + setShouldCenter(true) // 중앙 정렬 플래그 설정 setCanvasZoom(100) - - zoomToAllObjects() - canvas.renderAll() } const zoomToAllObjects = () => { - const objects = canvas.getObjects().filter((obj) => obj.visible) - if (objects.length === 0) return + const allObjects = canvas.getObjects() + // 주요 도형 객체만 필터링 (roof, arrow 등) + const objects = allObjects.filter((obj) => { + // 주요 도형 객체만 포함 + return obj.name === 'roof' || + obj.name === 'arrow' || + obj.name === 'module' || + obj.name === 'dormer' || + obj.name === 'object' + }) + + console.log('🔍 All objects:', allObjects.length) + console.log('🔍 Main objects for centering:', objects.length) + console.log('🔍 Main object details:', objects.map(obj => ({ + name: obj.name, + type: obj.type, + visible: obj.visible, + id: obj.id + }))) + + if (objects.length === 0) { + console.log('❌ No main objects found for centering') + return + } let minX = Infinity, minY = Infinity @@ -439,11 +471,24 @@ export function useCanvasEvent() { maxY = Math.max(maxY, bounds.top + bounds.height) }) - const centerX = (minX + maxX) / 2 - const centerY = (minY + maxY) / 2 - const centerPoint = new fabric.Point(centerX, centerY) - - canvas.zoomToPoint(centerPoint, 1) + const objectsCenterX = (minX + maxX) / 2 + const objectsCenterY = (minY + maxY) / 2 + + // 화면 중앙 좌표 (메뉴 높이 고려하여 Y 위치 조정) + const screenCenterX = canvas.getWidth() / 2 + const menuHeightOffset = 80 // 위쪽 메뉴 높이만큼 위로 조정 + const screenCenterY = canvas.getHeight() / 2 - menuHeightOffset + + // 객체 중심을 화면 중앙으로 이동 + const deltaX = screenCenterX - objectsCenterX + const deltaY = screenCenterY - objectsCenterY + + // canvas viewport transform 조정 + const viewportTransform = canvas.viewportTransform + viewportTransform[4] += deltaX + viewportTransform[5] += deltaY + + canvas.setViewportTransform(viewportTransform) canvas.renderAll() }