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

단수지정배치 작업중

Browse Source
This commit is contained in:
yjnoh 2025-03-17 18:36:39 +09:00
parent 15ff2989f4
commit 63db694efa
6 changed files with 104 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,7 +6,14 @@ import PitchModule from '@/components/floor-plan/modal/basic/step/pitch/PitchMod
import PitchPlacement from '@/components/floor-plan/modal/basic/step/pitch/PitchPlacement'
import Placement from '@/components/floor-plan/modal/basic/step/Placement'
import { useRecoilValue, useRecoilState } from 'recoil'
import { canvasSettingState, canvasState, checkedModuleState, isManualModuleLayoutSetupState, isManualModuleSetupState } from '@/store/canvasAtom'
import {
canvasSettingState,
canvasState,
checkedModuleState,
isManualModuleLayoutSetupState,
isManualModuleSetupState,
toggleManualSetupModeState,
} from '@/store/canvasAtom'
import { usePopup } from '@/hooks/usePopup'
import { Orientation } from '@/components/floor-plan/modal/basic/step/Orientation'
import { useModuleBasicSetting } from '@/hooks/module/useModuleBasicSetting'
@ -38,7 +45,7 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
const [isClosePopup, setIsClosePopup] = useState({ close: false, id: 0 })
const [checkedModules, setCheckedModules] = useRecoilState(checkedModuleState)
const [manualSetupMode, setManualSetupMode] = useState('')
const [manualSetupMode, setManualSetupMode] = useRecoilState(toggleManualSetupModeState)
const [layoutSetup, setLayoutSetup] = useState([{}])
@ -142,6 +149,8 @@ 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)
} else if (manualSetupMode.indexOf('manualLayoutSetup') > -1) {

35
src/components/floor-plan/modal/basic/step/Placement.jsx
View File

@ -1,14 +1,21 @@
import { forwardRef, useEffect, useState } from 'react'
import { useMessage } from '@/hooks/useMessage'
import { useModuleBasicSetting } from '@/hooks/module/useModuleBasicSetting'
import { checkedModuleState, currentCanvasPlanState, isManualModuleLayoutSetupState, isManualModuleSetupState } from '@/store/canvasAtom'
import {
checkedModuleState,
currentCanvasPlanState,
isManualModuleLayoutSetupState,
isManualModuleSetupState,
isModuleChidoriSetupState,
toggleManualSetupModeState,
} from '@/store/canvasAtom'
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
import { moduleSelectionDataState, selectedModuleState } from '@/store/selectedModuleOptions'
import { isObjectNotEmpty } from '@/util/common-utils'
const Placement = forwardRef((props, refs) => {
const { getMessage } = useMessage()
const [isChidori, setIsChidori] = useState(false)
const [isChidori, setIsChidori] = useRecoilState(isModuleChidoriSetupState)
const [isChidoriNotAble, setIsChidoriNotAble] = useState(false)
const [setupLocation, setSetupLocation] = useState('eaves')
@ -26,6 +33,7 @@ const Placement = forwardRef((props, refs) => {
//언마운트시 버튼 초기화
const setIsManualModuleSetup = useSetRecoilState(isManualModuleSetupState)
const setIsManualModuleLayoutSetup = useSetRecoilState(isManualModuleLayoutSetupState)
const setManualSetupMode = useSetRecoilState(toggleManualSetupModeState)
//모듈 배치면 생성
useEffect(() => {
@ -41,6 +49,7 @@ const Placement = forwardRef((props, refs) => {
return () => {
setIsManualModuleSetup(false)
setIsManualModuleLayoutSetup(false)
setManualSetupMode('')
}
}, [])
@ -60,7 +69,11 @@ 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 }))
props.layoutSetupRef.current = moduleSelectionData.module.itemList.map((item) => ({
moduleId: item.itemId,
col: 0,
row: 0,
}))
}
//모듈 배치면 생성
@ -101,16 +114,6 @@ const Placement = forwardRef((props, refs) => {
refs.setupLocation.current = e.target.value
}
const handleMaxSetup = (e) => {
if (e.target.checked) {
setIsMaxSetup('true')
refs.isMaxSetup.current = 'true'
} else {
setIsMaxSetup('false')
refs.isMaxSetup.current = 'false'
}
}
//체크된 모듈 아이디 추출
const handleSelectedItem = (e) => {
setSelectedItems({ ...selectedItems, [e.target.name]: e.target.checked })
@ -120,7 +123,11 @@ 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) }
props.layoutSetupRef.current[index] = {
...props.layoutSetupRef.current[index],
moduleId: itemId,
[e.target.name]: Number(e.target.value),
}
}
return (

86
src/hooks/module/useModuleBasicSetting.js
View File

@ -8,6 +8,8 @@ import {
currentObjectState,
isManualModuleLayoutSetupState,
isManualModuleSetupState,
isModuleChidoriSetupState,
toggleManualSetupModeState,
} from '@/store/canvasAtom'
import { rectToPolygon, polygonToTurfPolygon, calculateVisibleModuleHeight, getDegreeByChon, toFixedWithoutRounding } from '@/util/canvas-util'
@ -59,6 +61,9 @@ export function useModuleBasicSetting(tabNum) {
const [currentObject, setCurrentObject] = useRecoilState(currentObjectState)
const { setModuleStatisticsData } = useCircuitTrestle()
const { createRoofPolygon, createMarginPolygon, createPaddingPolygon } = useMode()
const isModuleChidoriSetup = useRecoilValue(isModuleChidoriSetupState)
const setManualSetupMode = useSetRecoilState(toggleManualSetupModeState)
useEffect(() => {
// console.log('basicSetting', basicSetting)
@ -437,19 +442,22 @@ export function useModuleBasicSetting(tabNum) {
//레이아웃 수동설치 토글
if (isManualModuleLayoutSetup) {
setIsManualModuleLayoutSetup(false)
setManualSetupMode(`manualLayoutSetup_false`)
}
const moduleSetupSurfaces = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE) //모듈설치면를 가져옴
if (isManualModuleSetup) {
if (checkedModule.length === 0) {
swalFire({ text: getMessage('module.place.select.module') })
setIsManualModuleSetup(!isManualModuleSetup)
setIsManualModuleSetup(false)
setManualSetupMode(`manualSetup_false`)
return
}
if (checkedModule.length > 1) {
swalFire({ text: getMessage('module.place.select.one.module') })
setIsManualModuleSetup(!isManualModuleSetup)
setIsManualModuleSetup(false)
setManualSetupMode(`manualSetup_false`)
return
}
@ -604,18 +612,13 @@ export function useModuleBasicSetting(tabNum) {
//흐름방향따라 달라야 한다.
if (flowDirection === 'south' || flowDirection === 'north') {
if (Math.abs(smallCenterX - holdCellCenterX) < snapDistance) {
//움직이는 모듈 가운데 -> 설치 모듈 가운데
tempModule.left = holdCellCenterX - toFixedWithoutRounding(width / 2, 2)
}
//왼쪽 -> 가운데
//움직이는 모듈왼쪽 -> 가운데
if (Math.abs(smallLeft - holdCellCenterX) < snapDistance) {
// console.log('holdCellCenterX', holdCellCenterX)
// console.log('smallLeft', smallLeft)
// console.log('모듈 센터에 스냅')
tempModule.left = holdCellCenterX + intvHor / 2
// console.log('tempModule.left', tempModule.left)
}
// 오른쪽 -> 가운데
if (Math.abs(smallRight - holdCellCenterX) < snapDistance) {
@ -695,6 +698,10 @@ export function useModuleBasicSetting(tabNum) {
if (Math.abs(smallTop - holdCellTop) < sideSnapDistance) {
tempModule.top = holdCellTop
}
if (Math.abs(smallLeft - holdCellLeft) < snapDistance) {
tempModule.left = holdCellLeft
}
}
//가운데 -> 가운대
@ -734,22 +741,19 @@ export function useModuleBasicSetting(tabNum) {
// 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(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 + 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
// }
@ -869,6 +873,7 @@ 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) //모듈설치면를 가져옴
@ -876,7 +881,8 @@ export function useModuleBasicSetting(tabNum) {
if (isManualModuleLayoutSetup) {
if (checkedModule.length === 0) {
swalFire({ text: getMessage('module.place.select.module') })
setIsManualModuleLayoutSetup(!isManualModuleLayoutSetup)
setIsManualModuleLayoutSetup(false)
setManualSetupMode(`manualLayoutSetup_false`)
return
}
@ -885,8 +891,9 @@ export function useModuleBasicSetting(tabNum) {
)
if (hasZeroLength) {
swalFire({ text: getMessage('모듈의 열, 행을 입력해 주세요.') })
setIsManualModuleLayoutSetup(!isManualModuleLayoutSetup)
swalFire({ text: getMessage('module.layout.setup.has.zero.value') })
setIsManualModuleLayoutSetup(false)
setManualSetupMode(`manualLayoutSetup_false`)
return
}
@ -1205,6 +1212,7 @@ export function useModuleBasicSetting(tabNum) {
if (tempModule) {
let startX, startY
let installedLastHeightCoord = 0 //마지막으로 설치된 모듈의 좌표
let installedHeightModuleCount = 0
checkedModule.forEach((module, index) => {
//모듈 사이즈
@ -1233,10 +1241,13 @@ export function useModuleBasicSetting(tabNum) {
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
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 tempCol = col
for (let i = 0; i < row; i++) {
let tempY = startY - i * height
let isInstalled = false
if (index > 0) {
//두번째 모듈일때 마지막 설치 지점
@ -1245,15 +1256,26 @@ export function useModuleBasicSetting(tabNum) {
let tempHeightMargin = i === 0 ? 0 : i * intvVer
for (let j = 0; j < col; j++) {
//치도리 설치시 컬럼 조정
if (isModuleChidoriSetup) {
//치도리면 짝수열은 안으로 넣기
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 (isModuleChidoriSetup) {
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 })
@ -1288,6 +1310,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 })
@ -1308,6 +1334,10 @@ export function useModuleBasicSetting(tabNum) {
// }
}
}
if (isInstalled) {
++installedHeightModuleCount
}
}
} else if (flowDirection === 'north') {
//북북

3
src/locales/ja.json
View File

@ -1034,5 +1034,6 @@
"roof.exceed.count": "屋根材は4つまで選択可能です。",
"outerLine.property.fix": "外壁線の属性設定 を完了しますか？",
"outerLine.property.close": "外壁線の属性設定 を終了しますか？",
"want.to.complete.auxiliary.creation": "보補助線の作成を完了しますか?"
"want.to.complete.auxiliary.creation": "보補助線の作成を完了しますか?",
"module.layout.setup.has.zero.value": "モジュールの列、行を入力してください."
}

3
src/locales/ko.json
View File

@ -1034,5 +1034,6 @@
"roof.exceed.count": "지붕재는 4개까지 선택 가능합니다.",
"outerLine.property.fix": "외벽선 속성 설정을 완료하시겠습니까?",
"outerLine.property.close": "외벽선 속성 설정을 종료하시겠습니까?",
"want.to.complete.auxiliary.creation": "보조선 작성을 완료하시겠습니까?"
"want.to.complete.auxiliary.creation": "보조선 작성을 완료하시겠습니까?",
"module.layout.setup.has.zero.value": "모듈의 열, 행을 입력해 주세요."
}

10
src/store/canvasAtom.js
View File

@ -389,3 +389,13 @@ export const isManualModuleLayoutSetupState = atom({
key: 'isManualModuleLayoutSetupState',
default: false,
})
export const isModuleChidoriSetupState = atom({
key: 'isModuleChidoriSetupState',
default: false,
})
export const toggleManualSetupModeState = atom({
key: 'toggleManualSetupModeState',
default: '',
})