From 5bfee81dec774a4850051d9dadc04427532b8a98 Mon Sep 17 00:00:00 2001 From: yjnoh Date: Fri, 13 Dec 2024 13:24:48 +0900 Subject: [PATCH] =?UTF-8?q?=EC=9C=A1=EC=A7=80=EB=B6=95=20=EC=A7=80?= =?UTF-8?q?=EB=B6=95=EB=A9=B4=20=EB=AA=A8=EB=93=88=20=EC=9E=91=EC=97=85?= =?UTF-8?q?=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../modal/basic/step/pitch/PitchPlacement.jsx | 10 +- src/hooks/module/useModuleBasicSetting.js | 574 ++++++++++-------- 2 files changed, 330 insertions(+), 254 deletions(-) diff --git a/src/components/floor-plan/modal/basic/step/pitch/PitchPlacement.jsx b/src/components/floor-plan/modal/basic/step/pitch/PitchPlacement.jsx index d14bf0cc..51274ea3 100644 --- a/src/components/floor-plan/modal/basic/step/pitch/PitchPlacement.jsx +++ b/src/components/floor-plan/modal/basic/step/pitch/PitchPlacement.jsx @@ -9,16 +9,17 @@ import { useEvent } from '@/hooks/useEvent' const PitchPlacement = forwardRef((props, refs) => { const { getMessage } = useMessage() const [setupLocation, setSetupLocation] = useState('south') - const { makeModuleInstArea } = useModuleBasicSetting() + const { flatRoofMakeModuleInstArea } = useModuleBasicSetting() const canvas = useRecoilValue(canvasState) const { initEvent } = useEvent() useEffect(() => { - makeModuleInstArea() + flatRoofMakeModuleInstArea(setupLocation) }, []) useEffect(() => { handleChangeSetupLocation() + flatRoofMakeModuleInstArea(setupLocation) }, [setupLocation]) const moduleData = { @@ -56,11 +57,9 @@ const PitchPlacement = forwardRef((props, refs) => { return null } else { const moduleSetupSurfaces = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE) //모듈설치면를 가져옴 + moduleSetupSurfaces.forEach((surface, index) => { - console.log(`surface ${index} : `, surface) - const excretaLine = surface.lines - excretaLine.forEach((line) => { line.set({ stroke: '#642EFB', @@ -74,6 +73,7 @@ const PitchPlacement = forwardRef((props, refs) => { excretaLine.forEach((obj) => obj.set({ stroke: '#642EFB', isSelected: false })) if (!line.isSelected) { line.set({ stroke: 'red', isSelected: true }) + surface.fire('mousedown') } else { line.set({ stroke: '#642EFB', isSelected: false }) } diff --git a/src/hooks/module/useModuleBasicSetting.js b/src/hooks/module/useModuleBasicSetting.js index e54b227f..6d8812e7 100644 --- a/src/hooks/module/useModuleBasicSetting.js +++ b/src/hooks/module/useModuleBasicSetting.js @@ -52,7 +52,7 @@ export function useModuleBasicSetting() { const makeModuleInstArea = () => { //지붕 객체 반환 const roofs = canvas.getObjects().filter((obj) => obj.name === 'roof') - let offsetLength = canvasSetting.roofSizeSet === 3 ? -90 : -20 + let offsetLength = -20 if (!roofs) { return @@ -105,7 +105,116 @@ export function useModuleBasicSetting() { } setupSurface.set({ flowLines: flowLines }) - flatRoofMakeSurface(roof, setupSurface) + + //지붕면 선택 금지 + roof.set({ + selectable: false, + }) + + //모듈설치면 클릭이벤트 + addTargetMouseEventListener('mousedown', setupSurface, function () { + toggleSelection(setupSurface) + }) + }) + } + + const flatRoofMakeModuleInstArea = (flatBatchType) => { + //지붕 객체 반환 + + const moduleSetupSurfaces = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE) //모듈설치면를 가져옴 + const roofs = canvas.getObjects().filter((obj) => obj.name === 'roof') + let offsetLength = -90 + + if (!roofs) { + return + } + + roofs.forEach((roof) => { + const isExistSurface = canvas.getObjects().find((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE && obj.parentId === roof.id) + if (isExistSurface) { + return + } + + setSurfaceShapePattern(roof, roofDisplay.column, true) //패턴 변경 + const offsetPoints = offsetPolygon(roof.points, offsetLength) //안쪽 offset + //모듈설치영역?? 생성 + + const surfaceId = uuidv4() + + let setupSurface = new QPolygon(offsetPoints, { + stroke: 'red', + fill: 'transparent', + strokeDashArray: [10, 4], + strokeWidth: 1, + lockMovementX: true, + lockMovementY: true, + lockRotation: true, + lockScalingX: true, + lockScalingY: true, + selectable: true, + parentId: roof.id, //가대 폴리곤의 임시 인덱스를 넣어줌 + name: POLYGON_TYPE.MODULE_SETUP_SURFACE, + flowDirection: roof.direction, + direction: roof.direction, + flipX: roof.flipX, + flipY: roof.flipY, + surfaceId: surfaceId, + originX: 'center', + originY: 'center', + modules: [], + }) + + setupSurface.setViewLengthText(false) + canvas.add(setupSurface) //모듈설치면 만들기 + + //남쪽 선택 + if (flatBatchType === 'excreta') { + //변별로 선택 + const excretaLines = canvas.getObjects().filter((obj) => obj.name === 'flatExcretaLine') + excretaLines.forEach((obj) => { + if (obj.isSelected === true) { + const points1 = { x: obj.x1, y: obj.y1 } + const points2 = { x: obj.x2, y: obj.y2 } + const angle = calculateAngle(points1, points2) + + roof.angle = -angle + setupSurface.angle = -angle + roof.fire('modified') + setupSurface.fire('modified') + } + canvas.remove(obj) + }) + } else { + roof.angle = -compasDeg + setupSurface.angle = -compasDeg + } + canvas.renderAll() + + let currentPoints = setupSurface.getCurrentPoints() + let lines = [] + + for (let i = 0; i < currentPoints.length; i++) { + const start = currentPoints[i] + const end = currentPoints[(i + 1) % currentPoints.length] + const line = new QLine([start.x, start.y, end.x, end.y], {}) + lines.push(line) + } + + setupSurface.lines.forEach((targetLine, index) => { + targetLine.x1 = lines[index].x1 + targetLine.y1 = lines[index].line.y1 + targetLine.x2 = lines[index].line.x2 + targetLine.y2 = lines[index].line.y2 + }) + + const flowLines = { + bottom: bottomTopFlowLine(setupSurface).find((obj) => obj.target === 'bottom'), + top: bottomTopFlowLine(setupSurface).find((obj) => obj.target === 'top'), + left: leftRightFlowLine(setupSurface).find((obj) => obj.target === 'left'), + right: leftRightFlowLine(setupSurface).find((obj) => obj.target === 'right'), + } + + setupSurface.set({ flowLines: flowLines }) //지붕면 선택 금지 roof.set({ @@ -1306,13 +1415,13 @@ export function useModuleBasicSetting() { const pointX2 = coords[2].x + ((coords[2].y - top) / (coords[2].y - coords[1].y)) * (coords[1].x - coords[2].x) const pointY2 = top - // const finalLine = new QLine([pointX1, pointY1, pointX2, pointY2], { - // stroke: 'red', - // strokeWidth: 1, - // selectable: true, - // }) - // canvas?.add(finalLine) - // canvas?.renderAll() + const finalLine = new QLine([pointX1, pointY1, pointX2, pointY2], { + stroke: 'red', + strokeWidth: 1, + selectable: true, + }) + canvas?.add(finalLine) + canvas?.renderAll() let rtnObj //평평하면 @@ -1429,13 +1538,13 @@ export function useModuleBasicSetting() { const pointX2 = top const pointY2 = coords[2].y + ((coords[2].x - top) / (coords[2].x - coords[1].x)) * (coords[1].y - coords[2].y) - // const finalLine = new QLine([pointX1, pointY1, pointX2, pointY2], { - // stroke: 'red', - // strokeWidth: 1, - // selectable: true, - // }) - // canvas?.add(finalLine) - // canvas?.renderAll() + const finalLine = new QLine([pointX1, pointY1, pointX2, pointY2], { + stroke: 'red', + strokeWidth: 1, + selectable: true, + }) + canvas?.add(finalLine) + canvas?.renderAll() let rtnObj //평평하면 @@ -1526,27 +1635,8 @@ export function useModuleBasicSetting() { } const manualFlatroofModuleSetup = (placementFlatRef) => { - const moduleSetupSurfaces = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE) //모듈설치면를 가져옴 - let applyAngle + let moduleSetupSurfaces = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE) //모듈설치면를 가져옴 let flatBatchType = placementFlatRef.setupLocation.current.value - let excretaLinesAngle = [] - - if (flatBatchType === 'excreta') { - const excretaLines = canvas.getObjects().filter((obj) => obj.name === 'flatExcretaLine') - excretaLines.forEach((obj) => { - if (obj.isSelected) { - const points1 = { x: obj.x1, y: obj.y1 } - const points2 = { x: obj.x2, y: obj.y2 } - excretaLinesAngle.push({ - surfaceId: obj.surfaceId, - angle: calculateAngle(points1, points2), - }) - } - canvas.remove(obj) - }) - } - - //calculateAngle const batchObjects = canvas ?.getObjects() @@ -1573,29 +1663,29 @@ export function useModuleBasicSetting() { name: 'module', } - function getRotatedCorners(rect) { - // 사각형의 중심점 - const center = rect.getCenterPoint() + // function getRotatedCorners(rect) { + // // 사각형의 중심점 + // const center = rect.getCenterPoint() - // 사각형의 원래 꼭짓점 좌표 (로컬 좌표 기준) - const halfWidth = (rect.width / 2) * rect.scaleX - const halfHeight = (rect.height / 2) * rect.scaleY + // // 사각형의 원래 꼭짓점 좌표 (로컬 좌표 기준) + // const halfWidth = (rect.width / 2) * rect.scaleX + // const halfHeight = (rect.height / 2) * rect.scaleY - const corners = [ - { x: -halfWidth, y: -halfHeight }, // 좌상단 - { x: halfWidth, y: -halfHeight }, // 우상단 - { x: halfWidth, y: halfHeight }, // 우하단 - { x: -halfWidth, y: halfHeight }, // 좌하단 - ] + // const corners = [ + // { x: -halfWidth, y: -halfHeight }, // 좌상단 + // { x: halfWidth, y: -halfHeight }, // 우상단 + // { x: halfWidth, y: halfHeight }, // 우하단 + // { x: -halfWidth, y: halfHeight }, // 좌하단 + // ] - // 각 꼭짓점 좌표를 캔버스 좌표로 변환 - const transformedCorners = corners.map((corner) => { - const point = new fabric.Point(corner.x, corner.y) - return fabric.util.transformPoint(point, rect.calcTransformMatrix()) - }) + // // 각 꼭짓점 좌표를 캔버스 좌표로 변환 + // const transformedCorners = corners.map((corner) => { + // const point = new fabric.Point(corner.x, corner.y) + // return fabric.util.transformPoint(point, rect.calcTransformMatrix()) + // }) - return transformedCorners - } + // return transformedCorners + // } if (moduleSetupSurfaces.length !== 0) { let tempModule @@ -1613,35 +1703,19 @@ export function useModuleBasicSetting() { turfPolygon = polygonToTurfPolygon(moduleSetupSurfaces[i], true) trestlePolygon = moduleSetupSurfaces[i] manualDrawModules = moduleSetupSurfaces[i].modules // 앞에서 자동으로 했을때 추가됨 + flowDirection = moduleSetupSurfaces[i].flowDirection //도형의 방향 - - if (flatBatchType === 'excreta') { - const tempLine = excretaLinesAngle.find((obj) => obj.surfaceId === trestlePolygon.surfaceId) - if (tempLine) { - applyAngle = tempLine.angle - } else { - //혹시나 두개의 지붕을 그리고 한쪽면만 선택했을때 한면은 그냥 기본 기울기를 준다 - applyAngle = compasDeg - } - } - let width = flowDirection === 'south' || flowDirection === 'north' ? 172 : 113 let height = flowDirection === 'south' || flowDirection === 'north' ? 113 : 172 - const angledModule = new fabric.Rect({ - width: width, - height: height, - left: mousePoint.x - width / 2, - top: mousePoint.y - height / 2, - }) + 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 }, + ] - const center = angledModule.getCenterPoint() - angledModule.set('angle', applyAngle) - angledModule.setPositionByOrigin(center, 'center', 'center') - - const points = getRotatedCorners(angledModule) // const turfPoints = coordToTurfPolygon(points) - if (turf.booleanWithin(turfPoints, turfPolygon)) { let isDrawing = false @@ -1651,139 +1725,153 @@ export function useModuleBasicSetting() { tempModule = new QPolygon(points, { fill: 'white', stroke: 'black', - strokeWidth: 0.3, + strokeWidth: 1, + 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, + opacity: 0.8, name: 'tempModule', + parentId: moduleSetupSurfaces[i].parentId, }) canvas?.add(tempModule) //움직여가면서 추가됨 - canvas?.renderAll() /** * 스냅기능 */ - let snapDistance = 10 - let cellSnapDistance = 20 + // let snapDistance = 10 + // let cellSnapDistance = 20 - // if (applyAngle === 90 || applyAngle === 180 || applyAngle === 270 || applyAngle === 0) { - // 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 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 + // // 작은 폴리곤의 경계 좌표 계산 + // 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 (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 - 0.5 - // } + // //설치된 셀에 좌측에 스냅 + // if (Math.abs(smallRight - holdCellLeft) < snapDistance) { + // tempModule.left = holdCellLeft - width - 0.5 + // } - // //설치된 셀에 우측에 스냅 - // if (Math.abs(smallLeft - holdCellRight) < snapDistance) { - // tempModule.left = holdCellRight + 0.5 - // } + // //설치된 셀에 우측에 스냅 + // if (Math.abs(smallLeft - holdCellRight) < snapDistance) { + // tempModule.left = holdCellRight + 0.5 + // } - // //설치된 셀에 위쪽에 스냅 - // if (Math.abs(smallBottom - holdCellTop) < snapDistance) { - // tempModule.top = holdCellTop - height - 0.5 - // } + // //설치된 셀에 위쪽에 스냅 + // if (Math.abs(smallBottom - holdCellTop) < snapDistance) { + // tempModule.top = holdCellTop - height - 0.5 + // } - // //설치된 셀에 밑쪽에 스냅 - // if (Math.abs(smallTop - holdCellBottom) < snapDistance) { - // tempModule.top = holdCellBottom + 0.5 - // } - // //가운데 -> 가운데 - // 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 - holdCellBottom) < snapDistance) { + // tempModule.top = holdCellBottom + 0.5 + // } + // //가운데 -> 가운데 + // 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(smallTop - trestleTop) < snapDistance) { - // tempModule.top = trestleTop + // // 모듈이 가운데가 세로중앙선에 붙게 스냅 + // 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(smallTop + tempModule.height * tempModule.scaleY - (trestleTop + moduleSetupSurfaces[i].height)) < snapDistance) { - // tempModule.top = trestleTop + moduleSetupSurfaces[i].height - tempModule.height * tempModule.scaleY + // // 모듈오른쪽이 세로중앙선에 붙게 스냅 + // 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(smallLeft - trestleLeft) < snapDistance) { - // tempModule.left = trestleLeft + // if (Math.abs(smallTop - (trestleTop + moduleSetupSurfaces[i].height / 2)) < snapDistance) { + // tempModule.top = trestleTop + moduleSetupSurfaces[i].height / 2 // } - // //오른쪽 변에 스냅 - // 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 - // } + // // 모듈 밑면이 가로중앙선에 스냅 + // 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 { @@ -1849,9 +1937,7 @@ export function useModuleBasicSetting() { const autoFlatroofModuleSetup = (placementFlatRef) => { initEvent() //마우스 이벤트 초기화 - let flatBatchType = placementFlatRef.setupLocation.current.value const moduleSetupSurfaces = moduleSetupSurface //선택 설치면 - const notSelectedTrestlePolygons = canvas ?.getObjects() .filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE && !moduleSetupSurfaces.includes(obj)) //설치면이 아닌것 @@ -1887,6 +1973,38 @@ export function useModuleBasicSetting() { } }) + const flatBatchType = placementFlatRef.setupLocation.current.value + + //남쪽 선택 + // if (flatBatchType === 'excreta') { + // //변별로 선택 + // const excretaLines = canvas.getObjects().filter((obj) => obj.name === 'flatExcretaLine') + // excretaLines.forEach((obj) => { + // if (obj.isSelected === true) { + // const points1 = { x: obj.x1, y: obj.y1 } + // const points2 = { x: obj.x2, y: obj.y2 } + // const angle = calculateAngle(points1, points2) + + // const targetdSurface = moduleSetupSurfaces.filter((surface) => surface.surfaceId === obj.surfaceId)[0] + // const targetRoof = canvas.getObjects().filter((roof) => roof.name === POLYGON_TYPE.ROOF && roof.id === targetdSurface.parentId)[0] + + // targetRoof.angle = -angle + // targetdSurface.angle = -angle + + // targetRoof.fire('modified') + // targetdSurface.fire('modified') + // } + // canvas.remove(obj) + // }) + // } else { + // moduleSetupSurfaces.forEach((surface) => { + // const targetRoof = canvas.getObjects().filter((roof) => roof.name === POLYGON_TYPE.ROOF && roof.id === surface.parentId)[0] + // if (targetRoof) targetRoof.angle = -compasDeg + // surface.angle = -compasDeg + // }) + // } + // canvas.renderAll() + const moduleOptions = { fill: '#BFFD9F', stroke: 'black', @@ -1902,7 +2020,7 @@ export function useModuleBasicSetting() { name: 'module', } - let leftMargin, bottomMargin, square, chidoriLength + let leftMargin, bottomMargin, square //선택된 지붕안에 오브젝트(도머, 개구등)이 있는지 확인하는 로직 포함되면 배열 반환 const objectsIncludeSurface = (turfModuleSetupSurface) => { @@ -2151,8 +2269,8 @@ export function useModuleBasicSetting() { } const surfaceMaxLines = findSetupSurfaceMaxLines(moduleSetupSurface) - const marginWidth = 0 - const marginHeight = 0 + const marginWidth = 1 + const marginHeight = 1 canvas.renderAll() @@ -2181,21 +2299,21 @@ export function useModuleBasicSetting() { canvas?.renderAll() - //나간애들 제외하고 설치된 애들로 겹친애들 삭제 하기 - // setupedModules.forEach((module, index) => { - // if (isMaxSetup && index > 0) { - // const isOverlap = turf.booleanOverlap(polygonToTurfPolygon(setupedModules[index - 1]), polygonToTurfPolygon(module)) - // //겹치는지 확인 - // if (isOverlap) { - // //겹쳐있으면 삭제 - // // canvas?.remove(module) - // module.set({ fill: 'rgba(72, 161, 250, 0.4)', stroke: 'black', strokeWidth: 0.1 }) - // canvas.renderAll() - // setupedModules.splice(index, 1) - // return false - // } - // } - // }) + // 나간애들 제외하고 설치된 애들로 겹친애들 삭제 하기 + setupedModules.forEach((module, index) => { + if (index > 0) { + const isOverlap = turf.booleanOverlap(polygonToTurfPolygon(setupedModules[index - 1]), polygonToTurfPolygon(module)) + //겹치는지 확인 + if (isOverlap) { + //겹쳐있으면 삭제 + // canvas?.remove(module) + module.set({ fill: 'rgba(72, 161, 250, 0.4)', stroke: 'black', strokeWidth: 0.1 }) + canvas.renderAll() + setupedModules.splice(index, 1) + return false + } + } + }) moduleSetupSurface.set({ modules: setupedModules }) @@ -2209,49 +2327,6 @@ export function useModuleBasicSetting() { // console.log(calculateForApi()) } - const flatRoofMakeSurface = (roof, setupSurface) => { - setupSurface.angle = -compasDeg - roof.angle = -compasDeg - - const roofPoints = roof.getCurrentPoints() - const roofLines = roofPoints.map((point, index) => { - const nextIndex = (index + 1) % roofPoints.length - const nextPoint = roofPoints[nextIndex] - - return { - x1: point.x, - y1: point.y, - x2: nextPoint.x, - y2: nextPoint.y, - } - }) - roof.set({ lines: roofLines }) - roof.fire('modified') - - const surfacePoints = setupSurface.getCurrentPoints() - const surfaceLines = surfacePoints.map((point, index) => { - const nextIndex = (index + 1) % surfacePoints.length - const nextPoint = surfacePoints[nextIndex] - - return { - x1: point.x, - y1: point.y, - x2: nextPoint.x, - y2: nextPoint.y, - } - }) - setupSurface.set({ lines: surfaceLines }) - - const flowLines = { - bottom: bottomTopFlowLine(setupSurface).find((obj) => obj.target === 'bottom'), - top: bottomTopFlowLine(setupSurface).find((obj) => obj.target === 'top'), - left: leftRightFlowLine(setupSurface).find((obj) => obj.target === 'left'), - right: leftRightFlowLine(setupSurface).find((obj) => obj.target === 'right'), - } - setupSurface.set({ flowLines: flowLines }) - setupSurface.fire('modified') - } - return { makeModuleInstArea, manualModuleSetup, @@ -2259,5 +2334,6 @@ export function useModuleBasicSetting() { restoreModuleInstArea, manualFlatroofModuleSetup, autoFlatroofModuleSetup, + flatRoofMakeModuleInstArea, } }