From 4aae0bccb3ed3867f7c9bc712b5e1286713d5a62 Mon Sep 17 00:00:00 2001 From: yjnoh Date: Tue, 3 Dec 2024 13:13:53 +0900 Subject: [PATCH] =?UTF-8?q?=EB=AA=A8=EB=93=88=20=EC=B5=9C=EB=8C=80?= =?UTF-8?q?=EB=B0=B0=EC=B9=98,=20=EC=A4=91=EC=95=99=EB=B0=B0=EC=B9=98=20?= =?UTF-8?q?=EC=9E=91=EC=97=85=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/module/useModuleBasicSetting.js | 214 ++++++++++++++++------ 1 file changed, 156 insertions(+), 58 deletions(-) diff --git a/src/hooks/module/useModuleBasicSetting.js b/src/hooks/module/useModuleBasicSetting.js index 85597456..361347f0 100644 --- a/src/hooks/module/useModuleBasicSetting.js +++ b/src/hooks/module/useModuleBasicSetting.js @@ -52,6 +52,7 @@ export function useModuleBasicSetting() { parentId: roof.id, //가대 폴리곤의 임시 인덱스를 넣어줌 name: POLYGON_TYPE.MODULE_SETUP_SURFACE, flowDirection: roof.direction, + direction: roof.direction, flipX: roof.flipX, flipY: roof.flipY, surfaceId: surfaceId, @@ -60,16 +61,15 @@ export function useModuleBasicSetting() { setupSurface.setViewLengthText(false) canvas.add(setupSurface) //모듈설치면 만들기 - if (setupSurface.flowDirection === 'south' || setupSurface.flowDirection === 'north') { - setupSurface.set({ - flowLines: bottomTopFlowLine(setupSurface), - }) - } else { - setupSurface.set({ - flowLines: leftRightFlowLine(setupSurface), - }) + 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({ selectable: false, @@ -527,13 +527,40 @@ export function useModuleBasicSetting() { return turf.booleanContains(turfModuleSetupSurface, squarePolygon) || turf.booleanWithin(squarePolygon, turfModuleSetupSurface) } - const downFlowSetupModule = (surfaceMaxLines, width, height, moduleSetupArray, flowModuleLine) => { + const downFlowSetupModule = (surfaceMaxLines, width, height, moduleSetupArray, flowModuleLine, isCenter = false) => { + let startPoint = flowModuleLine.bottom + + if (isCenter) { + //중앙배치일 경우에는 계산한다 + + if (flowModuleLine.bottom.type === 'flat' && flowModuleLine.left.type === 'flat' && flowModuleLine.right.type === 'flat') { + //하단 기준으로 양면이 직선이면 하단 방면으로 가운데로 배치 + const halfWidthLength = Math.abs(startPoint.x1 + startPoint.x2) / 2 //밑에 길이에서 반을 가른다 + const halfModuleWidthLength = width / 2 + startPoint = { ...startPoint, x1: halfWidthLength - halfModuleWidthLength } + + if (flowModuleLine.top.type === 'flat') { + //상단까지 평면이면 직사각,정사각이라 가정하고 상자의 중심으로 계산 + const heightLength = Math.abs(flowModuleLine.left.y1 - flowModuleLine.left.y2) //옆에에 길이에서 반을 가른다 + const heightMargin = Math.abs(heightLength - height * Math.floor(heightLength / height)) / 2 + startPoint = { ...startPoint, y1: startPoint.y1 - heightMargin } + } + } + } + // else { + // //중앙배치가 아닐때도 흐름 방향 기준면으로 양면이 직선이면 가운데 배치 + // if (flowModuleLine.bottom.type === 'flat' && flowModuleLine.left.type === 'flat' && flowModuleLine.right.type === 'flat') { + // //하단 기준으로 양면이 직선이면 하단 방면으로 가운데로 배치 + // const halfWidthLength = Math.abs(startPoint.x1 + startPoint.x2) / 2 //밑에 길이에서 반을 가른다 + // const halfModuleWidthLength = width / 2 + // startPoint = { ...startPoint, x1: halfWidthLength - halfModuleWidthLength } + // } + // } + const maxLeftEndPoint = surfaceMaxLines.left.x1 //최 좌측 const maxRightEndPoint = surfaceMaxLines.right.x1 //최 우측 const maxTopEndPoint = surfaceMaxLines.top.y1 //최 상단 - let startPoint = flowModuleLine.find((obj) => obj.target === 'bottom') - let totalLeftEndPoint = maxLeftEndPoint - startPoint.x1 let totalTopEndPoint = maxTopEndPoint - startPoint.y1 let totalWidth = Math.ceil(Math.abs(maxRightEndPoint - maxLeftEndPoint) / width) @@ -552,10 +579,6 @@ export function useModuleBasicSetting() { chidoriLength = j % 2 === 0 ? 0 : width / 2 } - let squarePolygon - let turfCoordnates - let points - square = [ [startColPoint + tempMaxWidth * i - chidoriLength, startPoint.y1 - height * j - bottomMargin], [startColPoint + tempMaxWidth * i + width - chidoriLength, startPoint.y1 - height * j - bottomMargin], @@ -564,9 +587,9 @@ export function useModuleBasicSetting() { [startColPoint + tempMaxWidth * i - chidoriLength, startPoint.y1 - height * j - bottomMargin], ] - squarePolygon = turf.polygon([square]) - turfCoordnates = squarePolygon.geometry.coordinates[0].slice(0, -1) - points = turfCoordnates.map((coord) => ({ x: coord[0], y: coord[1] })) + let squarePolygon = turf.polygon([square]) + let turfCoordnates = squarePolygon.geometry.coordinates[0].slice(0, -1) + let points = turfCoordnates.map((coord) => ({ x: coord[0], y: coord[1] })) let tempModule = new QPolygon(points, { ...moduleOptions, turfPoints: squarePolygon }) canvas?.add(tempModule) @@ -575,12 +598,29 @@ export function useModuleBasicSetting() { } } - const leftFlowSetupModule = (surfaceMaxLines, width, height, moduleSetupArray, flowModuleLine) => { - let startPoint = flowModuleLine.find((obj) => obj.target === 'left') + const leftFlowSetupModule = (surfaceMaxLines, width, height, moduleSetupArray, flowModuleLine, isCenter = false) => { + let startPoint = flowModuleLine.left + + //중앙배치일 경우에는 계산한다 + if (isCenter) { + if (flowModuleLine.left.type === 'flat' && flowModuleLine.bottom.type === 'flat' && flowModuleLine.top.type === 'flat') { + //좌측 기준으로 양면이 직선이면 하단 방면으로 가운데로 배치 + const halfWidthLength = Math.abs(startPoint.y1 + startPoint.y2) / 2 //밑에 길이에서 반을 가른다 + const halfModuleWidthLength = height / 2 + startPoint = { ...startPoint, y1: halfWidthLength - halfModuleWidthLength } + if (flowModuleLine.right.type === 'flat') { + //우측까지 평면이면 직사각,정사각이라 가정하고 상자의 중심으로 계산 + const widthLength = Math.abs(flowModuleLine.top.x1 - flowModuleLine.top.x2) //옆에에 길이에서 반을 가른다 + const widthMargin = Math.abs(widthLength - width * Math.floor(widthLength / width)) / 2 + startPoint = { ...startPoint, x1: startPoint.x1 + widthMargin } + } + } + } const maxRightEndPoint = surfaceMaxLines.right.x1 //최 우측 const maxTopEndPoint = surfaceMaxLines.top.y1 //최 상단 const maxBottomEndPoint = surfaceMaxLines.bottom.y1 //최하단 + let totalTopEndPoint = Math.abs(maxTopEndPoint - startPoint.y1) //전체 높이에서 현재 높이를 뺌 let diffTopEndPoint = Math.abs(totalTopEndPoint / height) let totalHeight = Math.ceil(Math.abs(maxBottomEndPoint - maxTopEndPoint) / height) @@ -596,7 +636,7 @@ export function useModuleBasicSetting() { leftMargin = i === 0 ? 0 : 0.5 * i chidoriLength = 0 if (isChidori) { - chidoriLength = j % 2 === 0 ? 0 : height / 2 + chidoriLength = i % 2 === 0 ? 0 : height / 2 } square = [ @@ -619,12 +659,39 @@ export function useModuleBasicSetting() { } } - const topFlowSetupModule = (surfaceMaxLines, width, height, moduleSetupArray, flowModuleLine) => { - let startPoint = flowModuleLine.find((obj) => obj.target === 'top') + const topFlowSetupModule = (surfaceMaxLines, width, height, moduleSetupArray, flowModuleLine, isCenter = false) => { + let startPoint = flowModuleLine.top + + if (isCenter) { + //중앙배치일 경우에는 계산한다 + if (flowModuleLine.top.type === 'flat' && flowModuleLine.left.type === 'flat' && flowModuleLine.right.type === 'flat') { + //하단 기준으로 양면이 직선이면 하단 방면으로 가운데로 배치 + const halfWidthLength = Math.abs(startPoint.x1 + startPoint.x2) / 2 //밑에 길이에서 반을 가른다 + const halfModuleWidthLength = width / 2 + startPoint = { ...startPoint, x1: halfWidthLength - halfModuleWidthLength } + + if (flowModuleLine.bottom.type === 'flat') { + //상단까지 평면이면 직사각,정사각이라 가정하고 상자의 중심으로 계산 + const heightLength = Math.abs(flowModuleLine.left.y1 - flowModuleLine.left.y2) //옆에에 길이에서 반을 가른다 + const heightMargin = Math.abs(heightLength - height * Math.floor(heightLength / height)) / 2 + startPoint = { ...startPoint, x1: halfWidthLength - halfModuleWidthLength, y1: startPoint.y1 - heightMargin } + } + } + } + // else { + // //중앙배치가 아닐때도 흐름 방향 기준면으로 양면이 직선이면 가운데 배치 + // if (flowModuleLine.bottom.type === 'flat' && flowModuleLine.left.type === 'flat' && flowModuleLine.right.type === 'flat') { + // //하단 기준으로 양면이 직선이면 하단 방면으로 가운데로 배치 + // const halfWidthLength = Math.abs(startPoint.x1 + startPoint.x2) / 2 //밑에 길이에서 반을 가른다 + // const halfModuleWidthLength = width / 2 + // startPoint = { ...startPoint, x1: halfWidthLength - halfModuleWidthLength } + // } + // } + const maxLeftEndPoint = surfaceMaxLines.left.x1 //최 좌측 const maxRightEndPoint = surfaceMaxLines.right.x1 //최 우측 - const maxBottomEndPoint = surfaceMaxLines.bottom.y1 //최하단 + let totalLeftEndPoint = maxLeftEndPoint - startPoint.x1 let totalRightEndPoint = maxLeftEndPoint - maxRightEndPoint let totalBottomEndPoint = maxBottomEndPoint - startPoint.y1 @@ -661,12 +728,29 @@ export function useModuleBasicSetting() { } } - const rightFlowSetupModule = (surfaceMaxLines, width, height, moduleSetupArray, flowModuleLine) => { - let startPoint = flowModuleLine.find((obj) => obj.target === 'right') - const maxLeftEndPoint = surfaceMaxLines.left.x1 //최 좌측 + const rightFlowSetupModule = (surfaceMaxLines, width, height, moduleSetupArray, flowModuleLine, isCenter = false) => { + let startPoint = flowModuleLine.right + if (isCenter) { + if (flowModuleLine.left.type === 'flat' && flowModuleLine.bottom.type === 'flat' && flowModuleLine.top.type === 'flat') { + //좌측 기준으로 양면이 직선이면 하단 방면으로 가운데로 배치 + const halfWidthLength = Math.abs(startPoint.y1 + startPoint.y2) / 2 //밑에 길이에서 반을 가른다 + const halfModuleWidthLength = height / 2 + startPoint = { ...startPoint, y1: halfWidthLength + halfModuleWidthLength } + + if (flowModuleLine.right.type === 'flat') { + //우측까지 평면이면 직사각,정사각이라 가정하고 상자의 중심으로 계산 + const widthLength = Math.abs(flowModuleLine.top.x1 - flowModuleLine.top.x2) //옆에에 길이에서 반을 가른다 + const widthMargin = Math.abs(widthLength - width * Math.floor(widthLength / width)) / 2 + startPoint = { ...startPoint, x1: startPoint.x1 - widthMargin } + } + } + } + + const maxLeftEndPoint = surfaceMaxLines.left.x1 //최 좌측 const maxTopEndPoint = surfaceMaxLines.top.y1 //최 상단 const maxBottomEndPoint = surfaceMaxLines.bottom.y1 //최하단 + let totalTopEndPoint = Math.abs(maxTopEndPoint - startPoint.y1) //전체 높이에서 현재 높이를 뺌 let diffTopEndPoint = Math.abs(totalTopEndPoint / height) let totalHeight = Math.ceil(Math.abs(maxBottomEndPoint - maxTopEndPoint) / height) @@ -743,6 +827,7 @@ export function useModuleBasicSetting() { topFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface.flowLines) } } else if (setupLocation === 'ridge') { + //용마루 if (moduleSetupSurface.flowDirection === 'south') { topFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface.flowLines) } @@ -755,6 +840,20 @@ export function useModuleBasicSetting() { if (moduleSetupSurface.flowDirection === 'north') { downFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface.flowLines) } + } else if (setupLocation === 'center') { + //중가면 + if (moduleSetupSurface.flowDirection === 'south') { + downFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface.flowLines, true) + } + if (moduleSetupSurface.flowDirection === 'west') { + leftFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface.flowLines, true) + } + if (moduleSetupSurface.flowDirection === 'east') { + rightFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface.flowLines, true) + } + if (moduleSetupSurface.flowDirection === 'north') { + topFlowSetupModule(surfaceMaxLines, width, height, moduleSetupArray, moduleSetupSurface.flowLines, true) + } } const setupedModules = moduleSetupArray.filter((module, index) => { @@ -762,28 +861,26 @@ export function useModuleBasicSetting() { let isDisjoint = checkModuleDisjointObjects(module.turfPoints, containsBatchObjects) if (!(disjointFromTrestle && isDisjoint)) { - // canvas?.remove(module) - module.set({ fill: 'rgba(255,190,41, 0.4)', stroke: 'black', strokeWidth: 1 }) + canvas?.remove(module) + // module.set({ fill: 'rgba(255,190,41, 0.4)', stroke: 'black', strokeWidth: 1 }) return false } else { return module } }) - console.log('setupedModules.length', setupedModules.length) //나간애들 제외하고 설치된 애들로 겹친애들 삭제 하기 setupedModules.forEach((module, index) => { if (isMaxSetup && index > 0) { const isOverlap = turf.booleanOverlap(polygonToTurfPolygon(setupedModules[index - 1]), polygonToTurfPolygon(module)) - console.log(isOverlap) + //겹치는지 확인 if (isOverlap) { //겹쳐있으면 삭제 - // canvas?.remove(module) + 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 } } @@ -1054,13 +1151,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 //평평하면 @@ -1071,14 +1168,14 @@ export function useModuleBasicSetting() { //bottom standardLine = surface.lines.reduce((acc, line, index) => { if (line.y1 > acc.y1 || (line.y1 === acc.y1 && line.y2 > acc.y2)) { - return { x1: line.x1, y1: line.y1, index: index } + return { x1: line.x1, y1: line.y1, x2: line.x2, y2: line.y2, index: index } } return acc }) } else { standardLine = surface.lines.reduce((acc, line, index) => { if (line.y1 < acc.y1 || (line.y1 === acc.y1 && line.y2 < acc.y2)) { - return { x1: line.x1, y1: line.y1, index: index } + return { x1: line.x1, y1: line.y1, x2: line.x2, y2: line.y2, index: index } } return acc }) @@ -1087,11 +1184,12 @@ export function useModuleBasicSetting() { target: index === 0 ? 'bottom' : 'top', x1: standardLine.x1, y1: standardLine.y1, - x2: standardLine.x1 + charlie, - y2: standardLine.y1, + x2: standardLine.x2, + y2: standardLine.y2, + type: 'flat', } } else { - rtnObj = { target: index === 0 ? 'bottom' : 'top', x1: pointX1, y1: pointY1, x2: pointX2, y2: pointY2 } + rtnObj = { target: index === 0 ? 'bottom' : 'top', x1: pointX1, y1: pointY1, x2: pointX2, y2: pointY2, type: 'curve' } } rtnObjArray.push(rtnObj) @@ -1124,7 +1222,6 @@ export function useModuleBasicSetting() { ) flowArray.push(rightFlow) - let idx = 0 let rtnObjArray = [] flowArray.forEach((center, index) => { const linesArray = surface.lines.filter((line) => { @@ -1177,13 +1274,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 //평평하면 @@ -1194,14 +1291,14 @@ export function useModuleBasicSetting() { //bottom standardLine = surface.lines.reduce((acc, line, index) => { if (line.x1 < acc.x1 || (line.x1 === acc.x1 && line.y1 < acc.y1)) { - return { x1: line.x1, y1: line.y1, index: index } + return { x1: line.x1, y1: line.y1, x2: line.x2, y2: line.y2, index: index } } return acc }) } else { standardLine = surface.lines.reduce((acc, line, index) => { if (line.x1 > acc.x1 || (line.x1 === acc.x1 && line.y1 > acc.y1)) { - return { x1: line.x1, y1: line.y1, index: index } + return { x1: line.x1, y1: line.y1, x2: line.x2, y2: line.y2, index: index } } return acc }) @@ -1210,11 +1307,12 @@ export function useModuleBasicSetting() { target: index === 0 ? 'left' : 'right', x1: standardLine.x1, y1: standardLine.y1, - x2: standardLine.x1, - y2: standardLine.y1 + charlie, + x2: standardLine.x2, + y2: standardLine.y2, + type: 'flat', } } else { - rtnObj = { target: index === 0 ? 'left' : 'right', x1: pointX1, y1: pointY1, x2: pointX2, y2: pointY2 } + rtnObj = { target: index === 0 ? 'left' : 'right', x1: pointX1, y1: pointY1, x2: pointX2, y2: pointY2, type: 'curve' } } rtnObjArray.push(rtnObj) })