From 8a5bd9f505bcc907f5ee61905b2acf13aad59002 Mon Sep 17 00:00:00 2001 From: yjnoh Date: Tue, 18 Mar 2025 15:44:41 +0900 Subject: [PATCH] =?UTF-8?q?=EB=8B=A8=EC=88=98=EB=B0=B0=EC=B9=98=20?= =?UTF-8?q?=EC=9E=91=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../floor-plan/modal/basic/BasicSetting.jsx | 30 +- .../floor-plan/modal/basic/step/Placement.jsx | 65 +- src/hooks/module/useModuleBasicSetting.js | 674 ++++++++++-------- src/store/canvasAtom.js | 9 +- 4 files changed, 409 insertions(+), 369 deletions(-) diff --git a/src/components/floor-plan/modal/basic/BasicSetting.jsx b/src/components/floor-plan/modal/basic/BasicSetting.jsx index c76c9394..a3f0f08e 100644 --- a/src/components/floor-plan/modal/basic/BasicSetting.jsx +++ b/src/components/floor-plan/modal/basic/BasicSetting.jsx @@ -97,13 +97,6 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) { setTabNum(tabNum + 1) } - const placementRef = { - isChidori: useRef('false'), - setupLocation: useRef('eaves'), - } - - const layoutSetupRef = useRef([]) - const placementFlatRef = { setupLocation: useRef('south'), } @@ -149,16 +142,18 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) { useEffect(() => { if (basicSetting.roofSizeSet !== '3') { - console.log('ManualSetupMode', manualSetupMode) - if (manualSetupMode.indexOf('manualSetup') > -1) { - manualModuleSetup(placementRef) + manualModuleSetup() } else if (manualSetupMode.indexOf('manualLayoutSetup') > -1) { - manualModuleLayoutSetup(layoutSetupRef) + manualModuleLayoutSetup(layoutSetup) + } else if (manualSetupMode.indexOf('off') > -1) { + manualModuleSetup() + manualModuleLayoutSetup(layoutSetup) } } else { manualFlatroofModuleSetup(placementFlatRef) } + if (isClosePopup.close) { closePopup(isClosePopup.id) } @@ -166,12 +161,13 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) { useEffect(() => { if (isManualModuleLayoutSetup) { - manualModuleLayoutSetup(layoutSetupRef) + manualModuleLayoutSetup(layoutSetup) } }, [layoutSetup]) useEffect(() => { setIsManualModuleSetup(false) + setIsManualModuleLayoutSetup(false) }, [checkedModules]) return ( @@ -189,13 +185,7 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) { {/*배치면 초기설정 - 입력방법: 복시도 입력 || 실측값 입력*/} {basicSetting.roofSizeSet && basicSetting.roofSizeSet != '3' && tabNum === 2 && } {basicSetting.roofSizeSet && basicSetting.roofSizeSet != '3' && tabNum === 3 && ( - + )} {/*배치면 초기설정 - 입력방법: 육지붕*/} @@ -227,7 +217,7 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) { - diff --git a/src/components/floor-plan/modal/basic/step/Placement.jsx b/src/components/floor-plan/modal/basic/step/Placement.jsx index 8c105e00..4afd507b 100644 --- a/src/components/floor-plan/modal/basic/step/Placement.jsx +++ b/src/components/floor-plan/modal/basic/step/Placement.jsx @@ -3,10 +3,9 @@ import { useMessage } from '@/hooks/useMessage' import { useModuleBasicSetting } from '@/hooks/module/useModuleBasicSetting' import { checkedModuleState, - currentCanvasPlanState, isManualModuleLayoutSetupState, isManualModuleSetupState, - isModuleChidoriSetupState, + moduleSetupOptionState, toggleManualSetupModeState, } from '@/store/canvasAtom' import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil' @@ -15,13 +14,10 @@ import { isObjectNotEmpty } from '@/util/common-utils' const Placement = forwardRef((props, refs) => { const { getMessage } = useMessage() - const [isChidori, setIsChidori] = useRecoilState(isModuleChidoriSetupState) + const [isChidoriNotAble, setIsChidoriNotAble] = useState(false) - const [setupLocation, setSetupLocation] = useState('eaves') - const [isMaxSetup, setIsMaxSetup] = useState('false') const [selectedItems, setSelectedItems] = useState({}) - const [selectedModules, setSelectedModules] = useRecoilState(selectedModuleState) const setCheckedModules = useSetRecoilState(checkedModuleState) @@ -35,6 +31,8 @@ const Placement = forwardRef((props, refs) => { const setIsManualModuleLayoutSetup = useSetRecoilState(isManualModuleLayoutSetupState) const setManualSetupMode = useSetRecoilState(toggleManualSetupModeState) + const [moduleSetupOption, setModuleSetupOption] = useRecoilState(moduleSetupOptionState) //모듈 설치 옵션 + //모듈 배치면 생성 useEffect(() => { if (moduleSelectionData) { @@ -49,7 +47,7 @@ const Placement = forwardRef((props, refs) => { return () => { setIsManualModuleSetup(false) setIsManualModuleLayoutSetup(false) - setManualSetupMode('') + setManualSetupMode('off') } }, []) @@ -69,11 +67,6 @@ const Placement = forwardRef((props, refs) => { setSelectedItems(initCheckedModule) setSelectedModules(moduleSelectionData.module) props.setLayoutSetup(moduleSelectionData.module.itemList.map((item) => ({ moduleId: item.itemId, col: 0, row: 0 }))) - props.layoutSetupRef.current = moduleSelectionData.module.itemList.map((item) => ({ - moduleId: item.itemId, - col: 0, - row: 0, - })) } //모듈 배치면 생성 @@ -105,13 +98,21 @@ const Placement = forwardRef((props, refs) => { const handleChangeChidori = (e) => { const bool = e.target.value === 'true' ? true : false - setIsChidori(bool) - refs.isChidori.current = e.target.value + setModuleSetupOption({ ...moduleSetupOption, isChidori: bool }) + + //변경하면 수동 다 꺼짐 + setIsManualModuleSetup(false) + setIsManualModuleLayoutSetup(false) + setManualSetupMode('off') } const handleSetupLocation = (e) => { - setSetupLocation(e.target.value) - refs.setupLocation.current = e.target.value + setModuleSetupOption({ ...moduleSetupOption, setupLocation: e.target.value }) + + //변경하면 수동 다 꺼짐 + setIsManualModuleSetup(false) + setIsManualModuleLayoutSetup(false) + setManualSetupMode('off') } //체크된 모듈 아이디 추출 @@ -123,11 +124,6 @@ const Placement = forwardRef((props, refs) => { const newLayoutSetup = [...props.layoutSetup] newLayoutSetup[index] = { ...newLayoutSetup[index], moduleId: itemId, [e.target.name]: Number(e.target.value) } props.setLayoutSetup(newLayoutSetup) - props.layoutSetupRef.current[index] = { - ...props.layoutSetupRef.current[index], - moduleId: itemId, - [e.target.name]: Number(e.target.value), - } } return ( @@ -214,7 +210,7 @@ const Placement = forwardRef((props, refs) => { type="radio" name="radio01" id="ra01" - checked={isChidori} + checked={moduleSetupOption.isChidori} disabled={isChidoriNotAble} value={'true'} onChange={(e) => handleChangeChidori(e)} @@ -222,7 +218,14 @@ const Placement = forwardRef((props, refs) => {
- handleChangeChidori(e)} /> + handleChangeChidori(e)} + />
@@ -232,24 +235,12 @@ const Placement = forwardRef((props, refs) => {
{getMessage('modal.module.basic.setting.module.placement.arrangement.standard')}
-
- - -
@@ -260,7 +251,7 @@ const Placement = forwardRef((props, refs) => { type="radio" name="radio05" id="ra05" - checked={setupLocation === 'ridge'} + checked={moduleSetupOption.setupLocation === 'ridge'} value={'ridge'} onChange={handleSetupLocation} disabled={isMultiModule} diff --git a/src/hooks/module/useModuleBasicSetting.js b/src/hooks/module/useModuleBasicSetting.js index cc266caa..524cbd73 100644 --- a/src/hooks/module/useModuleBasicSetting.js +++ b/src/hooks/module/useModuleBasicSetting.js @@ -8,7 +8,7 @@ import { currentObjectState, isManualModuleLayoutSetupState, isManualModuleSetupState, - isModuleChidoriSetupState, + moduleSetupOptionState, toggleManualSetupModeState, } from '@/store/canvasAtom' @@ -33,6 +33,7 @@ import { v4 as uuidv4 } from 'uuid' import { isObjectNotEmpty } from '@/util/common-utils' import { useCircuitTrestle } from '@/hooks/useCirCuitTrestle' import { useMode } from '@/hooks/useMode' +import { usePolygon } from '@/hooks/usePolygon' export function useModuleBasicSetting(tabNum) { const canvas = useRecoilValue(canvasState) @@ -61,7 +62,10 @@ export function useModuleBasicSetting(tabNum) { const [currentObject, setCurrentObject] = useRecoilState(currentObjectState) const { setModuleStatisticsData } = useCircuitTrestle() const { createRoofPolygon, createMarginPolygon, createPaddingPolygon } = useMode() - const isModuleChidoriSetup = useRecoilValue(isModuleChidoriSetupState) + + const { drawDirectionArrow } = usePolygon() + + const moduleSetupOption = useRecoilValue(moduleSetupOptionState) const setManualSetupMode = useSetRecoilState(toggleManualSetupModeState) @@ -440,13 +444,15 @@ export function useModuleBasicSetting(tabNum) { */ const manualModuleSetup = (placementRef) => { //레이아웃 수동설치 토글 - if (isManualModuleLayoutSetup) { - setIsManualModuleLayoutSetup(false) - setManualSetupMode(`manualLayoutSetup_false`) - } + const moduleSetupSurfaces = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE) //모듈설치면를 가져옴 if (isManualModuleSetup) { + if (isManualModuleLayoutSetup) { + setIsManualModuleLayoutSetup(false) + // setManualSetupMode(`manualLayoutSetup_false`) + } + if (checkedModule.length === 0) { swalFire({ text: getMessage('module.place.select.module') }) setIsManualModuleSetup(false) @@ -871,14 +877,17 @@ export function useModuleBasicSetting(tabNum) { } const manualModuleLayoutSetup = (layoutSetupRef) => { - if (isManualModuleSetup) { - setIsManualModuleSetup(false) - setManualSetupMode(`manualSetup_false`) - } - const moduleSetupSurfaces = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE) //모듈설치면를 가져옴 + const isChidori = moduleSetupOption.isChidori + const setupLocation = moduleSetupOption.setupLocation + if (isManualModuleLayoutSetup) { + if (isManualModuleSetup) { + setIsManualModuleSetup(false) + // setManualSetupMode(`manualSetup_false`) + } + if (checkedModule.length === 0) { swalFire({ text: getMessage('module.place.select.module') }) setIsManualModuleLayoutSetup(false) @@ -887,7 +896,7 @@ export function useModuleBasicSetting(tabNum) { } const hasZeroLength = checkedModule.some((item) => - layoutSetupRef.current.some((layoutItem) => item.itemId === layoutItem.moduleId && (layoutItem.row === 0 || layoutItem.col === 0)), + layoutSetupRef.some((layoutItem) => item.itemId === layoutItem.moduleId && (layoutItem.row === 0 || layoutItem.col === 0)), ) if (hasZeroLength) { @@ -1009,20 +1018,20 @@ export function useModuleBasicSetting(tabNum) { const points = [ { - x: Number(mousePoint.x.toFixed(1)) + Number((width / 2).toFixed(1)), - y: Number(mousePoint.y.toFixed(1)) - Number((height / 2).toFixed(1)), + x: toFixedWithoutRounding(mousePoint.x, 2) + toFixedWithoutRounding(width / 2, 2), + y: toFixedWithoutRounding(mousePoint.y, 2) - toFixedWithoutRounding(height / 2, 2), }, { - x: Number(mousePoint.x.toFixed(1)) + Number((width / 2).toFixed(1)), - y: Number(mousePoint.y.toFixed(1)) + Number((height / 2).toFixed(1)), + x: toFixedWithoutRounding(mousePoint.x, 2) + toFixedWithoutRounding(width / 2, 2), + y: toFixedWithoutRounding(mousePoint.y, 2) + toFixedWithoutRounding(height / 2, 2), }, { - x: Number(mousePoint.x.toFixed(1)) - Number((width / 2).toFixed(1)), - y: Number(mousePoint.y.toFixed(1)) + Number((height / 2).toFixed(1)), + x: toFixedWithoutRounding(mousePoint.x, 2) - toFixedWithoutRounding(width / 2, 2), + y: toFixedWithoutRounding(mousePoint.y, 2) - toFixedWithoutRounding(height / 2, 2), }, { - x: Number(mousePoint.x.toFixed(1)) - Number((width / 2).toFixed(1)), - y: Number(mousePoint.y.toFixed(1)) - Number((height / 2).toFixed(1)), + x: toFixedWithoutRounding(mousePoint.x, 2) - toFixedWithoutRounding(width / 2, 2), + y: toFixedWithoutRounding(mousePoint.y, 2) + toFixedWithoutRounding(height / 2, 2), }, ] @@ -1039,11 +1048,11 @@ export function useModuleBasicSetting(tabNum) { stroke: 'black', strokeWidth: 1, strokeDashArray: [10, 5], - width: Number(width.toFixed(1)), //작은버전 - height: Number(height.toFixed(1)), //작은버전 - left: Number(mousePoint.x.toFixed(1) - Number((width / 2).toFixed(1))), //작은버전 - top: Number(mousePoint.y.toFixed(1) - Number((height / 2).toFixed(1))), //작은버전 - // width: Number((width * col).toFixed(1)) + Number((intvHor * (col - 1)).toFixed(1)), //큰버전 + width: toFixedWithoutRounding(width, 2), //작은버전 + height: toFixedWithoutRounding(height, 2), //작은버전 + left: toFixedWithoutRounding(mousePoint.x, 2) - toFixedWithoutRounding(width / 2, 2), //작은버전 + top: toFixedWithoutRounding(mousePoint.y, 2) - toFixedWithoutRounding(height / 2, 2), //작은버전 + // // width: Number((width * col).toFixed(1)) + Number((intvHor * (col - 1)).toFixed(1)), //큰버전 // height: Number((height * row).toFixed(1)) + Number((intvVer * (row - 1)).toFixed(1)), //큰버전 // left: Number(mousePoint.x.toFixed(1)) - calcHalfWidth.toFixed(1), //큰버전 // top: Number(mousePoint.y.toFixed(1)) - calcHalfHeight.toFixed(1), //큰버전 @@ -1068,77 +1077,131 @@ export function useModuleBasicSetting(tabNum) { * 스냅기능 */ let snapDistance = flowDirection === 'south' || flowDirection === 'north' ? 70 : 40 + let sideSnapDistance = 15 let trestleSnapDistance = 15 - const trestleLeft = Number(moduleSetupSurfaces[i].left.toFixed(1)) - Number((moduleSetupSurfaces[i].width / 2).toFixed(1)) - const trestleTop = Number(moduleSetupSurfaces[i].top.toFixed(1)) - Number((moduleSetupSurfaces[i].height / 2).toFixed(1)) - const trestleRight = Number(moduleSetupSurfaces[i].left.toFixed(1)) + Number((moduleSetupSurfaces[i].width / 2).toFixed(1)) - const trestleBottom = Number(moduleSetupSurfaces[i].top.toFixed(1)) + Number((moduleSetupSurfaces[i].height / 2).toFixed(1)) + const trestleLeft = toFixedWithoutRounding(moduleSetupSurfaces[i].left, 2) - toFixedWithoutRounding(moduleSetupSurfaces[i].width / 2, 2) + const trestleTop = toFixedWithoutRounding(moduleSetupSurfaces[i].top, 2) - toFixedWithoutRounding(moduleSetupSurfaces[i].height / 2, 2) + const trestleRight = + toFixedWithoutRounding(moduleSetupSurfaces[i].left, 2) + toFixedWithoutRounding(moduleSetupSurfaces[i].width / 2, 2) + const trestleBottom = + toFixedWithoutRounding(moduleSetupSurfaces[i].top, 2) + toFixedWithoutRounding(moduleSetupSurfaces[i].height / 2, 2) const bigCenterY = (trestleTop + trestleTop + moduleSetupSurfaces[i].height) / 2 // 이동하는 모듈의 경계 좌표 - const smallLeft = Number(tempModule.left.toFixed(1)) - const smallTop = Number(tempModule.top.toFixed(1)) - const smallRight = smallLeft + Number(tempModule.width.toFixed(1)) - const smallBottom = smallTop + Number(tempModule.height.toFixed(1)) - const smallCenterX = smallLeft + Number((tempModule.width / 2).toFixed(1)) - const smallCenterY = smallTop + Number((tempModule.height / 2).toFixed(1)) + const smallLeft = toFixedWithoutRounding(tempModule.left, 2) + const smallTop = toFixedWithoutRounding(tempModule.top, 2) + const smallRight = smallLeft + toFixedWithoutRounding(tempModule.width, 2) + const smallBottom = smallTop + toFixedWithoutRounding(tempModule.height, 2) + const smallCenterX = smallLeft + toFixedWithoutRounding(tempModule.width / 2, 2) + const smallCenterY = smallTop + toFixedWithoutRounding(tempModule.height / 2, 2) /** * 미리 깔아놓은 셀이 있을때 셀에 흡착됨 */ if (manualDrawModules) { manualDrawModules.forEach((cell) => { - const holdCellLeft = cell.left - const holdCellTop = cell.top - const holdCellRight = holdCellLeft + Number(cell.width.toFixed(1)) - const holdCellBottom = holdCellTop + Number(cell.height.toFixed(1)) - const holdCellCenterX = holdCellLeft + Number((cell.width / 2).toFixed(1)) - const holdCellCenterY = holdCellTop + Number((cell.height / 2).toFixed(1)) + const holdCellLeft = toFixedWithoutRounding(cell.left, 2) + const holdCellTop = toFixedWithoutRounding(cell.top, 2) + const holdCellRight = holdCellLeft + toFixedWithoutRounding(cell.width, 2) + const holdCellBottom = holdCellTop + toFixedWithoutRounding(cell.height, 2) + const holdCellCenterX = holdCellLeft + toFixedWithoutRounding(cell.width / 2, 2) + const holdCellCenterY = holdCellTop + toFixedWithoutRounding(cell.height / 2, 2) - //설치된 셀에 좌측에 스냅 - if (Math.abs(smallRight - holdCellLeft) < snapDistance) { - tempModule.left = holdCellLeft - width - intvHor - } + //흐름방향따라 달라야 한다. + if (flowDirection === 'south' || flowDirection === 'north') { + if (Math.abs(smallCenterX - holdCellCenterX) < snapDistance) { + //움직이는 모듈 가운데 -> 설치 모듈 가운데 + tempModule.left = holdCellCenterX - toFixedWithoutRounding(width / 2, 2) + } - //설치된 셀에 우측에 스냅 - if (Math.abs(smallLeft - holdCellRight) < snapDistance) { - tempModule.left = holdCellRight + intvHor - } + //움직이는 모듈왼쪽 -> 가운데 + if (Math.abs(smallLeft - holdCellCenterX) < snapDistance) { + tempModule.left = holdCellCenterX + intvHor / 2 + } + // 오른쪽 -> 가운데 + if (Math.abs(smallRight - holdCellCenterX) < snapDistance) { + tempModule.left = holdCellCenterX - width - intvHor / 2 + } - //설치된 셀에 위쪽에 스냅 - if (Math.abs(smallBottom - holdCellTop) < snapDistance) { - tempModule.top = holdCellTop - height - intvVer - } + //설치된 셀에 좌측에 스냅 + if (Math.abs(smallRight - holdCellLeft) < snapDistance) { + // console.log('모듈 좌측 스냅') + tempModule.left = holdCellLeft - width - intvHor + } - //설치된 셀에 밑쪽에 스냅 - if (Math.abs(smallTop - holdCellBottom) < snapDistance) { - tempModule.top = holdCellBottom + intvVer + //설치된 셀에 우측에 스냅 + if (Math.abs(smallLeft - holdCellRight) < snapDistance) { + // console.log('모듈 우측 스냅') + tempModule.left = holdCellRight + intvHor + } + //설치된 셀에 위쪽에 스냅 + if (Math.abs(smallBottom - holdCellTop) < sideSnapDistance) { + tempModule.top = holdCellTop - height - intvVer + } + + //설치된 셀에 밑쪽에 스냅 + if (Math.abs(smallTop - holdCellBottom) < sideSnapDistance) { + tempModule.top = holdCellBottom + intvVer + } + + //설치된 셀에 윗쪽에 스냅 + if (Math.abs(smallTop - holdCellTop) < sideSnapDistance) { + tempModule.top = holdCellTop + } + } else { + //흐름방향 west, east + + //가운데 가운데 + if (Math.abs(smallCenterY - holdCellCenterY) < snapDistance) { + tempModule.top = holdCellCenterY - toFixedWithoutRounding(width / 2, 2) + } + + //위쪽 -> 가운데 + if (Math.abs(smallTop - holdCellCenterY) < snapDistance) { + // console.log('holdCellCenterX', holdCellCenterX) + // console.log('smallLeft', smallLeft) + + // console.log('모듈 센터에 스냅') + tempModule.top = holdCellCenterY + intvHor / 2 + + // console.log('tempModule.left', tempModule.left) + } + // 밑 -> 가운데 + if (Math.abs(smallBottom - holdCellCenterY) < snapDistance) { + tempModule.top = holdCellCenterY - height - intvHor / 2 + } + + //설치된 셀에 좌측에 스냅 + if (Math.abs(smallRight - holdCellLeft) < snapDistance) { + // console.log('모듈 좌측 스냅') + tempModule.left = holdCellLeft - width - intvHor + } + + //설치된 셀에 우측에 스냅 + if (Math.abs(smallLeft - holdCellRight) < snapDistance) { + // console.log('모듈 우측 스냅') + tempModule.left = holdCellRight + intvHor + } + //설치된 셀에 위쪽에 스냅 + if (Math.abs(smallBottom - holdCellTop) < sideSnapDistance) { + tempModule.top = holdCellTop - height - intvVer + } + + //설치된 셀에 밑쪽에 스냅 + if (Math.abs(smallTop - holdCellBottom) < sideSnapDistance) { + tempModule.top = holdCellBottom + intvVer + } + + //설치된 셀에 윗쪽에 스냅 + if (Math.abs(smallTop - holdCellTop) < sideSnapDistance) { + tempModule.top = holdCellTop + } + + if (Math.abs(smallLeft - holdCellLeft) < snapDistance) { + tempModule.left = holdCellLeft + } } - //가운데 -> 가운데 - if (Math.abs(smallCenterX - holdCellCenterX) < snapDistance) { - tempModule.left = holdCellCenterX - Number((width / 2).toFixed(1)) - } - //왼쪽 -> 가운데 - if (Math.abs(smallLeft - holdCellCenterX) < snapDistance) { - tempModule.left = holdCellCenterX - } - // 오른쪽 -> 가운데 - if (Math.abs(smallRight - holdCellCenterX) < snapDistance) { - tempModule.left = holdCellCenterX - width - } - //세로 가운데 -> 가운데 - if (Math.abs(smallCenterY - holdCellCenterY) < snapDistance) { - tempModule.top = holdCellCenterY - Number((height / 2).toFixed(1)) - } - // //위쪽 -> 가운데 - // if (Math.abs(smallTop - holdCellCenterY) < cellSnapDistance) { - // tempModule.top = holdCellCenterY - // } - // //아랫쪽 -> 가운데 - // if (Math.abs(smallBottom - holdCellCenterY) < cellSnapDistance) { - // tempModule.top = holdCellCenterY - height - // } }) } @@ -1162,33 +1225,15 @@ export function useModuleBasicSetting(tabNum) { } if (flowDirection === 'south' || flowDirection === 'north') { - // 모듈왼쪽이 세로중앙선에 붙게 스냅 - // if (Math.abs(smallLeft - (trestleLeft + moduleSetupSurfaces[i].width / 2)) < snapDistance) { - // tempModule.left = trestleLeft + moduleSetupSurfaces[i].width / 2 - // } - // 모듈이 가운데가 세로중앙선에 붙게 스냅 if (Math.abs(smallCenterX - (trestleLeft + moduleSetupSurfaces[i].width / 2)) < trestleSnapDistance) { tempModule.left = trestleLeft + moduleSetupSurfaces[i].width / 2 - tempModule.width / 2 } - - // 모듈오른쪽이 세로중앙선에 붙게 스냅 - // if (Math.abs(smallRight - (trestleLeft + moduleSetupSurfaces[i].width / 2)) < trestleSnapDistance) { - // tempModule.left = trestleLeft + moduleSetupSurfaces[i].width / 2 - tempModule.width * tempModule.scaleX - // } } else { // 모듈이 가로중앙선에 스냅 if (Math.abs(smallTop + tempModule.height / 2 - bigCenterY) < trestleSnapDistance) { tempModule.top = bigCenterY - tempModule.height / 2 } - - // if (Math.abs(smallTop - (trestleTop + moduleSetupSurfaces[i].height / 2)) < trestleSnapDistance) { - // tempModule.top = trestleTop + moduleSetupSurfaces[i].height / 2 - // } - // 모듈 밑면이 가로중앙선에 스냅 - // if (Math.abs(smallBottom - (trestleTop + moduleSetupSurfaces[i].height / 2)) < trestleSnapDistance) { - // tempModule.top = trestleTop + moduleSetupSurfaces[i].height / 2 - tempModule.height * tempModule.scaleY - // } } tempModule.setCoords() @@ -1234,15 +1279,16 @@ export function useModuleBasicSetting(tabNum) { : tmpHeight //그려진 가이드 라인의 포인트를 기준으로 시작점을 만든다 - if (flowDirection === 'south') { + //남쪽에 처마방향이나 북쪽에 용마루면 + if ((flowDirection === 'south' && setupLocation === 'eaves') || (flowDirection === 'north' && setupLocation === 'ridge')) { //남 startX = toFixedWithoutRounding(tempModule.left, 1) startY = toFixedWithoutRounding(tempModule.top + tempModule.height, 1) moduleOptions.fill = module.color - let col = layoutSetupRef.current.filter((item) => item.moduleId === module.itemId)[0].col - let row = layoutSetupRef.current.filter((item) => item.moduleId === module.itemId)[0].row + let col = layoutSetupRef.filter((item) => item.moduleId === module.itemId)[0].col + let row = layoutSetupRef.filter((item) => item.moduleId === module.itemId)[0].row let tempCol = col for (let i = 0; i < row; i++) { @@ -1257,7 +1303,7 @@ export function useModuleBasicSetting(tabNum) { let tempHeightMargin = i === 0 ? 0 : i * intvVer //치도리 설치시 컬럼 조정 - if (isModuleChidoriSetup) { + if (isChidori) { //치도리면 짝수열은 안으로 넣기 tempCol = installedHeightModuleCount % 2 === 0 ? col : col - 1 } @@ -1267,7 +1313,7 @@ export function useModuleBasicSetting(tabNum) { let tempX = startX + j * width let tempWidthMargin = j === 0 ? 0 : j * intvHor - if (isModuleChidoriSetup) { + if (isChidori) { chidoriMargin = installedHeightModuleCount % 2 === 0 ? 0 : width / 2 + intvHor } @@ -1324,14 +1370,6 @@ export function useModuleBasicSetting(tabNum) { swalFire({ text: getMessage('module.place.overlab') }) return } - // getModuleStatistics() - // } else { - // swalFire({ text: getMessage('module.place.overlab') }) - // return - // tempModule.set({ fill: 'transparent', stroke: 'red', strokeWidth: 1 }) - // canvas?.add(tempModule) - // canvas.renderAll() - // } } } @@ -1339,17 +1377,21 @@ export function useModuleBasicSetting(tabNum) { ++installedHeightModuleCount } } - } else if (flowDirection === 'north') { + //북쪽에 처마거나 남쪽에 용마루일경우 + } else if ((flowDirection === 'north' && setupLocation === 'eaves') || (flowDirection === 'south' && setupLocation === 'ridge')) { //북북 startX = toFixedWithoutRounding(tempModule.left + tempModule.width, 1) startY = toFixedWithoutRounding(tempModule.top, 1) moduleOptions.fill = module.color - const col = layoutSetupRef.current.filter((item) => item.moduleId === module.itemId)[0].col - const row = layoutSetupRef.current.filter((item) => item.moduleId === module.itemId)[0].row + const col = layoutSetupRef.filter((item) => item.moduleId === module.itemId)[0].col + const row = layoutSetupRef.filter((item) => item.moduleId === module.itemId)[0].row + let tempCol = col //치도리시 하나 빼려고 임시로 + for (let i = 0; i < row; i++) { let tempY = startY + i * height + let isInstalled = false if (index > 0) { //두번째 모듈일때 마지막 설치 지점 @@ -1358,15 +1400,24 @@ export function useModuleBasicSetting(tabNum) { let tempHeightMargin = i === 0 ? 0 : i * intvVer - for (let j = 0; j < col; j++) { + if (isChidori) { + tempCol = installedHeightModuleCount % 2 === 0 ? col : col - 1 + } + + for (let j = 0; j < tempCol; j++) { + let chidoriMargin = 0 let tempX = startX - j * width let tempWidthMargin = j === 0 ? 0 : j * intvHor + if (isChidori) { + chidoriMargin = installedHeightModuleCount % 2 === 0 ? 0 : width / 2 + intvHor + } + let rectPoints = [ - { x: tempX - tempWidthMargin, y: tempY + height + tempHeightMargin }, - { x: tempX - tempWidthMargin, y: tempY + tempHeightMargin }, - { x: tempX - width - tempWidthMargin, y: tempY + tempHeightMargin }, - { x: tempX - width - tempWidthMargin, y: tempY + height + tempHeightMargin }, + { x: tempX - tempWidthMargin - chidoriMargin, y: tempY + height + tempHeightMargin }, + { x: tempX - tempWidthMargin - chidoriMargin, y: tempY + tempHeightMargin }, + { x: tempX - width - tempWidthMargin - chidoriMargin, y: tempY + tempHeightMargin }, + { x: tempX - width - tempWidthMargin - chidoriMargin, y: tempY + height + tempHeightMargin }, ] tempModule.set({ points: rectPoints }) @@ -1386,8 +1437,6 @@ export function useModuleBasicSetting(tabNum) { let manualModule = new QPolygon(tempModule.points, { ...moduleOptions, moduleInfo: module, - // left: toFixedWithoutRounding(tempX + tempWidthMargin, 1), - // top: toFixedWithoutRounding(tempY - height - tempHeightMargin, 1), width: toFixedWithoutRounding(width, 1), height: toFixedWithoutRounding(height, 1), }) @@ -1401,6 +1450,10 @@ export function useModuleBasicSetting(tabNum) { manualDrawModules.push(manualModule) setModuleStatisticsData() installedLastHeightCoord = tempY + height + tempHeightMargin + + if (j === 0) { + isInstalled = true + } } else { //디버깅용 // manualModule.set({ fill: 'transparent', stroke: 'red', strokeWidth: 1 }) @@ -1411,44 +1464,52 @@ export function useModuleBasicSetting(tabNum) { swalFire({ text: getMessage('module.place.overlab') }) return } - // getModuleStatistics() - // } else { - // swalFire({ text: getMessage('module.place.overlab') }) - // return - // tempModule.set({ fill: 'transparent', stroke: 'red', strokeWidth: 1 }) - // canvas?.add(tempModule) - // canvas.renderAll() - // } } } + if (isInstalled) { + ++installedHeightModuleCount + } } - } else if (flowDirection === 'west') { + //서쪽에 처마 또는 동쪽의 용마루일경우 + } else if ((flowDirection === 'west' && setupLocation === 'eaves') || (flowDirection === 'east' && setupLocation === 'ridge')) { startX = toFixedWithoutRounding(tempModule.left, 1) startY = toFixedWithoutRounding(tempModule.top, 1) moduleOptions.fill = module.color - const col = layoutSetupRef.current.filter((item) => item.moduleId === module.itemId)[0].col - const row = layoutSetupRef.current.filter((item) => item.moduleId === module.itemId)[0].row + const col = layoutSetupRef.filter((item) => item.moduleId === module.itemId)[0].col + const row = layoutSetupRef.filter((item) => item.moduleId === module.itemId)[0].row + let tempCol = col //치도리시 하나 빼려고 임시로 for (let i = 0; i < row; i++) { //옆으로 올라가는거라 height가 아니고 width로 변경 let tempX = startX + i * width let tempWidthMargin = i === 0 ? 0 : i * intvHor + let isInstalled = false if (index > 0) { //두번째 모듈일때 마지막 설치 지점 //명칭은 그대로 쓴다 tempX = index > 0 && i === 0 ? installedLastHeightCoord + intvHor : installedLastHeightCoord } - for (let j = 0; j < col; j++) { + if (isChidori) { + tempCol = installedHeightModuleCount % 2 === 0 ? col : col - 1 + } + + for (let j = 0; j < tempCol; j++) { let tempY = startY + j * height let tempHeightMargin = j === 0 ? 0 : j * intvVer + let chidoriMargin = 0 + + if (isChidori) { + chidoriMargin = installedHeightModuleCount % 2 === 0 ? 0 : height / 2 + intvVer + } + let rectPoints = [ - { x: tempX + tempWidthMargin, y: tempY + tempHeightMargin }, - { x: tempX + tempWidthMargin, y: tempY + height + tempHeightMargin }, - { x: tempX + width + tempWidthMargin, y: tempY + height + tempHeightMargin }, - { x: tempX + width + tempWidthMargin, y: tempY + tempHeightMargin }, + { x: tempX + tempWidthMargin, y: tempY + tempHeightMargin + chidoriMargin }, + { x: tempX + tempWidthMargin, y: tempY + height + tempHeightMargin + chidoriMargin }, + { x: tempX + width + tempWidthMargin, y: tempY + height + tempHeightMargin + chidoriMargin }, + { x: tempX + width + tempWidthMargin, y: tempY + tempHeightMargin + chidoriMargin }, ] tempModule.set({ points: rectPoints }) @@ -1468,8 +1529,6 @@ export function useModuleBasicSetting(tabNum) { let manualModule = new QPolygon(tempModule.points, { ...moduleOptions, moduleInfo: module, - // left: toFixedWithoutRounding(tempX + tempWidthMargin, 1), - // top: toFixedWithoutRounding(tempY - height - tempHeightMargin, 1), width: toFixedWithoutRounding(width, 1), height: toFixedWithoutRounding(height, 1), }) @@ -1483,6 +1542,10 @@ export function useModuleBasicSetting(tabNum) { manualDrawModules.push(manualModule) setModuleStatisticsData() installedLastHeightCoord = tempX + width + tempWidthMargin + + if (j === 0) { + isInstalled = true + } } else { //디버깅용 // manualModule.set({ fill: 'transparent', stroke: 'red', strokeWidth: 1 }) @@ -1493,44 +1556,51 @@ export function useModuleBasicSetting(tabNum) { swalFire({ text: getMessage('module.place.overlab') }) return } - // getModuleStatistics() - // } else { - // swalFire({ text: getMessage('module.place.overlab') }) - // return - // tempModule.set({ fill: 'transparent', stroke: 'red', strokeWidth: 1 }) - // canvas?.add(tempModule) - // canvas.renderAll() - // } } } + if (isInstalled) { + ++installedHeightModuleCount + } } - } else { + //동쪽의 처마 또는 서쪽의 용마루일경우 + } else if ((flowDirection === 'east' && setupLocation === 'eaves') || (flowDirection === 'west' && setupLocation === 'ridge')) { startX = toFixedWithoutRounding(tempModule.left + width, 1) startY = toFixedWithoutRounding(tempModule.top + height, 1) moduleOptions.fill = module.color - const col = layoutSetupRef.current.filter((item) => item.moduleId === module.itemId)[0].col - const row = layoutSetupRef.current.filter((item) => item.moduleId === module.itemId)[0].row + const col = layoutSetupRef.filter((item) => item.moduleId === module.itemId)[0].col + const row = layoutSetupRef.filter((item) => item.moduleId === module.itemId)[0].row + let tempCol = col //치도리시 하나 빼려고 임시로 for (let i = 0; i < row; i++) { //옆으로 올라가는거라 height가 아니고 width로 변경 let tempX = startX - i * width let tempWidthMargin = i === 0 ? 0 : i * intvHor + let isInstalled = false if (index > 0) { //두번째 모듈일때 마지막 설치 지점 //명칭은 그대로 쓴다 tempX = index > 0 && i === 0 ? installedLastHeightCoord - intvHor : installedLastHeightCoord } - for (let j = 0; j < col; j++) { + if (isChidori) { + tempCol = installedHeightModuleCount % 2 === 0 ? col : col - 1 + } + + for (let j = 0; j < tempCol; j++) { + let chidoriMargin = 0 let tempY = startY - j * height let tempHeightMargin = j === 0 ? 0 : j * intvVer + if (isChidori) { + chidoriMargin = installedHeightModuleCount % 2 === 0 ? 0 : height / 2 + intvVer + } + let rectPoints = [ - { x: tempX - tempWidthMargin, y: tempY - tempHeightMargin }, - { x: tempX - tempWidthMargin, y: tempY - height - tempHeightMargin }, - { x: tempX - width - tempWidthMargin, y: tempY - height - tempHeightMargin }, - { x: tempX - width - tempWidthMargin, y: tempY - tempHeightMargin }, + { x: tempX - tempWidthMargin, y: tempY - tempHeightMargin - chidoriMargin }, + { x: tempX - tempWidthMargin, y: tempY - height - tempHeightMargin - chidoriMargin }, + { x: tempX - width - tempWidthMargin, y: tempY - height - tempHeightMargin - chidoriMargin }, + { x: tempX - width - tempWidthMargin, y: tempY - tempHeightMargin - chidoriMargin }, ] tempModule.set({ points: rectPoints }) @@ -1550,8 +1620,6 @@ export function useModuleBasicSetting(tabNum) { let manualModule = new QPolygon(tempModule.points, { ...moduleOptions, moduleInfo: module, - // left: toFixedWithoutRounding(tempX + tempWidthMargin, 1), - // top: toFixedWithoutRounding(tempY - height - tempHeightMargin, 1), width: toFixedWithoutRounding(width, 1), height: toFixedWithoutRounding(height, 1), }) @@ -1565,6 +1633,10 @@ export function useModuleBasicSetting(tabNum) { manualDrawModules.push(manualModule) setModuleStatisticsData() installedLastHeightCoord = tempX - width - tempWidthMargin + + if (j === 0) { + isInstalled = true + } } else { //디버깅용 // manualModule.set({ fill: 'transparent', stroke: 'red', strokeWidth: 1 }) @@ -1575,65 +1647,14 @@ export function useModuleBasicSetting(tabNum) { swalFire({ text: getMessage('module.place.overlab') }) return } - // getModuleStatistics() - // } else { - // swalFire({ text: getMessage('module.place.overlab') }) - // return - // tempModule.set({ fill: 'transparent', stroke: 'red', strokeWidth: 1 }) - // canvas?.add(tempModule) - // canvas.renderAll() - // } } } + if (isInstalled) { + ++installedHeightModuleCount + } } } }) - //도머 객체를 가져옴 - // if (batchObjects) { - // batchObjects.forEach((object) => { - // let dormerTurfPolygon = polygonToTurfPolygon(object, true) - // const intersection = turf.intersect(turf.featureCollection([dormerTurfPolygon, tempTurfModule])) //겹치는지 확인 - // //겹치면 안됨 - // if (intersection) { - // swalFire({ text: getMessage('module.place.overobject') }) - // isIntersection = false - // } - // }) - // } - - // if (!isIntersection) return - - // tempModule.setCoords() //좌표 재정렬 - // if (turf.booleanContains(turfPolygon, tempTurfModule) || turf.booleanWithin(tempTurfModule, turfPolygon)) { - // //마우스 클릭시 set으로 해당 위치에 셀을 넣음 - // const isOverlap = manualDrawModules.some((module) => turf.booleanOverlap(tempTurfModule, polygonToTurfPolygon(module))) //겹치는지 확인 - // if (!isOverlap) { - // canvas?.remove(tempModule) - - // //안겹치면 넣는다 - // // tempModule.setCoords() - // moduleOptions.surfaceId = trestlePolygon.id - - // // console.log('tempModule.points', tempModule.points) - - // let manualModule = new QPolygon(tempModule.points, { - // ...moduleOptions, - // moduleInfo: checkedModule[0], - // left: Number(tempModule.left.toFixed(1)), - // top: Number(tempModule.top.toFixed(1)), - // width: Number(tempModule.width.toFixed(1)), - // height: Number(tempModule.height.toFixed(1)), - // }) - // canvas?.add(manualModule) - // manualDrawModules.push(manualModule) - // setModuleStatisticsData() - // // getModuleStatistics() - // } else { - // swalFire({ text: getMessage('module.place.overlab') }) - // } - // } else { - // swalFire({ text: getMessage('module.place.out') }) - // } } }) } @@ -1663,8 +1684,8 @@ export function useModuleBasicSetting(tabNum) { return } - const isChidori = placementRef.isChidori.current === 'true' ? true : false - const setupLocation = placementRef.setupLocation.current + const isChidori = moduleSetupOption.isChidori + const setupLocation = moduleSetupOption.setupLocation const isMaxSetup = false // const isMaxSetup = placementRef.isMaxSetup.current === 'true' ? true : false @@ -2784,7 +2805,7 @@ export function useModuleBasicSetting(tabNum) { ) //도머s 객체 let moduleOptions = { - fill: '#BFFD9F', + fill: checkedModule[0].color, stroke: 'black', strokeWidth: 0.3, selectable: true, // 선택 가능하게 설정 @@ -2817,14 +2838,15 @@ export function useModuleBasicSetting(tabNum) { const angle = calculateAngle(points1, points2) //변별로 선택으로 되어있을때 모듈면을 회전시키기 - const targetdSurface = moduleSetupSurfaces.filter((surface) => surface.surfaceId === obj.surfaceId)[0] - targetdSurface.angle = -angle + const targetSurface = moduleSetupSurfaces.filter((surface) => surface.surfaceId === obj.surfaceId)[0] + targetSurface.angle = -angle //변별로 선택되어있는 지붕도 회전시키기 - const targetRoof = canvas.getObjects().filter((roof) => roof.name === POLYGON_TYPE.ROOF && roof.id === targetdSurface.parentId)[0] + const targetRoof = canvas.getObjects().filter((roof) => roof.name === POLYGON_TYPE.ROOF && roof.id === targetSurface.parentId)[0] targetRoof.angle = -angle targetRoof.fire('modified') - targetdSurface.fire('modified') + targetSurface.fire('modified') + drawDirectionArrow(targetRoof) } canvas.remove(obj) }) @@ -2833,6 +2855,10 @@ export function useModuleBasicSetting(tabNum) { const targetRoof = canvas.getObjects().filter((roof) => roof.name === POLYGON_TYPE.ROOF && roof.id === surface.parentId)[0] if (targetRoof) targetRoof.angle = -compasDeg surface.angle = -compasDeg + + targetRoof.fire('modified') + surface.fire('modified') + drawDirectionArrow(targetRoof) }) } canvas.renderAll() @@ -2896,131 +2922,158 @@ export function useModuleBasicSetting(tabNum) { /** * 스냅기능 */ - let snapDistance = 10 - let cellSnapDistance = 50 + let snapDistance = flowDirection === 'south' || flowDirection === 'north' ? 70 : 40 + let sideSnapDistance = 15 + let trestleSnapDistance = 15 - let intvHor = flowDirection === 'south' || flowDirection === 'north' ? 1 : 3 - let intvVer = flowDirection === 'south' || flowDirection === 'north' ? 3 : 1 + let intvVer = flowDirection === 'south' || flowDirection === 'north' ? 10 : 30 + let intvHor = flowDirection === 'south' || flowDirection === 'north' ? 30 : 10 - const trestleLeft = moduleSetupSurfaces[i].left - const trestleTop = moduleSetupSurfaces[i].top - const trestleRight = trestleLeft + moduleSetupSurfaces[i].width * moduleSetupSurfaces[i].scaleX - const trestleBottom = trestleTop + moduleSetupSurfaces[i].height * moduleSetupSurfaces[i].scaleY + const trestleLeft = toFixedWithoutRounding(moduleSetupSurfaces[i].left, 2) - toFixedWithoutRounding(moduleSetupSurfaces[i].width / 2, 2) + const trestleTop = toFixedWithoutRounding(moduleSetupSurfaces[i].top, 2) - toFixedWithoutRounding(moduleSetupSurfaces[i].height / 2, 2) + const trestleRight = + toFixedWithoutRounding(moduleSetupSurfaces[i].left, 2) + toFixedWithoutRounding(moduleSetupSurfaces[i].width / 2, 2) + const trestleBottom = + toFixedWithoutRounding(moduleSetupSurfaces[i].top, 2) + toFixedWithoutRounding(moduleSetupSurfaces[i].height / 2, 2) const bigCenterY = (trestleTop + trestleTop + moduleSetupSurfaces[i].height) / 2 - // 작은 폴리곤의 경계 좌표 계산 - const smallLeft = tempModule.left - const smallTop = tempModule.top - const smallRight = smallLeft + tempModule.width * tempModule.scaleX - const smallBottom = smallTop + tempModule.height * tempModule.scaleY - const smallCenterX = smallLeft + (tempModule.width * tempModule.scaleX) / 2 - const smallCenterY = smallTop + (tempModule.height * tempModule.scaleX) / 2 + // 이동하는 모듈의 경계 좌표 + const smallLeft = toFixedWithoutRounding(tempModule.left, 2) + const smallTop = toFixedWithoutRounding(tempModule.top, 2) + const smallRight = smallLeft + toFixedWithoutRounding(tempModule.width, 2) + const smallBottom = smallTop + toFixedWithoutRounding(tempModule.height, 2) + const smallCenterX = smallLeft + toFixedWithoutRounding(tempModule.width / 2, 2) + const smallCenterY = smallTop + toFixedWithoutRounding(tempModule.height / 2, 2) /** * 미리 깔아놓은 셀이 있을때 셀에 흡착됨 */ if (manualDrawModules) { manualDrawModules.forEach((cell) => { - const holdCellLeft = cell.left - const holdCellTop = cell.top - const holdCellRight = holdCellLeft + cell.width * cell.scaleX - const holdCellBottom = holdCellTop + cell.height * cell.scaleY - const holdCellCenterX = holdCellLeft + (cell.width * cell.scaleX) / 2 - const holdCellCenterY = holdCellTop + (cell.height * cell.scaleY) / 2 + const holdCellLeft = toFixedWithoutRounding(cell.left, 2) + const holdCellTop = toFixedWithoutRounding(cell.top, 2) + const holdCellRight = holdCellLeft + toFixedWithoutRounding(cell.width, 2) + const holdCellBottom = holdCellTop + toFixedWithoutRounding(cell.height, 2) + const holdCellCenterX = holdCellLeft + toFixedWithoutRounding(cell.width / 2, 2) + const holdCellCenterY = holdCellTop + toFixedWithoutRounding(cell.height / 2, 2) - //설치된 셀에 좌측에 스냅 - if (Math.abs(smallRight - holdCellLeft) < snapDistance) { - tempModule.left = holdCellLeft - width - intvHor - } + //흐름방향따라 달라야 한다. + if (flowDirection === 'south' || flowDirection === 'north') { + if (Math.abs(smallCenterX - holdCellCenterX) < snapDistance) { + //움직이는 모듈 가운데 -> 설치 모듈 가운데 + tempModule.left = holdCellCenterX - toFixedWithoutRounding(width / 2, 2) + } - //설치된 셀에 우측에 스냅 - if (Math.abs(smallLeft - holdCellRight) < snapDistance) { - tempModule.left = holdCellRight + intvHor - } + //설치된 셀에 좌측에 스냅 + if (Math.abs(smallRight - holdCellLeft) < snapDistance) { + // console.log('모듈 좌측 스냅') + tempModule.left = holdCellLeft - width - intvHor + } - //설치된 셀에 위쪽에 스냅 - if (Math.abs(smallBottom - holdCellTop) < snapDistance) { - tempModule.top = holdCellTop - height - intvVer - } + //설치된 셀에 우측에 스냅 + if (Math.abs(smallLeft - holdCellRight) < snapDistance) { + // console.log('모듈 우측 스냅') + tempModule.left = holdCellRight + intvHor + } + //설치된 셀에 위쪽에 스냅 + if (Math.abs(smallBottom - holdCellTop) < sideSnapDistance) { + tempModule.top = holdCellTop - height - intvVer + } - //설치된 셀에 밑쪽에 스냅 - if (Math.abs(smallTop - holdCellBottom) < snapDistance) { - tempModule.top = holdCellBottom + intvVer + //설치된 셀에 밑쪽에 스냅 + if (Math.abs(smallTop - holdCellBottom) < sideSnapDistance) { + tempModule.top = holdCellBottom + intvVer + } + + //설치된 셀에 윗쪽에 스냅 + if (Math.abs(smallTop - holdCellTop) < sideSnapDistance) { + tempModule.top = holdCellTop + } + } else { + //흐름방향 west, east + + //가운데 가운데 + if (Math.abs(smallCenterY - holdCellCenterY) < snapDistance) { + tempModule.top = holdCellCenterY - toFixedWithoutRounding(width / 2, 2) + } + + //위쪽 -> 가운데 + if (Math.abs(smallTop - holdCellCenterY) < snapDistance) { + // console.log('holdCellCenterX', holdCellCenterX) + // console.log('smallLeft', smallLeft) + + // console.log('모듈 센터에 스냅') + tempModule.top = holdCellCenterY + intvHor / 2 + + // console.log('tempModule.left', tempModule.left) + } + // 밑 -> 가운데 + if (Math.abs(smallBottom - holdCellCenterY) < snapDistance) { + tempModule.top = holdCellCenterY - height - intvHor / 2 + } + + //설치된 셀에 좌측에 스냅 + if (Math.abs(smallRight - holdCellLeft) < snapDistance) { + // console.log('모듈 좌측 스냅') + tempModule.left = holdCellLeft - width - intvHor + } + + //설치된 셀에 우측에 스냅 + if (Math.abs(smallLeft - holdCellRight) < snapDistance) { + // console.log('모듈 우측 스냅') + tempModule.left = holdCellRight + intvHor + } + //설치된 셀에 위쪽에 스냅 + if (Math.abs(smallBottom - holdCellTop) < sideSnapDistance) { + tempModule.top = holdCellTop - height - intvVer + } + + //설치된 셀에 밑쪽에 스냅 + if (Math.abs(smallTop - holdCellBottom) < sideSnapDistance) { + tempModule.top = holdCellBottom + intvVer + } + + //설치된 셀에 윗쪽에 스냅 + if (Math.abs(smallTop - holdCellTop) < sideSnapDistance) { + tempModule.top = holdCellTop + } + + if (Math.abs(smallLeft - holdCellLeft) < snapDistance) { + tempModule.left = holdCellLeft + } } - //가운데 -> 가운데 - if (Math.abs(smallCenterX - holdCellCenterX) < cellSnapDistance) { - tempModule.left = holdCellCenterX - width / 2 - } - //왼쪽 -> 가운데 - if (Math.abs(smallLeft - holdCellCenterX) < cellSnapDistance) { - tempModule.left = holdCellCenterX - } - // 오른쪽 -> 가운데 - if (Math.abs(smallRight - holdCellCenterX) < cellSnapDistance) { - tempModule.left = holdCellCenterX - width - } - //세로 가운데 -> 가운데 - if (Math.abs(smallCenterY - holdCellCenterY) < cellSnapDistance) { - tempModule.top = holdCellCenterY - height / 2 - } - // //위쪽 -> 가운데 - // if (Math.abs(smallTop - holdCellCenterY) < cellSnapDistance) { - // tempModule.top = holdCellCenterY - // } - // //아랫쪽 -> 가운데 - // if (Math.abs(smallBottom - holdCellCenterY) < cellSnapDistance) { - // tempModule.top = holdCellCenterY - height - // } }) } // 위쪽 변에 스냅 - if (Math.abs(smallTop - trestleTop) < snapDistance) { - tempModule.top = trestleTop + if (Math.abs(smallTop - trestleTop) < trestleSnapDistance) { + tempModule.top = trestleTop + 1 } // 아래쪽 변에 스냅 - if (Math.abs(smallTop + tempModule.height * tempModule.scaleY - (trestleTop + moduleSetupSurfaces[i].height)) < snapDistance) { - tempModule.top = trestleTop + moduleSetupSurfaces[i].height - tempModule.height * tempModule.scaleY + if (Math.abs(smallBottom - trestleBottom) < trestleSnapDistance) { + tempModule.top = trestleTop + moduleSetupSurfaces[i].height - tempModule.height - 1 } // 왼쪽변에 스냅 - if (Math.abs(smallLeft - trestleLeft) < snapDistance) { - tempModule.left = trestleLeft + if (Math.abs(smallLeft - trestleLeft) < trestleSnapDistance) { + tempModule.left = trestleLeft + 1 } //오른쪽 변에 스냅 - if (Math.abs(smallRight - trestleRight) < snapDistance) { - tempModule.left = trestleRight - tempModule.width * tempModule.scaleX + if (Math.abs(smallRight - trestleRight) < trestleSnapDistance) { + tempModule.left = trestleRight - tempModule.width - 1 } if (flowDirection === 'south' || flowDirection === 'north') { - // 모듈왼쪽이 세로중앙선에 붙게 스냅 - if (Math.abs(smallLeft - (trestleLeft + moduleSetupSurfaces[i].width / 2)) < snapDistance) { - tempModule.left = trestleLeft + moduleSetupSurfaces[i].width / 2 - } - // 모듈이 가운데가 세로중앙선에 붙게 스냅 - if (Math.abs(smallCenterX - (trestleLeft + moduleSetupSurfaces[i].width / 2)) < snapDistance) { - tempModule.left = trestleLeft + moduleSetupSurfaces[i].width / 2 - (tempModule.width * tempModule.scaleX) / 2 - } - - // 모듈오른쪽이 세로중앙선에 붙게 스냅 - if (Math.abs(smallRight - (trestleLeft + moduleSetupSurfaces[i].width / 2)) < snapDistance) { - tempModule.left = trestleLeft + moduleSetupSurfaces[i].width / 2 - tempModule.width * tempModule.scaleX + if (Math.abs(smallCenterX - (trestleLeft + moduleSetupSurfaces[i].width / 2)) < trestleSnapDistance) { + tempModule.left = trestleLeft + moduleSetupSurfaces[i].width / 2 - tempModule.width / 2 } } else { // 모듈이 가로중앙선에 스냅 - if (Math.abs(smallTop + tempModule.height / 2 - bigCenterY) < snapDistance) { + if (Math.abs(smallTop + tempModule.height / 2 - bigCenterY) < trestleSnapDistance) { tempModule.top = bigCenterY - tempModule.height / 2 } - - if (Math.abs(smallTop - (trestleTop + moduleSetupSurfaces[i].height / 2)) < snapDistance) { - tempModule.top = trestleTop + moduleSetupSurfaces[i].height / 2 - } - // 모듈 밑면이 가로중앙선에 스냅 - if (Math.abs(smallBottom - (trestleTop + moduleSetupSurfaces[i].height / 2)) < snapDistance) { - tempModule.top = trestleTop + moduleSetupSurfaces[i].height / 2 - tempModule.height * tempModule.scaleY - } } tempModule.setCoords() @@ -3185,6 +3238,7 @@ export function useModuleBasicSetting(tabNum) { targetRoof.setCoords() targetSurface.setCoords() moduleSetupSurfaces.push(targetSurface) + drawDirectionArrow(targetSurface) } canvas.remove(obj) }) @@ -3193,6 +3247,10 @@ export function useModuleBasicSetting(tabNum) { const targetRoof = canvas.getObjects().filter((roof) => roof.name === POLYGON_TYPE.ROOF && roof.id === surface.parentId)[0] if (targetRoof) targetRoof.angle = -compasDeg surface.angle = -compasDeg + + targetRoof.fire('modified') + surface.fire('modified') + drawDirectionArrow(surface) }) } canvas.renderAll() @@ -3275,8 +3333,6 @@ export function useModuleBasicSetting(tabNum) { return turf.booleanContains(turfModuleSetupSurface, squarePolygon) || turf.booleanWithin(squarePolygon, turfModuleSetupSurface) } - let moduleGroup = [] - const flatRoofDownFlowSetupModule = ( surfaceMaxLines, maxLengthLine, diff --git a/src/store/canvasAtom.js b/src/store/canvasAtom.js index dc9aeabd..0679938f 100644 --- a/src/store/canvasAtom.js +++ b/src/store/canvasAtom.js @@ -390,9 +390,12 @@ export const isManualModuleLayoutSetupState = atom({ default: false, }) -export const isModuleChidoriSetupState = atom({ - key: 'isModuleChidoriSetupState', - default: false, +export const moduleSetupOptionState = atom({ + key: 'moduleSetupOptionState', + default: { + isChidori: false, //치조 안함 + setupLocation: 'eaves', //처마 + }, }) export const toggleManualSetupModeState = atom({