키보드 이벤트 제거

This commit is contained in:
hyojun.choi 2026-05-28 16:48:36 +09:00
parent f8641079e6
commit 577ca47b5e

View File

@ -24,7 +24,7 @@ export function useCanvasEvent() {
useEffect(() => { useEffect(() => {
canvas?.setZoom(canvasZoom / 100) canvas?.setZoom(canvasZoom / 100)
}, [canvasZoom]) }, [canvasZoom])
// canvasZoom이 100으로 변경되고 shouldCenter가 true일 때만 중앙 정렬 실행 // canvasZoom이 100으로 변경되고 shouldCenter가 true일 때만 중앙 정렬 실행
useEffect(() => { useEffect(() => {
if (canvasZoom === 100 && canvas && shouldCenter) { if (canvasZoom === 100 && canvas && shouldCenter) {
@ -278,27 +278,27 @@ export function useCanvasEvent() {
switch (key) { switch (key) {
case 'Delete': case 'Delete':
case 'Backspace': case 'Backspace':
handleDelete() // handleDelete()
break break
case 'Down': // IE/Edge에서 사용되는 값 case 'Down': // IE/Edge에서 사용되는 값
case 'ArrowDown': case 'ArrowDown':
// "아래 화살표" 키가 눌렸을 때의 동작입니다. // "아래 화살표" 키가 눌렸을 때의 동작입니다.
moveDown() // moveDown()
break break
case 'Up': // IE/Edge에서 사용되는 값 case 'Up': // IE/Edge에서 사용되는 값
case 'ArrowUp': case 'ArrowUp':
// "위 화살표" 키가 눌렸을 때의 동작입니다. // "위 화살표" 키가 눌렸을 때의 동작입니다.
moveUp() // moveUp()
break break
case 'Left': // IE/Edge에서 사용되는 값 case 'Left': // IE/Edge에서 사용되는 값
case 'ArrowLeft': case 'ArrowLeft':
// "왼쪽 화살표" 키가 눌렸을 때의 동작입니다. // "왼쪽 화살표" 키가 눌렸을 때의 동작입니다.
moveLeft() // moveLeft()
break break
case 'Right': // IE/Edge에서 사용되는 값 case 'Right': // IE/Edge에서 사용되는 값
case 'ArrowRight': case 'ArrowRight':
// "오른쪽 화살표" 키가 눌렸을 때의 동작입니다. // "오른쪽 화살표" 키가 눌렸을 때의 동작입니다.
moveRight() // moveRight()
break break
case 'Enter': case 'Enter':
// "enter" 또는 "return" 키가 눌렸을 때의 동작입니다. // "enter" 또는 "return" 키가 눌렸을 때의 동작입니다.
@ -437,22 +437,21 @@ export function useCanvasEvent() {
// 주요 도형 객체만 필터링 (roof, arrow 등) // 주요 도형 객체만 필터링 (roof, arrow 등)
const objects = allObjects.filter((obj) => { const objects = allObjects.filter((obj) => {
// 주요 도형 객체만 포함 // 주요 도형 객체만 포함
return obj.name === 'roof' || return obj.name === 'roof' || obj.name === 'arrow' || obj.name === 'module' || obj.name === 'dormer' || obj.name === 'object'
obj.name === 'arrow' ||
obj.name === 'module' ||
obj.name === 'dormer' ||
obj.name === 'object'
}) })
console.log('🔍 All objects:', allObjects.length) console.log('🔍 All objects:', allObjects.length)
console.log('🔍 Main objects for centering:', objects.length) console.log('🔍 Main objects for centering:', objects.length)
console.log('🔍 Main object details:', objects.map(obj => ({ console.log(
name: obj.name, '🔍 Main object details:',
type: obj.type, objects.map((obj) => ({
visible: obj.visible, name: obj.name,
id: obj.id type: obj.type,
}))) visible: obj.visible,
id: obj.id,
})),
)
if (objects.length === 0) { if (objects.length === 0) {
console.log('❌ No main objects found for centering') console.log('❌ No main objects found for centering')
return return
@ -473,50 +472,50 @@ export function useCanvasEvent() {
const objectsCenterX = (minX + maxX) / 2 const objectsCenterX = (minX + maxX) / 2
const objectsCenterY = (minY + maxY) / 2 const objectsCenterY = (minY + maxY) / 2
// 화면 중앙 좌표 (메뉴 높이 고려하여 Y 위치 조정) // 화면 중앙 좌표 (메뉴 높이 고려하여 Y 위치 조정)
const screenCenterX = canvas.getWidth() / 2 const screenCenterX = canvas.getWidth() / 2
const menuHeightOffset = 80 // 위쪽 메뉴 높이만큼 위로 조정 const menuHeightOffset = 80 // 위쪽 메뉴 높이만큼 위로 조정
const screenCenterY = canvas.getHeight() / 2 - menuHeightOffset const screenCenterY = canvas.getHeight() / 2 - menuHeightOffset
// 객체 중심을 화면 중앙으로 이동 // 객체 중심을 화면 중앙으로 이동
const deltaX = screenCenterX - objectsCenterX const deltaX = screenCenterX - objectsCenterX
const deltaY = screenCenterY - objectsCenterY const deltaY = screenCenterY - objectsCenterY
// canvas viewport transform 조정 // canvas viewport transform 조정
const viewportTransform = canvas.viewportTransform const viewportTransform = canvas.viewportTransform
viewportTransform[4] += deltaX viewportTransform[4] += deltaX
viewportTransform[5] += deltaY viewportTransform[5] += deltaY
canvas.setViewportTransform(viewportTransform) canvas.setViewportTransform(viewportTransform)
// 브라우저 스크롤을 중앙으로 조정하여 전체 canvas를 모니터 중앙에 위치 // 브라우저 스크롤을 중앙으로 조정하여 전체 canvas를 모니터 중앙에 위치
const canvasElement = canvas.getElement() const canvasElement = canvas.getElement()
const canvasRect = canvasElement.getBoundingClientRect() const canvasRect = canvasElement.getBoundingClientRect()
// 현재 스크롤 위치 // 현재 스크롤 위치
const currentScrollTop = window.pageYOffset || document.documentElement.scrollTop const currentScrollTop = window.pageYOffset || document.documentElement.scrollTop
const currentScrollLeft = window.pageXOffset || document.documentElement.scrollLeft const currentScrollLeft = window.pageXOffset || document.documentElement.scrollLeft
// canvas의 현재 화면 위치 // canvas의 현재 화면 위치
const canvasScreenTop = canvasRect.top + currentScrollTop const canvasScreenTop = canvasRect.top + currentScrollTop
const canvasScreenLeft = canvasRect.left + currentScrollLeft const canvasScreenLeft = canvasRect.left + currentScrollLeft
// 모니터 중앙 // 모니터 중앙
const monitorCenterX = window.innerWidth / 2 const monitorCenterX = window.innerWidth / 2
const monitorCenterY = window.innerHeight / 2 const monitorCenterY = window.innerHeight / 2
// canvas가 모니터 중앙에 오도록 스크롤 위치 계산 // canvas가 모니터 중앙에 오도록 스크롤 위치 계산
const targetScrollLeft = canvasScreenLeft + (canvasRect.width / 2) - monitorCenterX const targetScrollLeft = canvasScreenLeft + canvasRect.width / 2 - monitorCenterX
const targetScrollTop = canvasScreenTop + (canvasRect.height / 2) - monitorCenterY + menuHeightOffset const targetScrollTop = canvasScreenTop + canvasRect.height / 2 - monitorCenterY + menuHeightOffset
// 스크롤을 중앙으로 이동 // 스크롤을 중앙으로 이동
window.scrollTo({ window.scrollTo({
top: targetScrollTop, top: targetScrollTop,
left: targetScrollLeft, left: targetScrollLeft,
behavior: 'smooth' // 부드러운 스크롤 behavior: 'smooth', // 부드러운 스크롤
}) })
canvas.renderAll() canvas.renderAll()
} }