115 lines
4.1 KiB
JavaScript
115 lines
4.1 KiB
JavaScript
'use client'
|
|
|
|
import { useState, useRef, useEffect } from 'react'
|
|
import { useRecoilValue } from 'recoil'
|
|
import { useMessage } from '@/hooks/useMessage'
|
|
import { useEvent } from '@/hooks/useEvent'
|
|
import { canvasState } from '@/store/canvasAtom'
|
|
import { useSwal } from '@/hooks/useSwal'
|
|
import { useObjectBatch } from '@/hooks/object/useObjectBatch'
|
|
import { POLYGON_TYPE } from '@/common/common'
|
|
import WithDraggable from '@/components/common/draggable/WithDraggable'
|
|
import OpenSpace from '@/components/floor-plan/modal/object/type/OpenSpace'
|
|
import Shadow from '@/components/floor-plan/modal/object/type/Shadow'
|
|
import TriangleDormer from '@/components/floor-plan/modal/object/type/TriangleDormer'
|
|
import PentagonDormer from '@/components/floor-plan/modal/object/type/PentagonDormer'
|
|
|
|
export default function ObjectSetting({ setShowObjectSettingModal }) {
|
|
const { getMessage } = useMessage()
|
|
const canvas = useRecoilValue(canvasState)
|
|
const [buttonAct, setButtonAct] = useState(1)
|
|
const { swalFire } = useSwal()
|
|
const { applyOpeningAndShadow, applyDormers } = useObjectBatch()
|
|
|
|
const surfaceShapePolygons = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
|
|
|
|
//오브젝트 배치로 넘어오면 면형상 선택 불가
|
|
useEffect(() => {
|
|
canvas.discardActiveObject()
|
|
surfaceShapePolygons.forEach((obj) => {
|
|
obj.set({ selectable: false })
|
|
})
|
|
}, [])
|
|
|
|
/**
|
|
* 개구배치, 그림자배치
|
|
*/
|
|
const objectPlacement = {
|
|
typeRef: useRef([]), //프리입력, 치수입력
|
|
widthRef: useRef(null),
|
|
heightRef: useRef(null),
|
|
isCrossRef: useRef(null),
|
|
}
|
|
|
|
const dormerPlacement = {
|
|
widthRef: useRef(null),
|
|
heightRef: useRef(null),
|
|
pitchRef: useRef(null),
|
|
offsetRef: useRef(null),
|
|
offsetWidthRef: useRef(null),
|
|
directionRef: useRef(null),
|
|
}
|
|
|
|
const applyObject = () => {
|
|
// if (surfaceShapePolygons.length === 0) {
|
|
// swalFire({ text: '지붕이 없어요 지붕부터 그리세요', icon: 'error' })
|
|
// return
|
|
// }
|
|
|
|
//개구배치, 그림자배치
|
|
|
|
console.log(surfaceShapePolygons)
|
|
|
|
if (buttonAct === 1 || buttonAct === 2) {
|
|
applyOpeningAndShadow(objectPlacement, buttonAct, surfaceShapePolygons)
|
|
} else {
|
|
applyDormers(dormerPlacement, buttonAct, surfaceShapePolygons)
|
|
}
|
|
}
|
|
|
|
const buttonMenu = [
|
|
{ id: 1, name: getMessage('modal.object.setting.type.open.space.placement') },
|
|
{ id: 2, name: getMessage('modal.object.setting.type.shadow.placement') },
|
|
{ id: 3, name: getMessage('modal.object.setting.type.triangle.dormer') },
|
|
{ id: 4, name: getMessage('modal.object.setting.type.pentagon.dormer') },
|
|
]
|
|
return (
|
|
<WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
|
|
<div className={`modal-pop-wrap lrr`}>
|
|
<div className="modal-head">
|
|
<h1 className="title">{getMessage('plan.menu.placement.surface.object')} </h1>
|
|
<button className="modal-close" onClick={() => setShowObjectSettingModal(false)}>
|
|
닫기
|
|
</button>
|
|
</div>
|
|
<div className="modal-body">
|
|
<div className="modal-btn-wrap">
|
|
{buttonMenu.map((item) => (
|
|
<button key={item.id} className={`btn-frame modal ${buttonAct === item.id ? 'act' : ''}`} onClick={() => setButtonAct(item.id)}>
|
|
{item.name}
|
|
</button>
|
|
))}
|
|
</div>
|
|
<div className="properties-setting-wrap outer">
|
|
<div className="setting-tit">{getMessage('setting')}</div>
|
|
{buttonAct === 1 && <OpenSpace ref={objectPlacement} />}
|
|
{buttonAct === 2 && <Shadow ref={objectPlacement} />}
|
|
{buttonAct === 3 && <TriangleDormer ref={dormerPlacement} />}
|
|
{buttonAct === 4 && <PentagonDormer ref={dormerPlacement} />}
|
|
</div>
|
|
<div className="grid-btn-wrap">
|
|
<button
|
|
className="btn-frame modal act"
|
|
onClick={() => {
|
|
applyObject()
|
|
}}
|
|
>
|
|
{getMessage('write')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</WithDraggable>
|
|
)
|
|
}
|