diff --git a/src/components/floor-plan/CanvasMenu.jsx b/src/components/floor-plan/CanvasMenu.jsx index 07b248cb..7276805a 100644 --- a/src/components/floor-plan/CanvasMenu.jsx +++ b/src/components/floor-plan/CanvasMenu.jsx @@ -31,7 +31,7 @@ const canvasMenus = [ ] export default function CanvasMenu(props) { - const { setShowCanvasSettingModal, showOutlineModal, setShowOutlineModal } = props + const { setShowCanvasSettingModal, showOutlineModal, setShowOutlineModal, setShowPlaceShapeModal } = props const [menuNumber, setMenuNumber] = useState(null) const [type, setType] = useState('') @@ -57,6 +57,10 @@ export default function CanvasMenu(props) { setCurrentMenu(menu.title) switch (menu.index) { + case 1: + setType('placementShape') + onClickPlacementInitialMenu() + break case 2: setType('outline') break @@ -70,12 +74,16 @@ export default function CanvasMenu(props) { } const menuProps = { setShowOutlineModal, + setShowPlaceShapeModal, type, } const settingsModalOptions = useRecoilState(settingModalFirstOptionsState) useEffect(() => { + if (menuNumber === 1) { + onClickPlacementInitialMenu() + } if (menuNumber !== 2 && showOutlineModal) setShowOutlineModal(false) }, [menuNumber, type]) @@ -90,6 +98,12 @@ export default function CanvasMenu(props) { }) } + const onClickPlacementInitialMenu = () => { + setShowOutlineModal(false) + setShowCanvasSettingModal(false) + setShowPlaceShapeModal(true) + } + const handleClear = () => { setPoints([]) canvas?.clear() diff --git a/src/components/floor-plan/FloorPlan.jsx b/src/components/floor-plan/FloorPlan.jsx index 19dfe66a..ee27cbcd 100644 --- a/src/components/floor-plan/FloorPlan.jsx +++ b/src/components/floor-plan/FloorPlan.jsx @@ -12,11 +12,13 @@ import CanvasLayout from '@/components/floor-plan/CanvasLayout' import DotLineGrid from '@/components/floor-plan/modal/grid/DotLineGrid' import WallLineSetting from '@/components/floor-plan/modal/outerlinesetting/WallLineSetting' import PropertiesSetting from '@/components/floor-plan/modal/outerlinesetting/PropertiesSetting' +import PlacementShapeSetting from '@/components/floor-plan/modal/placementShape/PlacementShapeSetting' import GridColorSetting from './modal/grid/GridColorSetting' export default function FloorPlan() { const [showCanvasSettingModal, setShowCanvasSettingModal] = useState(false) const [showOutlineModal, setShowOutlineModal] = useState(false) + const [showPlaceShapeModal, setShowPlaceShapeModal] = useState(false) const [showPropertiesSettingModal, setShowPropertiesSettingModal] = useState(false) const globalLocaleState = useRecoilValue(globalLocaleStore) const { get } = useAxios(globalLocaleState) @@ -44,6 +46,7 @@ export default function FloorPlan() { setShowCanvasSettingModal, showOutlineModal, setShowOutlineModal, + setShowPlaceShapeModal, } useEffect(() => { @@ -98,11 +101,11 @@ export default function FloorPlan() {
| {getMessage('modal.placement.initial.setting.plan.drawing')} | +{getMessage('modal.placement.initial.setting.plan.drawing.size.stuff')} | +
|---|---|
| + {getMessage('modal.placement.initial.setting.size')} + + | +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ |
+
| {getMessage('modal.placement.initial.setting.roof.angle.setting')} | +
+
+
+
+
+
+
+
+
+
+
+ |
+
| + {getMessage('modal.placement.initial.setting.roof.material')} + + | +
+
+
+
+
+
+
+ W
+
+
+
+
+
+ L
+
+
+
+
+
+ {getMessage('modal.placement.initial.setting.rafter')}
+
+
+
+
+ |
+
| {getMessage('modal.placement.initial.setting.size.roof')} | +{getMessage('modal.placement.initial.setting.size.roof.info')} | +
|---|---|
| {getMessage('modal.placement.initial.setting.size.actual')} | +{getMessage('modal.placement.initial.setting.size.actual.info')} | +
| {getMessage('modal.placement.initial.setting.size.none.pitch')} | +{getMessage('modal.placement.initial.setting.size.none.pitch.info')} | +