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

모듈 설치 간격 적용

Browse Source
This commit is contained in:
lelalela 2025-01-16 12:52:42 +09:00
parent de282fd969
commit 895e28ef37
9 changed files with 463 additions and 343 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/common/common.js
View File

@ -169,6 +169,7 @@ export const SAVE_KEY = [
'supFitQty',
'supFitIntvlPct',
'rackLen',
'trestleDetail',
]
export const OBJECT_PROTOTYPE = [fabric.Line.prototype, fabric.Polygon.prototype, fabric.Triangle.prototype]

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

@ -78,7 +78,6 @@ export default function CanvasMenu(props) {
const { commonFunctions } = useCommonUtils()
const { floorPlanState, setFloorPlanState } = useContext(FloorPlanContext)
const { restoreModuleInstArea } = useModuleBasicSetting()
const [addedRoofs, setAddedRoofsState] = useRecoilState(addedRoofsState)
const [basicSetting, setBasicSetting] = useRecoilState(basicSettingState)
@ -162,10 +161,6 @@ export default function CanvasMenu(props) {
setType('outline')
break
case 3:
if (type === 'module') {
restoreModuleInstArea()
}
setType('surface')
break
case 4:

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

@ -5,8 +5,8 @@ import Module from '@/components/floor-plan/modal/basic/step/Module'
import PitchModule from '@/components/floor-plan/modal/basic/step/pitch/PitchModule'
import PitchPlacement from '@/components/floor-plan/modal/basic/step/pitch/PitchPlacement'
import Placement from '@/components/floor-plan/modal/basic/step/Placement'
import { useRecoilValue } from 'recoil'
import { canvasSettingState } from '@/store/canvasAtom'
import { useRecoilValue, useRecoilState } from 'recoil'
import { canvasSettingState, 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'
@ -19,6 +19,8 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
const canvasSetting = useRecoilValue(canvasSettingState)
const orientationRef = useRef(null)
const { initEvent } = useEvent()
const [isManualModuleSetup, setIsManualModuleSetup] = useRecoilState(isManualModuleSetupState)
// const { initEvent } = useContext(EventContext)
const { manualModuleSetup, autoModuleSetup, manualFlatroofModuleSetup, autoFlatroofModuleSetup } = useModuleBasicSetting()
const handleBtnNextStep = () => {
@ -38,6 +40,14 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
setupLocation: useRef('south'),
}
const handleManualModuleSetup = () => {
setIsManualModuleSetup(!isManualModuleSetup)
}
useEffect(() => {
manualModuleSetup()
}, [isManualModuleSetup])
return (
<WithDraggable isShow={true} pos={pos}>
<div className={`modal-pop-wrap lx-2`}>
@ -83,7 +93,7 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
<>
{canvasSetting.roofSizeSet && canvasSetting.roofSizeSet != 3 && (
<>
<button className="btn-frame modal mr5" onClick={manualModuleSetup}>
<button className={`btn-frame modal mr5 ${isManualModuleSetup ? 'act' : ''}`} onClick={handleManualModuleSetup}>
{getMessage('modal.module.basic.setting.passivity.placement')}
</button>
<button className="btn-frame modal act" onClick={() => autoModuleSetup(placementRef)}>

1
src/components/floor-plan/modal/basic/step/Module.jsx
View File

@ -235,7 +235,6 @@ export default function Module({ setTabNum }) {
index={index}
addRoof={roof}
roofTab={index}
moduleCommonSelectionData={moduleSelectionData.common}
moduleConstructionSelectionData={moduleSelectionData.roofConstructions[index]}
setModuleSelectionData={setModuleSelectionData}
tempModuleSelectionData={tempModuleSelectionData}

55
src/components/floor-plan/modal/basic/step/ModuleTabContents.jsx
View File

@ -1,24 +1,22 @@
import { useEffect, useState, useRef } from 'react'
import { useRecoilValue } from 'recoil'
import { canvasSettingState, pitchSelector, pitchTextSelector } from '@/store/canvasAtom'
import { pitchTextSelector } from '@/store/canvasAtom'
import { useMessage } from '@/hooks/useMessage'
import { useMasterController } from '@/hooks/common/useMasterController'
import { useCommonCode } from '@/hooks/common/useCommonCode'
import { moduleSelectionInitParamsState, selectedModuleState } from '@/store/selectedModuleOptions'
import { moduleSelectionInitParamsState } from '@/store/selectedModuleOptions'
import { isObjectNotEmpty } from '@/util/common-utils'
import QSelectBox from '@/components/common/select/QSelectBox'
export default function ModuleTabContents({
addRoof,
roofTab,
moduleCommonSelectionData,
moduleConstructionSelectionData,
setModuleSelectionData,
tempModuleSelectionData,
setTempModuleSelectionData,
}) {
const { getMessage } = useMessage()
const canvasSetting = useRecoilValue(canvasSettingState) //캔버스 기본 셋팅
const [roofMaterial, setRoofMaterial] = useState(addRoof) //지붕재`
const globalPitchText = useRecoilValue(pitchTextSelector) //피치 텍스트
@ -61,18 +59,23 @@ export default function ModuleTabContents({
setTrestleList([]) //가대메이커
setConstMthdList([]) //공법 초기화
setRoofBaseList([]) //지붕밑바탕 초기화
setConstructionList([]) //공법 초기화
}
//가대메이커 변경
const handleChangeTrestle = (option) => {
setSelectedTrestle(option) //선택값 저장
setConstructionParams({ ...trestleParams, trestleMkrCd: option.trestleMkrCd, constMthdCd: '', roofBaseCd: '' })
setConstMthdList([]) //공법 초기화
setRoofBaseList([]) //지붕밑바탕 초기화
setConstructionList([]) //공법 초기화
}
//공법 변경
const handleChangeConstMthd = (option) => {
setSelectedConstMthd(option) //선택된값 저장
setRoofBaseParams({ ...trestleParams, trestleMkrCd: selectedTrestle.trestleMkrCd, constMthdCd: option.constMthdCd, roofBaseCd: '' })
setConstructionList([]) //공법 초기화
}
//지붕밑바탕변경
@ -127,28 +130,34 @@ export default function ModuleTabContents({
}
const handleConstruction = (index) => {
const isPossibleIndex = constructionRef.current
.map((el, i) => (el.classList.contains('white') || el.classList.contains('blue') ? i : -1))
.filter((index) => index !== -1)
if (index > -1) {
const isPossibleIndex = constructionRef.current
.map((el, i) => (el.classList.contains('white') || el.classList.contains('blue') ? i : -1))
.filter((index) => index !== -1)
isPossibleIndex.forEach((index) => {
if (constructionRef.current[index].classList.contains('blue')) {
constructionRef.current[index].classList.remove('blue')
constructionRef.current[index].classList.add('white')
}
})
constructionRef.current[index].classList.remove('white')
constructionRef.current[index].classList.add('blue')
isPossibleIndex.forEach((index) => {
if (constructionRef.current[index].classList.contains('blue')) {
constructionRef.current[index].classList.remove('blue')
constructionRef.current[index].classList.add('white')
}
})
constructionRef.current[index].classList.remove('white')
constructionRef.current[index].classList.add('blue')
const selectedConstruction = constructionList[index]
selectedConstruction.roofIndex = roofTab
selectedConstruction.setupCover = false //처마력바 설치 여부
selectedConstruction.setupSnowCover = false //눈막이금구 설치 여부
selectedConstruction.selectedIndex = index
const selectedConstruction = constructionList[index]
selectedConstruction.roofIndex = roofTab
selectedConstruction.setupCover = false //처마력바 설치 여부
selectedConstruction.setupSnowCover = false //눈막이금구 설치 여부
selectedConstruction.selectedIndex = index
setCvrYn(selectedConstruction.cvrYn)
setSnowGdPossYn(selectedConstruction.snowGdPossYn)
setSelectedConstruction(selectedConstruction)
setCvrYn(selectedConstruction.cvrYn)
setSnowGdPossYn(selectedConstruction.snowGdPossYn)
setSelectedConstruction(selectedConstruction)
} else {
constructionRef.current.forEach((ref) => {
ref.classList.remove('blue')
})
}
}
useEffect(() => {

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

@ -1,6 +1,6 @@
import { useRecoilState, useRecoilValue } from 'recoil'
import { canvasState, checkedModuleState, selectedModuleState } from '@/store/canvasAtom'
import { rectToPolygon, setSurfaceShapePattern, polygonToTurfPolygon } from '@/util/canvas-util'
import { canvasState, checkedModuleState, isManualModuleSetupState, selectedModuleState } from '@/store/canvasAtom'
import { rectToPolygon, polygonToTurfPolygon, calculateVisibleModuleHeight, getDegreeByChon } from '@/util/canvas-util'
import { basicSettingState, roofDisplaySelector } from '@/store/settingAtom'
import offsetPolygon, { calculateAngle } from '@/util/qpolygon-utils'
import { QPolygon } from '@/components/fabric/QPolygon'
@ -23,13 +23,14 @@ export function useModuleBasicSetting() {
const roofDisplay = useRecoilValue(roofDisplaySelector)
const [moduleSetupSurface, setModuleSetupSurface] = useRecoilState(moduleSetupSurfaceState)
const [moduleIsSetup, setModuleIsSetup] = useRecoilState(moduleIsSetupState)
const { addTargetMouseEventListener, addCanvasMouseEventListener, initEvent } = useEvent()
const { addTargetMouseEventListener, addCanvasMouseEventListener, initEvent, removeMouseEvent } = useEvent()
const { swalFire } = useSwal()
const canvasSetting = useRecoilValue(canvasSettingState)
const compasDeg = useRecoilValue(compasDegAtom)
const { setSurfaceShapePattern } = useRoofFn()
const [basicSetting, setBasicSettings] = useRecoilState(basicSettingState)
const checkedModule = useRecoilValue(checkedModuleState)
const [isManualModuleSetup, setIsManualModuleSetup] = useRecoilState(isManualModuleSetupState)
useEffect(() => {
// console.log('basicSetting', basicSetting)
@ -67,6 +68,7 @@ export function useModuleBasicSetting() {
setSurfaceShapePattern(roof, roofDisplay.column, false) //패턴 변경
})
}
const makeModuleInstArea = () => {
//지붕 객체 반환
const roofs = canvas.getObjects().filter((obj) => obj.name === 'roof')
@ -109,6 +111,7 @@ export function useModuleBasicSetting() {
originX: 'center',
originY: 'center',
modules: [],
roofMaterial: roof.roofMaterial,
// angle: -compasDeg,
})
@ -129,8 +132,6 @@ export function useModuleBasicSetting() {
//설치 범위 지정 클릭 이벤트
const toggleSelection = (setupSurface) => {
console.log('setupSurface', setupSurface)
const isExist = selectedModuleInstSurfaceArray.some((obj) => obj.parentId === setupSurface.parentId)
//최초 선택일때
if (!isExist) {
@ -171,303 +172,329 @@ export function useModuleBasicSetting() {
* 확인 후 셀을 이동시킴
*/
const manualModuleSetup = () => {
if (checkedModule.length === 0) {
swalFire({ text: getMessage('module.place.select.module') })
return
}
// console.log('isManualModuleSetup', isManualModuleSetup)
if (checkedModule.length > 1) {
swalFire({ text: getMessage('module.place.select.one.module') })
return
}
if (isManualModuleSetup) {
if (checkedModule.length === 0) {
swalFire({ text: getMessage('module.place.select.module') })
setIsManualModuleSetup(!isManualModuleSetup)
return
}
const moduleSetupSurfaces = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE) //모듈설치면를 가져옴
const batchObjects = canvas
?.getObjects()
.filter(
(obj) =>
obj.name === BATCH_TYPE.OPENING ||
obj.name === BATCH_TYPE.TRIANGLE_DORMER ||
obj.name === BATCH_TYPE.PENTAGON_DORMER ||
obj.name === BATCH_TYPE.SHADOW,
) //도머s 객체
if (checkedModule.length > 1) {
swalFire({ text: getMessage('module.place.select.one.module') })
setIsManualModuleSetup(!isManualModuleSetup)
return
}
const moduleOptions = {
fill: checkedModule[0].color,
stroke: 'black',
strokeWidth: 0.1,
selectable: true, // 선택 가능하게 설정
lockMovementX: true, // X 축 이동 잠금
lockMovementY: true, // Y 축 이동 잠금
lockRotation: true, // 회전 잠금
lockScalingX: true, // X 축 크기 조정 잠금
lockScalingY: true, // Y 축 크기 조정 잠금
name: 'module',
}
const moduleSetupSurfaces = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE) //모듈설치면를 가져옴
const batchObjects = canvas
?.getObjects()
.filter(
(obj) =>
obj.name === BATCH_TYPE.OPENING ||
obj.name === BATCH_TYPE.TRIANGLE_DORMER ||
obj.name === BATCH_TYPE.PENTAGON_DORMER ||
obj.name === BATCH_TYPE.SHADOW,
) //도머s 객체
if (moduleSetupSurfaces.length !== 0) {
let tempModule
let manualDrawModules = []
let inside = false
let turfPolygon
let flowDirection
let trestlePolygon
const moduleOptions = {
fill: checkedModule[0].color,
stroke: 'black',
strokeWidth: 0.1,
selectable: true, // 선택 가능하게 설정
lockMovementX: true, // X 축 이동 잠금
lockMovementY: true, // Y 축 이동 잠금
lockRotation: true, // 회전 잠금
lockScalingX: true, // X 축 크기 조정 잠금
lockScalingY: true, // Y 축 크기 조정 잠금
name: 'module',
}
addCanvasMouseEventListener('mouse:move', (e) => {
//마우스 이벤트 삭제 후 재추가
const mousePoint = canvas.getPointer(e.e)
if (moduleSetupSurfaces.length !== 0) {
let tempModule
let manualDrawModules = []
let inside = false
let turfPolygon
let flowDirection
let trestlePolygon
for (let i = 0; i < moduleSetupSurfaces.length; i++) {
turfPolygon = polygonToTurfPolygon(moduleSetupSurfaces[i])
trestlePolygon = moduleSetupSurfaces[i]
manualDrawModules = moduleSetupSurfaces[i].modules // 앞에서 자동으로 했을때 추가됨
flowDirection = moduleSetupSurfaces[i].flowDirection //도형의 방향
const moduleWidth = Number(checkedModule[0].longAxis) / 10
const moduleHeight = Number(checkedModule[0].shortAxis) / 10
let width = flowDirection === 'south' || flowDirection === 'north' ? moduleWidth : moduleHeight
let height = flowDirection === 'south' || flowDirection === 'north' ? moduleHeight : moduleWidth
addCanvasMouseEventListener('mouse:move', (e) => {
//마우스 이벤트 삭제 후 재추가
const mousePoint = canvas.getPointer(e.e)
const points = [
{ x: mousePoint.x - width / 2, y: mousePoint.y - height / 2 },
{ x: mousePoint.x + width / 2, y: mousePoint.y - height / 2 },
{ x: mousePoint.x + width / 2, y: mousePoint.y + height / 2 },
{ x: mousePoint.x - width / 2, y: mousePoint.y + height / 2 },
]
for (let i = 0; i < moduleSetupSurfaces.length; i++) {
turfPolygon = polygonToTurfPolygon(moduleSetupSurfaces[i])
trestlePolygon = moduleSetupSurfaces[i]
manualDrawModules = moduleSetupSurfaces[i].modules // 앞에서 자동으로 했을때 추가됨
flowDirection = moduleSetupSurfaces[i].flowDirection //도형의 방향
const turfPoints = coordToTurfPolygon(points)
const moduleWidth = Number(checkedModule[0].longAxis) / 10
const moduleHeight = Number(checkedModule[0].shortAxis) / 10
let tmpWidth = flowDirection === 'south' || flowDirection === 'north' ? moduleWidth : moduleHeight
let tmpHeight = flowDirection === 'south' || flowDirection === 'north' ? moduleHeight : moduleWidth
let { width, height } = calculateVisibleModuleHeight(
tmpWidth,
tmpHeight,
getDegreeByChon(moduleSetupSurfaces[i].roofMaterial.pitch),
flowDirection,
) //각도 적용
if (turf.booleanWithin(turfPoints, turfPolygon)) {
let isDrawing = false
const points = [
{ x: mousePoint.x - width / 2, y: mousePoint.y - height / 2 },
{ x: mousePoint.x + width / 2, y: mousePoint.y - height / 2 },
{ x: mousePoint.x + width / 2, y: mousePoint.y + height / 2 },
{ x: mousePoint.x - width / 2, y: mousePoint.y + height / 2 },
]
if (isDrawing) return
canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'tempModule')) //움직일때 일단 지워가면서 움직임
const turfPoints = coordToTurfPolygon(points)
tempModule = new fabric.Rect({
fill: 'white',
stroke: 'black',
strokeWidth: 0.3,
width: width,
height: height,
left: mousePoint.x - width / 2,
top: mousePoint.y - height / 2,
selectable: false,
lockMovementX: true,
lockMovementY: true,
lockRotation: true,
lockScalingX: true,
lockScalingY: true,
name: 'tempModule',
parentId: moduleSetupSurfaces[i].parentId,
})
if (turf.booleanWithin(turfPoints, turfPolygon)) {
let isDrawing = false
canvas?.add(tempModule) //움직여가면서 추가됨
if (isDrawing) return
canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'tempModule')) //움직일때 일단 지워가면서 움직임
/**
* 스냅기능
*/
let snapDistance = 10
let cellSnapDistance = 20
tempModule = new fabric.Rect({
fill: 'white',
stroke: 'black',
strokeWidth: 0.3,
width: width,
height: height,
left: mousePoint.x - width / 2,
top: mousePoint.y - height / 2,
selectable: false,
lockMovementX: true,
lockMovementY: true,
lockRotation: true,
lockScalingX: true,
lockScalingY: true,
name: 'tempModule',
parentId: moduleSetupSurfaces[i].parentId,
})
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 bigCenterY = (trestleTop + trestleTop + moduleSetupSurfaces[i].height) / 2
canvas?.add(tempModule) //움직여가면서 추가됨
// 작은 폴리곤의 경계 좌표 계산
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
/**
* 스냅기능
*/
let snapDistance = 10
let cellSnapDistance = 20
/**
* 미리 깔아놓은 셀이 있을때 셀에 흡착됨
*/
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
let intvHor =
flowDirection === 'south' || flowDirection === 'north'
? moduleSetupSurfaces[i].trestleDetail.moduleIntvlHor
: moduleSetupSurfaces[i].trestleDetail.moduleIntvlVer
let intvVer =
flowDirection === 'south' || flowDirection === 'north'
? moduleSetupSurfaces[i].trestleDetail.moduleIntvlVer
: moduleSetupSurfaces[i].trestleDetail.moduleIntvlHor
//설치된 셀에 좌측에 스냅
if (Math.abs(smallRight - holdCellLeft) < snapDistance) {
tempModule.left = holdCellLeft - width - 1
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 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
/**
* 미리 깔아놓은 셀이 있을때 셀에 흡착됨
*/
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
//설치된 셀에 좌측에 스냅
if (Math.abs(smallRight - holdCellLeft) < snapDistance) {
tempModule.left = holdCellLeft - width - intvHor
}
//설치된 셀에 우측에 스냅
if (Math.abs(smallLeft - holdCellRight) < snapDistance) {
tempModule.left = holdCellRight + intvHor
}
//설치된 셀에 위쪽에 스냅
if (Math.abs(smallBottom - holdCellTop) < snapDistance) {
tempModule.top = holdCellTop - height - intvVer
}
//설치된 셀에 밑쪽에 스냅
if (Math.abs(smallTop - holdCellBottom) < snapDistance) {
tempModule.top = holdCellBottom + intvVer
}
//가운데 -> 가운데
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 + tempModule.height * tempModule.scaleY - (trestleTop + moduleSetupSurfaces[i].height)) < snapDistance) {
tempModule.top = trestleTop + moduleSetupSurfaces[i].height - tempModule.height * tempModule.scaleY
}
// 왼쪽변에 스냅
if (Math.abs(smallLeft - trestleLeft) < snapDistance) {
tempModule.left = trestleLeft
}
//오른쪽 변에 스냅
if (Math.abs(smallRight - trestleRight) < snapDistance) {
tempModule.left = trestleRight - tempModule.width * tempModule.scaleX
}
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(smallLeft - holdCellRight) < snapDistance) {
tempModule.left = holdCellRight + 1
// 모듈이 가운데가 세로중앙선에 붙게 스냅
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(smallBottom - holdCellTop) < snapDistance) {
tempModule.top = holdCellTop - height - 1
// 모듈오른쪽이 세로중앙선에 붙게 스냅
if (Math.abs(smallRight - (trestleLeft + moduleSetupSurfaces[i].width / 2)) < snapDistance) {
tempModule.left = trestleLeft + moduleSetupSurfaces[i].width / 2 - tempModule.width * tempModule.scaleX
}
} else {
// 모듈이 가로중앙선에 스냅
if (Math.abs(smallTop + tempModule.height / 2 - bigCenterY) < snapDistance) {
tempModule.top = bigCenterY - tempModule.height / 2
}
//설치된 셀에 밑쪽에 스냅
if (Math.abs(smallTop - holdCellBottom) < snapDistance) {
tempModule.top = holdCellBottom + 1
if (Math.abs(smallTop - (trestleTop + moduleSetupSurfaces[i].height / 2)) < snapDistance) {
tempModule.top = trestleTop + moduleSetupSurfaces[i].height / 2
}
//가운데 -> 가운데
if (Math.abs(smallCenterX - holdCellCenterX) < cellSnapDistance) {
tempModule.left = holdCellCenterX - width / 2
// 모듈 밑면이 가로중앙선에 스냅
if (Math.abs(smallBottom - (trestleTop + moduleSetupSurfaces[i].height / 2)) < snapDistance) {
tempModule.top = trestleTop + moduleSetupSurfaces[i].height / 2 - tempModule.height * tempModule.scaleY
}
//왼쪽 -> 가운데
if (Math.abs(smallLeft - holdCellCenterX) < cellSnapDistance) {
tempModule.left = holdCellCenterX
}
tempModule.setCoords()
canvas?.renderAll()
inside = true
break
} else {
inside = false
}
}
if (!inside) {
// tempModule.set({ fill: 'red' })
canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'tempModule'))
canvas?.renderAll()
}
})
addCanvasMouseEventListener('mouse:up', (e) => {
let isIntersection = true
if (!inside) return
if (tempModule) {
const rectPoints = [
{ x: tempModule.left, y: tempModule.top },
{ x: tempModule.left + tempModule.width * tempModule.scaleX, y: tempModule.top },
{
x: tempModule.left + tempModule.width * tempModule.scaleX,
y: tempModule.top + tempModule.height * tempModule.scaleY,
},
{ x: tempModule.left, y: tempModule.top + tempModule.height * tempModule.scaleY },
]
tempModule.set({ points: rectPoints })
const tempTurfModule = polygonToTurfPolygon(tempModule)
//도머 객체를 가져옴
if (batchObjects) {
batchObjects.forEach((object) => {
let dormerTurfPolygon
if (object.type === 'group') {
//도머는 그룹형태임
dormerTurfPolygon = batchObjectGroupToTurfPolygon(object)
} else {
//개구, 그림자
object.set({ points: rectToPolygon(object) })
dormerTurfPolygon = polygonToTurfPolygon(object)
}
// 오른쪽 -> 가운데
if (Math.abs(smallRight - holdCellCenterX) < cellSnapDistance) {
tempModule.left = holdCellCenterX - width
const intersection = turf.intersect(turf.featureCollection([dormerTurfPolygon, tempTurfModule])) //겹치는지 확인
//겹치면 안됨
if (intersection) {
swalFire({ text: getMessage('module.place.overobject') })
isIntersection = false
}
//세로 가운데 -> 가운데
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 (!isIntersection) return
// 아래쪽 변에 스냅
if (Math.abs(smallTop + tempModule.height * tempModule.scaleY - (trestleTop + moduleSetupSurfaces[i].height)) < snapDistance) {
tempModule.top = trestleTop + moduleSetupSurfaces[i].height - tempModule.height * tempModule.scaleY
}
tempModule.setCoords() //좌표 재정렬
// 왼쪽변에 스냅
if (Math.abs(smallLeft - trestleLeft) < snapDistance) {
tempModule.left = trestleLeft
}
//오른쪽 변에 스냅
if (Math.abs(smallRight - trestleRight) < snapDistance) {
tempModule.left = trestleRight - tempModule.width * tempModule.scaleX
}
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
}
} else {
// 모듈이 가로중앙선에 스냅
if (Math.abs(smallTop + tempModule.height / 2 - bigCenterY) < snapDistance) {
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()
canvas?.renderAll()
inside = true
break
} else {
inside = false
}
}
if (!inside) {
// tempModule.set({ fill: 'red' })
canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'tempModule'))
canvas?.renderAll()
}
})
addCanvasMouseEventListener('mouse:up', (e) => {
let isIntersection = true
if (!inside) return
if (tempModule) {
const rectPoints = [
{ x: tempModule.left, y: tempModule.top },
{ x: tempModule.left + tempModule.width * tempModule.scaleX, y: tempModule.top },
{
x: tempModule.left + tempModule.width * tempModule.scaleX,
y: tempModule.top + tempModule.height * tempModule.scaleY,
},
{ x: tempModule.left, y: tempModule.top + tempModule.height * tempModule.scaleY },
]
tempModule.set({ points: rectPoints })
const tempTurfModule = polygonToTurfPolygon(tempModule)
//도머 객체를 가져옴
if (batchObjects) {
batchObjects.forEach((object) => {
let dormerTurfPolygon
if (object.type === 'group') {
//도머는 그룹형태임
dormerTurfPolygon = batchObjectGroupToTurfPolygon(object)
if (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 })
canvas?.add(manualModule)
manualDrawModules.push(manualModule)
} else {
//개구, 그림자
object.set({ points: rectToPolygon(object) })
dormerTurfPolygon = polygonToTurfPolygon(object)
swalFire({ text: getMessage('module.place.overlab') })
}
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.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 })
canvas?.add(manualModule)
manualDrawModules.push(manualModule)
} else {
swalFire({ text: getMessage('module.place.overlab') })
swalFire({ text: getMessage('module.place.out') })
}
} else {
swalFire({ text: getMessage('module.place.out') })
}
}
})
})
}
} else {
removeMouseEvent('mouse:up')
removeMouseEvent('mouse:move')
canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === 'tempModule')) //움직일때 일단 지워가면서 움직임
}
}
@ -511,8 +538,6 @@ export function useModuleBasicSetting() {
}
})
// console.log('moduleIsSetup', moduleIsSetup)
// if (moduleIsSetup.length > 0) {
// swalFire({ text: 'alert 아이콘 테스트입니다.', icon: 'error' })
// }
@ -620,23 +645,29 @@ export function useModuleBasicSetting() {
* @returns {object} 모듈의 너비와 높이
*/
const getModuleWidthHeight = (maxLengthLine, moduleSetupSurface, module) => {
let width =
let tmpWidth =
(maxLengthLine.flowDirection === 'east' || maxLengthLine.flowDirection === 'west' ? Number(module.longAxis) : Number(module.shortAxis)) / 10
let height =
let tmpHeight =
(maxLengthLine.flowDirection === 'east' || maxLengthLine.flowDirection === 'west' ? Number(module.shortAxis) : Number(module.longAxis)) / 10
//배치면때는 방향쪽으로 패널이 넓게 누워져야함
if (moduleSetupSurface.flowDirection !== undefined) {
width =
tmpWidth =
(moduleSetupSurface.flowDirection === 'south' || moduleSetupSurface.flowDirection === 'north'
? Number(module.longAxis)
: Number(module.shortAxis)) / 10
height =
tmpHeight =
(moduleSetupSurface.flowDirection === 'south' || moduleSetupSurface.flowDirection === 'north'
? Number(module.shortAxis)
: Number(module.longAxis)) / 10
}
return { width, height }
return calculateVisibleModuleHeight(
tmpWidth,
tmpHeight,
getDegreeByChon(moduleSetupSurface.roofMaterial.pitch),
moduleSetupSurface.flowDirection,
) //각도 적
}
const getFlowLines = (moduleSetupSurface, module) => {
@ -649,13 +680,19 @@ export function useModuleBasicSetting() {
right: leftRightFlowLine(moduleSetupSurface, module).find((obj) => obj.target === 'right'),
}
}
console.log('flowLines', flowLines)
return flowLines
}
const downFlowSetupModule = (surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, isCenter = false) => {
const downFlowSetupModule = (
surfaceMaxLines,
maxLengthLine,
moduleSetupArray,
moduleSetupSurface,
containsBatchObjects,
isCenter = false,
intvHor,
intvVer,
) => {
let setupModule = []
checkedModule.forEach((module, index) => {
@ -705,9 +742,9 @@ export function useModuleBasicSetting() {
if (isMaxSetup) totalWidth = totalWidth * 2 //최대배치시 2배로 늘려서 반씩 검사하기위함
for (let j = 0; j < diffTopEndPoint; j++) {
bottomMargin = 0
bottomMargin = j === 0 ? 0 : intvVer * j
for (let i = 0; i <= totalWidth; i++) {
leftMargin = 0
leftMargin = i === 0 ? 0 : intvHor * i
chidoriLength = 0
if (isChidori) {
chidoriLength = j % 2 === 0 ? 0 : width / 2
@ -757,7 +794,16 @@ export function useModuleBasicSetting() {
})
}
const leftFlowSetupModule = (surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, isCenter = false) => {
const leftFlowSetupModule = (
surfaceMaxLines,
maxLengthLine,
moduleSetupArray,
moduleSetupSurface,
containsBatchObjects,
isCenter = false,
intvHor,
intvVer,
) => {
let setupModule = []
checkedModule.forEach((module, index) => {
@ -794,23 +840,23 @@ export function useModuleBasicSetting() {
let startRowPoint = startPoint.y1 - height * Math.ceil(diffTopEndPoint)
let tempMaxHeight = isMaxSetup ? height / 2 : height //최대배치인지 확인하려고 넣음
if (isMaxSetup) totalHeight = totalHeight * 2 //최대배치시 2배로 늘려서 반씩 검사
if (isMaxSetup) totalHeight = totalHeight * 2 //최대배치시 2배로 늘려 서 반씩 검사
for (let i = 0; i <= totalWidth; i++) {
bottomMargin = 0
bottomMargin = i === 0 ? 0 : intvHor * i
for (let j = 0; j < totalHeight; j++) {
leftMargin = 0
leftMargin = j === 0 ? 0 : intvVer * j
chidoriLength = 0
if (isChidori) {
chidoriLength = i % 2 === 0 ? 0 : height / 2
}
square = [
[startPoint.x1 + width * i + leftMargin, startRowPoint + tempMaxHeight * j + bottomMargin - chidoriLength],
[startPoint.x1 + width * i + width + leftMargin, startRowPoint + tempMaxHeight * j + bottomMargin - chidoriLength],
[startPoint.x1 + width * i + width + leftMargin, startRowPoint + tempMaxHeight * j + height + bottomMargin - chidoriLength],
[startPoint.x1 + width * i + leftMargin, startRowPoint + tempMaxHeight * j + height + bottomMargin - chidoriLength],
[startPoint.x1 + width * i + leftMargin, startRowPoint + tempMaxHeight * j + bottomMargin - chidoriLength],
[startPoint.x1 + width * i + bottomMargin, startRowPoint + tempMaxHeight * j + leftMargin - chidoriLength],
[startPoint.x1 + width * i + width + bottomMargin, startRowPoint + tempMaxHeight * j + leftMargin - chidoriLength],
[startPoint.x1 + width * i + width + bottomMargin, startRowPoint + tempMaxHeight * j + height + leftMargin - chidoriLength],
[startPoint.x1 + width * i + bottomMargin, startRowPoint + tempMaxHeight * j + height + leftMargin - chidoriLength],
[startPoint.x1 + width * i + bottomMargin, startRowPoint + tempMaxHeight * j + leftMargin - chidoriLength],
]
let squarePolygon = turf.polygon([square])
@ -847,7 +893,16 @@ export function useModuleBasicSetting() {
})
}
const topFlowSetupModule = (surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, isCenter = false) => {
const topFlowSetupModule = (
surfaceMaxLines,
maxLengthLine,
moduleSetupArray,
moduleSetupSurface,
containsBatchObjects,
isCenter = false,
intvHor,
intvVer,
) => {
let setupModule = []
checkedModule.forEach((module, index) => {
@ -896,14 +951,17 @@ export function useModuleBasicSetting() {
let tempMaxWidth = isMaxSetup ? width / 2 : width //최대배치인지 확인하려고 넣음
if (isMaxSetup) diffRightEndPoint = diffRightEndPoint * 2 //최대배치시 2배로 늘려서 반씩 검사하기위함
startColPoint = Math.round(startColPoint - intvHor * diffRightEndPoint)
for (let j = 0; j < diffBottomEndPoint; j++) {
bottomMargin = 0
bottomMargin = j === 0 ? 0 : intvVer * j
for (let i = 0; i < diffRightEndPoint; i++) {
leftMargin = 0
leftMargin = i === 0 ? 0 : intvHor * i
chidoriLength = 0
if (isChidori) {
chidoriLength = j % 2 === 0 ? 0 : width / 2
}
square = [
[startColPoint + tempMaxWidth * i + chidoriLength + leftMargin, startPoint.y1 + height * j + bottomMargin],
[startColPoint + tempMaxWidth * i + chidoriLength + leftMargin, startPoint.y1 + height * j + height + bottomMargin],
@ -947,7 +1005,16 @@ export function useModuleBasicSetting() {
})
}
const rightFlowSetupModule = (surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, isCenter = false) => {
const rightFlowSetupModule = (
surfaceMaxLines,
maxLengthLine,
moduleSetupArray,
moduleSetupSurface,
containsBatchObjects,
isCenter = false,
intvHor,
intvVer,
) => {
let setupModule = []
checkedModule.forEach((module, index) => {
@ -986,20 +1053,21 @@ export function useModuleBasicSetting() {
if (isMaxSetup) totalHeight = totalHeight * 2 //최대배치시 2배로 늘려서 반씩 검사
for (let i = 0; i <= totalWidth; i++) {
bottomMargin = 0
bottomMargin = i === 0 ? 0 : -(intvHor * i)
for (let j = 0; j < totalHeight; j++) {
leftMargin = 0
leftMargin = j === 0 ? 0 : intvVer * j
chidoriLength = 0
if (isChidori) {
chidoriLength = i % 2 === 0 ? 0 : height / 2
}
square = [
[startPoint.x1 - width * i - leftMargin, startRowPoint + tempMaxHeight * j + bottomMargin + chidoriLength],
[startPoint.x1 - width * i - width - leftMargin, startRowPoint + tempMaxHeight * j + bottomMargin + chidoriLength],
[startPoint.x1 - width * i - width - leftMargin, startRowPoint + tempMaxHeight * j + height + bottomMargin + chidoriLength],
[startPoint.x1 - width * i - leftMargin, startRowPoint + tempMaxHeight * j + height + bottomMargin + chidoriLength],
[startPoint.x1 - width * i - leftMargin, startRowPoint + tempMaxHeight * j + bottomMargin + chidoriLength],
[startPoint.x1 - width * i + bottomMargin, startRowPoint - intvHor + tempMaxHeight * j + leftMargin + chidoriLength],
[startPoint.x1 - width * i - width + bottomMargin, startRowPoint - intvHor + tempMaxHeight * j + leftMargin + chidoriLength],
[startPoint.x1 - width * i - width + bottomMargin, startRowPoint - intvHor + tempMaxHeight * j + height + leftMargin + chidoriLength],
[startPoint.x1 - width * i + bottomMargin, startRowPoint - intvHor + tempMaxHeight * j + height + leftMargin + chidoriLength],
[startPoint.x1 - width * i + bottomMargin, startRowPoint - intvHor + tempMaxHeight * j + leftMargin + chidoriLength],
]
let squarePolygon = turf.polygon([square])
@ -1048,48 +1116,59 @@ export function useModuleBasicSetting() {
return acc.length > cur.length ? acc : cur
})
const flowDirection = moduleSetupSurface.flowDirection
let intvHor =
flowDirection === 'south' || flowDirection === 'north'
? moduleSetupSurface.trestleDetail.moduleIntvlHor
: moduleSetupSurface.trestleDetail.moduleIntvlVer
let intvVer =
flowDirection === 'south' || flowDirection === 'north'
? moduleSetupSurface.trestleDetail.moduleIntvlVer
: moduleSetupSurface.trestleDetail.moduleIntvlHor
//처마면 배치
if (setupLocation === 'eaves') {
// 흐름방향이 남쪽일때
if (moduleSetupSurface.flowDirection === 'south') {
downFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects)
downFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, false, intvHor, intvVer)
}
if (moduleSetupSurface.flowDirection === 'west') {
leftFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects)
leftFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, false, intvHor, intvVer)
}
if (moduleSetupSurface.flowDirection === 'east') {
rightFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects)
rightFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, false, intvHor, intvVer)
}
if (moduleSetupSurface.flowDirection === 'north') {
topFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects)
topFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, false, intvHor, intvVer)
}
} else if (setupLocation === 'ridge') {
//용마루
if (moduleSetupSurface.flowDirection === 'south') {
topFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects)
topFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, false, intvHor, intvVer)
}
if (moduleSetupSurface.flowDirection === 'west') {
rightFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects)
rightFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, false, intvHor, intvVer)
}
if (moduleSetupSurface.flowDirection === 'east') {
leftFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects)
leftFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, false, intvHor, intvVer)
}
if (moduleSetupSurface.flowDirection === 'north') {
downFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects)
downFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, false, intvHor, intvVer)
}
} else if (setupLocation === 'center') {
//중가면
if (moduleSetupSurface.flowDirection === 'south') {
downFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, true)
downFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, true, intvHor, intvVer)
}
if (moduleSetupSurface.flowDirection === 'west') {
leftFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, true)
leftFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, true, intvHor, intvVer)
}
if (moduleSetupSurface.flowDirection === 'east') {
rightFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, true)
rightFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, true, intvHor, intvVer)
}
if (moduleSetupSurface.flowDirection === 'north') {
topFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, true)
topFlowSetupModule(surfaceMaxLines, maxLengthLine, moduleSetupArray, moduleSetupSurface, containsBatchObjects, true, intvHor, intvVer)
}
}

2
src/hooks/module/useModulePlace.js
View File

@ -69,7 +69,7 @@ export function useModulePlace() {
.getObjects()
.filter((surface) => surface.name === 'moduleSetupSurface' && surface.parentId === roof.id)
.forEach((surface) => {
surface.set({ trestleDetail: detail.data })
surface.set({ trestleDetail: detail.data, roofMaterial: roof.roofMaterial })
})
}
})

5
src/store/canvasAtom.js
View File

@ -379,3 +379,8 @@ export const checkedModuleState = atom({
default: [],
dangerouslyAllowMutability: true,
})
export const isManualModuleSetupState = atom({
key: 'isManualModuleSetupState',
default: false,
})

22
src/util/canvas-util.js
View File

@ -1009,3 +1009,25 @@ export function polygonToTurfPolygon(object, current = false) {
},
)
}
export function calculateVisibleModuleHeight(sourceWidth, sourceHeight, angle, direction) {
// 각도를 라디안으로 변환
const radians = (angle * Math.PI) / 180
let visibleWidth = sourceWidth // 가로는 기울어도 변하지 않음
let visibleHeight = sourceHeight * Math.cos(radians) // 세로는 각도에 따라 줄어듦
// 가로와 세로의 보이는 크기 계산
if (direction === 'south' || direction === 'north') {
visibleWidth = sourceWidth // 가로는 기울어도 변하지 않음
visibleHeight = sourceHeight * Math.cos(radians) // 세로는 각도에 따라 줄어듦
} else {
visibleWidth = sourceWidth * Math.cos(radians) // 가로는 기울어도 변하지 않음
visibleHeight = sourceHeight // 세로는 각도에 따라 줄어듦
}
return {
width: Number(visibleWidth.toFixed(1)),
height: Number(visibleHeight.toFixed(1)), // 소수점 두 자리로 고정
}
}