qcast3/qcast-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

이벤트 분리

Browse Source
This commit is contained in:
hyojun.choi 2024-08-28 13:35:51 +09:00
parent bc77a9725e
commit 5cf29ec019
3 changed files with 292 additions and 246 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/hooks/useCanvas.js
View File

@ -425,6 +425,8 @@ export function useCanvas(id) {
'maxY',
'minX',
'minY',
'x',
'y',
])
const str = JSON.stringify(objs)

4
src/hooks/useCanvasEvent.js
View File

@ -19,9 +19,9 @@ export function useCanvasEvent() {
canvas?.on('selection:cleared', selectionEvent.cleared)
canvas?.on('selection:created', selectionEvent.created)
canvas?.on('selection:updated', selectionEvent.updated)
canvas?.on('object:added', () => {
/*canvas?.on('object:added', () => {
document.addEventListener('keydown', handleKeyDown)
})
})*/
canvas?.on('object:removed', objectEvent.removed)
}

130
src/hooks/useMode.js
View File

@ -1,4 +1,4 @@
import { useEffect, useRef, useState } from 'react'
import { useCallback, useEffect, useRef, useState } from 'react'
import {
calculateIntersection,
distanceBetweenPoints,
@ -64,23 +64,22 @@ export function useMode() {
const compass = useRecoilValue(compassState)
const [isCellCenter, setIsCellCenter] = useState(false)
const guideLineInfo = useRecoilValue(guideLineState)
const [guideLineInfo, setGuideLineInfo] = useRecoilState(guideLineState)
const [guideLineMode, setGuideLineMode] = useState(false)
const [guideDotMode, setGuideDotMode] = useState(false)
const [horiGuideLines, setHoriGuideLines] = useState([])
const [vertGuideLines, setVertGuideLines] = useState([])
useEffect(() => {
// 이벤트 리스너 추가
// if (!canvas) {
// canvas?.setZoom(0.8)
// return
// }
document.addEventListener('keydown', handleKeyDown)
if (!canvas) return
setCanvas(canvas)
canvas?.on('mouse:move', drawMouseLines)
// 컴포넌트가 언마운트될 때 이벤트 리스너 제거
return () => {
document.removeEventListener('keydown', handleKeyDown)
}
}, [canvas]) // 빈 배열을 전달하여 컴포넌트가 마운트될 때만 실행되도록 함
useEffect(() => {
@ -103,11 +102,6 @@ export function useMode() {
canvas?.off('mouse:move')
canvas?.on('mouse:move', drawMouseLines)
changeMode(canvas, mode)
/*
if (mode === Mode.EDIT) {
canvas?.off('mouse:down')
canvas?.on('mouse:down', mouseEvent.editMode)
}*/
}, [mode])
useEffect(() => {
@ -117,6 +111,9 @@ export function useMode() {
const guideLineState = guideLineInfo.filter((item) => item.guideMode === 'guideLine')
const guideDotState = guideLineInfo.filter((item) => item.guideMode === 'guideDot')
setHoriGuideLines(guideLineState[0].horizontalLineArray)
setVertGuideLines(guideLineState[0].verticalLineArray)
setGuideLineMode(guideLineState.length > 0)
setGuideDotMode(guideDotState.length > 0)
}
@ -142,8 +139,8 @@ export function useMode() {
}
if (isGuideLineMode) {
horizontalLineArray = [...guideLineState[0].horizontalLineArray]
verticalLineArray = [...guideLineState[0].verticalLineArray]
horizontalLineArray = [...horiGuideLines]
verticalLineArray = [...vertGuideLines]
guideLineLengthHori = Number(guideLineState[0].moduleHoriLength)
guideLineLengthVert = Number(guideLineState[0].moduleVertLength)
}
@ -163,7 +160,6 @@ export function useMode() {
if (mode === Mode.EDIT || mode === Mode.ADSORPTION_POINT) {
let adsorptionPoint = adsorptionPointList.length > 0 ? findClosestPoint(pointer, adsorptionPointList) : null
if (isGuideLineMode && isGuideDotMode) {
const closestHorizontalLine = getClosestHorizontalLine(pointer, horizontalLineArray)
const closetVerticalLine = getClosestVerticalLine(pointer, verticalLineArray)
@ -362,12 +358,12 @@ export function useMode() {
// 모드에 따른 마우스 이벤트 변경
const changeMouseEvent = (mode) => {
canvas?.off('mouse:down')
document.removeEventListener('contextmenu', mouseEvent.drawLineModeRightClick)
switch (mode) {
case 'drawLine':
canvas?.on('mouse:down', mouseEvent.drawLineModeLeftClick)
window.document.removeEventListener('contextmenu', mouseEvent.drawLineModeRightClick)
window.document.addEventListener('contextmenu', mouseEvent.drawLineModeRightClick)
document.addEventListener('contextmenu', mouseEvent.drawLineModeRightClick)
break
case 'edit':
canvas?.on('mouse:down', mouseEvent.editMode)
@ -394,9 +390,6 @@ export function useMode() {
}
}
// 모드에 따른 키보드 이벤트 변경
const changeKeyboardEvent = (mode) => {}
const keyValid = () => {
if (points.current.length === 0) {
alert('시작점을 선택해주세요')
@ -552,7 +545,19 @@ export function useMode() {
}
}
const handleKeyDown = (e) => {
const mouseAndkeyboardEventClear = () => {
Object.keys(mouseEvent).forEach((key) => {
canvas?.off('mouse:down', mouseEvent[key])
})
Object.keys(keyboardEvent).forEach((key) => {
window.removeEventListener('keydown', keyboardEvent[key])
})
}
const keyboardEvent = {
// rerendering을 막기 위해 useCallback 사용
editMode: useCallback(
(e) => {
switch (e.key) {
case 'ArrowDown': {
if (!keyValid()) {
@ -616,6 +621,9 @@ export function useMode() {
}
}
}
},
[canvas],
),
}
const changeMode = (canvas, mode) => {
@ -623,6 +631,7 @@ export function useMode() {
setCanvas(canvas)
// mode별 이벤트 변경
mouseAndkeyboardEventClear()
changeMouseEvent(mode)
changeKeyboardEvent(mode)
@ -657,40 +666,71 @@ export function useMode() {
}
}
const changeKeyboardEvent = (mode) => {
if (mode === Mode.EDIT) {
switch (mode) {
case 'edit':
window.addEventListener('keydown', keyboardEvent.editMode)
break
}
}
}
const mouseEvent = {
drawLineModeLeftClick: (options) => {
drawLineModeLeftClick: useCallback(
(options) => {
const pointer = canvas?.getPointer(options.e)
const line = new QLine(
[pointer.x, 0, pointer.x, canvas.height], // y축에 1자 선을 그립니다.
{
stroke: 'black',
strokeWidth: 2,
viewLengthText: true,
selectable: false,
fontSize: fontSize,
stroke: 'gray',
strokeWidth: 1,
selectable: true,
lockMovementX: true,
lockMovementY: true,
lockRotation: true,
lockScalingX: true,
lockScalingY: true,
name: 'guideLine',
},
)
canvas?.add(line)
canvas?.renderAll()
const newVerticalLineArray = [...vertGuideLines, line]
setVertGuideLines(newVerticalLineArray)
},
drawLineModeRightClick: (options) => {
[canvas, vertGuideLines],
),
drawLineModeRightClick: useCallback(
(options) => {
const line = new fabric.Line(
[0, options.offsetY, canvas.width, options.offsetY], // y축에 1자 선을 그립니다.
[0, options.offsetY, canvasSize.horizontal, options.offsetY], // y축에 1자 선을 그립니다.
{
stroke: 'black',
strokeWidth: 2,
viewLengthText: true,
selectable: false,
fontSize: fontSize,
stroke: 'gray',
strokeWidth: 1,
selectable: true,
lockMovementX: true,
lockMovementY: true,
lockRotation: true,
lockScalingX: true,
lockScalingY: true,
name: 'guideLine',
},
)
canvas?.add(line)
canvas?.renderAll()
const newHorizontalLineArray = [...horiGuideLines, line]
setHoriGuideLines(newHorizontalLineArray)
},
editMode: (options) => {
[canvas, horiGuideLines],
),
editMode: useCallback(
(options) => {
let pointer = canvas?.getPointer(options.e)
if (getInterSectPointByMouseLine()) {
@ -801,7 +841,9 @@ export function useMode() {
canvas?.renderAll()
},
textboxMode: (options) => {
[canvas],
),
textboxMode: useCallback((options) => {
if (canvas?.getActiveObject()?.type === 'textbox') return
const pointer = canvas?.getPointer(options.e)
@ -819,8 +861,8 @@ export function useMode() {
textbox?.on('editing:exited', function () {
changeMode(canvas, Mode.EDIT)
})
},
drawRectMode: (o) => {
}, []),
drawRectMode: useCallback((o) => {
let rect, isDown, origX, origY
isDown = true
const pointer = canvas.getPointer(o.e)
@ -860,9 +902,10 @@ export function useMode() {
canvas.off('mouse:up')
setMode(Mode.DEFAULT)
})
},
}, []),
// 흡착점 추가
adsorptionPoint(o) {
adsorptionPoint: useCallback(
(o) => {
const pointer = canvas.getPointer(o.e)
let newX = pointer.x
let newY = pointer.y
@ -890,6 +933,8 @@ export function useMode() {
canvas.add(circle)
canvas.renderAll()
},
[canvas],
),
}
const getInterSectPointByMouseLine = () => {
@ -4484,7 +4529,6 @@ export function useMode() {
canvas?.off('mouse:move')
canvas?.off('mouse:out')
document.removeEventListener('keydown', handleKeyDown)
const roofs = canvas?.getObjects().filter((obj) => obj.name === 'roof')
roofs.forEach((roof, index) => {
const offsetPolygonPoint = offsetPolygon(roof.points, -20)