diff --git a/src/hooks/useCanvasEvent.js b/src/hooks/useCanvasEvent.js index 0a1de7c4..8e4eef8a 100644 --- a/src/hooks/useCanvasEvent.js +++ b/src/hooks/useCanvasEvent.js @@ -24,7 +24,7 @@ export function useCanvasEvent() { useEffect(() => { canvas?.setZoom(canvasZoom / 100) }, [canvasZoom]) - + // canvasZoom이 100으로 변경되고 shouldCenter가 true일 때만 중앙 정렬 실행 useEffect(() => { if (canvasZoom === 100 && canvas && shouldCenter) { @@ -278,27 +278,27 @@ export function useCanvasEvent() { switch (key) { case 'Delete': case 'Backspace': - handleDelete() + // handleDelete() break case 'Down': // IE/Edge에서 사용되는 값 case 'ArrowDown': // "아래 화살표" 키가 눌렸을 때의 동작입니다. - moveDown() + // moveDown() break case 'Up': // IE/Edge에서 사용되는 값 case 'ArrowUp': // "위 화살표" 키가 눌렸을 때의 동작입니다. - moveUp() + // moveUp() break case 'Left': // IE/Edge에서 사용되는 값 case 'ArrowLeft': // "왼쪽 화살표" 키가 눌렸을 때의 동작입니다. - moveLeft() + // moveLeft() break case 'Right': // IE/Edge에서 사용되는 값 case 'ArrowRight': // "오른쪽 화살표" 키가 눌렸을 때의 동작입니다. - moveRight() + // moveRight() break case 'Enter': // "enter" 또는 "return" 키가 눌렸을 때의 동작입니다. @@ -437,22 +437,21 @@ export function useCanvasEvent() { // 주요 도형 객체만 필터링 (roof, arrow 등) const objects = allObjects.filter((obj) => { // 주요 도형 객체만 포함 - return obj.name === 'roof' || - obj.name === 'arrow' || - obj.name === 'module' || - obj.name === 'dormer' || - obj.name === 'object' + 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 - }))) - + 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 @@ -473,50 +472,50 @@ export function useCanvasEvent() { 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를 모니터 중앙에 위치 const canvasElement = canvas.getElement() const canvasRect = canvasElement.getBoundingClientRect() - + // 현재 스크롤 위치 const currentScrollTop = window.pageYOffset || document.documentElement.scrollTop const currentScrollLeft = window.pageXOffset || document.documentElement.scrollLeft - + // canvas의 현재 화면 위치 const canvasScreenTop = canvasRect.top + currentScrollTop const canvasScreenLeft = canvasRect.left + currentScrollLeft - + // 모니터 중앙 const monitorCenterX = window.innerWidth / 2 const monitorCenterY = window.innerHeight / 2 - + // canvas가 모니터 중앙에 오도록 스크롤 위치 계산 - const targetScrollLeft = canvasScreenLeft + (canvasRect.width / 2) - monitorCenterX - const targetScrollTop = canvasScreenTop + (canvasRect.height / 2) - monitorCenterY + menuHeightOffset - + const targetScrollLeft = canvasScreenLeft + canvasRect.width / 2 - monitorCenterX + const targetScrollTop = canvasScreenTop + canvasRect.height / 2 - monitorCenterY + menuHeightOffset + // 스크롤을 중앙으로 이동 window.scrollTo({ top: targetScrollTop, left: targetScrollLeft, - behavior: 'smooth' // 부드러운 스크롤 + behavior: 'smooth', // 부드러운 스크롤 }) - + canvas.renderAll() }