diff --git a/docs/dictionary.txt b/docs/dictionary.txt index 0864da77..6e81da01 100644 --- a/docs/dictionary.txt +++ b/docs/dictionary.txt @@ -24,4 +24,4 @@ Allpainted : allPainted 개구: openSpace 도머: dormer 그림자: shadow - +치수선: dimensionLine \ No newline at end of file diff --git a/src/components/common/color-picker/ColorPickerModal.jsx b/src/components/common/color-picker/ColorPickerModal.jsx index 22a3c5c4..add20a7e 100644 --- a/src/components/common/color-picker/ColorPickerModal.jsx +++ b/src/components/common/color-picker/ColorPickerModal.jsx @@ -3,9 +3,12 @@ import ColorPicker from '@/components/common/color-picker/ColorPicker' import { useMessage } from '@/hooks/useMessage' import { useEffect, useState } from 'react' import { usePopup } from '@/hooks/usePopup' +import { useRecoilValue } from 'recoil' +import { contextPopupPositionState } from '@/store/popupAtom' export default function ColorPickerModal(props) { - const { isShow, setIsShow, pos = { x: 770, y: -815 }, color = '#ff0000', setColor, id } = props + const contextPopupPosition = useRecoilValue(contextPopupPositionState) // 현재 메뉴 + const { isShow, setIsShow, pos = contextPopupPosition, color = '#ff0000', setColor, id } = props const { getMessage } = useMessage() const [originColor, setOriginColor] = useState(color) const { closePopup } = usePopup() @@ -15,14 +18,17 @@ export default function ColorPickerModal(props) { }, [isShow]) return ( - +

{getMessage('modal.color.picker.title')}

+ ))} diff --git a/src/components/floor-plan/CanvasFrame.jsx b/src/components/floor-plan/CanvasFrame.jsx index 6887d07a..e6261edc 100644 --- a/src/components/floor-plan/CanvasFrame.jsx +++ b/src/components/floor-plan/CanvasFrame.jsx @@ -16,7 +16,7 @@ export default function CanvasFrame({ plan }) { const canvasRef = useRef(null) const { canvas } = useCanvas('canvas') const { handleZoomClear } = useCanvasEvent() - const { contextMenu, currentContextMenu, setCurrentContextMenu } = useContextMenu({ + const { contextMenu, currentContextMenu, setCurrentContextMenu, handleClick } = useContextMenu({ externalFn: { handleZoomClear, }, @@ -59,7 +59,7 @@ export default function CanvasFrame({ plan }) { if (menu.fn) { menu.fn() } - setCurrentContextMenu(menu) + handleClick(e, menu) }} > {menu.name} @@ -68,7 +68,6 @@ export default function CanvasFrame({ plan }) { ))} - {currentContextMenu?.component}
) } diff --git a/src/components/floor-plan/FloorPlan.jsx b/src/components/floor-plan/FloorPlan.jsx index 655c7340..bc95d9b3 100644 --- a/src/components/floor-plan/FloorPlan.jsx +++ b/src/components/floor-plan/FloorPlan.jsx @@ -5,14 +5,13 @@ import { useRecoilState, useRecoilValue } from 'recoil' import { useAxios } from '@/hooks/useAxios' import { globalLocaleStore } from '@/store/localeAtom' 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 '@/styles/contents.scss' export default function FloorPlan() { const globalLocaleState = useRecoilValue(globalLocaleStore) const { get } = useAxios(globalLocaleState) - const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState) const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState) const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요 @@ -23,7 +22,6 @@ export default function FloorPlan() { menuNumber, setMenuNumber, } - useEffect(() => { console.log('FloorPlan useEffect 실행') fetchSettings() diff --git a/src/components/floor-plan/modal/auxiliary/AuxiliaryCopy.jsx b/src/components/floor-plan/modal/auxiliary/AuxiliaryCopy.jsx new file mode 100644 index 00000000..b88d7a3b --- /dev/null +++ b/src/components/floor-plan/modal/auxiliary/AuxiliaryCopy.jsx @@ -0,0 +1,55 @@ +import { useMessage } from '@/hooks/useMessage' +import WithDraggable from '@/components/common/draggable/WithDraggable' +import { usePopup } from '@/hooks/usePopup' +import { useRecoilValue } from 'recoil' +import { contextPopupPositionState } from '@/store/popupAtom' + +export default function AuxiliaryCopy(props) { + const contextPopupPosition = useRecoilValue(contextPopupPositionState) + const { id, pos = contextPopupPosition } = props + const { getMessage } = useMessage() + const { closePopup } = usePopup() + return ( + +
+
+

補助線のコピー

+ +
+
+
コピーする方向を入力してください
+
+
+
+

長さ

+
+
+ +
+ mm +
+
+
+ +
+ mm +
+
+
+ + + + +
+
+
+
+ +
+
+
+ + ) +} diff --git a/src/components/floor-plan/modal/auxiliary/AuxiliaryMove.jsx b/src/components/floor-plan/modal/auxiliary/AuxiliaryMove.jsx index 28674c07..9b4beb8f 100644 --- a/src/components/floor-plan/modal/auxiliary/AuxiliaryMove.jsx +++ b/src/components/floor-plan/modal/auxiliary/AuxiliaryMove.jsx @@ -1,14 +1,20 @@ import { useMessage } from '@/hooks/useMessage' import WithDraggable from '@/components/common/draggable/WithDraggable' +import { useRecoilValue } from 'recoil' +import { contextPopupPositionState } from '@/store/popupAtom' +import { usePopup } from '@/hooks/usePopup' -export default function AuxiliaryMove({ setCurrentContextMenu }) { +export default function AuxiliaryMove(props) { + const contextPopupPosition = useRecoilValue(contextPopupPositionState) + const { id, pos = contextPopupPosition } = props const { getMessage } = useMessage() + const { closePopup } = usePopup() return ( - +

補助線の移動

-
diff --git a/src/components/floor-plan/modal/auxiliary/AuxiliarySize.jsx b/src/components/floor-plan/modal/auxiliary/AuxiliarySize.jsx index c562e8dd..49cd2570 100644 --- a/src/components/floor-plan/modal/auxiliary/AuxiliarySize.jsx +++ b/src/components/floor-plan/modal/auxiliary/AuxiliarySize.jsx @@ -1,14 +1,20 @@ import { useMessage } from '@/hooks/useMessage' import WithDraggable from '@/components/common/draggable/WithDraggable' +import { usePopup } from '@/hooks/usePopup' +import { useRecoilValue } from 'recoil' +import { contextPopupPositionState } from '@/store/popupAtom' -export default function AuxiliarySize({ setCurrentContextMenu }) { +export default function AuxiliarySize(props) { + const contextPopupPosition = useRecoilValue(contextPopupPositionState) + const { id, pos = contextPopupPosition } = props const { getMessage } = useMessage() + const { closePopup } = usePopup() return ( - +

補助線サイズ変更

-
diff --git a/src/components/floor-plan/modal/basic/step/Orientation.jsx b/src/components/floor-plan/modal/basic/step/Orientation.jsx index 3ef15a21..98e10c0c 100644 --- a/src/components/floor-plan/modal/basic/step/Orientation.jsx +++ b/src/components/floor-plan/modal/basic/step/Orientation.jsx @@ -6,6 +6,19 @@ export default function Orientation({ setTabNum }) { const [compasDeg, setCompasDeg] = useState(0) const [hasAnglePassivity, setHasAnglePassivity] = useState(false) + const getDegree = (degree) => { + if (degree % 15 === 0) return degree + + let value = Math.floor(degree / 15) + const remain = ((degree / 15) % 1).toFixed(5) + + if (remain > 0.4) { + value++ + } + + return value * 15 + } + return ( <>
@@ -18,7 +31,7 @@ export default function Orientation({ setTabNum }) { {Array.from({ length: 180 / 15 }).map((dot, index) => (
setCompasDeg(15 * (12 + index))} > {index === 0 && 180°} @@ -26,13 +39,13 @@ export default function Orientation({ setTabNum }) {
))} {Array.from({ length: 180 / 15 }).map((dot, index) => ( -
setCompasDeg(15 * index)}> +
setCompasDeg(15 * index)}> {index === 0 && 0°} {index === 6 && 90°}
))}
-
+
diff --git a/src/components/floor-plan/modal/dimensionLine/DimensionLineSetting.jsx b/src/components/floor-plan/modal/dimensionLine/DimensionLineSetting.jsx new file mode 100644 index 00000000..57fe3364 --- /dev/null +++ b/src/components/floor-plan/modal/dimensionLine/DimensionLineSetting.jsx @@ -0,0 +1,74 @@ +import WithDraggable from '@/components/common/draggable/WithDraggable' +import { usePopup } from '@/hooks/usePopup' +import { useMessage } from '@/hooks/useMessage' +import { useRecoilValue } from 'recoil' +import { contextPopupPositionState } from '@/store/popupAtom' +import QSelectBox from '@/components/common/select/QSelectBox' + +export default function DimensionLineSetting(props) { + const contextPopupPosition = useRecoilValue(contextPopupPositionState) + const { id, setIsShow, pos = contextPopupPosition } = props + const { getMessage } = useMessage() + const { closePopup } = usePopup() + const SelectOption01 = [{ name: '0' }, { name: '0' }, { name: '0' }, { name: '0' }] + return ( + +
+
+

表示の変更

+ +
+
+
寸法線に表示する数値を入力してください
+
+
+
+ 既存の長さ +
+ +
+
+
+
+ 変更の長さ +
+ +
+
+
+
+ + +
+
+
+
+
傾斜を着せてください。
+
+
+ 傾斜 +
+ +
+ 寸法 +
+
+ 傾斜 +
+ +
+ 寸法 +
+
+
傾き設定されている場合、入力した数値に傾き計算をした数値が表示されます。
+
+
+ +
+
+
+ + ) +} diff --git a/src/components/floor-plan/modal/distance/Distance.jsx b/src/components/floor-plan/modal/distance/Distance.jsx new file mode 100644 index 00000000..06a7a483 --- /dev/null +++ b/src/components/floor-plan/modal/distance/Distance.jsx @@ -0,0 +1,67 @@ +import WithDraggable from '@/components/common/draggable/withDraggable' +import { useMessage } from '@/hooks/useMessage' +import { usePopup } from '@/hooks/usePopup' +import { useRecoilValue } from 'recoil' +import { contextPopupPositionState } from '@/store/popupAtom' + +export default function Distance(props) { + const contextPopupPosition = useRecoilValue(contextPopupPositionState) + const { id, pos = contextPopupPosition, distance } = props + const { getMessage } = useMessage() + const { closePopup } = usePopup() + + return ( + +
+
+

距離測定

+ +
+
+
+
+
+
2点間距離
+
+
+
+ +
+ mm +
+
+
+
+
水平距離
+
+
+
+ +
+ mm +
+
+
+
+
垂直距離
+
+
+
+ +
+ mm +
+
+
+
+
+
+ +
+
+
+ + ) +} diff --git a/src/components/floor-plan/modal/flowDirection/FlowDirectionSetting.jsx b/src/components/floor-plan/modal/flowDirection/FlowDirectionSetting.jsx new file mode 100644 index 00000000..ff749a6f --- /dev/null +++ b/src/components/floor-plan/modal/flowDirection/FlowDirectionSetting.jsx @@ -0,0 +1,150 @@ +import WithDraggable from '@/components/common/draggable/withDraggable' +import { useState } from 'react' +import QSelectBox from '@/components/common/select/QSelectBox' +import { useRecoilValue } from 'recoil' +import { contextPopupPositionState } from '@/store/popupAtom' +import { useMessage } from '@/hooks/useMessage' +import { usePopup } from '@/hooks/usePopup' + +const SelectOption01 = [{ name: 'M' }, { name: 'M' }, { name: 'M' }, { name: 'M' }] + +export default function FlowDirectionSetting(props) { + const contextPopupPosition = useRecoilValue(contextPopupPositionState) + const { id, pos = contextPopupPosition } = props + const { getMessage } = useMessage() + const { closePopup } = usePopup() + const [compasDeg, setCompasDeg] = useState(0) + return ( + +
+
+

面フローの設定

+ +
+
+
+
+
流れ方向の設定
+
流れ方向を選択してください。
+
+
+ 北 + ドン + 南 + 立つ + + + + +
+
+
+
+
方位設定
+
シミュレーション計算の方向を指定します。面が向いている方位を選択してください。
+
+
+ + +
+
+ +
+
+
+
+ + +
+
+
+
+
setCompasDeg(180)}> + 13 +
+
setCompasDeg(195)}> + 12 +
+
setCompasDeg(210)}> + 11 +
+
setCompasDeg(225)}> + 10 +
+
setCompasDeg(240)}> + 9 +
+
setCompasDeg(255)}> + 8 +
+
setCompasDeg(270)}> + 7 +
+
setCompasDeg(285)}> + 6 +
+
setCompasDeg(300)}> + 5 +
+
setCompasDeg(315)}> + 4 +
+
setCompasDeg(330)}> + 3 +
+
setCompasDeg(345)}> + 2 +
+
setCompasDeg(0)}> + 1 +
+
setCompasDeg(15)}> + 24 +
+
setCompasDeg(30)}> + 23 +
+
setCompasDeg(45)}> + 22 +
+
setCompasDeg(60)}> + 21 +
+
setCompasDeg(75)}> + 20 +
+
setCompasDeg(90)}> + 19 +
+
setCompasDeg(105)}> + 18 +
+
setCompasDeg(120)}> + 17 +
+
setCompasDeg(135)}> + 16 +
+
setCompasDeg(150)}> + 15 +
+
setCompasDeg(165)}> + 14 +
+
+
+
+
+
+
+
+
+ +
+
+
+ + ) +} diff --git a/src/components/floor-plan/modal/grid/GridCopy.jsx b/src/components/floor-plan/modal/grid/GridCopy.jsx index a6709d09..0f2bfc22 100644 --- a/src/components/floor-plan/modal/grid/GridCopy.jsx +++ b/src/components/floor-plan/modal/grid/GridCopy.jsx @@ -1,16 +1,21 @@ import WithDraggable from '@/components/common/draggable/WithDraggable' import { useMessage } from '@/hooks/useMessage' +import { usePopup } from '@/hooks/usePopup' +import { useRecoilValue } from 'recoil' +import { contextPopupPositionState } from '@/store/popupAtom' export default function GridCopy(props) { - const { setShowGridMoveModal, setShowGridCopyModal } = props + const contextPopupPosition = useRecoilValue(contextPopupPositionState) + const { id, pos = contextPopupPosition } = props const { getMessage } = useMessage() + const { closePopup } = usePopup() return ( - +

{getMessage('modal.grid.copy')}

-
diff --git a/src/components/floor-plan/modal/grid/GridMove.jsx b/src/components/floor-plan/modal/grid/GridMove.jsx index db226872..6d901fe3 100644 --- a/src/components/floor-plan/modal/grid/GridMove.jsx +++ b/src/components/floor-plan/modal/grid/GridMove.jsx @@ -1,16 +1,21 @@ import WithDraggable from '@/components/common/draggable/WithDraggable' import { useMessage } from '@/hooks/useMessage' +import { usePopup } from '@/hooks/usePopup' +import { useRecoilValue } from 'recoil' +import { contextPopupPositionState } from '@/store/popupAtom' export default function GridMove(props) { - const { setShowGridMoveModal, setShowGridCopyModal } = props + const contextPopupPosition = useRecoilValue(contextPopupPositionState) + const { id, pos = contextPopupPosition } = props const { getMessage } = useMessage() + const { closePopup } = usePopup() return ( - +

{getMessage('modal.grid.move')}

-
diff --git a/src/components/floor-plan/modal/lineProperty/LinePropertySetting.jsx b/src/components/floor-plan/modal/lineProperty/LinePropertySetting.jsx new file mode 100644 index 00000000..16871a19 --- /dev/null +++ b/src/components/floor-plan/modal/lineProperty/LinePropertySetting.jsx @@ -0,0 +1,104 @@ +import WithDraggable from '@/components/common/draggable/withDraggable' +import { useRecoilValue } from 'recoil' +import { contextPopupPositionState } from '@/store/popupAtom' +import { useMessage } from '@/hooks/useMessage' +import { usePopup } from '@/hooks/usePopup' + +export default function LinePropertySetting(props) { + const contextPopupPosition = useRecoilValue(contextPopupPositionState) + const { id, pos = contextPopupPosition } = props + const { getMessage } = useMessage() + const { closePopup } = usePopup() + return ( + +
+
+

各辺属性の変更

+ +
+
+
+ 属性を変更する辺を選択してください。 + 選択した値 [龍丸] +
+
+
設定
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+
+ +
+
+
+ + ) +} diff --git a/src/components/floor-plan/modal/object/DormerOffset.jsx b/src/components/floor-plan/modal/object/DormerOffset.jsx new file mode 100644 index 00000000..442e92df --- /dev/null +++ b/src/components/floor-plan/modal/object/DormerOffset.jsx @@ -0,0 +1,55 @@ +import { useMessage } from '@/hooks/useMessage' +import WithDraggable from '@/components/common/draggable/WithDraggable' +import { useRecoilValue } from 'recoil' +import { contextPopupPositionState } from '@/store/popupAtom' +import { usePopup } from '@/hooks/usePopup' + +export default function DormerOffset(props) { + const contextPopupPosition = useRecoilValue(contextPopupPositionState) + const { id, pos = contextPopupPosition } = props + const { getMessage } = useMessage() + const { closePopup } = usePopup() + return ( + +
+
+

도머 오프셋

+ +
+
+
移動する方向を入力してください
+
+
+
+

長さ

+
+
+ +
+ mm +
+
+
+ +
+ mm +
+
+
+ + + + +
+
+
+
+ +
+
+
+ + ) +} diff --git a/src/components/floor-plan/modal/object/RoofMaterialSetting.jsx b/src/components/floor-plan/modal/object/RoofMaterialSetting.jsx new file mode 100644 index 00000000..01d6f773 --- /dev/null +++ b/src/components/floor-plan/modal/object/RoofMaterialSetting.jsx @@ -0,0 +1,45 @@ +'use client' + +import { useRecoilValue } from 'recoil' +import { useMessage } from '@/hooks/useMessage' +import WithDraggable from '@/components/common/draggable/WithDraggable' +import { usePopup } from '@/hooks/usePopup' +import { contextPopupPositionState } from '@/store/popupAtom' +import QSelectBox from '@/components/common/select/QSelectBox' + +export default function RoofMaterialSetting(props) { + const contextPopupPosition = useRecoilValue(contextPopupPositionState) + const { id, pos = contextPopupPosition } = props + const { getMessage } = useMessage() + const { closePopup } = usePopup() + const roofMaterials = [ + { name: '기와1', value: 'material1' }, + { name: '기와2', value: 'material2' }, + { name: '기와3', value: 'material3' }, + { name: '기와4', value: 'material4' }, + { name: '기와5', value: 'material5' }, + ] + + return ( + +
+
+

変更

+ +
+
+
+
+ +
+
+
+ +
+
+
+ + ) +} diff --git a/src/components/floor-plan/modal/object/SizeSetting.jsx b/src/components/floor-plan/modal/object/SizeSetting.jsx new file mode 100644 index 00000000..ca7d4773 --- /dev/null +++ b/src/components/floor-plan/modal/object/SizeSetting.jsx @@ -0,0 +1,71 @@ +'use client' + +import { useRecoilValue } from 'recoil' +import { useMessage } from '@/hooks/useMessage' +import { canvasState } from '@/store/canvasAtom' +import WithDraggable from '@/components/common/draggable/WithDraggable' +import { usePopup } from '@/hooks/usePopup' +import { contextPopupPositionState } from '@/store/popupAtom' +import { useState } from 'react' + +export default function SizeSetting(props) { + const contextPopupPosition = useRecoilValue(contextPopupPositionState) + const [settingTarget, setSettingTarget] = useState(1) + const { id, pos = contextPopupPosition } = props + const { getMessage } = useMessage() + const canvas = useRecoilValue(canvasState) + const { closePopup } = usePopup() + + return ( + +
+
+

サイズ変更

+ +
+
+
+
+
+
+ + mm +
+
+ + mm +
+
+
+
+
+
+
+ + mm +
+
+ + mm +
+
+
+
+ + + + +
+
+
+
+
+ +
+
+
+ + ) +} diff --git a/src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx b/src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx index 934f2f9d..c6afa44d 100644 --- a/src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx +++ b/src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx @@ -3,8 +3,12 @@ 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' +import { useRecoilValue } from 'recoil' +import { contextPopupPositionState } from '@/store/popupAtom' -export default function RoofAllocationSetting({ id, pos = { x: 50, y: 230 } }) { +export default function RoofAllocationSetting(props) { + const contextPopupPosition = useRecoilValue(contextPopupPositionState) + const { id, pos = contextPopupPosition } = props const { getMessage } = useMessage() const { closePopup } = usePopup() const { handleSave, onAddRoofMaterial, onDeleteRoofMaterial, values, roofMaterials, selectedRoofMaterial, setSelectedRoofMaterial } = diff --git a/src/hooks/common/useCommonUtils.js b/src/hooks/common/useCommonUtils.js index 8d0412c1..9384a354 100644 --- a/src/hooks/common/useCommonUtils.js +++ b/src/hooks/common/useCommonUtils.js @@ -6,6 +6,9 @@ import { checkLineOrientation, getDistance, setSurfaceShapePattern } from '@/uti import { dimensionLineSettingsState } from '@/store/commonUtilsAtom' import { fontSelector } from '@/store/fontAtom' import { canvasState } from '@/store/canvasAtom' +import { v4 as uuidv4 } from 'uuid' +import { usePopup } from '@/hooks/usePopup' +import Distance from '@/components/floor-plan/modal/distance/Distance' export function useCommonUtils({ commonFunctionState, setCommonFunctionState }) { const canvas = useRecoilValue(canvasState) @@ -14,6 +17,7 @@ export function useCommonUtils({ commonFunctionState, setCommonFunctionState }) const dimensionSettings = useRecoilValue(dimensionLineSettingsState) const dimensionLineTextFont = useRecoilValue(fontSelector('dimensionLineText')) const commonTextFont = useRecoilValue(fontSelector('commonText')) + const { addPopup } = usePopup() useEffect(() => { initEvent() @@ -106,7 +110,8 @@ export function useCommonUtils({ commonFunctionState, setCommonFunctionState }) const lineOptions = { stroke: dimensionSettings.color, strokeWidth: dimensionSettings.pixel, - selectable: false, + name: 'dimensionLine', + selectable: true, } // 캔버스에 클릭 이벤트 추가 @@ -375,6 +380,19 @@ export function useCommonUtils({ commonFunctionState, setCommonFunctionState }) // 거리 계산 후, 다음 측정을 위해 초기화 points = [] + const id = uuidv4() + addPopup( + id, + 1, + , + ) } // 캔버스 다시 그리기 diff --git a/src/hooks/roofcover/useRoofAllocationSetting.js b/src/hooks/roofcover/useRoofAllocationSetting.js index 9ac4c2aa..3f355111 100644 --- a/src/hooks/roofcover/useRoofAllocationSetting.js +++ b/src/hooks/roofcover/useRoofAllocationSetting.js @@ -86,6 +86,12 @@ export function useRoofAllocationSetting(id) { swalFire({ text: '할당할 지붕이 없습니다.' }) closePopup(id) } + // if (type === 'roofBase') { + // // 지붕면 할당 + // + // } else if ('roof') { + // // 지붕재 변경 + // } }, []) const onAddRoofMaterial = () => { diff --git a/src/hooks/useContextMenu.js b/src/hooks/useContextMenu.js index 4451c259..bbd5115b 100644 --- a/src/hooks/useContextMenu.js +++ b/src/hooks/useContextMenu.js @@ -1,18 +1,36 @@ -import { useRecoilValue } from 'recoil' +import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil' import { currentMenuState, currentObjectState } from '@/store/canvasAtom' import { useEffect, useState } from 'react' import { MENU } from '@/common/common' import AuxiliaryMove from '@/components/floor-plan/modal/auxiliary/AuxiliaryMove' import AuxiliarySize from '@/components/floor-plan/modal/auxiliary/AuxiliarySize' +import { usePopup } from '@/hooks/usePopup' +import { v4 as uuidv4 } from 'uuid' +import GridMove from '@/components/floor-plan/modal/grid/GridMove' +import GridCopy from '@/components/floor-plan/modal/grid/GridCopy' +import ColorPickerModal from '@/components/common/color-picker/ColorPickerModal' +import { gridColorState } from '@/store/gridAtom' +import { contextPopupPositionState } from '@/store/popupAtom' +import AuxiliaryCopy from '@/components/floor-plan/modal/auxiliary/AuxiliaryCopy' +import SizeSetting from '@/components/floor-plan/modal/object/SizeSetting' +import RoofMaterialSetting from '@/components/floor-plan/modal/object/RoofMaterialSetting' +import DormerOffset from '@/components/floor-plan/modal/object/DormerOffset' +import FontSetting from '@/components/common/font/FontSetting' +import DimensionLineSetting from '@/components/floor-plan/modal/dimensionLine/DimensionLineSetting' +import RoofAllocationSetting from '@/components/floor-plan/modal/roofAllocation/RoofAllocationSetting' +import LinePropertySetting from '@/components/floor-plan/modal/lineProperty/LinePropertySetting' +import FlowDirectionSetting from '@/components/floor-plan/modal/flowDirection/FlowDirectionSetting' export function useContextMenu({ externalFn }) { - const currentMenu = useRecoilValue(currentMenuState) - const [contextMenu, setContextMenu] = useState([[]]) - const [currentContextMenu, setCurrentContextMenu] = useState(null) + const currentMenu = useRecoilValue(currentMenuState) // 현재 메뉴 + const setContextPopupPosition = useSetRecoilState(contextPopupPositionState) // 현재 메뉴 + const [contextMenu, setContextMenu] = useState([[]]) // 메뉴.object 별 context menu + const [currentContextMenu, setCurrentContextMenu] = useState(null) // 선택한 contextMenu const currentObject = useRecoilValue(currentObjectState) - - const currentMenuSetting = () => { - console.log(currentMenu) + const { addPopup } = usePopup() + const [popupId, setPopupId] = useState(uuidv4()) + const [gridColor, setGridColor] = useRecoilState(gridColorState) + const currentMenuSetting = (position) => { switch (currentMenu) { case MENU.PLAN_DRAWING: setContextMenu([ @@ -20,14 +38,17 @@ export function useContextMenu({ externalFn }) { { id: 'gridMove', name: '그리드 이동', + component: , }, { id: 'gridCopy', name: '그리드 복사', + component: , }, { id: 'gridColorEdit', name: '그리드 색 변경', + component: , }, { id: 'remove', @@ -84,16 +105,17 @@ export function useContextMenu({ externalFn }) { { id: 'sizeEdit', name: '사이즈 변경', - component: , + component: , }, { id: 'auxiliaryMove', name: '보조선 이동(M)', - component: , + component: , }, { id: 'auxiliaryCopy', name: '보조선 복사(C)', + component: , }, { id: 'auxiliaryRemove', @@ -160,19 +182,35 @@ export function useContextMenu({ externalFn }) { break } } - useEffect(() => { - currentMenuSetting() - }, [currentMenu]) + + const handleClick = (e, menu) => { + setContextPopupPosition({ + x: e.clientX, + y: e.clientY, + }) + setCurrentContextMenu(menu) + } useEffect(() => { + currentMenuSetting() + }, [gridColor, currentMenu]) + + useEffect(() => { + if (currentContextMenu?.component) addPopup(popupId, 1, currentContextMenu?.component) + }, [currentContextMenu]) + + useEffect(() => { + console.log('object name', currentObject?.name) if (currentObject?.name) { switch (currentObject.name) { case 'triangleDormer': + case 'pentagonDormer': setContextMenu([ [ { id: 'sizeEdit', name: '사이즈 변경', + component: , }, { id: 'dormerRemove', @@ -189,10 +227,12 @@ export function useContextMenu({ externalFn }) { { id: 'roofMaterialEdit', name: '지붕재 변경', + component: , }, { id: 'dormerOffset', name: '도머 오프셋', + component: , }, ], ]) @@ -203,6 +243,7 @@ export function useContextMenu({ externalFn }) { { id: 'sizeEdit', name: '사이즈 변경', + component: , }, { id: 'roofMaterialRemove', @@ -221,14 +262,17 @@ export function useContextMenu({ externalFn }) { { id: 'roofMaterialEdit', name: '지붕재 변경', + component: , }, { id: 'linePropertyEdit', name: '각 변 속성 변경', + component: , }, { id: 'flowDirectionEdit', name: '흐름 뱡향 변경', + component: , }, ], ]) @@ -259,6 +303,127 @@ export function useContextMenu({ externalFn }) { ], ]) break + case 'lengthText': + setContextMenu([ + [ + { + id: 'lengthTextRemove', + name: '삭제', + }, + { + id: 'lengthTextMove', + name: '이동', + }, + { + id: 'lengthTextAuxiliaryLineEdit', + name: '치수 보조선 변경', + }, + { + id: 'displayEdit', + name: '표시 변경', + }, + ], + ]) + break + case 'commonText': + setContextMenu([ + [ + { + id: 'commonTextRemove', + name: '삭제', + }, + { + id: 'commonTextMove', + name: '이동', + }, + { + id: 'commonTextCopy', + name: '복사', + }, + { + id: 'commonTextFontSetting', + name: '폰트 설정', + component: , + }, + { + id: 'commonTextEdit', + name: '편집', + }, + ], + ]) + break + case 'lineGrid': + setContextMenu([ + [ + { + id: 'gridMove', + name: '그리드 이동', + }, + { + id: 'gridCopy', + name: '그리드 복사', + }, + { + id: 'gridColorEdit', + name: '그리드 색 변경', + }, + { + id: 'remove', + name: '삭제', + }, + { + id: 'removeAll', + name: '전체 삭제', + }, + ], + ]) + break + case 'dimensionLine': + setContextMenu([ + [ + { + id: 'dimensionLineRemove', + name: '삭제', + }, + { + id: 'dimensionLineMove', + name: '이동', + }, + { + id: 'dimensionAuxiliaryLineEdit', + name: '치수 보조선 변경', + }, + { + id: 'dimensionLineDisplayEdit', + name: '표시 변경', + component: , + }, + ], + ]) + break + case 'shadow': + setContextMenu([ + [ + { + id: 'sizeEdit', + name: '사이즈 변경', + component: , + }, + { + id: 'remove', + name: '삭제(D)', + }, + { + id: 'move', + name: '이동(M)', + }, + { + id: 'copy', + name: '복사(C)', + }, + ], + ]) + break default: currentMenuSetting() } @@ -267,13 +432,10 @@ export function useContextMenu({ externalFn }) { } }, [currentObject]) - useEffect(() => { - console.log(currentContextMenu) - }, [currentContextMenu]) - return { contextMenu, currentContextMenu, setCurrentContextMenu, + handleClick, } } diff --git a/src/hooks/usePopup.js b/src/hooks/usePopup.js index b54492b9..37730ec5 100644 --- a/src/hooks/usePopup.js +++ b/src/hooks/usePopup.js @@ -1,20 +1,14 @@ import { useRecoilState } from 'recoil' import { popupState } from '@/store/popupAtom' -import { useEffect } from 'react' export function usePopup() { const [popup, setPopup] = useRecoilState(popupState) - useEffect(() => { - console.log(popup) - }, [popup]) - const addPopup = (id, depth, component) => { setPopup({ children: [...filterDepth(depth), { id: id, depth: depth, component: component }] }) } const closePopup = (id) => { - console.log(id) setPopup({ children: [...filterChildrenPopup(id).filter((child) => child.id !== id)] }) } diff --git a/src/store/popupAtom.js b/src/store/popupAtom.js index 78de8660..498f4eed 100644 --- a/src/store/popupAtom.js +++ b/src/store/popupAtom.js @@ -11,3 +11,12 @@ export const popupState = atom({ }, dangerouslyAllowMutability: true, }) + +export const contextPopupPositionState = atom({ + key: 'contextPopupPositionState', + default: { + x: 50, + y: 180, + }, + dangerouslyAllowMutability: true, +}) diff --git a/src/styles/_contents.scss b/src/styles/_contents.scss index 70bd9f40..c242a96b 100644 --- a/src/styles/_contents.scss +++ b/src/styles/_contents.scss @@ -309,12 +309,12 @@ padding-top: 46.8px; transition: all .17s ease-in-out; .canvas-frame{ - height: 86.3vh; + height: calc(100vh - 129.3px); } &.active{ padding-top: calc(46.8px + 50px); .canvas-frame{ - height: 81vh; + height: calc(100vh - 179.4px); } } } @@ -1024,6 +1024,7 @@ display: flex; padding: 20px; .simulation-tit-wrap{ + flex: none; padding-right: 40px; border-right: 1px solid #EEEEEE; span{ @@ -1047,6 +1048,7 @@ } } .simulation-guide-box{ + flex: 1; padding-left: 40px; dl{ margin-bottom: 25px; @@ -1066,6 +1068,9 @@ margin-bottom: 0; } } + ul, ol{ + list-style: unset; + } } } diff --git a/src/styles/_main.scss b/src/styles/_main.scss index ea9b8833..b8783c3b 100644 --- a/src/styles/_main.scss +++ b/src/styles/_main.scss @@ -405,10 +405,15 @@ display: flex; align-items: center; border: 1px solid #E5E9EF; + border-radius: 4px; height: 45px; padding-left: 40px; padding-right: 15px; margin-bottom: 15px; + transition: border .15s ease-in-out; + &.focus{ + border-color: #A8B6C7; + } .login-input{ flex: 1; height: 100%;