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

dormeroffset 기능 추가

Browse Source
This commit is contained in:
yjnoh 2024-11-06 13:57:04 +09:00
parent 67ba9be6b6
commit 2a108eb1af
2 changed files with 70 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
src/components/floor-plan/modal/object/DormerOffset.jsx
View File

@ -1,9 +1,11 @@
import { useState, useEffect, useRef } from 'react'
import { useMessage } from '@/hooks/useMessage'
import WithDraggable from '@/components/common/draggable/WithDraggable'
import { useRecoilValue } from 'recoil'
import { contextPopupPositionState } from '@/store/popupAtom'
import { usePopup } from '@/hooks/usePopup'
import { useState } from 'react'
import { useObjectBatch } from '@/hooks/object/useObjectBatch'
import { canvasState } from '@/store/canvasAtom'
export default function DormerOffset(props) {
const contextPopupPosition = useRecoilValue(contextPopupPositionState)
@ -12,6 +14,31 @@ export default function DormerOffset(props) {
const { closePopup } = usePopup()
const [arrow1, setArrow1] = useState(null)
const [arrow2, setArrow2] = useState(null)
const arrow1LengthRef = useRef()
const arrow2LengthRef = useRef()
const canvas = useRecoilValue(canvasState)
const { dormerOffsetKeyEvent, dormerOffset } = useObjectBatch({})
useEffect(() => {
if (canvas) {
dormerOffsetKeyEvent(setArrow1, setArrow2)
}
}, [])
const handleOffsetDormer = () => {
const length1 = arrow1LengthRef.current.value
const length2 = arrow2LengthRef.current.value
dormerOffset(arrow1, arrow2, length1, length2)
setArrow1(null)
setArrow2(null)
arrow1LengthRef.current.value = ''
arrow2LengthRef.current.value = ''
// closePopup(id)
}
return (
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap xm mount`}>
@ -29,44 +56,40 @@ export default function DormerOffset(props) {
<p className="mb5">{getMessage('length')}</p>
<div className="input-move-wrap mb5">
<div className="input-move">
<input type="text" className="input-origin" defaultValue={0} />
<input type="text" className="input-origin" ref={arrow1LengthRef} placeholder="0" />
</div>
<span>mm</span>
<div className="direction-move-wrap">
<button
className={`direction up ${arrow1 === '↑' ? 'act' : ''}`}
className={`direction up ${arrow1 === 'up' ? 'act' : ''}`}
onClick={() => {
setArrow1('↑')
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowUp' }))
setArrow1('up')
}}
></button>
<button
className={`direction down ${arrow1 === '↓' ? 'act' : ''}`}
className={`direction down ${arrow1 === 'down' ? 'act' : ''}`}
onClick={() => {
setArrow1('↓')
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown' }))
setArrow1('down')
}}
></button>
</div>
</div>
<div className="input-move-wrap">
<div className="input-move">
<input type="text" className="input-origin" defaultValue={0} />
<input type="text" className="input-origin" ref={arrow2LengthRef} placeholder="0" />
</div>
<span>mm</span>
<div className="direction-move-wrap">
<button
className={`direction left ${arrow2 === '←' ? 'act' : ''}`}
className={`direction left ${arrow2 === 'left' ? 'act' : ''}`}
onClick={() => {
setArrow2('←')
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowLeft' }))
setArrow2('left')
}}
></button>
<button
className={`direction right ${arrow2 === '→' ? 'act' : ''}`}
className={`direction right ${arrow2 === 'right' ? 'act' : ''}`}
onClick={() => {
setArrow2('→')
document.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight' }))
setArrow2('right')
}}
></button>
</div>
@ -75,7 +98,9 @@ export default function DormerOffset(props) {
</div>
</div>
<div className="grid-btn-wrap">
<button className="btn-frame modal act">{getMessage('modal.common.save')}</button>
<button className="btn-frame modal act" onClick={handleOffsetDormer}>
{getMessage('modal.common.save')}
</button>
</div>
</div>
</div>

30
src/hooks/object/useObjectBatch.js
View File

@ -16,7 +16,7 @@ import { fontSelector } from '@/store/fontAtom'
export function useObjectBatch({ isHidden, setIsHidden }) {
const { getMessage } = useMessage()
const canvas = useRecoilValue(canvasState)
const { addCanvasMouseEventListener, initEvent } = useEvent()
const { addCanvasMouseEventListener, initEvent, addDocumentEventListener } = useEvent()
const { swalFire } = useSwal()
const { drawDirectionArrow } = usePolygon()
const lengthTextFont = useRecoilValue(fontSelector('lengthText'))
@ -963,6 +963,8 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
})
canvas?.add(reGroup)
canvas?.remove(groupObj)
return reGroup
}
const moveObjectBatch = () => {
@ -986,6 +988,30 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
}
}
const dormerOffsetKeyEvent = (setArrow1, setArrow2) => {
addDocumentEventListener('keydown', document, (e) => {
if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
const keyEvent = e.key === 'ArrowDown' ? 'down' : 'up'
setArrow1(keyEvent)
} else if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
const keyEvent = e.key === 'ArrowLeft' ? 'left' : 'right'
setArrow2(keyEvent)
}
})
}
const dormerOffset = (arrow1, arrow2, length1, length2) => {
length1 = parseInt(length1) / 10
length2 = parseInt(length2) / 10
const dormer = canvas.getActiveObject()
if (length1) dormer.top = arrow1 === 'down' ? dormer.top + length1 : dormer.top - length1
if (length2) dormer.left = arrow2 === 'left' ? dormer.left - length2 : dormer.left + length2
const newDormer = reGroupObject(dormer)
canvas?.setActiveObject(newDormer)
}
return {
applyOpeningAndShadow,
applyDormers,
@ -993,5 +1019,7 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
splitDormerPentagon,
resizeObjectBatch,
moveObjectBatch,
dormerOffsetKeyEvent,
dormerOffset,
}
}