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 11:33:44 +09:00
parent ae2171c633
commit 9e66b3ef7d
3 changed files with 328 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,7 +6,7 @@ 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, isManualModuleLayoutSetupState, isManualModuleSetupState } from '@/store/canvasAtom'
import { canvasSettingState, canvasState, checkedModuleState, isManualModuleLayoutSetupState, isManualModuleSetupState } from '@/store/canvasAtom'
import { usePopup } from '@/hooks/usePopup'
import { Orientation } from '@/components/floor-plan/modal/basic/step/Orientation'
import { useModuleBasicSetting } from '@/hooks/module/useModuleBasicSetting'
@ -107,7 +107,6 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
}
const handleManualModuleLayoutSetup = () => {
console.log('asdfasdkljfhaskjdhfakjsdhkfjh')
setManualSetupMode(`manualLayoutSetup_${!isManualModuleLayoutSetup}`)
setIsManualModuleLayoutSetup(!isManualModuleLayoutSetup)
}
@ -142,8 +141,6 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
}
useEffect(() => {
console.log('asdfasdf', manualSetupMode)
if (basicSetting.roofSizeSet !== '3') {
if (manualSetupMode.indexOf('manualSetup') > -1) {
manualModuleSetup(placementRef)
@ -198,19 +195,6 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
<PitchPlacement setTabNum={setTabNum} ref={placementFlatRef} />
)}
<div className="grid-btn-wrap">
{tabNum !== 1 && (
<button className="btn-frame modal mr5" onClick={() => setTabNum(tabNum - 1)}>
{getMessage('modal.module.basic.setting.prev')}
</button>
)}
{/*{tabNum !== 3 && <button className="btn-frame modal act mr5">{getMessage('modal.common.save')}</button>}*/}
{tabNum !== 3 && (
<button className="btn-frame modal" onClick={handleBtnNextStep}>
Next
</button>
)}
<div className="grid-btn-wrap">
{tabNum !== 1 && (
<button className="btn-frame modal mr5" onClick={() => setTabNum(tabNum - 1)}>
@ -252,7 +236,6 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
</>
)}
</div>
</div>
</WithDraggable.Body>
</WithDraggable>
)

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

@ -175,7 +175,7 @@ const Placement = forwardRef((props, refs) => {
className="input-origin block mr10"
name="col"
value={props.layoutSetup[index]?.col ?? 1}
defaultValue={1}
defaultValue={0}
onChange={(e) => handleLayoutSetup(e, item.itemId, index)}
/>{' '}
×<label htmlFor="ra07">열</label>
@ -184,7 +184,7 @@ const Placement = forwardRef((props, refs) => {
className="input-origin block"
name="row"
value={props.layoutSetup[index]?.row ?? 1}
defaultValue={1}
defaultValue={0}
onChange={(e) => handleLayoutSetup(e, item.itemId, index)}
/>
</tr>

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

@ -1146,44 +1146,44 @@ export function useModuleBasicSetting(tabNum) {
if (!inside) {
// tempModule.set({ fill: 'red' })
canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'tempModule'))
canvas?.renderAll()
// canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'tempModule'))
// canvas?.renderAll()
}
})
addCanvasMouseEventListener('mouse:up', (e) => {
let isIntersection = true
if (!inside) return
if (tempModule) {
let startX, startY
let installedLastHeightCoord = 0 //마지막으로 설치된 모듈의 좌표
//그려진 가이드 라인의 포인트를 기준으로 시작점을 만든다
if (flowDirection === 'south') {
startX = toFixedWithoutRounding(tempModule.left, 1)
startY = toFixedWithoutRounding(tempModule.top + tempModule.height, 1)
console.log('checkedModule', checkedModule)
checkedModule.forEach((module, index) => {
moduleOptions.fill = module.color
const moduleWidth = Number(module.longAxis) / 10
const moduleHeight = Number(module.shortAxis) / 10
//모듈 사이즈
const moduleWidth = toFixedWithoutRounding(module.longAxis / 10, 1)
const moduleHeight = toFixedWithoutRounding(module.shortAxis / 10, 1)
//흐름 방향에 따른 모듈 사이즈
let tmpWidth = flowDirection === 'south' || flowDirection === 'north' ? moduleWidth : moduleHeight
let tmpHeight = flowDirection === 'south' || flowDirection === 'north' ? moduleHeight : moduleWidth
//복시도, 실치수에 따른 모듈 높이 조정
width =
canvasSetting.roofSizeSet == '1'
? calculateVisibleModuleHeight(tmpWidth, tmpHeight, getDegreeByChon(moduleSetupSurfaces[i].roofMaterial.pitch), flowDirection)
.width
? calculateVisibleModuleHeight(tmpWidth, tmpHeight, getDegreeByChon(trestlePolygon.roofMaterial.pitch), flowDirection).width
: tmpWidth
height =
canvasSetting.roofSizeSet == '1'
? calculateVisibleModuleHeight(tmpWidth, tmpHeight, getDegreeByChon(moduleSetupSurfaces[i].roofMaterial.pitch), flowDirection)
.height
? calculateVisibleModuleHeight(tmpWidth, tmpHeight, getDegreeByChon(trestlePolygon.roofMaterial.pitch), flowDirection).height
: tmpHeight
//그려진 가이드 라인의 포인트를 기준으로 시작점을 만든다
if (flowDirection === 'south') {
//남
startX = toFixedWithoutRounding(tempModule.left, 1)
startY = toFixedWithoutRounding(tempModule.top + tempModule.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
for (let i = 0; i < row; i++) {
@ -1206,7 +1206,6 @@ export function useModuleBasicSetting(tabNum) {
{ x: tempX + width + tempWidthMargin, y: tempY - tempHeightMargin },
{ x: tempX + width + tempWidthMargin, y: tempY - height - tempHeightMargin },
]
// console.log('🚀 ~ addCanvasMouseEventListener ~ rectPoints:', rectPoints)
tempModule.set({ points: rectPoints })
const tempTurfModule = polygonToTurfPolygon(tempModule)
@ -1215,7 +1214,7 @@ export function useModuleBasicSetting(tabNum) {
if (turf.booleanContains(turfPolygon, tempTurfModule) || turf.booleanWithin(tempTurfModule, turfPolygon)) {
//마우스 클릭시 set으로 해당 위치에 셀을 넣음
const isOverlap = manualDrawModules.some((module) => turf.booleanOverlap(tempTurfModule, polygonToTurfPolygon(module))) //겹치는지 확인
// if (!isOverlap) {
if (!isOverlap) {
canvas?.remove(tempModule)
//안겹치면 넣는다
@ -1240,9 +1239,14 @@ export function useModuleBasicSetting(tabNum) {
setModuleStatisticsData()
installedLastHeightCoord = tempY - height - tempHeightMargin
} else {
manualModule.set({ fill: 'transparent', stroke: 'red', strokeWidth: 1 })
canvas?.add(manualModule)
canvas.renderAll()
//디버깅용
// manualModule.set({ fill: 'transparent', stroke: 'red', strokeWidth: 1 })
// canvas?.add(manualModule)
// canvas.renderAll()
}
} else {
swalFire({ text: getMessage('module.place.overlab') })
return
}
// getModuleStatistics()
// } else {
@ -1255,18 +1259,252 @@ export function useModuleBasicSetting(tabNum) {
}
}
}
})
} else if (flowDirection === 'north') {
startX = tempModule.points[3].x
startY = tempModule.points[3].y
} else if (flowDirection === 'east') {
startX = tempModule.points[2].x
startY = tempModule.points[2].y
} else {
startX = tempModule.points[0].x
startY = tempModule.points[0].y
//북북
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
for (let i = 0; i < row; i++) {
let tempY = startY + i * height
if (index > 0) {
//두번째 모듈일때 마지막 설치 지점
tempY = index > 0 && i === 0 ? installedLastHeightCoord + intvVer : installedLastHeightCoord
}
let tempHeightMargin = i === 0 ? 0 : i * intvVer
for (let j = 0; j < col; j++) {
let tempX = startX - j * width
let tempWidthMargin = j === 0 ? 0 : j * 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 },
]
tempModule.set({ points: rectPoints })
const tempTurfModule = polygonToTurfPolygon(tempModule)
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
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),
})
let isDisjoint = checkModuleDisjointObjects(tempTurfModule, containsBatchObjects)
//오브젝트와 겹치지 않으면 넣는다
if (isDisjoint) {
canvas?.add(manualModule)
manualDrawModules.push(manualModule)
setModuleStatisticsData()
installedLastHeightCoord = tempY + height + tempHeightMargin
} else {
//디버깅용
// manualModule.set({ fill: 'transparent', stroke: 'red', strokeWidth: 1 })
// canvas?.add(manualModule)
// canvas.renderAll()
}
} else {
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()
// }
}
}
}
} else if (flowDirection === 'west') {
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
for (let i = 0; i < row; i++) {
//옆으로 올라가는거라 height가 아니고 width로 변경
let tempX = startX + i * width
let tempWidthMargin = i === 0 ? 0 : i * intvHor
if (index > 0) {
//두번째 모듈일때 마지막 설치 지점 //명칭은 그대로 쓴다
tempX = index > 0 && i === 0 ? installedLastHeightCoord + intvHor : installedLastHeightCoord
}
for (let j = 0; j < col; j++) {
let tempY = startY + j * height
let tempHeightMargin = j === 0 ? 0 : j * 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 },
]
tempModule.set({ points: rectPoints })
const tempTurfModule = polygonToTurfPolygon(tempModule)
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
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),
})
let isDisjoint = checkModuleDisjointObjects(tempTurfModule, containsBatchObjects)
//오브젝트와 겹치지 않으면 넣는다
if (isDisjoint) {
canvas?.add(manualModule)
manualDrawModules.push(manualModule)
setModuleStatisticsData()
installedLastHeightCoord = tempX + width + tempWidthMargin
} else {
//디버깅용
// manualModule.set({ fill: 'transparent', stroke: 'red', strokeWidth: 1 })
// canvas?.add(manualModule)
// canvas.renderAll()
}
} else {
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()
// }
}
}
}
} else {
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
for (let i = 0; i < row; i++) {
//옆으로 올라가는거라 height가 아니고 width로 변경
let tempX = startX - i * width
let tempWidthMargin = i === 0 ? 0 : i * intvHor
if (index > 0) {
//두번째 모듈일때 마지막 설치 지점 //명칭은 그대로 쓴다
tempX = index > 0 && i === 0 ? installedLastHeightCoord - intvHor : installedLastHeightCoord
}
for (let j = 0; j < col; j++) {
let tempY = startY - j * height
let tempHeightMargin = j === 0 ? 0 : j * 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 },
]
tempModule.set({ points: rectPoints })
const tempTurfModule = polygonToTurfPolygon(tempModule)
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
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),
})
let isDisjoint = checkModuleDisjointObjects(tempTurfModule, containsBatchObjects)
//오브젝트와 겹치지 않으면 넣는다
if (isDisjoint) {
canvas?.add(manualModule)
manualDrawModules.push(manualModule)
setModuleStatisticsData()
installedLastHeightCoord = tempX - width - tempWidthMargin
} else {
//디버깅용
// manualModule.set({ fill: 'transparent', stroke: 'red', strokeWidth: 1 })
// canvas?.add(manualModule)
// canvas.renderAll()
}
} else {
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 (batchObjects) {
// batchObjects.forEach((object) => {