Merge branch 'feature/test' of https://git.jetbrains.space/nalpari/q-cast-iii/qcast-front into feature/hj
# Conflicts: # src/components/Roof2.jsx # src/hooks/useMode.js # src/store/canvasAtom.js # src/util/canvas-util.js
This commit is contained in:
commit
69bbd18b51
@ -31,11 +31,19 @@ export default function Roof2() {
|
||||
|
||||
const [showControl, setShowControl] = useState(false)
|
||||
|
||||
const [canvasIdx, setCanvasIdx] = useState(0)
|
||||
const canvasList = useRecoilValue(canvasListState)
|
||||
|
||||
const { mode, changeMode, handleClear, fillCellInPolygon, zoomIn, zoomOut, zoom, togglePolygonLine, handleOuterlinesTest2, applyTemplateB } =
|
||||
useMode()
|
||||
const {
|
||||
mode,
|
||||
changeMode,
|
||||
handleClear,
|
||||
fillCellInPolygon,
|
||||
zoomIn,
|
||||
zoomOut,
|
||||
zoom,
|
||||
togglePolygonLine,
|
||||
handleOuterlinesTest2,
|
||||
applyTemplateB,
|
||||
makeRoofPatternPolygon,
|
||||
} = useMode()
|
||||
|
||||
// const [canvasState, setCanvasState] = useRecoilState(canvasAtom)
|
||||
|
||||
@ -330,10 +338,8 @@ export default function Roof2() {
|
||||
setShowControl(!showControl)
|
||||
}
|
||||
|
||||
const nextCanvas = () => {
|
||||
const nextCanvasNumber = canvasIdx < canvasList.length - 1 ? canvasIdx + 1 : 0
|
||||
setCanvasIdx(nextCanvasNumber)
|
||||
changeCanvas(nextCanvasNumber)
|
||||
const drawRoofPatterns = (roofStyle) => {
|
||||
makeRoofPatternPolygon(roofStyle)
|
||||
}
|
||||
|
||||
return (
|
||||
@ -363,6 +369,12 @@ export default function Roof2() {
|
||||
<Button className="m-1 p-2" color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`} onClick={() => changeMode(canvas, Mode.PATTERNB)}>
|
||||
템플릿(B 패턴)
|
||||
</Button>
|
||||
<Button className="m-1 p-2" color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`} onClick={() => drawRoofPatterns(1)}>
|
||||
지붕패턴1
|
||||
</Button>
|
||||
<Button className="m-1 p-2" color={`${mode === Mode.TEMPLATE ? 'primary' : 'default'}`} onClick={() => drawRoofPatterns(2)}>
|
||||
지붕패턴2
|
||||
</Button>
|
||||
<Button className="m-1 p-2" color={`${mode === Mode.TEXTBOX ? 'primary' : 'default'}`} onClick={() => changeMode(canvas, Mode.TEXTBOX)}>
|
||||
텍스트박스 모드
|
||||
</Button>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
import { fabric } from 'fabric'
|
||||
import { actionHandler, anchorWrapper, getDirectionByPoint, polygonPositionHandler, sortedPoints } from '@/util/canvas-util'
|
||||
import { actionHandler, anchorWrapper, polygonPositionHandler } from '@/util/canvas-util'
|
||||
|
||||
import { useRecoilState } from 'recoil'
|
||||
import { canvasListState, canvasSizeState, fontSizeState } from '@/store/canvasAtom'
|
||||
import { canvasSizeState, fontSizeState } from '@/store/canvasAtom'
|
||||
import QPolygon from '@/components/fabric/QPolygon'
|
||||
import { QLine } from '@/components/fabric/QLine'
|
||||
import QRect from '@/components/fabric/QRect'
|
||||
@ -16,8 +16,6 @@ export function useCanvas(id) {
|
||||
const [fontSize] = useRecoilState(fontSizeState)
|
||||
const points = useRef([])
|
||||
|
||||
const [canvasList, setCanvasList] = useRecoilState(canvasListState)
|
||||
|
||||
/**
|
||||
* 처음 셋팅
|
||||
*/
|
||||
|
||||
@ -3,7 +3,8 @@ 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, wallState } from '@/store/canvasAtom'
|
||||
|
||||
import { fontSizeState, roofState, sortedPolygonArray, roofPolygonPatternArrayState, wallState } from '@/store/canvasAtom'
|
||||
import { QLine } from '@/components/fabric/QLine'
|
||||
|
||||
export const Mode = {
|
||||
@ -14,6 +15,7 @@ export const Mode = {
|
||||
PATTERNB: 'patternb',
|
||||
TEXTBOX: 'textbox',
|
||||
DRAW_RECT: 'drawRect',
|
||||
ROOF_PATTERN: 'roofPattern',
|
||||
DEFAULT: 'default',
|
||||
}
|
||||
|
||||
@ -30,6 +32,8 @@ export function useMode() {
|
||||
const [roof, setRoof] = useRecoilState(roofState)
|
||||
const [wall, setWall] = useRecoilState(wallState)
|
||||
|
||||
const [roofPolygonPattern, setRoofPolygonPattern] = useRecoilState(roofPolygonPatternArrayState)
|
||||
|
||||
const addEvent = (mode) => {
|
||||
switch (mode) {
|
||||
case 'default':
|
||||
@ -56,6 +60,9 @@ export function useMode() {
|
||||
case 'drawRect':
|
||||
drawRectMode()
|
||||
break
|
||||
case 'roofPattern':
|
||||
makeRoofPatternPolygon()
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
@ -1242,37 +1249,33 @@ 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 },
|
||||
]
|
||||
setRoofPolygonPattern({ bigRoofPolygon, middleRoofPolygon, smallRoofPolygon, lines })
|
||||
} else {
|
||||
//아래쪽 길게 오른쪽 방향
|
||||
//배열 순서대로 뒤에꺼를 찾아서 계산한다
|
||||
@ -1297,6 +1300,7 @@ export function useMode() {
|
||||
centerLineOpt,
|
||||
)
|
||||
canvas.add(vertCenterLine)
|
||||
outLines.push(vertCenterLine)
|
||||
|
||||
//긴면 가로선 그리기
|
||||
let horiCenterPoint = (firstSubLine.y1 + firstSubLine.y2) / 2
|
||||
@ -1320,8 +1324,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
|
||||
@ -1345,6 +1349,7 @@ export function useMode() {
|
||||
}
|
||||
let drawline = new QLine(points, centerLineOpt)
|
||||
canvas.add(drawline)
|
||||
outLines.push(drawline)
|
||||
})
|
||||
|
||||
//케라바 라인 외각선 그리기
|
||||
@ -1359,6 +1364,7 @@ export function useMode() {
|
||||
centerLineOpt,
|
||||
)
|
||||
canvas.add(drawFirstLine1)
|
||||
outLines.push(drawFirstLine1)
|
||||
|
||||
//첫번째 외곽선 2번
|
||||
let drawFirstLine2 = new QLine(
|
||||
@ -1366,16 +1372,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,
|
||||
@ -1396,6 +1402,30 @@ 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 },
|
||||
]
|
||||
setRoofPolygonPattern({ bigRoofPolygon, middleRoofPolygon, smallRoofPolygon, lines })
|
||||
}
|
||||
} else {
|
||||
if (horizontalDirection === 'left') {
|
||||
@ -1421,6 +1451,7 @@ export function useMode() {
|
||||
centerLineOpt,
|
||||
)
|
||||
canvas.add(vertCenterLine)
|
||||
outLines.push(vertCenterLine)
|
||||
|
||||
//긴면 가로선 그리기
|
||||
let horiCenterPoint = (firstSubLine.y1 + firstSubLine.y2) / 2
|
||||
@ -1445,6 +1476,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
|
||||
@ -1468,6 +1500,7 @@ export function useMode() {
|
||||
|
||||
let drawline = new QLine(points, centerLineOpt)
|
||||
canvas.add(drawline)
|
||||
outLines.push(drawline)
|
||||
})
|
||||
|
||||
//케라바 라인 외각선 그리기
|
||||
@ -1496,9 +1529,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,
|
||||
@ -1516,6 +1546,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 },
|
||||
]
|
||||
|
||||
setRoofPolygonPattern({ bigRoofPolygon, middleRoofPolygon, smallRoofPolygon, lines })
|
||||
} else {
|
||||
//윗쪽 길게 오른쪽 방향
|
||||
//배열 순서대로 뒤에꺼를 찾아서 계산한다
|
||||
@ -1539,6 +1594,7 @@ export function useMode() {
|
||||
centerLineOpt,
|
||||
)
|
||||
canvas.add(vertCenterLine)
|
||||
outLines.push(vertCenterLine)
|
||||
|
||||
//긴면 가로선 그리기
|
||||
let horiCenterPoint = (firstSubLine.y1 + firstSubLine.y2) / 2
|
||||
@ -1569,7 +1625,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
|
||||
@ -1583,14 +1639,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)
|
||||
})
|
||||
|
||||
//케라바 라인 외각선 그리기
|
||||
@ -1633,6 +1691,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 },
|
||||
]
|
||||
|
||||
setRoofPolygonPattern({ bigRoofPolygon, middleRoofPolygon, smallRoofPolygon, lines })
|
||||
}
|
||||
}
|
||||
|
||||
@ -2058,6 +2141,74 @@ export function useMode() {
|
||||
canvas.renderAll()
|
||||
}
|
||||
|
||||
const makeRoofPatternPolygon = (roofStyle) => {
|
||||
if (Object.keys(roofPolygonPattern).length === 0 && roofPolygonPattern.constructor === Object) {
|
||||
alert('객체가 비어있습니다.')
|
||||
return
|
||||
}
|
||||
|
||||
//내부 선 점선으로 변경
|
||||
roofPolygonPattern.lines.forEach((line, index) => {
|
||||
line.line.set('strokeDashArray', [10, 5, 2, 5])
|
||||
line.line.set('stroke', 'blue')
|
||||
line.line.set('strokeWidth', 1)
|
||||
})
|
||||
|
||||
var ratio = window.devicePixelRatio || 1
|
||||
|
||||
// 패턴 소스를 위한 임시 캔버스 생성
|
||||
const patternSourceCanvas = document.createElement('canvas')
|
||||
patternSourceCanvas.width = 30 * ratio
|
||||
patternSourceCanvas.height = 30 * ratio
|
||||
const ctx = patternSourceCanvas.getContext('2d')
|
||||
|
||||
// 벽돌 패턴 그리기
|
||||
ctx.scale(ratio, ratio)
|
||||
ctx.strokeStyle = 'green'
|
||||
ctx.lineWidth = 0.2
|
||||
|
||||
// 첫 번째 행 벽돌
|
||||
if (roofStyle === 2) {
|
||||
//지그재그
|
||||
// // 두 번째 행 벽돌
|
||||
ctx.strokeRect(0, 0, 30, 15)
|
||||
ctx.strokeRect(30, 15, 30, 15)
|
||||
ctx.strokeRect(-15, 15, 30, 15)
|
||||
ctx.strokeRect(0, 30, 30, 15)
|
||||
} else {
|
||||
ctx.strokeRect(0, 0, 30, 30) // 원패턴일때랑 지그재그일때랑은 다르게 들어가야함
|
||||
}
|
||||
|
||||
// 패턴 생성
|
||||
const pattern = new fabric.Pattern({
|
||||
source: patternSourceCanvas,
|
||||
repeat: 'repeat',
|
||||
})
|
||||
|
||||
const commonOption = {
|
||||
fill: pattern,
|
||||
selectable: false,
|
||||
fontSize: 15, // fontSize는 필요에 따라 조정
|
||||
}
|
||||
|
||||
const bigRoof = new QPolygon(roofPolygonPattern.bigRoofPolygon, commonOption)
|
||||
const middleRoof = new QPolygon(roofPolygonPattern.middleRoofPolygon, commonOption)
|
||||
const smallRoof = new QPolygon(roofPolygonPattern.smallRoofPolygon, commonOption)
|
||||
|
||||
bigRoof.setViewLengthText(false) //치수 필요없음
|
||||
middleRoof.setViewLengthText(false)
|
||||
smallRoof.setViewLengthText(false)
|
||||
|
||||
bigRoof.sendToBack() //객체를 가장 뒤로
|
||||
middleRoof.sendToBack()
|
||||
smallRoof.sendToBack()
|
||||
|
||||
canvas.add(bigRoof) //캔버스 객체 추가
|
||||
canvas.add(middleRoof)
|
||||
canvas.add(smallRoof)
|
||||
canvas.renderAll()
|
||||
}
|
||||
|
||||
return {
|
||||
mode,
|
||||
changeMode,
|
||||
@ -2068,5 +2219,6 @@ export function useMode() {
|
||||
zoom,
|
||||
togglePolygonLine,
|
||||
handleOuterlinesTest2,
|
||||
makeRoofPatternPolygon,
|
||||
}
|
||||
}
|
||||
|
||||
@ -36,7 +36,8 @@ export const wallState = atom({
|
||||
dangerouslyAllowMutability: true,
|
||||
})
|
||||
|
||||
export const canvasListState = atom({
|
||||
key: 'canvas',
|
||||
default: [], //object ex) big, mid, sht = {point : [{x1, y1}, {x2, y1}], direction : left or right or top or bottom}
|
||||
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,
|
||||
})
|
||||
|
||||
@ -427,58 +427,8 @@ export const sortedPoints = (points) => {
|
||||
const copyPoints = [...points]
|
||||
//points를 x,y좌표를 기준으로 정렬합니다.
|
||||
|
||||
copyPoints.sort((a, b) => {
|
||||
if (a.x === b.x) {
|
||||
return a.y - b.y
|
||||
}
|
||||
return a.x - b.x
|
||||
})
|
||||
|
||||
// 이때 copyPoints를 순회하며 최초엔 x값을 비교하여 같은 점을 찾는다. 이때 이 점이 2번째 점이 된다.
|
||||
// 그 다음점은 2번째 점과 y값이 같은 점이 된다.
|
||||
// 또 그다음 점은 3번째 점과 x값이 같은 점이 된다.
|
||||
// 이를 반복하여 copyPoints를 재배열한다.
|
||||
const resultPoints = [copyPoints[0]]
|
||||
let index = 1
|
||||
let currentPoint = { ...copyPoints[0] }
|
||||
copyPoints.splice(0, 1)
|
||||
|
||||
while (index < points.length) {
|
||||
if (index === points.length - 1) {
|
||||
resultPoints.push(copyPoints[0])
|
||||
index++
|
||||
break
|
||||
} else if (index % 2 === 0) {
|
||||
// 짝수번째는 y값이 같은 점을 찾는다.
|
||||
for (let i = 0; i < copyPoints.length; i++) {
|
||||
// y값이 같은 point가 많은 경우 그 중 x값이 가장 큰걸 찾는다.
|
||||
const temp = copyPoints.filter((point) => point.y === currentPoint.y)
|
||||
// temp중 x값이 가장 큰 값
|
||||
const min = temp.reduce((prev, current) => (prev.x <= current.x ? prev : current))
|
||||
resultPoints.push(min)
|
||||
currentPoint = min
|
||||
copyPoints.splice(copyPoints.indexOf(min), 1)
|
||||
index++
|
||||
break
|
||||
}
|
||||
} else {
|
||||
// 홀수번째는 x값이 같은 점을 찾는다.
|
||||
for (let i = 0; i < copyPoints.length; i++) {
|
||||
// x값이 같은 point가 많은 경우 그 중 y값이 가장 큰걸 찾는다.
|
||||
const temp = copyPoints.filter((point) => point.x === currentPoint.x)
|
||||
// temp중 y값이 가장 큰 값
|
||||
const min = temp.reduce((prev, current) => (prev.y >= current.y ? prev : current))
|
||||
|
||||
resultPoints.push(min)
|
||||
currentPoint = min
|
||||
copyPoints.splice(copyPoints.indexOf(min), 1)
|
||||
index++
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return resultPoints
|
||||
const idx = getStartIndexPoint(copyPoints)
|
||||
return rearrangeArray(copyPoints, idx)
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user