외벽선작성 각도 추가
This commit is contained in:
parent
bd44c9e19f
commit
23e9d0d12a
@ -13,7 +13,7 @@ export default function MenuDepth01(props) {
|
||||
const [activeMenu, setActiveMenu] = useState()
|
||||
const setCurrentMenu = useSetRecoilState(currentMenuState)
|
||||
const onClickMenu = ({ id, menu, name }) => {
|
||||
setActiveMenu(id)
|
||||
setActiveMenu(menu)
|
||||
setShowOutlineModal(menu === MENU.ROOF_COVERING.EXTERIOR_WALL_LINE)
|
||||
setCurrentMenu(menu)
|
||||
}
|
||||
@ -59,7 +59,7 @@ export default function MenuDepth01(props) {
|
||||
<ul className="canvas-depth2-list">
|
||||
{menuInfo[type].map((menu) => {
|
||||
return (
|
||||
<li key={menu.id} className={`canvas-depth2-item ${menu.id === activeMenu ? 'active' : ''}`}>
|
||||
<li key={menu.id} className={`canvas-depth2-item ${menu.menu === activeMenu ? 'active' : ''}`}>
|
||||
<button onClick={() => onClickMenu(menu)}>{getMessage(menu.name)}</button>
|
||||
</li>
|
||||
)
|
||||
|
||||
@ -8,6 +8,7 @@ import { useEvent } from '@/hooks/useEvent'
|
||||
import { canvasState, verticalHorizontalModeState } from '@/store/canvasAtom'
|
||||
import {
|
||||
OUTER_LINE_TYPE,
|
||||
outerLineAngle1State,
|
||||
outerLineArrow1State,
|
||||
outerLineArrow2State,
|
||||
outerLineLength1State,
|
||||
@ -18,6 +19,7 @@ import {
|
||||
import { QLine } from '@/components/fabric/QLine'
|
||||
import { useLine } from '@/hooks/useLine'
|
||||
import { distanceBetweenPoints } from '@/util/canvas-util'
|
||||
import { calculateAngle } from '@/util/qpolygon-utils'
|
||||
|
||||
export default function OuterLineWall(props) {
|
||||
const { setShowOutlineModal } = props
|
||||
@ -29,6 +31,7 @@ export default function OuterLineWall(props) {
|
||||
|
||||
const length1Ref = useRef(null)
|
||||
const length2Ref = useRef(null)
|
||||
const angle1Ref = useRef(null)
|
||||
const [length1, setLength1] = useRecoilState(outerLineLength1State)
|
||||
const [length2, setLength2] = useRecoilState(outerLineLength2State)
|
||||
const [arrow1, setArrow1] = useRecoilState(outerLineArrow1State)
|
||||
@ -38,6 +41,8 @@ export default function OuterLineWall(props) {
|
||||
const arrow1Ref = useRef(arrow1)
|
||||
const arrow2Ref = useRef(arrow2)
|
||||
|
||||
const [angle1, setAngle1] = useRecoilState(outerLineAngle1State)
|
||||
|
||||
const canvas = useRecoilValue(canvasState)
|
||||
|
||||
useEffect(() => {
|
||||
@ -168,6 +173,24 @@ export default function OuterLineWall(props) {
|
||||
}
|
||||
|
||||
if (lastPoint.x === firstPoint.x || lastPoint.y === firstPoint.y) {
|
||||
let isAllRightAngle = true
|
||||
|
||||
const firstPoint = points[0]
|
||||
|
||||
points.forEach((point, idx) => {
|
||||
if (idx === 0 || !isAllRightAngle) {
|
||||
return
|
||||
}
|
||||
|
||||
const angle = calculateAngle(point, firstPoint)
|
||||
if (angle % 90 !== 0) {
|
||||
isAllRightAngle = false
|
||||
}
|
||||
})
|
||||
|
||||
if (isAllRightAngle) {
|
||||
return
|
||||
}
|
||||
const line = new QLine([lastPoint.x, lastPoint.y, firstPoint.x, firstPoint.y], {
|
||||
stroke: 'grey',
|
||||
strokeWidth: 1,
|
||||
@ -178,7 +201,12 @@ export default function OuterLineWall(props) {
|
||||
canvas?.add(line)
|
||||
addLineText(line)
|
||||
} else {
|
||||
const guideLine1 = new QLine([lastPoint.x, lastPoint.y, lastPoint.x, firstPoint.y], {
|
||||
const nearPoint =
|
||||
distanceBetweenPoints(firstPoint, { x: lastPoint.x, y: firstPoint.y }) <=
|
||||
distanceBetweenPoints(firstPoint, { x: firstPoint.x, y: lastPoint.y })
|
||||
? [lastPoint.x, lastPoint.y, lastPoint.x, firstPoint.y]
|
||||
: [lastPoint.x, lastPoint.y, firstPoint.x, lastPoint.y]
|
||||
const guideLine1 = new QLine(nearPoint, {
|
||||
stroke: 'grey',
|
||||
strokeWidth: 1,
|
||||
strokeDashArray: [1, 1, 1],
|
||||
@ -427,7 +455,25 @@ export default function OuterLineWall(props) {
|
||||
console.log('leegubae')
|
||||
},
|
||||
angle: (e) => {
|
||||
console.log('angle')
|
||||
const key = e.key
|
||||
switch (key) {
|
||||
case 'Enter': {
|
||||
setPoints((prev) => {
|
||||
if (prev.length === 0) {
|
||||
return []
|
||||
}
|
||||
const lastPoint = prev[prev.length - 1]
|
||||
const length = length1Ref.current.value / 10
|
||||
const angle = angle1Ref.current.value
|
||||
//lastPoint로부터 angle1만큼의 각도로 length1만큼의 길이를 가지는 선을 그림
|
||||
const radian = (angle * Math.PI) / 180
|
||||
|
||||
const x = lastPoint.x + length * Math.cos(radian)
|
||||
const y = lastPoint.y - length * Math.sin(radian)
|
||||
return [...prev, { x, y }]
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
diagonalLine: (e) => {
|
||||
console.log('diagonalLine')
|
||||
@ -446,6 +492,27 @@ export default function OuterLineWall(props) {
|
||||
if (points.length < 3) {
|
||||
return
|
||||
}
|
||||
|
||||
let isAllRightAngle = true
|
||||
|
||||
const firstPoint = points[0]
|
||||
|
||||
points.forEach((point, idx) => {
|
||||
if (idx === 0 || !isAllRightAngle) {
|
||||
return
|
||||
}
|
||||
|
||||
const angle = calculateAngle(point, firstPoint)
|
||||
if (angle % 90 !== 0) {
|
||||
isAllRightAngle = false
|
||||
}
|
||||
})
|
||||
|
||||
if (isAllRightAngle) {
|
||||
alert('부정확한 다각형입니다.')
|
||||
return
|
||||
}
|
||||
|
||||
setPoints((prev) => {
|
||||
if (prev.length === 0) {
|
||||
return []
|
||||
@ -453,6 +520,7 @@ export default function OuterLineWall(props) {
|
||||
return [...prev, { x: prev[0].x, y: prev[0].y }]
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<WithDraggable isShow={true} pos={{ x: 50, y: -1000 + 50 }}>
|
||||
<div className={`modal-pop-wrap ssm`}>
|
||||
@ -505,7 +573,8 @@ export default function OuterLineWall(props) {
|
||||
value={length1}
|
||||
ref={length1Ref}
|
||||
onChange={(e) => {
|
||||
setLength1(e.target.value.replace(/[^-0-9]/g, ''))
|
||||
const value = e.target.value.replace(/^0+/, '')
|
||||
setLength1(value.replace(/[^-0-9]/g, ''))
|
||||
}}
|
||||
placeholder="3000"
|
||||
/>
|
||||
@ -525,7 +594,8 @@ export default function OuterLineWall(props) {
|
||||
value={length1}
|
||||
ref={length1Ref}
|
||||
onChange={(e) => {
|
||||
setLength1(e.target.value.replace(/[^-0-9]/g, ''))
|
||||
const value = e.target.value.replace(/^0+/, '')
|
||||
setLength1(value.replace(/[^-0-9]/g, ''))
|
||||
}}
|
||||
placeholder="3000"
|
||||
/>
|
||||
@ -542,7 +612,8 @@ export default function OuterLineWall(props) {
|
||||
value={length2}
|
||||
ref={length2Ref}
|
||||
onChange={(e) => {
|
||||
setLength2(e.target.value.replace(/[^-0-9]/g, ''))
|
||||
const value = e.target.value.replace(/^0+/, '')
|
||||
setLength2(value.replace(/[^-0-9]/g, ''))
|
||||
}}
|
||||
placeholder="3000"
|
||||
/>
|
||||
@ -552,6 +623,44 @@ export default function OuterLineWall(props) {
|
||||
<input type="text" readOnly={true} value={arrow2} className="input-origin block" />
|
||||
</div>
|
||||
</div>
|
||||
) : type === OUTER_LINE_TYPE.ANGLE ? (
|
||||
<div className="outer-line-wrap">
|
||||
<div className="form-input">
|
||||
<label htmlFor="">{getMessage('modal.cover.outline.length')}</label>
|
||||
<input
|
||||
type="text"
|
||||
className="input-origin block"
|
||||
value={length1}
|
||||
ref={length1Ref}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value.replace(/^0+/, '')
|
||||
setLength1(value.replace(/[^-0-9]/g, ''))
|
||||
}}
|
||||
placeholder="3000"
|
||||
/>
|
||||
</div>
|
||||
<div className="form-input">
|
||||
<label htmlFor="">{getMessage('modal.cover.outline.angle')}</label>
|
||||
<input
|
||||
type="text"
|
||||
value={angle1}
|
||||
ref={angle1Ref}
|
||||
onChange={(e) => {
|
||||
const val = e.target.value
|
||||
// const pattern = /(^\d+$)|(^\d{1,}.\d{0,2}$)/
|
||||
const pattern = /^-?(\d{1,3}([.]\d{0,2})?)?$/
|
||||
if (!pattern.test(val)) {
|
||||
// prev에서 마지막 자리 제거
|
||||
setAngle1(val.slice(0, val.length - 1))
|
||||
return
|
||||
}
|
||||
|
||||
setAngle1(val)
|
||||
}}
|
||||
className="input-origin block"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user