diff --git a/src/hooks/useMode.js b/src/hooks/useMode.js index 26d9a050..7a37b93f 100644 --- a/src/hooks/useMode.js +++ b/src/hooks/useMode.js @@ -3,7 +3,7 @@ import QRect from '@/components/fabric/QRect' import QPolygon from '@/components/fabric/QPolygon' import { findTopTwoIndexesByDistance, getCenterPoint, getDirection, getStartIndex, rearrangeArray } from '@/util/canvas-util' import { useRecoilState } from 'recoil' -import { fontSizeState, roofState, sortedPolygonArray, templatePolygonArrayState, wallState } from '@/store/canvasAtom' +import { fontSizeState, roofState, sortedPolygonArray, roofPolygonPatternArrayState, wallState } from '@/store/canvasAtom' import { QLine } from '@/components/fabric/QLine' export const Mode = { @@ -29,7 +29,7 @@ export function useMode() { const [sortedArray, setSortedArray] = useRecoilState(sortedPolygonArray) const [roof, setRoof] = useRecoilState(roofState) const [wall, setWall] = useRecoilState(wallState) - const [templatePolygonState, setTemplatePolygonState] = useRecoilState(templatePolygonArrayState) + const [roofPolygonPattern, setRoofPolygonPattern] = useRecoilState(roofPolygonPatternArrayState) const addEvent = (mode) => { switch (mode) { @@ -890,6 +890,34 @@ export function useMode() { return rtnLines } + const makeRoofPatternPolygon = (pointsObj, canvas) => { + const commonOption = { + fill: 'red', + opacity: 0.2, + selectable: false, + fontSize: 15, // fontSize는 필요에 따라 조정 + } + + const bigRoof = new QPolygon(pointsObj.bigRoofPolygon, commonOption) + const middleRoof = new QPolygon(pointsObj.middleRoofPolygon, commonOption) + const smallRoof = new QPolygon(pointsObj.smallRoofPolygon, commonOption) + + setRoofPolygonPattern({ bigRoof, middleRoof, smallRoof }) + + bigRoof.sendToBack() //객체를 가장 뒤로 + middleRoof.sendToBack() + smallRoof.sendToBack() + + bigRoof.setViewLengthText(false) //치수 필요없음 + middleRoof.setViewLengthText(false) + smallRoof.setViewLengthText(false) + + canvas.add(bigRoof) //캔버스 객체 추가 + canvas.add(middleRoof) + canvas.add(smallRoof) + canvas.renderAll() + } + const applyTemplateA = () => { changeMode(canvas, Mode.EDIT) const polygon = drawWallPolygon() @@ -1244,37 +1272,34 @@ export function useMode() { centerLineOpt, ) canvas.add(drawLastInLine1) - outLines.push(drawLastInLine1) let drawLastInLine2 = new QLine([secondVertCenterLine.x1, vertCenterLine.y2, vertCenterLine.x2, vertCenterLine.y2], centerLineOpt) canvas.add(drawLastInLine2) - outLines.push(drawLastInLine2) - console.log('outLines', outLines) - - const bigPolygonArray = [ + const bigRoofPolygon = [ { x: outLines[2].x1, y: outLines[2].y1 }, - { x: outLines[5].x1, y: outLines[5].y1 }, + { x: outLines[2].x2, y: outLines[2].y2 }, { x: outLines[0].x1, y: outLines[0].y1 }, { x: outLines[0].x2, y: outLines[0].y2 }, - { x: outLines[11].x1, y: outLines[11].y1 }, + { x: outLines[1].x2, y: outLines[0].y2 }, { x: outLines[1].x2, y: outLines[1].y2 }, ] - // 점 배열을 사용하여 새로운 다각형 객체를 생성합니다. - const bigPolygon = new QPolygon( - bigPolygonArray, - { - stroke: 'black', - fill: 'red', - viewLengthText: true, - selectable: true, - fontSize: fontSize, - }, - canvas, - ) + const middleRoofPolygon = [ + { x: outLines[0].x2, y: outLines[0].y2 }, + { x: outLines[0].x1, y: outLines[0].y1 }, + { x: outLines[3].x2, y: outLines[3].y2 }, + { x: outLines[3].x1, y: outLines[3].y1 }, + ] - canvas.add(bigPolygon) + const smallRoofPolygon = [ + { x: outLines[1].x2, y: outLines[1].y2 }, + { x: outLines[1].x1, y: outLines[1].y1 }, + { x: outLines[4].x2, y: outLines[4].y2 }, + { x: outLines[4].x1, y: outLines[4].y1 }, + ] + + makeRoofPatternPolygon({ bigRoofPolygon, middleRoofPolygon, smallRoofPolygon }, canvas) } else { //아래쪽 길게 오른쪽 방향 //배열 순서대로 뒤에꺼를 찾아서 계산한다 @@ -1299,6 +1324,7 @@ export function useMode() { centerLineOpt, ) canvas.add(vertCenterLine) + outLines.push(vertCenterLine) //긴면 가로선 그리기 let horiCenterPoint = (firstSubLine.y1 + firstSubLine.y2) / 2 @@ -1322,8 +1348,8 @@ export function useMode() { //작은 지붕쪽 높이 길이를 구하는 로직 let secondVertCenterPoint = (lastLine.x1 + lastLine.x2) / 2 secondVertCenterLine = new QLine([secondVertCenterPoint, middleSubLine.y1 - edge, secondVertCenterPoint, middleSubLine.y2], centerLineOpt) - canvas.add(secondVertCenterLine) + outLines.push(secondVertCenterLine) //작은 지붕쪽 너비 길이를 구한는 로직 let secondHoriCenterLength = (Math.abs(lastLine.get('x1') - lastLine.get('x2')) + Math.abs(lastLine.get('y1') - lastLine.get('y2'))) / 2 @@ -1347,6 +1373,7 @@ export function useMode() { } let drawline = new QLine(points, centerLineOpt) canvas.add(drawline) + outLines.push(drawline) }) //케라바 라인 외각선 그리기 @@ -1361,6 +1388,7 @@ export function useMode() { centerLineOpt, ) canvas.add(drawFirstLine1) + outLines.push(drawFirstLine1) //첫번째 외곽선 2번 let drawFirstLine2 = new QLine( @@ -1368,16 +1396,16 @@ export function useMode() { centerLineOpt, ) canvas.add(drawFirstLine2) + outLines.push(drawFirstLine2) //중간라인 외각선 let drawMiddleLine = new QLine([drawFirstLine1.x1, middleOuterLine.y1 - edge, drawFirstLine1.x2, middleOuterLine.y2 - edge], centerLineOpt) canvas.add(drawMiddleLine) + outLines.push(drawMiddleLine) //마지막 외각선 halfLength = lastLine.length / 2 - console.log(lastOuterLine) - let drawLastLine1 = new QLine( [lastOuterLine.x2 - eaves, lastOuterLine.y1 - edge, lastOuterLine.x1 - halfLength, lastOuterLine.y2 - edge], centerLineOpt, @@ -1398,6 +1426,31 @@ export function useMode() { let drawLastInLine2 = new QLine([secondVertCenterLine.x2, vertCenterLine.y1, vertCenterLine.x1, vertCenterLine.y1], centerLineOpt) canvas.add(drawLastInLine2) + + const bigRoofPolygon = [ + { x: outLines[0].x1, y: outLines[0].y1 }, + { x: outLines[0].x2, y: outLines[0].y2 }, + { x: outLines[3].x1, y: outLines[3].y1 }, + { x: outLines[3].x2, y: outLines[3].y2 }, + { x: outLines[1].x1, y: outLines[1].y1 }, + { x: outLines[1].x2, y: outLines[0].y1 }, + ] + + const middleRoofPolygon = [ + { x: outLines[2].x1, y: outLines[2].y1 }, + { x: outLines[2].x2, y: outLines[2].y2 }, + { x: outLines[0].x2, y: outLines[0].y2 }, + { x: outLines[0].x1, y: outLines[0].y1 }, + ] + + const smallRoofPolygon = [ + { x: outLines[4].x1, y: outLines[4].y1 }, + { x: outLines[4].x2, y: outLines[4].y2 }, + { x: outLines[1].x2, y: outLines[1].y2 }, + { x: outLines[1].x1, y: outLines[1].y1 }, + ] + + makeRoofPatternPolygon({ bigRoofPolygon, middleRoofPolygon, smallRoofPolygon }, canvas) } } else { if (horizontalDirection === 'left') { @@ -1423,6 +1476,7 @@ export function useMode() { centerLineOpt, ) canvas.add(vertCenterLine) + outLines.push(vertCenterLine) //긴면 가로선 그리기 let horiCenterPoint = (firstSubLine.y1 + firstSubLine.y2) / 2 @@ -1447,6 +1501,7 @@ export function useMode() { let secondVertCenterPoint = (lastLine.x1 + lastLine.x2) / 2 secondVertCenterLine = new QLine([secondVertCenterPoint, middleSubLine.y1 + edge, secondVertCenterPoint, middleSubLine.y2], centerLineOpt) canvas.add(secondVertCenterLine) + outLines.push(secondVertCenterLine) //작은 지붕쪽 너비 길이를 구한는 로직 let secondHoriCenterLength = (Math.abs(lastLine.get('x1') - lastLine.get('x2')) + Math.abs(lastLine.get('y1') - lastLine.get('y2'))) / 2 @@ -1470,6 +1525,7 @@ export function useMode() { let drawline = new QLine(points, centerLineOpt) canvas.add(drawline) + outLines.push(drawline) }) //케라바 라인 외각선 그리기 @@ -1498,9 +1554,6 @@ export function useMode() { //마지막 외각선 halfLength = lastLine.length / 2 - - console.log(lastOuterLine) - let drawLastLine1 = new QLine( [lastOuterLine.x1 - eaves, lastOuterLine.y1 + edge, lastOuterLine.x1 + halfLength, lastOuterLine.y2 + edge], centerLineOpt, @@ -1518,6 +1571,31 @@ export function useMode() { let drawLastInLine2 = new QLine([vertCenterLine.x1, vertCenterLine.y2, secondVertCenterLine.x2, vertCenterLine.y2], centerLineOpt) canvas.add(drawLastInLine2) + + const bigRoofPolygon = [ + { x: outLines[2].x1, y: outLines[2].y1 }, + { x: outLines[2].x2, y: outLines[2].y2 }, + { x: outLines[1].x1, y: outLines[1].y1 }, + { x: outLines[1].x2, y: outLines[0].y2 }, + { x: outLines[0].x1, y: outLines[0].y2 }, + { x: outLines[0].x1, y: outLines[0].y1 }, + ] + + const middleRoofPolygon = [ + { x: outLines[0].x1, y: outLines[0].y1 }, + { x: outLines[0].x2, y: outLines[0].y2 }, + { x: outLines[4].x2, y: outLines[4].y2 }, + { x: outLines[4].x1, y: outLines[4].y1 }, + ] + + const smallRoofPolygon = [ + { x: outLines[1].x2, y: outLines[1].y2 }, + { x: outLines[1].x1, y: outLines[1].y1 }, + { x: outLines[3].x2, y: outLines[3].y2 }, + { x: outLines[3].x1, y: outLines[3].y1 }, + ] + + makeRoofPatternPolygon({ bigRoofPolygon, middleRoofPolygon, smallRoofPolygon }, canvas) } else { //윗쪽 길게 오른쪽 방향 //배열 순서대로 뒤에꺼를 찾아서 계산한다 @@ -1541,6 +1619,7 @@ export function useMode() { centerLineOpt, ) canvas.add(vertCenterLine) + outLines.push(vertCenterLine) //긴면 가로선 그리기 let horiCenterPoint = (firstSubLine.y1 + firstSubLine.y2) / 2 @@ -1571,7 +1650,7 @@ export function useMode() { }) canvas.add(secondVertCenterLine) - + outLines.push(secondVertCenterLine) //작은 지붕쪽 너비 길이를 구한는 로직 let secondHoriCenterLength = (Math.abs(lastLine.get('x1') - lastLine.get('x2')) + Math.abs(lastLine.get('y1') - lastLine.get('y2'))) / 2 let secondHoriCenterPoint = (secondVertCenterLine.y1 + secondVertCenterLine.y2) / 2 @@ -1585,14 +1664,16 @@ export function useMode() { //일반라인 외각선 그리기 normalIndexArray.forEach((index) => { const line = lines[index] + let drawline if (index === 0 || index === 2) { let tmpEdge = index === 2 ? 0 : edge - let drawline = new QLine([line.x1 - eaves, line.y1 - tmpEdge, line.x2 - eaves, line.y2 + edge], centerLineOpt) + drawline = new QLine([line.x1 - eaves, line.y1 - tmpEdge, line.x2 - eaves, line.y2 + edge], centerLineOpt) canvas.add(drawline) } else { - let drawline = new QLine([line.x1 + eaves, line.y1 + edge, line.x2 + eaves, line.y2 - edge], centerLineOpt) + drawline = new QLine([line.x1 + eaves, line.y1 + edge, line.x2 + eaves, line.y2 - edge], centerLineOpt) canvas.add(drawline) } + outLines.push(drawline) }) //케라바 라인 외각선 그리기 @@ -1635,6 +1716,31 @@ export function useMode() { let drawLastInLine2 = new QLine([secondLine.x2 - eaves, secondLine.y1, drawLastLine1.x2, secondLine.y1], centerLineOpt) canvas.add(drawLastInLine2) + + const bigRoofPolygon = [ + { x: outLines[0].x1, y: outLines[0].y1 }, + { x: outLines[0].x2, y: outLines[0].y2 }, + { x: outLines[1].x1, y: outLines[0].y2 }, + { x: outLines[1].x2, y: outLines[1].y2 }, + { x: outLines[4].x1, y: outLines[4].y1 }, + { x: outLines[4].x2, y: outLines[4].y2 }, + ] + + const middleRoofPolygon = [ + { x: outLines[2].x1, y: outLines[2].y1 }, + { x: outLines[2].x2, y: outLines[2].y2 }, + { x: outLines[0].x2, y: outLines[0].y2 }, + { x: outLines[0].x1, y: outLines[0].y1 }, + ] + + const smallRoofPolygon = [ + { x: outLines[3].x1, y: outLines[3].y1 }, + { x: outLines[3].x2, y: outLines[3].y2 }, + { x: outLines[1].x2, y: outLines[1].y2 }, + { x: outLines[1].x1, y: outLines[1].y1 }, + ] + + makeRoofPatternPolygon({ bigRoofPolygon, middleRoofPolygon, smallRoofPolygon }, canvas) } } diff --git a/src/store/canvasAtom.js b/src/store/canvasAtom.js index 2f6f7ac5..91df31ed 100644 --- a/src/store/canvasAtom.js +++ b/src/store/canvasAtom.js @@ -36,8 +36,8 @@ export const wallState = atom({ dangerouslyAllowMutability: true, }) -export const templatePolygonArrayState = atom({ - key: 'templatePolygon', +export const roofPolygonPatternArrayState = atom({ + key: 'roofPolygonPattern', default: {}, //object ex) big, mid, sht = {point : [{x1, y1}, {x2, y1}], direction : left or right or top or bottom} + dangerouslyAllowMutability: true, }) -