129 lines
3.8 KiB
JavaScript
129 lines
3.8 KiB
JavaScript
import { canvasState } from '@/store/canvasAtom'
|
|
import { useRecoilValue } from 'recoil'
|
|
import { useEffect, useRef, useState } from 'react'
|
|
import { useMessage } from '@/hooks/useMessage'
|
|
import { useEvent } from '@/hooks/useEvent'
|
|
import { useLine } from '@/hooks/useLine'
|
|
|
|
export function useWallLineOffsetSetting() {
|
|
const canvas = useRecoilValue(canvasState)
|
|
const { showLine, addLine } = useLine()
|
|
const { getMessage } = useMessage()
|
|
const { addCanvasMouseEventListener, initEvent } = useEvent()
|
|
const length1Ref = useRef(null)
|
|
const length2Ref = useRef(null)
|
|
const radioTypeRef = useRef('1')
|
|
const currentWallLineRef = useRef(null)
|
|
const arrow1Ref = useRef(null)
|
|
const arrow2Ref = useRef(null)
|
|
|
|
const TYPES = {
|
|
WALL_LINE_EDIT: 'wallLineEdit',
|
|
OFFSET: 'offset',
|
|
}
|
|
|
|
const buttonMenu = [
|
|
{ id: 1, name: getMessage('modal.wallline.offset.setting.wallline.edit'), type: TYPES.WALL_LINE_EDIT },
|
|
{ id: 2, name: getMessage('modal.wallline.offset.setting.offset'), type: TYPES.OFFSET },
|
|
]
|
|
|
|
const [type, setType] = useState(TYPES.WALL_LINE_EDIT)
|
|
|
|
useEffect(() => {
|
|
const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
|
|
outerLines.forEach((outerLine) => {
|
|
outerLine.set({ selectable: true })
|
|
showLine(outerLine)
|
|
})
|
|
|
|
const roofs = canvas.getObjects().filter((obj) => obj.name === 'roofBase')
|
|
|
|
roofs.forEach((roof) => {
|
|
roof.innerLines.forEach((innerLine) => {
|
|
canvas.remove(innerLine)
|
|
})
|
|
canvas.remove(roof)
|
|
})
|
|
|
|
const wallLines = canvas.getObjects().filter((obj) => obj.name === 'wallLine')
|
|
wallLines.forEach((wallLine) => {
|
|
canvas.remove(wallLine)
|
|
})
|
|
|
|
addCanvasMouseEventListener('mouse:down', mouseDown)
|
|
|
|
return () => {
|
|
canvas.discardActiveObject()
|
|
initEvent()
|
|
}
|
|
}, [])
|
|
|
|
const mouseDown = (e) => {
|
|
if (!e.target || (e.target && e.target.name !== 'outerLine')) {
|
|
return
|
|
}
|
|
|
|
currentWallLineRef.current = e.target
|
|
}
|
|
|
|
const handleSave = () => {
|
|
switch (type) {
|
|
case TYPES.WALL_LINE_EDIT:
|
|
handleWallLineEditSave()
|
|
break
|
|
case TYPES.OFFSET:
|
|
handleOffsetSave()
|
|
break
|
|
}
|
|
}
|
|
|
|
const handleWallLineEditSave = () => {
|
|
const direction = currentWallLineRef.current.direction
|
|
let canDirections = direction === 'left' || direction === 'right' ? ['up', 'down'] : ['left', 'right']
|
|
if (radioTypeRef === 1) {
|
|
if (!canDirections.includes(arrow1Ref.current)) {
|
|
alert('방향을 다시 선택하세요')
|
|
return
|
|
}
|
|
} else {
|
|
if (!canDirections.includes(arrow2Ref.current)) {
|
|
alert('방향을 다시 선택하세요')
|
|
return
|
|
}
|
|
}
|
|
}
|
|
|
|
const handleOffsetSave = () => {
|
|
const direction = currentWallLineRef.current.direction
|
|
let canDirections = direction === 'left' || direction === 'right' ? ['up', 'down'] : ['left', 'right']
|
|
|
|
if (!canDirections.includes(arrow1Ref.current)) {
|
|
alert('방향을 다시 선택하세요')
|
|
return
|
|
}
|
|
|
|
const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
|
|
const idx = currentWallLineRef.current.idx
|
|
const prevLine = outerLines.find((line) => (line.idx === idx - 1 < 0 ? outerLines.length - 1 : idx - 1))
|
|
const currentLine = currentWallLineRef.current
|
|
const nextLine = outerLines.find((line) => (line.idx === idx + 1 > outerLines.length - 1 ? 0 : idx + 1))
|
|
switch (arrow1Ref.current) {
|
|
case 'up': {
|
|
console.log(prevLine, currentLine, nextLine)
|
|
break
|
|
}
|
|
case 'down': {
|
|
break
|
|
}
|
|
case 'left': {
|
|
break
|
|
}
|
|
case 'right': {
|
|
break
|
|
}
|
|
}
|
|
}
|
|
|
|
return { type, setType, buttonMenu, TYPES, length1Ref, length2Ref, radioTypeRef, currentWallLineRef, arrow1Ref, arrow2Ref, handleSave }
|
|
}
|