272 lines
10 KiB
JavaScript
272 lines
10 KiB
JavaScript
'use client'
|
|
|
|
import { useEffect, useState } from 'react'
|
|
|
|
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
|
|
|
|
import { usePathname, useRouter } from 'next/navigation'
|
|
import MenuDepth01 from './MenuDepth01'
|
|
import QSelectBox from '@/components/common/select/QSelectBox'
|
|
import { v4 as uuidv4 } from 'uuid'
|
|
import { useMessage } from '@/hooks/useMessage'
|
|
import { usePlan } from '@/hooks/usePlan'
|
|
import { useSwal } from '@/hooks/useSwal'
|
|
import { useEvent } from '@/hooks/useEvent'
|
|
import { canvasSettingState, canvasState, canvasZoomState, currentMenuState, verticalHorizontalModeState } from '@/store/canvasAtom'
|
|
import { sessionStore } from '@/store/commonAtom'
|
|
import { outerLinePointsState } from '@/store/outerLineAtom'
|
|
import { appMessageStore, globalLocaleStore } from '@/store/localeAtom'
|
|
import { settingModalFirstOptionsState } from '@/store/settingAtom'
|
|
|
|
import KO from '@/locales/ko.json'
|
|
import JA from '@/locales/ja.json'
|
|
import { useCanvasEvent } from '@/hooks/useCanvasEvent'
|
|
import SettingModal01 from '@/components/floor-plan/modal/setting01/SettingModal01'
|
|
import { usePopup } from '@/hooks/usePopup'
|
|
import { placementShapeDrawingPointsState } from '@/store/placementShapeDrawingAtom'
|
|
import PlacementShapeSetting from '@/components/floor-plan/modal/placementShape/PlacementShapeSetting'
|
|
import { useCommonUtils } from '@/hooks/common/useCommonUtils'
|
|
|
|
import { commonUtilsState } from '@/store/commonUtilsAtom'
|
|
import { menusState, menuTypeState } from '@/store/menuAtom'
|
|
import useMenu from '@/hooks/common/useMenu'
|
|
import { MENU } from '@/common/common'
|
|
|
|
import { useEstimateController } from '@/hooks/floorPlan/estimate/useEstimateController'
|
|
|
|
export default function CanvasMenu(props) {
|
|
const { menuNumber, setMenuNumber } = props
|
|
const pathname = usePathname()
|
|
const router = useRouter()
|
|
const { addPopup } = usePopup()
|
|
const canvasMenus = useRecoilValue(menusState)
|
|
const [type, setType] = useRecoilState(menuTypeState)
|
|
const [verticalHorizontalMode, setVerticalHorizontalMode] = useRecoilState(verticalHorizontalModeState)
|
|
const [appMessageState, setAppMessageState] = useRecoilState(appMessageStore)
|
|
const setCurrentMenu = useSetRecoilState(currentMenuState)
|
|
const setOuterLinePoints = useSetRecoilState(outerLinePointsState)
|
|
const setPlacementPoints = useSetRecoilState(placementShapeDrawingPointsState)
|
|
const canvasSetting = useRecoilValue(canvasSettingState)
|
|
const [canvasZoom, setCanvasZoom] = useRecoilState(canvasZoomState)
|
|
const sessionState = useRecoilValue(sessionStore)
|
|
const globalLocale = useRecoilValue(globalLocaleStore)
|
|
const canvas = useRecoilValue(canvasState)
|
|
const { handleZoomClear, handleZoom } = useCanvasEvent()
|
|
const { handleMenu } = useMenu()
|
|
const { handleEstimateSubmit } = useEstimateController()
|
|
|
|
const { getMessage } = useMessage()
|
|
const { currentCanvasPlan, saveCanvas } = usePlan()
|
|
const { swalFire } = useSwal()
|
|
const { initEvent, addCanvasMouseEventListener, addDocumentEventListener } = useEvent()
|
|
const commonUtils = useRecoilValue(commonUtilsState)
|
|
const { commonFunctions } = useCommonUtils()
|
|
const SelectOption = [{ name: '瓦53A' }, { name: '瓦53A' }]
|
|
|
|
const onClickNav = (menu) => {
|
|
setMenuNumber(menu.index)
|
|
setCurrentMenu(menu.title)
|
|
|
|
switch (menu.index) {
|
|
case 1:
|
|
setType('placementShape')
|
|
onClickPlacementInitialMenu()
|
|
break
|
|
case 2:
|
|
setType('outline')
|
|
break
|
|
case 3:
|
|
setType('surface')
|
|
break
|
|
case 4:
|
|
setType('module')
|
|
break
|
|
case 6:
|
|
router.push(`/floor-plan/simulator/${menu.index}`)
|
|
break
|
|
}
|
|
|
|
if (pathname !== '/floor-plan') router.push('/floor-plan')
|
|
}
|
|
|
|
const settingsModalOptions = useRecoilState(settingModalFirstOptionsState)
|
|
|
|
useEffect(() => {
|
|
if (menuNumber === 1) {
|
|
onClickPlacementInitialMenu()
|
|
}
|
|
}, [menuNumber, type])
|
|
|
|
// 저장버튼(btn08) 클릭 시 호출되는 함수
|
|
const handleSaveCanvas = async () => {
|
|
// swalFire({
|
|
// text: `${currentCanvasPlan.name} ` + getMessage('plan.message.confirm.save'),
|
|
// type: 'confirm',
|
|
// confirmFn: async () => {
|
|
await saveCanvas(sessionState.userId)
|
|
// },
|
|
// })
|
|
}
|
|
|
|
const [placementInitialId, setPlacementInitialId] = useState(uuidv4())
|
|
const placementInitialProps = {
|
|
id: placementInitialId,
|
|
pos: {
|
|
x: 50,
|
|
y: 180,
|
|
},
|
|
}
|
|
const onClickPlacementInitialMenu = () => {
|
|
addPopup(placementInitialId, 1, <PlacementShapeSetting {...placementInitialProps} />)
|
|
}
|
|
|
|
const handleClear = () => {
|
|
setOuterLinePoints([])
|
|
setPlacementPoints([])
|
|
canvas?.clear()
|
|
}
|
|
//
|
|
// const handleZoomClear = () => {
|
|
// setCanvasZoom(100)
|
|
// canvas.set({ zoom: 1 })
|
|
// canvas.viewportTransform = [1, 0, 0, 1, 0, 0]
|
|
// canvas.renderAll()
|
|
// }
|
|
|
|
const handlePopup = () => {
|
|
const id = uuidv4()
|
|
addPopup(id, 1, <SettingModal01 id={id} />, true)
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (globalLocale === 'ko') {
|
|
setAppMessageState(KO)
|
|
} else {
|
|
setAppMessageState(JA)
|
|
}
|
|
}, [type, globalLocale])
|
|
|
|
useEffect(() => {
|
|
if (['2', '3'].includes(canvasSetting?.roofSizeSet?.toString())) {
|
|
setMenuNumber(3)
|
|
setType('surface')
|
|
setCurrentMenu(MENU.BATCH_CANVAS.BATCH_DRAWING)
|
|
} else {
|
|
setMenuNumber(2)
|
|
setType('outline')
|
|
setCurrentMenu(MENU.ROOF_COVERING.EXTERIOR_WALL_LINE)
|
|
}
|
|
}, [canvasSetting])
|
|
|
|
return (
|
|
<div className={`canvas-menu-wrap ${menuNumber === 2 || menuNumber === 3 || menuNumber === 4 ? 'active' : ''}`}>
|
|
<div className="canvas-menu-inner">
|
|
<ul className="canvas-menu-list">
|
|
{canvasMenus.map((menu) => {
|
|
return (
|
|
<li
|
|
key={`canvas-menu-${menu.index}`}
|
|
className={`canvas-menu-item ${menuNumber === menu.index ? 'active' : ''}`}
|
|
onClick={() => {
|
|
if (['2', '3'].includes(canvasSetting?.roofSizeSet?.toString()) && menu.index === 2) return
|
|
onClickNav(menu)
|
|
}}
|
|
>
|
|
<button className={['2', '3'].includes(canvasSetting?.roofSizeSet?.toString()) && menu.index === 2 ? 'no-click' : ''}>
|
|
<span className={`menu-icon ${menu.icon}`}></span>
|
|
{getMessage(menu.name)}
|
|
</button>
|
|
</li>
|
|
)
|
|
})}
|
|
</ul>
|
|
<div className="canvas-side-btn-wrap">
|
|
{menuNumber !== 6 && menuNumber !== 5 && (
|
|
<>
|
|
{
|
|
<div className={`vertical-horizontal ${verticalHorizontalMode ? 'on' : ''}`}>
|
|
<span>{getMessage('plan.mode.vertical.horizontal')}</span>
|
|
<button onClick={() => setVerticalHorizontalMode(!verticalHorizontalMode)}>{verticalHorizontalMode ? 'ON' : 'OFF'}</button>
|
|
</div>
|
|
}
|
|
<div className="btn-from">
|
|
<button className={`btn01 ${commonUtils.text ? 'active' : ''}`} onClick={() => commonFunctions('text')}></button>
|
|
<button className={`btn02 ${commonUtils.dimension ? 'active' : ''} `} onClick={() => commonFunctions('dimension')}></button>
|
|
<button className={`btn03 ${commonUtils.distance ? 'active' : ''} `} onClick={() => commonFunctions('distance')}></button>
|
|
</div>
|
|
<div className="select-box">
|
|
<QSelectBox title={'瓦53A'} option={SelectOption} />
|
|
</div>
|
|
<div className="btn-from">
|
|
{/*<button className="btn04" onClick={() => setShowCanvasSettingModal(true)}></button>*/}
|
|
<button className="btn04" onClick={handlePopup}></button>
|
|
<button className="btn05"></button>
|
|
<button className="btn06"></button>
|
|
</div>
|
|
<div className="size-control">
|
|
<button
|
|
className="control-btn minus"
|
|
onClick={() => {
|
|
handleZoom(false)
|
|
}}
|
|
></button>
|
|
<span>{canvasZoom}%</span>
|
|
<button
|
|
className="control-btn plus"
|
|
onClick={() => {
|
|
handleZoom(true)
|
|
}}
|
|
></button>
|
|
</div>
|
|
<div className="btn-from">
|
|
<button className="btn08" onClick={handleSaveCanvas}></button>
|
|
<button className="btn09"></button>
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{menuNumber === 5 && (
|
|
<>
|
|
<div className="ico-btn-from">
|
|
<button className="btn-frame gray ico-flx act">
|
|
<span className="ico ico01"></span>
|
|
<span>{getMessage('plan.menu.estimate.docDown')}</span>
|
|
</button>
|
|
<button className="btn-frame gray ico-flx" onClick={handleEstimateSubmit}>
|
|
<span className="ico ico02"></span>
|
|
<span>{getMessage('plan.menu.estimate.save')}</span>
|
|
</button>
|
|
<button className="btn-frame gray ico-flx">
|
|
<span className="ico ico03"></span>
|
|
<span>{getMessage('plan.menu.estimate.reset')}</span>
|
|
</button>
|
|
<button className="btn-frame gray ico-flx">
|
|
<span className="ico ico04"></span>
|
|
<span>{getMessage('plan.menu.estimate.copy')}</span>
|
|
</button>
|
|
</div>
|
|
</>
|
|
)}
|
|
{menuNumber === 6 && (
|
|
<>
|
|
<div className="ico-btn-from">
|
|
<button className="btn-frame gray ico-flx">
|
|
<span className="ico ico01"></span>
|
|
<span>{getMessage('plan.menu.simulation.excel')}</span>
|
|
</button>
|
|
<button className="btn-frame gray ico-flx">
|
|
<span className="ico ico01"></span>
|
|
<span>{getMessage('plan.menu.simulation.pdf')}</span>
|
|
</button>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className={`canvas-depth2-wrap ${menuNumber === 2 || menuNumber === 3 || menuNumber === 4 ? 'active' : ''}`}>
|
|
{(menuNumber === 2 || menuNumber === 3 || menuNumber === 4) && <MenuDepth01 />}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|