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

메뉴 모달 신규 모달 컴포넌트에 적용

Browse Source
This commit is contained in:
minsik 2024-10-22 17:15:57 +09:00
parent b968fd074d
commit 442d8e56a2
36 changed files with 527 additions and 388 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
src/components/common/draggable/withDraggable.jsx → src/components/common/draggable/WithDraggable.jsx
View File

2
src/components/common/font/FontSetting.jsx
View File

@ -1,4 +1,4 @@
import WithDraggable from '@/components/common/draggable/withDraggable'
import WithDraggable from '@/components/common/draggable/WithDraggable'
import QSelectBox from '@/components/common/select/QSelectBox'
import { usePopup } from '@/hooks/usePopup'
import { useState } from 'react'

58
src/components/floor-plan/CanvasMenu.jsx
View File

@ -27,6 +27,7 @@ import { popupState } from '@/store/popupAtom'
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'
const canvasMenus = [
{ index: 0, name: 'plan.menu.plan.drawing', icon: 'con00', title: MENU.PLAN_DRAWING },
@ -39,28 +40,7 @@ const canvasMenus = [
]
export default function CanvasMenu(props) {
const {
menuNumber,
setMenuNumber,
setShowCanvasSettingModal,
showOutlineModal,
setShowOutlineModal,
setShowPlaceShapeModal,
setShowSlopeSettingModal,
setShowPlacementSurfaceSettingModal,
setShowPlaceShapeDrawingModal,
setShowRoofShapeSettingModal,
setShowObjectSettingModal,
setShowRoofShapePassivitySettingModal,
setShowAuxiliaryModal,
setShowEavesGableEditModal,
setShowMovementModal,
setShowWallLineOffsetSettingModal,
setShowRoofAllocationSettingModal,
setShowBasicSettingModal,
setShowCircuitTrestleSettingModal,
setShowPropertiesSettingModal,
} = props
const { menuNumber, setMenuNumber } = props
const { addPopup, closePopup } = usePopup()
const [type, setType] = useState('')
@ -115,22 +95,6 @@ export default function CanvasMenu(props) {
}
}
const menuProps = {
setShowOutlineModal,
setShowPlaceShapeModal,
setShowRoofShapeSettingModal,
setShowRoofShapePassivitySettingModal,
setShowAuxiliaryModal,
setShowEavesGableEditModal,
setShowMovementModal,
setShowSlopeSettingModal,
setShowPlacementSurfaceSettingModal,
setShowPlaceShapeDrawingModal,
setShowWallLineOffsetSettingModal,
setShowRoofAllocationSettingModal,
setShowObjectSettingModal,
setShowBasicSettingModal,
setShowCircuitTrestleSettingModal,
setShowPropertiesSettingModal,
type,
}
@ -140,7 +104,6 @@ export default function CanvasMenu(props) {
if (menuNumber === 1) {
onClickPlacementInitialMenu()
}
if (menuNumber !== 2 && showOutlineModal) setShowOutlineModal(false)
}, [menuNumber, type])
// 저장버튼(btn08) 클릭 시 호출되는 함수
@ -154,12 +117,17 @@ export default function CanvasMenu(props) {
// })
}
const [placementInitialId, setPlacementInitialId] = useState(uuidv4())
const placementInitialProps = {
id: placementInitialId,
pos: {
x: 50,
y: 180,
},
}
const onClickPlacementInitialMenu = () => {
setShowOutlineModal(false)
setShowCanvasSettingModal(false)
setShowEavesGableEditModal(false)
setShowMovementModal(false)
setShowPlaceShapeModal(true)
addPopup(placementInitialId, 1, <PlacementShapeSetting {...placementInitialProps} />)
// setShowPlaceShapeModal(true)
}
const handleClear = () => {
@ -177,7 +145,7 @@ export default function CanvasMenu(props) {
const handlePopup = () => {
const id = uuidv4()
addPopup(id, 1, <SettingModal01 id={id} />)
addPopup(id, 0, <SettingModal01 id={id} />)
}
const commonTextMode = () => {

93
src/components/floor-plan/FloorPlan.jsx
View File

@ -1,50 +1,15 @@
'use client'
import { useEffect, useState } from 'react'
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
import { useRecoilState, useRecoilValue } from 'recoil'
import { useAxios } from '@/hooks/useAxios'
import { globalLocaleStore } from '@/store/localeAtom'
import { settingModalFirstOptionsState, settingModalGridOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom'
import { settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom'
import '@/styles/contents.scss'
import CanvasMenu from '@/components/floor-plan/CanvasMenu'
import CanvasLayout from '@/components/floor-plan/CanvasLayout'
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 RoofShapeSetting from '@/components/floor-plan/modal/roofShape/RoofShapeSetting'
import PlacementShapeDrawing from '@/components/floor-plan/modal/placementShape/PlacementShapeDrawing'
import Slope from '@/components/floor-plan/modal/Slope'
import AuxiliaryDrawing from '@/components/floor-plan/modal/auxiliary/AuxiliaryDrawing'
import EavesGableEdit from '@/components/floor-plan/modal/eavesGable/EavesGableEdit'
import WallLineOffsetSetting from '@/components/floor-plan/modal/wallLineOffset/WallLineOffsetSetting'
import ObjectSetting from '@/components/floor-plan/modal/object/ObjectSetting'
import PlacementSurfaceSetting from '@/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting'
import RoofShapePassivitySetting from '@/components/floor-plan/modal/roofShape/RoofShapePassivitySetting'
import MovementSetting from '@/components/floor-plan/modal/movement/MovementSetting'
import RoofAllocationSetting from '@/components/floor-plan/modal/roofAllocation/RoofAllocationSetting'
import BasicSetting from '@/components/floor-plan/modal/basic/BasicSetting'
import CircuitTrestleSetting from '@/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting'
import { gridColorState } from '@/store/gridAtom'
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 [showRoofShapeSettingModal, setShowRoofShapeSettingModal] = useState(false)
const [showRoofShapePassivitySettingModal, setShowRoofShapePassivitySettingModal] = useState(false)
const [showAuxiliaryModal, setShowAuxiliaryModal] = useState(false)
const [showSlopeSettingModal, setShowSlopeSettingModal] = useState(false)
const [showPlacementSurfaceSettingModal, setShowPlacementSurfaceSettingModal] = useState(false)
const [showPlaceShapeDrawingModal, setShowPlaceShapeDrawingModal] = useState(false)
const [showObjectSettingModal, setShowObjectSettingModal] = useState(false)
const [showEavesGableEditModal, setShowEavesGableEditModal] = useState(false)
const [showMovementModal, setShowMovementModal] = useState(false)
const [showWallLineOffsetSettingModal, setShowWallLineOffsetSettingModal] = useState(false)
const [showRoofAllocationSettingModal, setShowRoofAllocationSettingModal] = useState(false)
const [showBasicSettingModal, setShowBasicSettingModal] = useState(false)
const [showCircuitTrestleSettingModal, setShowCircuitTrestleSettingModal] = useState(false)
const globalLocaleState = useRecoilValue(globalLocaleStore)
const { get } = useAxios(globalLocaleState)
@ -53,44 +18,16 @@ export default function FloorPlan() {
const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
const [menuNumber, setMenuNumber] = useState(null)
const [showDotLineGridModal, setShowDotLineGridModal] = useState(false)
const [showGridCopyModal, setShowGridCopyModal] = useState(false)
const [showGridMoveModal, setShowGridMoveModal] = useState(false)
const [color, setColor] = useRecoilState(gridColorState)
const setSettingModalGridOptions = useSetRecoilState(settingModalGridOptionsState)
const outlineProps = {
setShowOutlineModal,
setShowPropertiesSettingModal,
}
const modalProps = {
menuNumber,
setMenuNumber,
setShowCanvasSettingModal,
showOutlineModal,
setShowOutlineModal,
setShowPlaceShapeModal,
setShowSlopeSettingModal,
setShowPlacementSurfaceSettingModal,
setShowPlaceShapeDrawingModal,
setShowRoofShapeSettingModal,
setShowObjectSettingModal,
setShowRoofShapePassivitySettingModal,
setShowAuxiliaryModal,
setShowEavesGableEditModal,
setShowMovementModal,
setShowWallLineOffsetSettingModal,
setShowRoofAllocationSettingModal,
setShowBasicSettingModal,
setShowCircuitTrestleSettingModal,
setShowPropertiesSettingModal,
}
useEffect(() => {
console.log('FloorPlan useEffect 실행')
fetchSettings()
}, [showOutlineModal, objectNo])
}, [objectNo])
// Canvas Setting 조회
const fetchSettings = async () => {
@ -118,36 +55,12 @@ export default function FloorPlan() {
}
}
const propertiesSettingProps = {
setShowPropertiesSettingModal,
}
useEffect(() => {}, [showOutlineModal])
return (
<>
<div className="canvas-wrap">
<CanvasMenu {...modalProps} />
<div className={`canvas-content ${menuNumber === 2 || menuNumber === 3 || menuNumber === 4 ? 'active' : ''}`}>
<CanvasLayout menuNumber={menuNumber} />
{showOutlineModal && <WallLineSetting {...outlineProps} />}
{showPropertiesSettingModal && <PropertiesSetting {...propertiesSettingProps} />}
{showPlaceShapeModal && <PlacementShapeSetting setShowPlaceShapeModal={setShowPlaceShapeModal} />}
{showRoofShapeSettingModal && <RoofShapeSetting setShowRoofShapeSettingModal={setShowRoofShapeSettingModal} />}
{showRoofShapePassivitySettingModal && (
<RoofShapePassivitySetting setShowRoofShapePassivitySettingModal={setShowRoofShapePassivitySettingModal} />
)}
{showAuxiliaryModal && <AuxiliaryDrawing setShowAuxiliaryModal={setShowAuxiliaryModal} />}
{showSlopeSettingModal && <Slope setShowSlopeSettingModal={setShowSlopeSettingModal} />}
{showPlaceShapeDrawingModal && <PlacementShapeDrawing setShowPlaceShapeDrawingModal={setShowPlaceShapeDrawingModal} />}
{showEavesGableEditModal && <EavesGableEdit setShowEavesGableEditModal={setShowEavesGableEditModal} />}
{showMovementModal && <MovementSetting setShowMovementModal={setShowMovementModal} />}
{showRoofAllocationSettingModal && <RoofAllocationSetting setShowRoofAllocationSettingModal={setShowRoofAllocationSettingModal} />}
{showWallLineOffsetSettingModal && <WallLineOffsetSetting setShowWallLineOffsetSettingModal={setShowWallLineOffsetSettingModal} />}
{showObjectSettingModal && <ObjectSetting setShowObjectSettingModal={setShowObjectSettingModal} />}
{showPlacementSurfaceSettingModal && <PlacementSurfaceSetting setShowPlacementSurfaceSettingModal={setShowPlacementSurfaceSettingModal} />}
{showBasicSettingModal && <BasicSetting setShowBasicSettingModal={setShowBasicSettingModal} />}
{showCircuitTrestleSettingModal && <CircuitTrestleSetting setShowCircuitTrestleSettingModal={setShowCircuitTrestleSettingModal} />}
</div>
</div>
</>

133
src/components/floor-plan/MenuDepth01.jsx
View File

@ -6,85 +6,92 @@ import { MENU } from '@/common/common'
import { currentMenuState } from '@/store/canvasAtom'
import { useSetRecoilState } from 'recoil'
import { useSurfaceShapeBatch } from '@/hooks/surface/useSurfaceShapeBatch'
import { usePopup } from '@/hooks/usePopup'
import { v4 as uuidv4 } from 'uuid'
import WallLineSetting from '@/components/floor-plan/modal/outerlinesetting/WallLineSetting'
import RoofShapeSetting from '@/components/floor-plan/modal/roofShape/RoofShapeSetting'
import RoofShapePassivitySetting from '@/components/floor-plan/modal/roofShape/RoofShapePassivitySetting'
import AuxiliaryDrawing from '@/components/floor-plan/modal/auxiliary/AuxiliaryDrawing'
import EavesGableEdit from '@/components/floor-plan/modal/eavesGable/EavesGableEdit'
import MovementSetting from '@/components/floor-plan/modal/movement/MovementSetting'
import WallLineOffsetSetting from '@/components/floor-plan/modal/wallLineOffset/WallLineOffsetSetting'
import RoofAllocationSetting from '@/components/floor-plan/modal/roofAllocation/RoofAllocationSetting'
import Slope from '@/components/floor-plan/modal/Slope'
import ObjectSetting from '@/components/floor-plan/modal/object/ObjectSetting'
import PlacementShapeDrawing from '@/components/floor-plan/modal/placementShape/PlacementShapeDrawing'
import PlacementSurfaceSetting from '@/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting'
import BasicSetting from '@/components/floor-plan/modal/basic/BasicSetting'
import CircuitTrestleSetting from '@/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting'
export default function MenuDepth01(props) {
const {
setShowOutlineModal,
type,
setShowPlaceShapeModal,
setShowRoofShapeSettingModal,
setShowRoofShapePassivitySettingModal,
setShowAuxiliaryModal,
setShowEavesGableEditModal,
setShowMovementModal,
setShowSlopeSettingModal,
setShowPlacementSurfaceSettingModal,
setShowPlaceShapeDrawingModal,
setShowWallLineOffsetSettingModal,
setShowRoofAllocationSettingModal,
setShowObjectSettingModal,
setShowBasicSettingModal,
setShowCircuitTrestleSettingModal,
setShowPropertiesSettingModal,
} = props
const { type } = props
const { getMessage } = useMessage()
const [activeMenu, setActiveMenu] = useState()
const setCurrentMenu = useSetRecoilState(currentMenuState)
const { deleteAllSurfacesAndObjects } = useSurfaceShapeBatch()
const { addPopup } = usePopup()
const [outlineId, setOutlineId] = useState(uuidv4())
const onClickMenu = ({ id, menu, name }) => {
setActiveMenu(menu)
setShowOutlineModal(menu === MENU.ROOF_COVERING.EXTERIOR_WALL_LINE)
setCurrentMenu(menu)
setShowPlaceShapeModal(false)
if (type === 'outline') {
setShowOutlineModal(id === 0)
setShowRoofShapeSettingModal(id === 1)
setShowRoofShapePassivitySettingModal(id === 2)
setShowAuxiliaryModal(id === 3)
setShowEavesGableEditModal(id === 4)
setShowMovementModal(id === 5)
setShowWallLineOffsetSettingModal(id === 6)
setShowRoofAllocationSettingModal(id === 7)
setShowPlaceShapeDrawingModal(false)
setShowPropertiesSettingModal(false)
setShowCircuitTrestleSettingModal(false)
switch (id) {
case 0:
addPopup(outlineId, 1, <WallLineSetting id={outlineId} />)
break
case 1:
addPopup(outlineId, 1, <RoofShapeSetting id={outlineId} />)
break
case 2:
addPopup(outlineId, 1, <RoofShapePassivitySetting id={outlineId} />)
break
case 3:
addPopup(outlineId, 1, <AuxiliaryDrawing id={outlineId} />)
break
case 4:
addPopup(outlineId, 1, <EavesGableEdit id={outlineId} />)
break
case 5:
addPopup(outlineId, 1, <MovementSetting id={outlineId} />)
break
case 6:
addPopup(outlineId, 1, <WallLineOffsetSetting id={outlineId} />)
break
case 7:
addPopup(outlineId, 1, <RoofAllocationSetting id={outlineId} />)
break
}
}
if (type === 'surface') {
setShowOutlineModal(false)
setShowRoofShapeSettingModal(false)
setShowRoofShapePassivitySettingModal(false)
setShowAuxiliaryModal(false)
setShowEavesGableEditModal(false)
setShowMovementModal(false)
setShowWallLineOffsetSettingModal(false)
setShowRoofAllocationSettingModal(false)
setShowPropertiesSettingModal(false)
setShowCircuitTrestleSettingModal(false)
setShowSlopeSettingModal(id === 0)
setShowPlaceShapeDrawingModal(id === 1)
setShowPlacementSurfaceSettingModal(id === 2)
setShowObjectSettingModal(id === 3)
//배치면 전체 삭제
if (id === 4) {
deleteAllSurfacesAndObjects()
switch (id) {
case 0:
addPopup(outlineId, 1, <Slope id={outlineId} />)
break
case 1:
addPopup(outlineId, 1, <PlacementShapeDrawing id={outlineId} />)
break
case 2:
addPopup(outlineId, 1, <PlacementSurfaceSetting id={outlineId} />)
break
case 3:
addPopup(outlineId, 1, <ObjectSetting id={outlineId} />)
break
case 4:
deleteAllSurfacesAndObjects()
break
}
}
if (type === 'module') {
setShowOutlineModal(false)
setShowRoofShapeSettingModal(false)
setShowRoofShapePassivitySettingModal(false)
setShowAuxiliaryModal(false)
setShowEavesGableEditModal(false)
setShowMovementModal(false)
setShowWallLineOffsetSettingModal(false)
setShowRoofAllocationSettingModal(false)
setShowPropertiesSettingModal(false)
setShowBasicSettingModal(id === 0)
setShowCircuitTrestleSettingModal(id === 1)
switch (id) {
case 0:
addPopup(outlineId, 1, <BasicSetting id={outlineId} />)
break
case 1:
addPopup(outlineId, 1, <CircuitTrestleSetting id={outlineId} />)
break
}
}
}

11
src/components/floor-plan/modal/Slope.jsx
View File

@ -3,17 +3,20 @@ import WithDraggable from '@/components/common/draggable/WithDraggable'
import { globalPitchState } from '@/store/canvasAtom'
import { useRecoilState } from 'recoil'
import { useRef } from 'react'
import { usePopup } from '@/hooks/usePopup'
export default function Slope({ setShowSlopeSettingModal }) {
export default function Slope({ id, pos = { x: 50, y: 230 } }) {
const { getMessage } = useMessage()
const { closePopup } = usePopup()
const [globalPitch, setGlobalPitch] = useRecoilState(globalPitchState)
const inputRef = useRef()
return (
<WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap xxxm`}>
<div className="modal-head">
<h1 className="title">{getMessage('plan.menu.placement.surface.slope.setting')} </h1>
<button className="modal-close" onClick={() => setShowSlopeSettingModal(false)}>
<button className="modal-close" onClick={() => closePopup(id)}>
닫기
</button>
</div>
@ -34,7 +37,7 @@ export default function Slope({ setShowSlopeSettingModal }) {
className="btn-frame modal act"
onClick={() => {
setGlobalPitch(inputRef.current.value)
setShowSlopeSettingModal(false)
closePopup(id)
}}
>
{getMessage('modal.common.save')}

12
src/components/floor-plan/modal/auxiliary/AuxiliaryDrawing.jsx
View File

@ -7,9 +7,11 @@ import Diagonal from '@/components/floor-plan/modal/lineTypes/Diagonal'
import { OUTER_LINE_TYPE } from '@/store/outerLineAtom'
import OuterLineWall from '@/components/floor-plan/modal/lineTypes/OuterLineWall'
import { useAuxiliaryDrawing } from '@/hooks/roofcover/useAuxiliaryDrawing'
import { usePopup } from '@/hooks/usePopup'
export default function AuxiliaryDrawing({ setShowAuxiliaryModal }) {
export default function AuxiliaryDrawing({ id, pos = { x: 50, y: 230 } }) {
const { getMessage } = useMessage()
const { closePopup } = usePopup()
const types = [
{ id: 1, name: getMessage('straight.line'), type: OUTER_LINE_TYPE.OUTER_LINE },
@ -47,7 +49,7 @@ export default function AuxiliaryDrawing({ setShowAuxiliaryModal }) {
handleFix,
buttonAct,
setButtonAct,
} = useAuxiliaryDrawing(setShowAuxiliaryModal)
} = useAuxiliaryDrawing(id)
const outerLineProps = {
length1,
@ -121,11 +123,11 @@ export default function AuxiliaryDrawing({ setShowAuxiliaryModal }) {
setType(button.type)
}
return (
<WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap r`}>
<div className="modal-head">
<h1 className="title">{getMessage('modal.auxiliary.drawing')}</h1>
<button className="modal-close" onClick={() => setShowAuxiliaryModal(false)}>
<button className="modal-close" onClick={() => closePopup(id)}>
닫기
</button>
</div>
@ -149,7 +151,7 @@ export default function AuxiliaryDrawing({ setShowAuxiliaryModal }) {
<button className="btn-frame modal mr5" onClick={handleRollback}>
{getMessage('modal.cover.outline.rollback')}
</button>
<button className="btn-frame modal act" onClick={() => handleFix(setShowAuxiliaryModal)}>
<button className="btn-frame modal act" onClick={() => handleFix(id)}>
{getMessage('apply')}
</button>
</div>

8
src/components/floor-plan/modal/basic/BasicSetting.jsx
View File

@ -8,17 +8,19 @@ import PitchPlacement from '@/components/floor-plan/modal/basic/step/pitch/Pitch
import Placement from '@/components/floor-plan/modal/basic/step/Placement'
import { useRecoilState } from 'recoil'
import { canvasSettingState } from '@/store/canvasAtom'
import { usePopup } from '@/hooks/usePopup'
export default function BasicSetting({ setShowBasicSettingModal }) {
export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
const { getMessage } = useMessage()
const { closePopup } = usePopup()
const [tabNum, setTabNum] = useState(1)
const [canvasSetting, setCanvasSetting] = useRecoilState(canvasSettingState)
return (
<WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap lx-2`}>
<div className="modal-head">
<h1 className="title">{getMessage('plan.menu.module.circuit.setting.default')}</h1>
<button className="modal-close" onClick={() => setShowBasicSettingModal(false)}>
<button className="modal-close" onClick={() => closePopup(id)}>
닫기
</button>
</div>

6
src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx
View File

@ -4,9 +4,11 @@ import PowerConditionalSelect from '@/components/floor-plan/modal/circuitTrestle
import CircuitAllocation from '@/components/floor-plan/modal/circuitTrestle/step/CircuitAllocation'
import StepUp from '@/components/floor-plan/modal/circuitTrestle/step/StepUp'
import { useMessage } from '@/hooks/useMessage'
import { usePopup } from '@/hooks/usePopup'
export default function CircuitTrestleSetting({ setShowCircuitTrestleSettingModal }) {
export default function CircuitTrestleSetting({ id }) {
const { getMessage } = useMessage()
const { closePopup } = usePopup()
const [tabNum, setTabNum] = useState(1)
const [circuitAllocationType, setCircuitAllocationType] = useState(1)
const circuitProps = {
@ -18,7 +20,7 @@ export default function CircuitTrestleSetting({ setShowCircuitTrestleSettingModa
<div className={`modal-pop-wrap lx-2`}>
<div className="modal-head">
<h1 className="title">{getMessage('modal.circuit.trestle.setting')} </h1>
<button className="modal-close" onClick={() => setShowCircuitTrestleSettingModal(false)}>
<button className="modal-close" onClick={() => closePopup(id)}>
닫기
</button>
</div>

10
src/components/floor-plan/modal/eavesGable/EavesGableEdit.jsx
View File

@ -5,11 +5,13 @@ import Gable from '@/components/floor-plan/modal/eavesGable/type/Gable'
import WallMerge from '@/components/floor-plan/modal/eavesGable/type/WallMerge'
import Shed from '@/components/floor-plan/modal/eavesGable/type/Shed'
import { useEavesGableEdit } from '@/hooks/roofcover/useEavesGableEdit'
import { usePopup } from '@/hooks/usePopup'
export default function EavesGableEdit({ setShowEavesGableEditModal }) {
export default function EavesGableEdit({ id, pos = { x: 50, y: 230 } }) {
const { getMessage } = useMessage()
const { closePopup } = usePopup()
const { type, setType, buttonMenu, TYPES, pitchRef, offsetRef, widthRef, radioTypeRef } = useEavesGableEdit(setShowEavesGableEditModal)
const { type, setType, buttonMenu, TYPES, pitchRef, offsetRef, widthRef, radioTypeRef } = useEavesGableEdit(id)
const eavesProps = {
pitchRef,
offsetRef,
@ -34,11 +36,11 @@ export default function EavesGableEdit({ setShowEavesGableEditModal }) {
}
return (
<WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap r`}>
<div className="modal-head">
<h1 className="title">{getMessage('modal.eaves.gable.edit')}</h1>
<button className="modal-close" onClick={() => setShowEavesGableEditModal(false)}>
<button className="modal-close" onClick={() => closePopup(id)}>
닫기
</button>
</div>

8
src/components/floor-plan/modal/movement/MovementSetting.jsx
View File

@ -3,9 +3,11 @@ import WithDraggable from '@/components/common/draggable/WithDraggable'
import { useState } from 'react'
import FlowLine from '@/components/floor-plan/modal/movement/type/FlowLine'
import Updown from '@/components/floor-plan/modal/movement/type/Updown'
import { usePopup } from '@/hooks/usePopup'
export default function MovementSetting({ setShowMovementModal }) {
export default function MovementSetting({ id, pos = { x: 50, y: 230 } }) {
const { getMessage } = useMessage()
const { closePopup } = usePopup()
const [buttonAct, setButtonAct] = useState(1)
const buttonMenu = [
{ id: 1, name: getMessage('modal.movement.flow.line.move') },
@ -13,11 +15,11 @@ export default function MovementSetting({ setShowMovementModal }) {
]
return (
<WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap r`}>
<div className="modal-head">
<h1 className="title">{getMessage('plan.menu.roof.cover.movement.shape.updown')}</h1>
<button className="modal-close" onClick={() => setShowMovementModal(false)}>
<button className="modal-close" onClick={() => closePopup(id)}>
닫기
</button>
</div>

8
src/components/floor-plan/modal/object/ObjectSetting.jsx
View File

@ -12,13 +12,15 @@ 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'
import { usePopup } from '@/hooks/usePopup'
export default function ObjectSetting({ setShowObjectSettingModal }) {
export default function ObjectSetting({ id, pos = { x: 50, y: 230 } }) {
const { getMessage } = useMessage()
const canvas = useRecoilValue(canvasState)
const [buttonAct, setButtonAct] = useState(1)
const { swalFire } = useSwal()
const { applyOpeningAndShadow, applyDormers } = useObjectBatch()
const { closePopup } = usePopup()
const surfaceShapePolygons = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
@ -70,11 +72,11 @@ export default function ObjectSetting({ setShowObjectSettingModal }) {
{ id: 4, name: getMessage('modal.object.setting.type.pentagon.dormer') },
]
return (
<WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
<WithDraggable isShow={true} pos={pos}>
<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 className="modal-close" onClick={() => closePopup(id)}>
닫기
</button>
</div>

22
src/components/floor-plan/modal/outerlinesetting/PropertiesSetting.jsx
View File

@ -4,21 +4,15 @@ import { usePropertiesSetting } from '@/hooks/roofcover/usePropertiesSetting'
export default function PropertiesSetting(props) {
const { getMessage } = useMessage()
const { setShowPropertiesSettingModal } = props
const { handleSetEaves, handleSetGable, handleRollback, handleFix, closeModal } = usePropertiesSetting(setShowPropertiesSettingModal)
const { id, pos = { x: 50, y: 230 } } = props
const { handleSetEaves, handleSetGable, handleRollback, handleFix, closeModal } = usePropertiesSetting(id)
return (
<WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap ssm`}>
<div className="modal-head">
<h1 className="title">{getMessage('modal.canvas.setting.wallline.properties.setting')}</h1>
<button
className="modal-close"
onClick={() => {
closeModal(setShowPropertiesSettingModal)
}}
>
<button className="modal-close" onClick={() => closeModal(id)}>
닫기
</button>
</div>
@ -39,13 +33,7 @@ export default function PropertiesSetting(props) {
<button className="btn-frame modal mr5" onClick={handleRollback}>
{getMessage('modal.cover.outline.rollback')}
</button>
<button
className="btn-frame modal act"
onClick={() => {
handleFix()
setShowPropertiesSettingModal(false)
}}
>
<button className="btn-frame modal act" onClick={() => handleFix()}>
{getMessage('modal.cover.outline.finish')}
</button>
</div>

18
src/components/floor-plan/modal/outerlinesetting/WallLineSetting.jsx
View File

@ -9,10 +9,15 @@ import RightAngle from '@/components/floor-plan/modal/lineTypes/RightAngle'
import Angle from '@/components/floor-plan/modal/lineTypes/Angle'
import DoublePitch from '@/components/floor-plan/modal/lineTypes/DoublePitch'
import Diagonal from '@/components/floor-plan/modal/lineTypes/Diagonal'
import { usePopup } from '@/hooks/usePopup'
import { useState } from 'react'
import { v4 as uuidv4 } from 'uuid'
export default function WallLineSetting(props) {
const { setShowOutlineModal, setShowPropertiesSettingModal } = props
const { id } = props
const { addPopup, closePopup } = usePopup()
const { getMessage } = useMessage()
const [propertiesId, setPropertiesId] = useState(uuidv4())
const {
length1,
setLength1,
@ -39,7 +44,7 @@ export default function WallLineSetting(props) {
outerLineDiagonalLengthRef,
handleRollback,
handleFix,
} = useOuterLineWall(setShowOutlineModal)
} = useOuterLineWall(id, propertiesId)
const outerLineProps = {
length1,
@ -113,9 +118,8 @@ export default function WallLineSetting(props) {
<div className={`modal-pop-wrap r mount`}>
<div className="modal-head">
<h1 className="title">{getMessage('modal.cover.outline.drawing')}</h1>
<button className="modal-close" onClick={() => setShowOutlineModal(false)}>
닫기
</button>
{/*<button className="modal-close" onClick={() => closePopup(id)}>*/}
<button className="modal-close">닫기</button>
</div>
<div className="modal-body">
<div className="modal-btn-wrap">
@ -172,7 +176,9 @@ export default function WallLineSetting(props) {
className="btn-frame modal act"
onClick={() => {
handleFix()
setShowPropertiesSettingModal(true)
// closePopup(id)
// setShowPropertiesSettingModal(true)
}}
>
{getMessage('modal.cover.outline.fix')}

10
src/components/floor-plan/modal/placementShape/PlacementShapeDrawing.jsx
View File

@ -8,9 +8,11 @@ import Diagonal from '@/components/floor-plan/modal/lineTypes/Diagonal'
import { OUTER_LINE_TYPE } from '@/store/outerLineAtom'
import OuterLineWall from '@/components/floor-plan/modal/lineTypes/OuterLineWall'
import { usePlacementShapeDrawing } from '@/hooks/surface/usePlacementShapeDrawing'
import { usePopup } from '@/hooks/usePopup'
export default function PlacementShapeDrawing({ setShowPlaceShapeDrawingModal }) {
export default function PlacementShapeDrawing({ id, pos = { x: 50, y: 230 } }) {
const { getMessage } = useMessage()
const { closePopup } = usePopup()
const [buttonAct, setButtonAct] = useState(1)
const types = [
{ id: 1, name: getMessage('straight.line'), type: OUTER_LINE_TYPE.OUTER_LINE },
@ -45,7 +47,7 @@ export default function PlacementShapeDrawing({ setShowPlaceShapeDrawingModal })
outerLineDiagonalLengthRef,
handleRollback,
handleFix,
} = usePlacementShapeDrawing(setShowPlaceShapeDrawingModal)
} = usePlacementShapeDrawing(id)
const outerLineProps = {
length1,
@ -119,11 +121,11 @@ export default function PlacementShapeDrawing({ setShowPlaceShapeDrawingModal })
setType(button.type)
}
return (
<WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap r`}>
<div className="modal-head">
<h1 className="title">{getMessage('plan.menu.placement.surface.drawing')}</h1>
<button className="modal-close" onClick={() => setShowPlaceShapeDrawingModal(false)}>
<button className="modal-close" onClick={() => closePopup(id)}>
닫기
</button>
</div>

8
src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
View File

@ -7,13 +7,15 @@ import { canvasSettingState } from '@/store/canvasAtom'
import { useMessage } from '@/hooks/useMessage'
import { useAxios } from '@/hooks/useAxios'
import { useSwal } from '@/hooks/useSwal'
import { usePopup } from '@/hooks/usePopup'
export default function PlacementShapeSetting({ setShowPlaceShapeModal }) {
export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, setShowPlaceShapeModal }) {
const [objectNo, setObjectNo] = useState('test123241008001') // 후에 삭제 필요
const [showSizeGuideModal, setShowSizeGuidModal] = useState(false)
const [showMaterialGuideModal, setShowMaterialGuidModal] = useState(false)
const [selectedRoofMaterial, setSelectedRoofMaterial] = useState(1)
const [canvasSetting, setCanvasSetting] = useRecoilState(canvasSettingState)
const { closePopup } = usePopup()
const [basicSetting, setBasicSettings] = useState({
roofSizeSet: 1,
roofAngleSet: 'slope',
@ -169,11 +171,11 @@ export default function PlacementShapeSetting({ setShowPlaceShapeModal }) {
}
return (
<WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap l mount`}>
<div className="modal-head">
<h1 className="title">{getMessage('plan.menu.placement.surface.initial.setting')}</h1>
<button className="modal-close" onClick={() => setShowPlaceShapeModal(false)}>
<button className="modal-close" onClick={() => closePopup(id)}>
닫기
</button>
</div>

9
src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx
View File

@ -7,15 +7,16 @@ import { useSurfaceShapeBatch } from '@/hooks/surface/useSurfaceShapeBatch'
import { useRecoilValue } from 'recoil'
import { canvasState } from '@/store/canvasAtom'
import { POLYGON_TYPE } from '@/common/common'
import { usePopup } from '@/hooks/usePopup'
export default function PlacementSurfaceSetting({ setShowPlacementSurfaceSettingModal }) {
export default function PlacementSurfaceSetting({ id, pos = { x: 50, y: 230 } }) {
const { getMessage } = useMessage()
const [selectedType, setSelectedType] = useState()
const [rotate, setRotate] = useState(0)
const [xInversion, setXInversion] = useState(false)
const [yInversion, setYInversion] = useState(false)
const canvas = useRecoilValue(canvasState)
const { closePopup } = usePopup()
const { applySurfaceShape } = useSurfaceShapeBatch()
const surfaceShapePolygons = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
@ -231,7 +232,7 @@ export default function PlacementSurfaceSetting({ setShowPlacementSurfaceSetting
surfaceRefs.xInversion = xInversion //좌우반전
surfaceRefs.yInversion = yInversion //상하반전
surfaceRefs.rotate = rotate * 90 //앵글
applySurfaceShape(surfaceRefs, selectedType, setShowPlacementSurfaceSettingModal)
applySurfaceShape(surfaceRefs, selectedType, id)
}
useEffect(() => {
@ -243,7 +244,7 @@ export default function PlacementSurfaceSetting({ setShowPlacementSurfaceSetting
<div className={`modal-pop-wrap l-2`}>
<div className="modal-head">
<h1 className="title">{getMessage('plan.menu.placement.surface.arrangement')} </h1>
<button className="modal-close" onClick={() => setShowPlacementSurfaceSettingModal(false)}>
<button className="modal-close" onClick={() => closePopup(id)}>
닫기
</button>
</div>

10
src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx
View File

@ -2,18 +2,20 @@ import { useMessage } from '@/hooks/useMessage'
import WithDraggable from '@/components/common/draggable/WithDraggable'
import QSelectBox from '@/components/common/select/QSelectBox'
import { useRoofAllocationSetting } from '@/hooks/roofcover/useRoofAllocationSetting'
import { usePopup } from '@/hooks/usePopup'
export default function RoofAllocationSetting({ setShowRoofAllocationSettingModal }) {
export default function RoofAllocationSetting({ id, pos = { x: 50, y: 230 } }) {
const { getMessage } = useMessage()
const { closePopup } = usePopup()
const { handleSave, onAddRoofMaterial, onDeleteRoofMaterial, values, roofMaterials, selectedRoofMaterial, setSelectedRoofMaterial } =
useRoofAllocationSetting(setShowRoofAllocationSettingModal)
useRoofAllocationSetting(id)
return (
<WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap ml`}>
<div className="modal-head">
<h1 className="title">{getMessage('plan.menu.estimate.roof.alloc')}</h1>
<button className="modal-close" onClick={() => setShowRoofAllocationSettingModal(false)}>
<button className="modal-close" onClick={() => closePopup(id)}>
닫기
</button>
</div>

13
src/components/floor-plan/modal/roofShape/RoofShapePassivitySetting.jsx
View File

@ -4,11 +4,12 @@ import Gable from '@/components/floor-plan/modal/roofShape/passivity/Gable'
import Shed from '@/components/floor-plan/modal/roofShape/passivity/Shed'
import { useMessage } from '@/hooks/useMessage'
import { useRoofShapePassivitySetting } from '@/hooks/roofcover/useRoofShapePassivitySetting'
import { usePopup } from '@/hooks/usePopup'
export default function RoofShapePassivitySetting({ setShowRoofShapePassivitySettingModal }) {
const { handleSave, handleConfirm, handleRollback, buttons, type, setType, TYPES, offsetRef, pitchRef } =
useRoofShapePassivitySetting(setShowRoofShapePassivitySettingModal)
export default function RoofShapePassivitySetting({ id, pos = { x: 50, y: 230 } }) {
const { handleSave, handleConfirm, handleRollback, buttons, type, setType, TYPES, offsetRef, pitchRef } = useRoofShapePassivitySetting(id)
const { getMessage } = useMessage()
const { closePopup } = usePopup()
const eavesProps = {
offsetRef,
@ -25,11 +26,11 @@ export default function RoofShapePassivitySetting({ setShowRoofShapePassivitySet
}
return (
<WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap xxm`}>
<div className="modal-head">
<h1 className="title">{getMessage('plan.menu.roof.cover.roof.shape.passivity.setting')}</h1>
<button className="modal-close" onClick={() => setShowRoofShapePassivitySettingModal(false)}>
<button className="modal-close" onClick={() => closePopup(id)}>
닫기
</button>
</div>
@ -58,7 +59,7 @@ export default function RoofShapePassivitySetting({ setShowRoofShapePassivitySet
</div>
</div>
<div className="grid-btn-wrap">
<button className="btn-frame modal act" onClick={() => handleSave(setShowRoofShapePassivitySettingModal)}>
<button className="btn-frame modal act" onClick={() => handleSave(id)}>
{getMessage('common.setting.finish')}
</button>
</div>

12
src/components/floor-plan/modal/roofShape/RoofShapeSetting.jsx
View File

@ -6,8 +6,9 @@ import Image from 'next/image'
import Direction from '@/components/floor-plan/modal/roofShape/type/Direction'
import { useRoofShapeSetting } from '@/hooks/roofcover/useRoofShapeSetting'
import { useMessage } from '@/hooks/useMessage'
import { usePopup } from '@/hooks/usePopup'
export default function RoofShapeSetting({ setShowRoofShapeSettingModal }) {
export default function RoofShapeSetting({ id, pos = { x: 50, y: 230 } }) {
const { getMessage } = useMessage()
const {
shapeNum,
@ -37,7 +38,8 @@ export default function RoofShapeSetting({ setShowRoofShapeSettingModal }) {
buttonMenu,
handleConfirm,
handleRollBack,
} = useRoofShapeSetting(setShowRoofShapeSettingModal)
} = useRoofShapeSetting(id)
const { closePopup } = usePopup()
const ridgeProps = { pitch, setPitch, eavesOffset, setEavesOffset }
const patternProps = { pitch, setPitch, eavesOffset, setEavesOffset, gableOffset, setGableOffset }
@ -79,11 +81,11 @@ export default function RoofShapeSetting({ setShowRoofShapeSettingModal }) {
}
return (
<WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap lr mount`}>
<div className="modal-head">
<h1 className="title">{getMessage('modal.roof.shape.setting')}</h1>
<button className="modal-close" onClick={() => setShowRoofShapeSettingModal(false)}>
<button className="modal-close" onClick={() => closePopup(id)}>
닫기
</button>
</div>
@ -106,7 +108,7 @@ export default function RoofShapeSetting({ setShowRoofShapeSettingModal }) {
{(shapeNum === 5 || shapeNum === 6 || shapeNum === 7 || shapeNum === 8) && <Direction {...directionProps} />}
</div>
<div className="grid-btn-wrap">
<button className="btn-frame modal act" onClick={() => handleSave(setShowRoofShapeSettingModal)}>
<button className="btn-frame modal act" onClick={() => handleSave(id)}>
{getMessage('common.setting.finish')}
</button>
</div>

18
src/components/floor-plan/modal/setting01/SecondOption.jsx
View File

@ -169,6 +169,12 @@ export default function SecondOption() {
const [horizon, setHorizon] = useState(1600)
const [vertical, setVertical] = useState(1600)
const fontProps = {
id: fontId,
pos: { x: 745, y: 180 },
setIsShow: setShowFontSettingModal,
}
const planSizeProps = {
id: planSizeId,
horizon,
@ -176,11 +182,12 @@ export default function SecondOption() {
vertical,
setVertical,
setIsShow: setShowPlanSizeSettingModal,
pos: { x: 1020, y: 180 },
pos: { x: 1025, y: 180 },
}
const handlePopup = (type) => {
const id = uuidv4()
setShowPlanSizeSettingModal(false)
setShowFontSettingModal(false)
switch (type) {
case 'dimensionLine':
@ -189,7 +196,7 @@ export default function SecondOption() {
addPopup(dimensionId, 2, <DimensionLineSetting {...dimensionProps} />)
} else {
setShowDimensionLineSettingModal(false)
closePopups([dimensionId, fontId])
closePopup(dimensionId)
}
break
@ -197,10 +204,13 @@ export default function SecondOption() {
case 'font2': //흐름 방향 글꼴 변경
case 'font3': //치수 글꼴변경
case 'font4': //회로번호 글꼴변경
addPopup(fontId, 2, <FontSetting id={fontId} setShowFontSettingModal={setShowFontSettingModal} />)
setShowFontSettingModal(true)
addPopup(fontId, 2, <FontSetting {...fontProps} />)
break
case 'planSize':
setShowPlanSizeSettingModal(true)
addPopup(planSizeId, 2, <PlanSizeSetting {...planSizeProps} />)
break
}

25
src/components/floor-plan/modal/setting01/dimensionLine/DimensionLineSetting.jsx
View File

@ -1,4 +1,4 @@
import WithDraggable from '@/components/common/draggable/withDraggable'
import WithDraggable from '@/components/common/draggable/WithDraggable'
import { usePopup } from '@/hooks/usePopup'
import { v4 as uuidv4 } from 'uuid'
import ColorPickerModal from '@/components/common/color-picker/ColorPickerModal'
@ -44,7 +44,17 @@ export default function DimensionLineSetting(props) {
const [showColorPickerModal, setShowColorPickerModal] = useState(false)
const [showFontModal, setShowFontModal] = useState(false)
const { getMessage } = useMessage()
useEffect(() => {
console.log(2, isShow)
if (pixel) {
setOriginPixel(pixels?.filter((data) => data.value === pixel)[0])
}
setIsShow(true)
}, [])
useEffect(() => {
console.log(1, isShow)
if (!isShow) {
closePopups([fontModalId, colorModalId])
}
@ -81,23 +91,14 @@ export default function DimensionLineSetting(props) {
const popupHandle = (type) => {
switch (type) {
case 'color':
closePopup(fontModalId)
addPopup(colorModalId, 3, <ColorPickerModal {...colorPickerProps} />)
break
case 'font':
closePopup(colorModalId)
addPopup(fontModalId, 3, <FontSetting {...fontProps} />)
break
}
}
useEffect(() => {
console.log(pixel)
if (pixel) {
setOriginPixel(pixels?.filter((data) => data.value === pixel)[0])
}
}, [])
return (
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap xxxm`}>
@ -106,10 +107,8 @@ export default function DimensionLineSetting(props) {
<button
className="modal-close"
onClick={() => {
console.log('fontModalId', fontModalId)
console.log('colorModalId', colorModalId)
closePopups([fontModalId, colorModalId, id])
// setIsShow(false)
setIsShow(false)
}}
>
닫기

2
src/components/floor-plan/modal/setting01/planSize/PlanSizeSetting.jsx
View File

@ -1,4 +1,4 @@
import WithDraggable from '@/components/common/draggable/withDraggable'
import WithDraggable from '@/components/common/draggable/WithDraggable'
import { usePopup } from '@/hooks/usePopup'
import { useMessage } from '@/hooks/useMessage'
import { useState } from 'react'

10
src/components/floor-plan/modal/wallLineOffset/WallLineOffsetSetting.jsx
View File

@ -3,9 +3,11 @@ import WithDraggable from '@/components/common/draggable/WithDraggable'
import WallLine from '@/components/floor-plan/modal/wallLineOffset/type/WallLine'
import Offset from '@/components/floor-plan/modal/wallLineOffset/type/Offset'
import { useWallLineOffsetSetting } from '@/hooks/roofcover/useWallLineOffsetSetting'
import { usePopup } from '@/hooks/usePopup'
export default function WallLineOffsetSetting({ setShowWallLineOffsetSettingModal }) {
export default function WallLineOffsetSetting({ id, pos = { x: 50, y: 230 } }) {
const { getMessage } = useMessage()
const { closePopup } = usePopup()
const {
type,
setType,
@ -19,7 +21,7 @@ export default function WallLineOffsetSetting({ setShowWallLineOffsetSettingModa
length2Ref,
handleSave,
wallLineEditRef,
} = useWallLineOffsetSetting(setShowWallLineOffsetSettingModal)
} = useWallLineOffsetSetting(id)
const wallLineProps = {
length1Ref,
@ -37,11 +39,11 @@ export default function WallLineOffsetSetting({ setShowWallLineOffsetSettingModa
}
return (
<WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap r`}>
<div className="modal-head">
<h1 className="title">{getMessage('modal.wallline.offset.setting')}</h1>
<button className="modal-close" onClick={() => setShowWallLineOffsetSettingModal(false)}>
<button className="modal-close" onClick={() => closePopup(id)}>
닫기
</button>
</div>

22
src/hooks/roofcover/useAuxiliaryDrawing.js
View File

@ -1,19 +1,11 @@
import { useEffect, useRef, useState } from 'react'
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
import {
adsorptionPointAddModeState,
adsorptionPointModeState,
adsorptionRangeState,
canvasState,
dotLineIntervalSelector,
verticalHorizontalModeState,
} from '@/store/canvasAtom'
import { useRecoilState, useRecoilValue } from 'recoil'
import { adsorptionRangeState, canvasState } from '@/store/canvasAtom'
import { useEvent } from '@/hooks/useEvent'
import { useMouse } from '@/hooks/useMouse'
import { useLine } from '@/hooks/useLine'
import { useTempGrid } from '@/hooks/useTempGrid'
import {
OUTER_LINE_TYPE,
outerLineAngle1State,
outerLineAngle2State,
outerLineArrow1State,
@ -23,14 +15,15 @@ import {
outerLineLength2State,
outerLineTypeState,
} from '@/store/outerLineAtom'
import { calculateDistance, calculateIntersection, distanceBetweenPoints, findClosestPoint, polygonToTurfPolygon } from '@/util/canvas-util'
import { calculateIntersection, distanceBetweenPoints, findClosestPoint, polygonToTurfPolygon } from '@/util/canvas-util'
import { fabric } from 'fabric'
import { useAdsorptionPoint } from '@/hooks/useAdsorptionPoint'
import { useSwal } from '@/hooks/useSwal'
import { booleanPointInPolygon } from '@turf/turf'
import { usePopup } from '@/hooks/usePopup'
// 보조선 작성
export function useAuxiliaryDrawing(setShowAuxiliaryModal) {
export function useAuxiliaryDrawing(id) {
const canvas = useRecoilValue(canvasState)
const { addCanvasMouseEventListener, addDocumentEventListener, removeMouseLine, initEvent } = useEvent()
const { getIntersectMousePoint } = useMouse()
@ -38,6 +31,7 @@ export function useAuxiliaryDrawing(setShowAuxiliaryModal) {
const { tempGridMode } = useTempGrid()
const { swalFire } = useSwal()
const { getAdsorptionPoints } = useAdsorptionPoint()
const { closePopup } = usePopup()
const adsorptionRange = useRecoilValue(adsorptionRangeState)
@ -86,7 +80,7 @@ export function useAuxiliaryDrawing(setShowAuxiliaryModal) {
const roofs = canvas?.getObjects().filter((obj) => obj.name === 'roofBase')
if (roofs.length === 0) {
swalFire({ text: '지붕형상이 없습니다.' })
setShowAuxiliaryModal(false)
closePopup(id)
return
}
@ -653,7 +647,7 @@ export function useAuxiliaryDrawing(setShowAuxiliaryModal) {
roofBase.innerLines = [...roofInnerLines]
})
setShowAuxiliaryModal(false)
closePopup(id)
}
return {

6
src/hooks/roofcover/useEavesGableEdit.js
View File

@ -8,12 +8,14 @@ import { useLine } from '@/hooks/useLine'
import { useMode } from '@/hooks/useMode'
import { outerLineFixState } from '@/store/outerLineAtom'
import { useSwal } from '@/hooks/useSwal'
import { usePopup } from '@/hooks/usePopup'
// 처마.케라바 변경
export function useEavesGableEdit(setShowEavesGableEditModal) {
export function useEavesGableEdit(id) {
const canvas = useRecoilValue(canvasState)
const { getMessage } = useMessage()
const { addCanvasMouseEventListener, initEvent } = useEvent()
const { closePopup } = usePopup()
const TYPES = {
EAVES: 'eaves',
GABLE: 'gable',
@ -44,7 +46,7 @@ export function useEavesGableEdit(setShowEavesGableEditModal) {
const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
if (!outerLineFix || outerLines.length === 0) {
swalFire({ text: '외벽선이 없습니다.' })
setShowEavesGableEditModal(false)
closePopup(id)
}
}, [])

116
src/hooks/roofcover/useOuterLineWall.js
View File

@ -1,12 +1,11 @@
import { useEffect, useRef } from 'react'
import { distanceBetweenPoints, getDegreeByChon } from '@/util/canvas-util'
import { distanceBetweenPoints } from '@/util/canvas-util'
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
import {
adsorptionPointAddModeState,
adsorptionPointModeState,
adsorptionRangeState,
canvasState,
currentCanvasPlanState,
dotLineIntervalSelector,
verticalHorizontalModeState,
} from '@/store/canvasAtom'
@ -29,11 +28,12 @@ import {
} from '@/store/outerLineAtom'
import { calculateAngle } from '@/util/qpolygon-utils'
import { fabric } from 'fabric'
import { QLine } from '@/components/fabric/QLine'
import { outlineDisplaySelector } from '@/store/settingAtom'
import { usePopup } from '@/hooks/usePopup'
import PropertiesSetting from '@/components/floor-plan/modal/outerlinesetting/PropertiesSetting'
//외벽선 그리기
export function useOuterLineWall(setShowOutlineModal) {
export function useOuterLineWall(id, propertiesId) {
const canvas = useRecoilValue(canvasState)
const {
initEvent,
@ -71,6 +71,7 @@ export function useOuterLineWall(setShowOutlineModal) {
const [outerLineDiagonalLength, setOuterLineDiagonalLength] = useRecoilState(outerLineDiagonalState)
const arrow1Ref = useRef(arrow1)
const arrow2Ref = useRef(arrow2)
const { addPopup, closePopup } = usePopup()
const setOuterLineFix = useSetRecoilState(outerLineFixState)
@ -221,7 +222,8 @@ export function useOuterLineWall(setShowOutlineModal) {
removeAllDocumentEventListeners()
canvas?.renderAll()
setOuterLineFix(true)
setShowOutlineModal(false)
closePopup(id)
addPopup(propertiesId, 1, <PropertiesSetting id={propertiesId} pos={{ x: 50, y: 230 }} />)
}
if (points.length < 3) {
@ -419,56 +421,104 @@ export function useOuterLineWall(setShowOutlineModal) {
if (prev.length === 0) {
return []
}
return [...prev, { x: prev[prev.length - 1].x + length1Value / 10, y: prev[prev.length - 1].y + length2Value / 10 }]
return [
...prev,
{
x: prev[prev.length - 1].x + length1Value / 10,
y: prev[prev.length - 1].y + length2Value / 10,
},
]
})
} else if (arrow1Value === '↓' && arrow2Value === '←') {
setPoints((prev) => {
if (prev.length === 0) {
return []
}
return [...prev, { x: prev[prev.length - 1].x - length1Value / 10, y: prev[prev.length - 1].y + length2Value / 10 }]
return [
...prev,
{
x: prev[prev.length - 1].x - length1Value / 10,
y: prev[prev.length - 1].y + length2Value / 10,
},
]
})
} else if (arrow1Value === '↑' && arrow2Value === '→') {
setPoints((prev) => {
if (prev.length === 0) {
return []
}
return [...prev, { x: prev[prev.length - 1].x + length1Value / 10, y: prev[prev.length - 1].y - length2Value / 10 }]
return [
...prev,
{
x: prev[prev.length - 1].x + length1Value / 10,
y: prev[prev.length - 1].y - length2Value / 10,
},
]
})
} else if (arrow1Value === '↑' && arrow2Value === '←') {
setPoints((prev) => {
if (prev.length === 0) {
return []
}
return [...prev, { x: prev[prev.length - 1].x - length1Value / 10, y: prev[prev.length - 1].y - length2Value / 10 }]
return [
...prev,
{
x: prev[prev.length - 1].x - length1Value / 10,
y: prev[prev.length - 1].y - length2Value / 10,
},
]
})
} else if (arrow1Value === '→' && arrow2Value === '↓') {
setPoints((prev) => {
if (prev.length === 0) {
return []
}
return [...prev, { x: prev[prev.length - 1].x + length2Value / 10, y: prev[prev.length - 1].y + length1Value / 10 }]
return [
...prev,
{
x: prev[prev.length - 1].x + length2Value / 10,
y: prev[prev.length - 1].y + length1Value / 10,
},
]
})
} else if (arrow1Value === '→' && arrow2Value === '↑') {
setPoints((prev) => {
if (prev.length === 0) {
return []
}
return [...prev, { x: prev[prev.length - 1].x + length2Value / 10, y: prev[prev.length - 1].y - length1Value / 10 }]
return [
...prev,
{
x: prev[prev.length - 1].x + length2Value / 10,
y: prev[prev.length - 1].y - length1Value / 10,
},
]
})
} else if (arrow1Value === '←' && arrow2Value === '↓') {
setPoints((prev) => {
if (prev.length === 0) {
return []
}
return [...prev, { x: prev[prev.length - 1].x - length2Value / 10, y: prev[prev.length - 1].y + length1Value / 10 }]
return [
...prev,
{
x: prev[prev.length - 1].x - length2Value / 10,
y: prev[prev.length - 1].y + length1Value / 10,
},
]
})
} else if (arrow1Value === '←' && arrow2Value === '↑') {
setPoints((prev) => {
if (prev.length === 0) {
return []
}
return [...prev, { x: prev[prev.length - 1].x - length2Value / 10, y: prev[prev.length - 1].y - length1Value / 10 }]
return [
...prev,
{
x: prev[prev.length - 1].x - length2Value / 10,
y: prev[prev.length - 1].y - length1Value / 10,
},
]
})
}
@ -524,35 +574,65 @@ export function useOuterLineWall(setShowOutlineModal) {
if (prev.length === 0) {
return []
}
return [...prev, { x: prev[prev.length - 1].x + length2Value / 10, y: prev[prev.length - 1].y + length1Value / 10 }]
return [
...prev,
{
x: prev[prev.length - 1].x + length2Value / 10,
y: prev[prev.length - 1].y + length1Value / 10,
},
]
})
} else if (arrow1Value === '↓' && arrow2Value === '←') {
setPoints((prev) => {
if (prev.length === 0) {
return []
}
return [...prev, { x: prev[prev.length - 1].x - length2Value / 10, y: prev[prev.length - 1].y + length1Value / 10 }]
return [
...prev,
{
x: prev[prev.length - 1].x - length2Value / 10,
y: prev[prev.length - 1].y + length1Value / 10,
},
]
})
} else if (arrow1Value === '↑' && arrow2Value === '→') {
setPoints((prev) => {
if (prev.length === 0) {
return []
}
return [...prev, { x: prev[prev.length - 1].x + length2Value / 10, y: prev[prev.length - 1].y - length1Value / 10 }]
return [
...prev,
{
x: prev[prev.length - 1].x + length2Value / 10,
y: prev[prev.length - 1].y - length1Value / 10,
},
]
})
} else if (arrow1Value === '↑' && arrow2Value === '←') {
setPoints((prev) => {
if (prev.length === 0) {
return []
}
return [...prev, { x: prev[prev.length - 1].x - length2Value / 10, y: prev[prev.length - 1].y - length1Value / 10 }]
return [
...prev,
{
x: prev[prev.length - 1].x - length2Value / 10,
y: prev[prev.length - 1].y - length1Value / 10,
},
]
})
} else if (arrow1Value === '→' && arrow2Value === '↓') {
setPoints((prev) => {
if (prev.length === 0) {
return []
}
return [...prev, { x: prev[prev.length - 1].x + length1Value / 10, y: prev[prev.length - 1].y + length2Value / 10 }]
return [
...prev,
{
x: prev[prev.length - 1].x + length1Value / 10,
y: prev[prev.length - 1].y + length2Value / 10,
},
]
})
} else if (arrow1Value === '→' && arrow2Value === '↑') {
setPoints((prev) => {

9
src/hooks/roofcover/usePropertiesSetting.js
View File

@ -1,14 +1,15 @@
import { useEffect, useRef } from 'react'
import { LINE_TYPE } from '@/common/common'
import { useRecoilState, useRecoilValue, useResetRecoilState } from 'recoil'
import { useRecoilValue, useResetRecoilState } from 'recoil'
import { canvasState, currentObjectState } from '@/store/canvasAtom'
import { useMode } from '@/hooks/useMode'
import { usePolygon } from '@/hooks/usePolygon'
import { useLine } from '@/hooks/useLine'
import { outerLinePointsState } from '@/store/outerLineAtom'
import { usePopup } from '@/hooks/usePopup'
// 외벽선 속성 설정
export function usePropertiesSetting(setShowPropertiesSettingModal) {
export function usePropertiesSetting(id) {
const canvas = useRecoilValue(canvasState)
const currentObject = useRecoilValue(currentObjectState)
@ -18,6 +19,7 @@ export function usePropertiesSetting(setShowPropertiesSettingModal) {
const { addPolygonByLines } = usePolygon()
const { removeLine, hideLine } = useLine()
const { closePopup } = usePopup()
useEffect(() => {
const lines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
@ -142,6 +144,7 @@ export function usePropertiesSetting(setShowPropertiesSettingModal) {
setPoints([])
canvas.renderAll()
roof.drawHelpLine()
closePopup(id)
}
const closeModal = (fn) => {
@ -161,7 +164,7 @@ export function usePropertiesSetting(setShowPropertiesSettingModal) {
canvas.renderAll()
setPoints([])
setShowPropertiesSettingModal(false)
closePopup(id)
}
return { handleSetEaves, handleSetGable, handleRollback, handleFix, closeModal }

8
src/hooks/roofcover/useRoofAllocationSetting.js
View File

@ -5,11 +5,13 @@ import { setSurfaceShapePattern } from '@/util/canvas-util'
import { splitPolygonWithLines } from '@/util/qpolygon-utils'
import { useSwal } from '@/hooks/useSwal'
import { usePolygon } from '@/hooks/usePolygon'
import { usePopup } from '@/hooks/usePopup'
// 지붕면 할당
export function useRoofAllocationSetting(setShowRoofAllocationSettingModal) {
export function useRoofAllocationSetting(id) {
const canvas = useRecoilValue(canvasState)
const { drawDirectionArrow } = usePolygon()
const { closePopup } = usePopup()
const { swalFire } = useSwal()
@ -80,7 +82,7 @@ export function useRoofAllocationSetting(setShowRoofAllocationSettingModal) {
const roofBases = canvas.getObjects().filter((obj) => obj.name === 'roofBase')
if (roofBases.length === 0) {
swalFire({ text: '할당할 지붕이 없습니다.' })
setShowRoofAllocationSettingModal(false)
closePopup(id)
}
}, [])
@ -120,7 +122,7 @@ export function useRoofAllocationSetting(setShowRoofAllocationSettingModal) {
setSurfaceShapePattern(roof)
drawDirectionArrow(roof)
})
setShowRoofAllocationSettingModal(false)
closePopup(id)
}
const handleRadioOnChange = (e) => {

13
src/hooks/roofcover/useRoofShapePassivitySetting.js
View File

@ -9,9 +9,10 @@ import { useMode } from '@/hooks/useMode'
import { usePolygon } from '@/hooks/usePolygon'
import { outerLineFixState } from '@/store/outerLineAtom'
import { useSwal } from '@/hooks/useSwal'
import { usePopup } from '@/hooks/usePopup'
//지붕형상 수동 설정
export function useRoofShapePassivitySetting(setShowRoofShapePassivitySettingModal) {
export function useRoofShapePassivitySetting(id) {
const TYPES = {
EAVES: 'eaves',
GABLE: 'gable',
@ -28,16 +29,12 @@ export function useRoofShapePassivitySetting(setShowRoofShapePassivitySettingMod
const offsetRef = useRef(null)
const pitchRef = useRef(null)
const currentLineRef = useRef(null)
const history = useRef([])
const [type, setType] = useState(TYPES.EAVES)
const isFix = useRef(false)
const initLines = useRef([])
const [isLoading, setIsLoading] = useState(false)
const { closePopup } = usePopup()
const buttons = [
{ id: 1, name: getMessage('eaves'), type: TYPES.EAVES },
{ id: 2, name: getMessage('gable'), type: TYPES.GABLE },
@ -50,7 +47,7 @@ export function useRoofShapePassivitySetting(setShowRoofShapePassivitySettingMod
const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
if (!outerLineFix || outerLines.length === 0) {
swalFire({ text: '외벽선이 없습니다.' })
setShowRoofShapePassivitySettingModal(false)
closePopup(id)
return
}
setIsLoading(true)
@ -180,7 +177,7 @@ export function useRoofShapePassivitySetting(setShowRoofShapePassivitySettingMod
isFix.current = true
handleLineToPolygon()
setShowRoofShapePassivitySettingModal(false)
closePopup(id)
}
const handleLineToPolygon = () => {

12
src/hooks/roofcover/useRoofShapeSetting.js
View File

@ -2,15 +2,16 @@ import { useEffect, useRef, useState } from 'react'
import { useMessage } from '@/hooks/useMessage'
import { useRecoilValue, useSetRecoilState } from 'recoil'
import { canvasState, currentMenuState, currentObjectState } from '@/store/canvasAtom'
import { LINE_TYPE, MENU } from '@/common/common'
import { LINE_TYPE } from '@/common/common'
import { usePolygon } from '@/hooks/usePolygon'
import { useMode } from '@/hooks/useMode'
import { useLine } from '@/hooks/useLine'
import { outerLineFixState } from '@/store/outerLineAtom'
import { useSwal } from '@/hooks/useSwal'
import { usePopup } from '@/hooks/usePopup'
// 지붕형상 설정
export function useRoofShapeSetting(setShowRoofShapeSettingModal) {
export function useRoofShapeSetting(id) {
const [shapeNum, setShapeNum] = useState(1)
const [buttonAct, setButtonAct] = useState(1)
const { swalFire } = useSwal()
@ -34,12 +35,14 @@ export function useRoofShapeSetting(setShowRoofShapeSettingModal) {
const outerLineFix = useRecoilValue(outerLineFixState)
const history = useRef([])
const { closePopup } = usePopup()
useEffect(() => {
const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
if (!outerLineFix || outerLines.length === 0) {
swalFire({ text: '외벽선이 없습니다.' })
setShowRoofShapeSettingModal(false)
// setShowRoofShapeSettingModal(false)
closePopup(id)
}
}, [])
@ -259,7 +262,8 @@ export function useRoofShapeSetting(setShowRoofShapeSettingModal) {
canvas?.renderAll()
roof.drawHelpLine()
setShowRoofShapeSettingModal(false)
// setShowRoofShapeSettingModal(false)
closePopup(id)
}
const initLineSetting = () => {

6
src/hooks/roofcover/useWallLineOffsetSetting.js
View File

@ -5,12 +5,14 @@ import { useMessage } from '@/hooks/useMessage'
import { useEvent } from '@/hooks/useEvent'
import { useLine } from '@/hooks/useLine'
import { useSwal } from '@/hooks/useSwal'
import { usePopup } from '@/hooks/usePopup'
// 외벽선 편집 및 오프셋
export function useWallLineOffsetSetting(setShowWallLineOffsetSettingModal) {
export function useWallLineOffsetSetting(id) {
const canvas = useRecoilValue(canvasState)
const { showLine, addLine } = useLine()
const { getMessage } = useMessage()
const { closePopup } = usePopup()
const { swalFire } = useSwal()
const { addCanvasMouseEventListener, initEvent } = useEvent()
const wallLineEditRef = useRef(null)
@ -58,7 +60,7 @@ export function useWallLineOffsetSetting(setShowWallLineOffsetSettingModal) {
const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
if (outerLines.length === 0) {
swalFire({ text: '외벽선이 없습니다.' })
setShowWallLineOffsetSettingModal(false)
closePopup(id)
return
}
outerLines.forEach((outerLine) => {

113
src/hooks/surface/usePlacementShapeDrawing.js
View File

@ -29,9 +29,10 @@ import {
} from '@/store/placementShapeDrawingAtom'
import { usePolygon } from '@/hooks/usePolygon'
import { POLYGON_TYPE } from '@/common/common'
import { usePopup } from '@/hooks/usePopup'
// 면형상 배치
export function usePlacementShapeDrawing(setShowPlaceShapeDrawingModal) {
export function usePlacementShapeDrawing(id) {
const canvas = useRecoilValue(canvasState)
const { addCanvasMouseEventListener, addDocumentEventListener, removeAllMouseEventListeners, removeAllDocumentEventListeners, removeMouseEvent } =
useEvent()
@ -62,11 +63,11 @@ export function usePlacementShapeDrawing(setShowPlaceShapeDrawingModal) {
const setOuterLineFix = useSetRecoilState(placementShapeDrawingFixState)
const arrow1Ref = useRef(arrow1)
const arrow2Ref = useRef(arrow2)
const outerLineDiagonalLengthRef = useRef(null)
const isFix = useRef(false)
const { closePopup } = usePopup()
useEffect(() => {
if (adsorptionPointAddMode || tempGridMode) {
return
@ -225,7 +226,7 @@ export function usePlacementShapeDrawing(setShowPlaceShapeDrawingModal) {
})
canvas?.renderAll()
setShowPlaceShapeDrawingModal(false)
closePopup(id)
}
if (points.length < 3) {
@ -419,56 +420,104 @@ export function usePlacementShapeDrawing(setShowPlaceShapeDrawingModal) {
if (prev.length === 0) {
return []
}
return [...prev, { x: prev[prev.length - 1].x + length1Value / 10, y: prev[prev.length - 1].y + length2Value / 10 }]
return [
...prev,
{
x: prev[prev.length - 1].x + length1Value / 10,
y: prev[prev.length - 1].y + length2Value / 10,
},
]
})
} else if (arrow1Value === '↓' && arrow2Value === '←') {
setPoints((prev) => {
if (prev.length === 0) {
return []
}
return [...prev, { x: prev[prev.length - 1].x - length1Value / 10, y: prev[prev.length - 1].y + length2Value / 10 }]
return [
...prev,
{
x: prev[prev.length - 1].x - length1Value / 10,
y: prev[prev.length - 1].y + length2Value / 10,
},
]
})
} else if (arrow1Value === '↑' && arrow2Value === '→') {
setPoints((prev) => {
if (prev.length === 0) {
return []
}
return [...prev, { x: prev[prev.length - 1].x + length1Value / 10, y: prev[prev.length - 1].y - length2Value / 10 }]
return [
...prev,
{
x: prev[prev.length - 1].x + length1Value / 10,
y: prev[prev.length - 1].y - length2Value / 10,
},
]
})
} else if (arrow1Value === '↑' && arrow2Value === '←') {
setPoints((prev) => {
if (prev.length === 0) {
return []
}
return [...prev, { x: prev[prev.length - 1].x - length1Value / 10, y: prev[prev.length - 1].y - length2Value / 10 }]
return [
...prev,
{
x: prev[prev.length - 1].x - length1Value / 10,
y: prev[prev.length - 1].y - length2Value / 10,
},
]
})
} else if (arrow1Value === '→' && arrow2Value === '↓') {
setPoints((prev) => {
if (prev.length === 0) {
return []
}
return [...prev, { x: prev[prev.length - 1].x + length2Value / 10, y: prev[prev.length - 1].y + length1Value / 10 }]
return [
...prev,
{
x: prev[prev.length - 1].x + length2Value / 10,
y: prev[prev.length - 1].y + length1Value / 10,
},
]
})
} else if (arrow1Value === '→' && arrow2Value === '↑') {
setPoints((prev) => {
if (prev.length === 0) {
return []
}
return [...prev, { x: prev[prev.length - 1].x + length2Value / 10, y: prev[prev.length - 1].y - length1Value / 10 }]
return [
...prev,
{
x: prev[prev.length - 1].x + length2Value / 10,
y: prev[prev.length - 1].y - length1Value / 10,
},
]
})
} else if (arrow1Value === '←' && arrow2Value === '↓') {
setPoints((prev) => {
if (prev.length === 0) {
return []
}
return [...prev, { x: prev[prev.length - 1].x - length2Value / 10, y: prev[prev.length - 1].y + length1Value / 10 }]
return [
...prev,
{
x: prev[prev.length - 1].x - length2Value / 10,
y: prev[prev.length - 1].y + length1Value / 10,
},
]
})
} else if (arrow1Value === '←' && arrow2Value === '↑') {
setPoints((prev) => {
if (prev.length === 0) {
return []
}
return [...prev, { x: prev[prev.length - 1].x - length2Value / 10, y: prev[prev.length - 1].y - length1Value / 10 }]
return [
...prev,
{
x: prev[prev.length - 1].x - length2Value / 10,
y: prev[prev.length - 1].y - length1Value / 10,
},
]
})
}
@ -524,35 +573,65 @@ export function usePlacementShapeDrawing(setShowPlaceShapeDrawingModal) {
if (prev.length === 0) {
return []
}
return [...prev, { x: prev[prev.length - 1].x + length2Value / 10, y: prev[prev.length - 1].y + length1Value / 10 }]
return [
...prev,
{
x: prev[prev.length - 1].x + length2Value / 10,
y: prev[prev.length - 1].y + length1Value / 10,
},
]
})
} else if (arrow1Value === '↓' && arrow2Value === '←') {
setPoints((prev) => {
if (prev.length === 0) {
return []
}
return [...prev, { x: prev[prev.length - 1].x - length2Value / 10, y: prev[prev.length - 1].y + length1Value / 10 }]
return [
...prev,
{
x: prev[prev.length - 1].x - length2Value / 10,
y: prev[prev.length - 1].y + length1Value / 10,
},
]
})
} else if (arrow1Value === '↑' && arrow2Value === '→') {
setPoints((prev) => {
if (prev.length === 0) {
return []
}
return [...prev, { x: prev[prev.length - 1].x + length2Value / 10, y: prev[prev.length - 1].y - length1Value / 10 }]
return [
...prev,
{
x: prev[prev.length - 1].x + length2Value / 10,
y: prev[prev.length - 1].y - length1Value / 10,
},
]
})
} else if (arrow1Value === '↑' && arrow2Value === '←') {
setPoints((prev) => {
if (prev.length === 0) {
return []
}
return [...prev, { x: prev[prev.length - 1].x - length2Value / 10, y: prev[prev.length - 1].y - length1Value / 10 }]
return [
...prev,
{
x: prev[prev.length - 1].x - length2Value / 10,
y: prev[prev.length - 1].y - length1Value / 10,
},
]
})
} else if (arrow1Value === '→' && arrow2Value === '↓') {
setPoints((prev) => {
if (prev.length === 0) {
return []
}
return [...prev, { x: prev[prev.length - 1].x + length1Value / 10, y: prev[prev.length - 1].y + length2Value / 10 }]
return [
...prev,
{
x: prev[prev.length - 1].x + length1Value / 10,
y: prev[prev.length - 1].y + length2Value / 10,
},
]
})
} else if (arrow1Value === '→' && arrow2Value === '↑') {
setPoints((prev) => {

85
src/hooks/surface/useSurfaceShapeBatch.js
View File

@ -2,13 +2,14 @@
import { useRecoilValue } from 'recoil'
import { canvasState } from '@/store/canvasAtom'
import { MENU, BATCH_TYPE, POLYGON_TYPE } from '@/common/common'
import { BATCH_TYPE, MENU, POLYGON_TYPE } from '@/common/common'
import { getIntersectionPoint, setSurfaceShapePattern } from '@/util/canvas-util'
import { degreesToRadians } from '@turf/turf'
import { QPolygon } from '@/components/fabric/QPolygon'
import { useSwal } from '@/hooks/useSwal'
import { useMessage } from '@/hooks/useMessage'
import { useEvent } from '@/hooks/useEvent'
import { usePopup } from '@/hooks/usePopup'
export function useSurfaceShapeBatch() {
const { getMessage } = useMessage()
@ -16,8 +17,9 @@ export function useSurfaceShapeBatch() {
const canvas = useRecoilValue(canvasState)
const { swalFire } = useSwal()
const { addCanvasMouseEventListener, initEvent } = useEvent()
const { closePopup } = usePopup()
const applySurfaceShape = (surfaceRefs, selectedType, setShowPlacementSurfaceSettingModal) => {
const applySurfaceShape = (surfaceRefs, selectedType, id) => {
let length1, length2, length3, length4, length5
const surfaceId = selectedType?.id
const azimuth = surfaceRefs.azimuth.current
@ -56,7 +58,6 @@ export function useSurfaceShapeBatch() {
let obj = null
let points = []
if (checkSurfaceShape(surfaceId, { length1, length2, length3, length4, length5 })) {
setShowPlacementSurfaceSettingModal(false)
addCanvasMouseEventListener('mouse:move', (e) => {
if (!isDrawing) {
return
@ -111,6 +112,7 @@ export function useSurfaceShapeBatch() {
obj.set({ originAngle: originAngle })
canvas?.renderAll()
closePopup(id)
})
addCanvasMouseEventListener('mouse:down', (e) => {
@ -118,7 +120,7 @@ export function useSurfaceShapeBatch() {
obj.set('name', POLYGON_TYPE.ROOF)
initEvent()
setSurfaceShapePattern(obj)
setShowPlacementSurfaceSettingModal(true)
closePopup(id)
})
}
}
@ -292,8 +294,14 @@ export function useSurfaceShapeBatch() {
const angleInRadians = Math.asin(length2 / length3)
points = [
{ x: pointer.x - length1 / 2, y: pointer.y + length2 / 2 },
{ x: pointer.x - length1 / 2 + length3 * Math.cos(angleInRadians), y: pointer.y + length2 / 2 - length3 * Math.sin(angleInRadians) },
{ x: pointer.x + length1 / 2 + length3 * Math.cos(angleInRadians), y: pointer.y + length2 / 2 - length3 * Math.sin(angleInRadians) },
{
x: pointer.x - length1 / 2 + length3 * Math.cos(angleInRadians),
y: pointer.y + length2 / 2 - length3 * Math.sin(angleInRadians),
},
{
x: pointer.x + length1 / 2 + length3 * Math.cos(angleInRadians),
y: pointer.y + length2 / 2 - length3 * Math.sin(angleInRadians),
},
{ x: pointer.x + length1 / 2, y: pointer.y + length2 / 2 },
]
@ -304,9 +312,18 @@ export function useSurfaceShapeBatch() {
{ x: pointer.x - (length1 + length2 + length3) / 2, y: pointer.y - (length4 + length5) / 2 },
{ x: pointer.x - (length1 + length2 + length3) / 2, y: pointer.y + (length4 + length5) / 2 },
{ x: pointer.x - (length1 + length2 + length3) / 2 + length1, y: pointer.y + (length4 + length5) / 2 },
{ x: pointer.x - (length1 + length2 + length3) / 2 + length1, y: pointer.y + (length4 + length5) / 2 - length5 },
{ x: pointer.x - (length1 + length2 + length3) / 2 + length1 + length2, y: pointer.y + (length4 + length5) / 2 - length5 },
{ x: pointer.x - (length1 + length2 + length3) / 2 + length1 + length2, y: pointer.y + (length4 + length5) / 2 - length5 + length5 },
{
x: pointer.x - (length1 + length2 + length3) / 2 + length1,
y: pointer.y + (length4 + length5) / 2 - length5,
},
{
x: pointer.x - (length1 + length2 + length3) / 2 + length1 + length2,
y: pointer.y + (length4 + length5) / 2 - length5,
},
{
x: pointer.x - (length1 + length2 + length3) / 2 + length1 + length2,
y: pointer.y + (length4 + length5) / 2 - length5 + length5,
},
{
x: pointer.x - (length1 + length2 + length3) / 2 + length1 + length2 + length3,
y: pointer.y + (length4 + length5) / 2 - length5 + length5,
@ -325,8 +342,14 @@ export function useSurfaceShapeBatch() {
{ x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 },
{ x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 - length3 },
{ x: pointer.x - length1 / 2 + length1 - (length1 - length2), y: pointer.y + length4 / 2 - length3 },
{ x: pointer.x - length1 / 2 + length1 - (length1 - length2), y: pointer.y + length4 / 2 - length3 + (length3 - length4) },
{ x: pointer.x - length1 / 2 + length1 - (length1 - length2) - length2, y: pointer.y + length4 / 2 - length3 + (length3 - length4) },
{
x: pointer.x - length1 / 2 + length1 - (length1 - length2),
y: pointer.y + length4 / 2 - length3 + (length3 - length4),
},
{
x: pointer.x - length1 / 2 + length1 - (length1 - length2) - length2,
y: pointer.y + length4 / 2 - length3 + (length3 - length4),
},
]
break
@ -337,8 +360,14 @@ export function useSurfaceShapeBatch() {
{ x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 },
{ x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 - length4 },
{ x: pointer.x - length1 / 2 + length1 - length3, y: pointer.y + length4 / 2 - length4 },
{ x: pointer.x - length1 / 2 + length1 - length3, y: pointer.y + length4 / 2 - length4 + (length4 - length5) },
{ x: pointer.x - length1 / 2 + length1 - length3 - length2, y: pointer.y + length4 / 2 - length4 + (length4 - length5) },
{
x: pointer.x - length1 / 2 + length1 - length3,
y: pointer.y + length4 / 2 - length4 + (length4 - length5),
},
{
x: pointer.x - length1 / 2 + length1 - length3 - length2,
y: pointer.y + length4 / 2 - length4 + (length4 - length5),
},
]
break
}
@ -348,8 +377,14 @@ export function useSurfaceShapeBatch() {
{ x: pointer.x + length1 / 2 - length1, y: pointer.y + length4 / 2 },
{ x: pointer.x + length1 / 2 - length1, y: pointer.y + length4 / 2 - length5 },
{ x: pointer.x + length1 / 2 - length1 + length2, y: pointer.y + length4 / 2 - length5 },
{ x: pointer.x + length1 / 2 - length1 + length2, y: pointer.y + length4 / 2 - length5 - (length4 - length5) },
{ x: pointer.x + length1 / 2 - length1 + length2 + length3, y: pointer.y + length4 / 2 - length5 - (length4 - length5) },
{
x: pointer.x + length1 / 2 - length1 + length2,
y: pointer.y + length4 / 2 - length5 - (length4 - length5),
},
{
x: pointer.x + length1 / 2 - length1 + length2 + length3,
y: pointer.y + length4 / 2 - length5 - (length4 - length5),
},
]
break
}
@ -359,8 +394,14 @@ export function useSurfaceShapeBatch() {
{ x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 },
{ x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 - length5 },
{ x: pointer.x - length1 / 2 + length1 - length2, y: pointer.y + length4 / 2 - length5 },
{ x: pointer.x - length1 / 2 + length1 - length2, y: pointer.y + length4 / 2 - length5 - (length4 - length5) },
{ x: pointer.x - length1 / 2 + length1 - length2 - length3, y: pointer.y + length4 / 2 - length5 - (length4 - length5) },
{
x: pointer.x - length1 / 2 + length1 - length2,
y: pointer.y + length4 / 2 - length5 - (length4 - length5),
},
{
x: pointer.x - length1 / 2 + length1 - length2 - length3,
y: pointer.y + length4 / 2 - length5 - (length4 - length5),
},
]
break
}
@ -371,7 +412,10 @@ export function useSurfaceShapeBatch() {
const leftAngle = Math.acos((length1 - length2) / 2 / leftHypotenuse)
points = [
{ x: pointer.x - length1 / 2 + leftHypotenuse * Math.cos(leftAngle), y: pointer.y + length3 / 2 - leftHypotenuse * Math.sin(leftAngle) },
{
x: pointer.x - length1 / 2 + leftHypotenuse * Math.cos(leftAngle),
y: pointer.y + length3 / 2 - leftHypotenuse * Math.sin(leftAngle),
},
{ x: pointer.x - length1 / 2, y: pointer.y + length3 / 2 },
{ x: pointer.x + length1 / 2, y: pointer.y + length3 / 2 },
{
@ -459,7 +503,10 @@ export function useSurfaceShapeBatch() {
{ x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 - length4 },
{ x: pointer.x - length1 / 2 + length1, y: pointer.y + length4 / 2 - length4 + length4 },
{ x: pointer.x - length1 / 2 + length1 - length3, y: pointer.y + length4 / 2 - length4 + length4 },
{ x: pointer.x - length1 / 2 + length2 + (length1 - length2 - length3) / 2, y: pointer.y + length4 / 2 - length4 + length5 },
{
x: pointer.x - length1 / 2 + length2 + (length1 - length2 - length3) / 2,
y: pointer.y + length4 / 2 - length4 + length5,
},
]
break
}

3
src/hooks/useContextMenu.js
View File

@ -165,10 +165,7 @@ export function useContextMenu({ externalFn }) {
}, [currentMenu])
useEffect(() => {
console.log('currentObject', currentObject)
console.log('currentMenu', currentMenu)
if (currentObject?.name) {
console.log(currentObject)
switch (currentObject.name) {
case 'triangleDormer':
setContextMenu([

16
src/hooks/usePopup.js
View File

@ -14,7 +14,21 @@ export function usePopup() {
}
const closePopup = (id) => {
setPopup({ children: [...popup.children.filter((child) => child.id !== id)] })
console.log(id)
setPopup({ children: [...filterChildrenPopup(id).filter((child) => child.id !== id)] })
}
const filterPopup = (depth) => {
setPopup({ children: [...filterDepth(depth)] })
}
const filterChildrenPopup = (id) => {
const target = popup.children.filter((child) => child.id === id)
if (target.length !== 0) {
return popup.children.filter((child) => child.depth <= target[0].depth)
}
return popup.children
}
const closePopups = (ids) => {