키보드 이벤트 제거
This commit is contained in:
parent
f8641079e6
commit
577ca47b5e
@ -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()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user