ab템플릿 타입 셀 위치 정렬
This commit is contained in:
parent
a7d725cff0
commit
239bcef815
@ -542,9 +542,10 @@ export default function Roof2() {
|
|||||||
{/*<Button className="m-1 p-2" onClick={zoomIn}>
|
{/*<Button className="m-1 p-2" onClick={zoomIn}>
|
||||||
확대
|
확대
|
||||||
</Button>
|
</Button>
|
||||||
|
*/}
|
||||||
<Button className="m-1 p-2" onClick={zoomOut}>
|
<Button className="m-1 p-2" onClick={zoomOut}>
|
||||||
축소
|
축소
|
||||||
</Button>*/}
|
</Button>
|
||||||
현재 줌 : {zoom}%
|
현재 줌 : {zoom}%
|
||||||
<Button className="m-1 p-2" onClick={makeLine}>
|
<Button className="m-1 p-2" onClick={makeLine}>
|
||||||
선 추가
|
선 추가
|
||||||
|
|||||||
@ -2,7 +2,7 @@ import { fabric } from 'fabric'
|
|||||||
import { v4 as uuidv4 } from 'uuid'
|
import { v4 as uuidv4 } from 'uuid'
|
||||||
import { QLine } from '@/components/fabric/QLine'
|
import { QLine } from '@/components/fabric/QLine'
|
||||||
import { distanceBetweenPoints, findTopTwoIndexesByDistance, getDirectionByPoint, sortedPointLessEightPoint, sortedPoints } from '@/util/canvas-util'
|
import { distanceBetweenPoints, findTopTwoIndexesByDistance, getDirectionByPoint, sortedPointLessEightPoint, sortedPoints } from '@/util/canvas-util'
|
||||||
import { calculateAngle, dividePolygon, drawHelpLineInHexagon, splitPolygonWithLines , drawHippedRoof} from '@/util/qpolygon-utils'
|
import { calculateAngle, dividePolygon, drawHelpLineInHexagon } from '@/util/qpolygon-utils'
|
||||||
|
|
||||||
export const QPolygon = fabric.util.createClass(fabric.Polygon, {
|
export const QPolygon = fabric.util.createClass(fabric.Polygon, {
|
||||||
type: 'QPolygon',
|
type: 'QPolygon',
|
||||||
@ -275,7 +275,7 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
|
|||||||
this.cells = drawCellsArray
|
this.cells = drawCellsArray
|
||||||
return drawCellsArray
|
return drawCellsArray
|
||||||
},
|
},
|
||||||
fillCellABTemplate(cell = { width: 50, height: 100, padding: 5, parallelPoint: undefined, startX: 0, startY: 0 }) {
|
fillCellABType(cell = { width: 50, height: 100, padding: 5, wallDirection: 'left', referenceDirection: 'none', startIndex: -1 }) {
|
||||||
const points = this.points
|
const points = this.points
|
||||||
|
|
||||||
const minX = Math.min(...points.map((p) => p.x)) //왼쪽
|
const minX = Math.min(...points.map((p) => p.x)) //왼쪽
|
||||||
@ -293,58 +293,224 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
|
|||||||
const rows = Math.floor((boundingBoxHeight + cell.padding) / (rectHeight + cell.padding))
|
const rows = Math.floor((boundingBoxHeight + cell.padding) / (rectHeight + cell.padding))
|
||||||
|
|
||||||
//전체 높이에서 패딩을 포함하고 rows를 곱해서 여백길이를 계산 후에 2로 나누면 반높이를 넣어서 중간으로 정렬
|
//전체 높이에서 패딩을 포함하고 rows를 곱해서 여백길이를 계산 후에 2로 나누면 반높이를 넣어서 중간으로 정렬
|
||||||
const tmpHeight = (boundingBoxHeight - (rectHeight + cell.padding) * rows) / 2
|
|
||||||
//센터 정렬시에 쓴다 체크박스가 존재함 TODO: if문 추가해서 정렬해야함
|
let centerHeight = rows > 1 ? (boundingBoxHeight - (rectHeight + cell.padding / 2) * rows) / 2 : (boundingBoxHeight - rectHeight * rows) / 2 //rows 1개 이상이면 cell 을 반 나눠서 중간을 맞춘다
|
||||||
const tmpWidth = (boundingBoxWidth - (rectWidth + cell.padding) * cols) / 2
|
let centerWidth = cols > 1 ? (boundingBoxWidth - (rectWidth + cell.padding / 2) * cols) / 2 : (boundingBoxWidth - rectWidth * cols) / 2
|
||||||
|
|
||||||
const drawCellsArray = [] //그려진 셀의 배열
|
const drawCellsArray = [] //그려진 셀의 배열
|
||||||
|
|
||||||
let idx = 1
|
let idx = 1
|
||||||
|
|
||||||
if (cell.parallelPoint > -1) {
|
|
||||||
//4각형 이상이면 각 꼭지점에서 위, 아래로 이동하면서 채움
|
|
||||||
//앞에서 -1로 선언함
|
|
||||||
if (cell.parallelPoint === 1 || cell.parallelPoint === 2) {
|
|
||||||
//ㄴ자 역ㄱ자
|
|
||||||
//밑에서 위로 올라가야하면
|
|
||||||
cell.startY = cell.startY - (rectHeight + cell.padding) * rows
|
|
||||||
if (cell.parallelPoint === 2) {
|
|
||||||
cell.startX = cell.startX - (rectWidth + cell.padding) * cols
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
if (cell.parallelPoint === 5) {
|
|
||||||
cell.startX = cell.startX - (rectWidth + cell.padding) * cols
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
let startXPos, startYPos
|
let startXPos, startYPos
|
||||||
|
|
||||||
for (let i = 0; i < cols; i++) {
|
for (let i = 0; i < cols; i++) {
|
||||||
for (let j = 0; j < rows; j++) {
|
for (let j = 0; j < rows; j++) {
|
||||||
if (cell.parallelPoint > -1) {
|
|
||||||
startXPos = cell.startX + i * (rectWidth + cell.padding)
|
|
||||||
startYPos = cell.startY + j * (rectHeight + cell.padding)
|
|
||||||
} else {
|
|
||||||
startXPos = minX + i * (rectWidth + cell.padding)
|
|
||||||
startYPos = minY + j * (rectHeight + cell.padding)
|
|
||||||
}
|
|
||||||
|
|
||||||
const rectPoints = []
|
const rectPoints = []
|
||||||
|
|
||||||
rectPoints.push(
|
if (cell.referenceDirection !== 'none') {
|
||||||
{ x: startXPos, y: startYPos },
|
//4각형은 기준점이 없다
|
||||||
{ x: startXPos + rectWidth, y: startYPos },
|
|
||||||
{ x: startXPos, y: startYPos + rectHeight },
|
|
||||||
{ x: startXPos + rectWidth, y: startYPos + rectHeight },
|
|
||||||
)
|
|
||||||
|
|
||||||
const allPointsInside = rectPoints.every((point) => this.inPolygon(point))
|
if (cell.referenceDirection === 'top') {
|
||||||
|
//top, bottom은 A패턴만
|
||||||
|
if (cell.wallDirection === 'left') {
|
||||||
|
startXPos = minX + i * rectWidth
|
||||||
|
startYPos = minY + j * rectHeight
|
||||||
|
|
||||||
|
if (i > 0) {
|
||||||
|
startXPos = startXPos + i * cell.padding //옆으로 패딩
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
startXPos = maxX - (1 + i) * rectWidth - 0.01
|
||||||
|
startYPos = minY + j * rectHeight + 0.01
|
||||||
|
|
||||||
|
if (i > 0) {
|
||||||
|
startXPos = startXPos - i * cell.padding //옆으로 패딩
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (j > 0) {
|
||||||
|
startYPos = startYPos + j * cell.padding
|
||||||
|
}
|
||||||
|
|
||||||
|
rectPoints.push(
|
||||||
|
{ x: startXPos, y: startYPos },
|
||||||
|
{ x: startXPos + rectWidth, y: startYPos },
|
||||||
|
{ x: startXPos, y: startYPos + rectHeight },
|
||||||
|
{ x: startXPos + rectWidth, y: startYPos + rectHeight },
|
||||||
|
)
|
||||||
|
} else if (cell.referenceDirection === 'bottom') {
|
||||||
|
if (cell.wallDirection === 'left') {
|
||||||
|
startXPos = minX + i * rectWidth
|
||||||
|
startYPos = maxY - j * rectHeight - 0.01
|
||||||
|
|
||||||
|
if (i > 0) {
|
||||||
|
startXPos = startXPos + i * cell.padding
|
||||||
|
}
|
||||||
|
|
||||||
|
rectPoints.push(
|
||||||
|
{ x: startXPos, y: startYPos },
|
||||||
|
{ x: startXPos + rectWidth, y: startYPos },
|
||||||
|
{ x: startXPos, y: startYPos - rectHeight },
|
||||||
|
{ x: startXPos + rectWidth, y: startYPos - rectHeight },
|
||||||
|
)
|
||||||
|
} else {
|
||||||
|
startXPos = maxX - i * rectWidth - 0.01
|
||||||
|
startYPos = maxY - j * rectHeight - 0.01
|
||||||
|
|
||||||
|
if (i > 0) {
|
||||||
|
startXPos = startXPos - i * cell.padding
|
||||||
|
}
|
||||||
|
|
||||||
|
rectPoints.push(
|
||||||
|
{ x: startXPos, y: startYPos },
|
||||||
|
{ x: startXPos - rectWidth, y: startYPos },
|
||||||
|
{ x: startXPos, y: startYPos - rectHeight },
|
||||||
|
{ x: startXPos - rectWidth, y: startYPos - rectHeight },
|
||||||
|
)
|
||||||
|
startXPos = startXPos - rectWidth //우 -> 좌 들어가야해서 마이너스 처리
|
||||||
|
}
|
||||||
|
startYPos = startYPos - rectHeight //밑에서 위로 올라가는거라 마이너스 처리
|
||||||
|
|
||||||
|
if (j > 0) {
|
||||||
|
startYPos = startYPos - j * cell.padding
|
||||||
|
}
|
||||||
|
} else if (cell.referenceDirection === 'left') {
|
||||||
|
//여기서부턴 B패턴임
|
||||||
|
if (cell.wallDirection === 'top') {
|
||||||
|
startXPos = minX + i * rectWidth
|
||||||
|
startYPos = minY + j * rectHeight
|
||||||
|
|
||||||
|
if (i > 0) {
|
||||||
|
startXPos = startXPos + i * cell.padding //밑으로
|
||||||
|
}
|
||||||
|
if (j > 0) {
|
||||||
|
startYPos = startYPos + j * cell.padding //옆으로 패딩
|
||||||
|
}
|
||||||
|
|
||||||
|
rectPoints.push(
|
||||||
|
{ x: startXPos, y: startYPos },
|
||||||
|
{ x: startXPos + rectWidth, y: startYPos },
|
||||||
|
{ x: startXPos, y: startYPos + rectHeight },
|
||||||
|
{ x: startXPos + rectWidth, y: startYPos + rectHeight },
|
||||||
|
)
|
||||||
|
} else {
|
||||||
|
startXPos = minX + i * rectWidth
|
||||||
|
startYPos = maxY - j * rectHeight - 0.01
|
||||||
|
|
||||||
|
if (i > 0) {
|
||||||
|
startXPos = startXPos + i * cell.padding
|
||||||
|
}
|
||||||
|
|
||||||
|
if (j > 0) {
|
||||||
|
startYPos = startYPos - j * cell.padding
|
||||||
|
}
|
||||||
|
|
||||||
|
rectPoints.push(
|
||||||
|
{ x: startXPos, y: startYPos },
|
||||||
|
{ x: startXPos + rectWidth, y: startYPos },
|
||||||
|
{ x: startXPos, y: startYPos - rectHeight },
|
||||||
|
{ x: startXPos + rectWidth, y: startYPos - rectHeight },
|
||||||
|
)
|
||||||
|
|
||||||
|
startYPos = startYPos - rectHeight //밑에서 위로 올라가는거라 마이너스 처리
|
||||||
|
}
|
||||||
|
} else if (cell.referenceDirection === 'right') {
|
||||||
|
if (cell.wallDirection === 'top') {
|
||||||
|
startXPos = maxX - i * rectWidth - 0.01
|
||||||
|
startYPos = minY + j * rectHeight + 0.01
|
||||||
|
|
||||||
|
if (j > 0) {
|
||||||
|
startYPos = startYPos + j * cell.padding //위에서 밑으로라 +
|
||||||
|
}
|
||||||
|
|
||||||
|
rectPoints.push(
|
||||||
|
{ x: startXPos, y: startYPos },
|
||||||
|
{ x: startXPos - rectWidth, y: startYPos },
|
||||||
|
{ x: startXPos, y: startYPos + rectHeight },
|
||||||
|
{ x: startXPos - rectWidth, y: startYPos + rectHeight },
|
||||||
|
)
|
||||||
|
} else {
|
||||||
|
startXPos = maxX - i * rectWidth - 0.01
|
||||||
|
startYPos = maxY - j * rectHeight - 0.01
|
||||||
|
|
||||||
|
if (j > 0) {
|
||||||
|
startYPos = startYPos - j * cell.padding
|
||||||
|
}
|
||||||
|
rectPoints.push(
|
||||||
|
{ x: startXPos, y: startYPos },
|
||||||
|
{ x: startXPos - rectWidth, y: startYPos },
|
||||||
|
{ x: startXPos, y: startYPos - rectHeight },
|
||||||
|
{ x: startXPos - rectWidth, y: startYPos - rectHeight },
|
||||||
|
)
|
||||||
|
startYPos = startYPos - rectHeight //밑에서 위로 올라가는거라 마이너스 처리
|
||||||
|
}
|
||||||
|
|
||||||
|
if (i > 0) {
|
||||||
|
startXPos = startXPos - i * cell.padding //옆으로 패딩
|
||||||
|
}
|
||||||
|
startXPos = startXPos - rectWidth // 우측에서 -> 좌측으로 그려짐
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// centerWidth = 0 //나중에 중간 정렬 이면 어쩌구 함수 만들어서 넣음
|
||||||
|
if (['left', 'right'].includes(cell.wallDirection)) {
|
||||||
|
centerWidth = 0
|
||||||
|
} else if (['top', 'bottom'].includes(cell.wallDirection)) {
|
||||||
|
centerHeight = 0
|
||||||
|
}
|
||||||
|
|
||||||
|
if (cell.wallDirection === 'left') {
|
||||||
|
startXPos = minX + i * rectWidth + centerWidth
|
||||||
|
startYPos = minY + j * rectHeight + centerHeight
|
||||||
|
if (i > 0) {
|
||||||
|
startXPos = startXPos + i * cell.padding
|
||||||
|
}
|
||||||
|
if (j > 0 && j < rows) {
|
||||||
|
startYPos = startYPos + j * cell.padding
|
||||||
|
}
|
||||||
|
} else if (cell.wallDirection === 'right') {
|
||||||
|
startXPos = maxX - (1 + i) * rectWidth - 0.01 - centerWidth
|
||||||
|
startYPos = minY + j * rectHeight + 0.01 + centerHeight
|
||||||
|
if (i > 0) {
|
||||||
|
startXPos = startXPos - i * cell.padding
|
||||||
|
}
|
||||||
|
if (j > 0 && j < rows) {
|
||||||
|
startYPos = startYPos + j * cell.padding
|
||||||
|
}
|
||||||
|
} else if (cell.wallDirection === 'top') {
|
||||||
|
startXPos = minX + i * rectWidth - 0.01 + centerWidth
|
||||||
|
startYPos = minY + j * rectHeight + 0.01 + centerHeight
|
||||||
|
|
||||||
|
if (i > 0) {
|
||||||
|
startXPos = startXPos + i * cell.padding
|
||||||
|
}
|
||||||
|
if (j > 0 && j < rows) {
|
||||||
|
startYPos = startYPos + j * cell.padding
|
||||||
|
}
|
||||||
|
} else if (cell.wallDirection === 'bottom') {
|
||||||
|
startXPos = minX + i * rectWidth + 0.01 + centerWidth
|
||||||
|
startYPos = maxY - (j + 1) * rectHeight - 0.01 - centerHeight
|
||||||
|
|
||||||
|
if (i > 0) {
|
||||||
|
startXPos = startXPos + i * cell.padding
|
||||||
|
}
|
||||||
|
|
||||||
|
if (j > 0 && j < rows) {
|
||||||
|
startYPos = startYPos - j * cell.padding
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const allPointsInside = rectPoints.every((point) => this.inPolygonABType(point.x, point.y, points))
|
||||||
|
|
||||||
if (allPointsInside) {
|
if (allPointsInside) {
|
||||||
|
const text = new fabric.Text(`col ${i}, row ${j}`, {
|
||||||
|
fontFamily: 'serif',
|
||||||
|
fontSize: 10,
|
||||||
|
fill: 'black',
|
||||||
|
})
|
||||||
|
|
||||||
const rect = new fabric.Rect({
|
const rect = new fabric.Rect({
|
||||||
left: startXPos,
|
// left: startXPos,
|
||||||
top: startYPos,
|
// top: startYPos,
|
||||||
width: rectWidth,
|
width: rectWidth,
|
||||||
height: rectHeight,
|
height: rectHeight,
|
||||||
fill: '#BFFD9F',
|
fill: '#BFFD9F',
|
||||||
@ -360,13 +526,19 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
|
|||||||
idx: idx,
|
idx: idx,
|
||||||
})
|
})
|
||||||
|
|
||||||
|
var group = new fabric.Group([rect, text], {
|
||||||
|
left: startXPos,
|
||||||
|
top: startYPos,
|
||||||
|
})
|
||||||
|
|
||||||
idx++
|
idx++
|
||||||
drawCellsArray.push(rect) //배열에 넣어서 반환한다
|
drawCellsArray.push(group) //배열에 넣어서 반환한다
|
||||||
this.canvas.add(rect)
|
this.canvas.add(group)
|
||||||
|
this.canvas?.renderAll()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
this.canvas?.renderAll()
|
|
||||||
this.cells = drawCellsArray
|
this.cells = drawCellsArray
|
||||||
return drawCellsArray
|
return drawCellsArray
|
||||||
},
|
},
|
||||||
@ -402,6 +574,25 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
|
|||||||
return intersects % 2 === 1
|
return intersects % 2 === 1
|
||||||
},
|
},
|
||||||
|
|
||||||
|
inPolygonABType(x, y, polygon) {
|
||||||
|
let inside = false
|
||||||
|
let n = polygon.length
|
||||||
|
|
||||||
|
for (let i = 0, j = n - 1; i < n; j = i++) {
|
||||||
|
let xi = polygon[i].x
|
||||||
|
let yi = polygon[i].y
|
||||||
|
let xj = polygon[j].x
|
||||||
|
let yj = polygon[j].y
|
||||||
|
|
||||||
|
// console.log('xi : ', xi, 'yi : ', yi, 'xj : ', xj, 'yj : ', yj)
|
||||||
|
|
||||||
|
let intersect = yi > y !== yj > y && x < ((xj - xi) * (y - yi)) / (yj - yi) + xi
|
||||||
|
if (intersect) inside = !inside
|
||||||
|
}
|
||||||
|
|
||||||
|
return inside
|
||||||
|
},
|
||||||
|
|
||||||
distanceFromEdge(point) {
|
distanceFromEdge(point) {
|
||||||
const vertices = this.getCurrentPoints()
|
const vertices = this.getCurrentPoints()
|
||||||
let minDistance = Infinity
|
let minDistance = Infinity
|
||||||
|
|||||||
@ -59,12 +59,14 @@ export function useMode() {
|
|||||||
const [selectedCellRoofArray, setSelectedCellRoofArray] = useState([])
|
const [selectedCellRoofArray, setSelectedCellRoofArray] = useState([])
|
||||||
const [drewRoofCells, setDrewRoofCells] = useRecoilState(drewRoofCellsState)
|
const [drewRoofCells, setDrewRoofCells] = useRecoilState(drewRoofCellsState)
|
||||||
const [roofStyle, setRoofStyle] = useState(1) //기본 지붕 패턴
|
const [roofStyle, setRoofStyle] = useState(1) //기본 지붕 패턴
|
||||||
|
const [templateCenterLine, setTemplateCenterLine] = useState([])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
// 이벤트 리스너 추가
|
// 이벤트 리스너 추가
|
||||||
if (!canvas) {
|
// if (!canvas) {
|
||||||
return
|
canvas?.setZoom(0.8)
|
||||||
}
|
// return
|
||||||
|
// }
|
||||||
document.addEventListener('keydown', handleKeyDown)
|
document.addEventListener('keydown', handleKeyDown)
|
||||||
|
|
||||||
// 컴포넌트가 언마운트될 때 이벤트 리스너 제거
|
// 컴포넌트가 언마운트될 때 이벤트 리스너 제거
|
||||||
@ -1796,7 +1798,7 @@ export function useMode() {
|
|||||||
let bigRoofPolygon = []
|
let bigRoofPolygon = []
|
||||||
let middleRoofPolygon = []
|
let middleRoofPolygon = []
|
||||||
let smallRoofPolygon = []
|
let smallRoofPolygon = []
|
||||||
|
let templateCenterLine = [] //추후 셀 입력시 상하좌우를 센터선 기준으로 판단하기 위함
|
||||||
if (prevHighIndex === 1) {
|
if (prevHighIndex === 1) {
|
||||||
if (horizontalDirection === 'left') {
|
if (horizontalDirection === 'left') {
|
||||||
//배열 순서대로 뒤에꺼를 찾아서 계산한다
|
//배열 순서대로 뒤에꺼를 찾아서 계산한다
|
||||||
@ -1843,6 +1845,8 @@ export function useMode() {
|
|||||||
secondVertCenterLine = new QLine([secondVertCenterPoint, middleSubLine.y1, secondVertCenterPoint, middleSubLine.y2 - edge], centerLineOpt)
|
secondVertCenterLine = new QLine([secondVertCenterPoint, middleSubLine.y1, secondVertCenterPoint, middleSubLine.y2 - edge], centerLineOpt)
|
||||||
canvas.add(secondVertCenterLine)
|
canvas.add(secondVertCenterLine)
|
||||||
outLines.push(secondVertCenterLine)
|
outLines.push(secondVertCenterLine)
|
||||||
|
templateCenterLine.push(vertCenterLine)
|
||||||
|
templateCenterLine.push(secondVertCenterLine)
|
||||||
|
|
||||||
//작은 지붕쪽 너비 길이를 구한는 로직
|
//작은 지붕쪽 너비 길이를 구한는 로직
|
||||||
let secondHoriCenterLength = (Math.abs(lastLine.get('x1') - lastLine.get('x2')) + Math.abs(lastLine.get('y1') - lastLine.get('y2'))) / 2
|
let secondHoriCenterLength = (Math.abs(lastLine.get('x1') - lastLine.get('x2')) + Math.abs(lastLine.get('y1') - lastLine.get('y2'))) / 2
|
||||||
@ -2004,6 +2008,9 @@ export function useMode() {
|
|||||||
)
|
)
|
||||||
canvas.add(secondHoriCenterLine)
|
canvas.add(secondHoriCenterLine)
|
||||||
|
|
||||||
|
templateCenterLine.push(vertCenterLine)
|
||||||
|
templateCenterLine.push(secondVertCenterLine)
|
||||||
|
|
||||||
//일반라인 외각선 그리기
|
//일반라인 외각선 그리기
|
||||||
normalIndexArray.forEach((index) => {
|
normalIndexArray.forEach((index) => {
|
||||||
const line = lines[index]
|
const line = lines[index]
|
||||||
@ -2144,6 +2151,9 @@ export function useMode() {
|
|||||||
canvas.add(secondVertCenterLine)
|
canvas.add(secondVertCenterLine)
|
||||||
outLines.push(secondVertCenterLine)
|
outLines.push(secondVertCenterLine)
|
||||||
|
|
||||||
|
templateCenterLine.push(vertCenterLine)
|
||||||
|
templateCenterLine.push(secondVertCenterLine)
|
||||||
|
|
||||||
//작은 지붕쪽 너비 길이를 구한는 로직
|
//작은 지붕쪽 너비 길이를 구한는 로직
|
||||||
let secondHoriCenterLength = (Math.abs(lastLine.get('x1') - lastLine.get('x2')) + Math.abs(lastLine.get('y1') - lastLine.get('y2'))) / 2
|
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
|
let secondHoriCenterPoint = (secondVertCenterLine.y1 + secondVertCenterLine.y2) / 2
|
||||||
@ -2285,6 +2295,10 @@ export function useMode() {
|
|||||||
|
|
||||||
canvas.add(secondVertCenterLine)
|
canvas.add(secondVertCenterLine)
|
||||||
outLines.push(secondVertCenterLine)
|
outLines.push(secondVertCenterLine)
|
||||||
|
|
||||||
|
templateCenterLine.push(vertCenterLine)
|
||||||
|
templateCenterLine.push(secondVertCenterLine)
|
||||||
|
|
||||||
//작은 지붕쪽 너비 길이를 구한는 로직
|
//작은 지붕쪽 너비 길이를 구한는 로직
|
||||||
let secondHoriCenterLength = (Math.abs(lastLine.get('x1') - lastLine.get('x2')) + Math.abs(lastLine.get('y1') - lastLine.get('y2'))) / 2
|
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
|
let secondHoriCenterPoint = (secondVertCenterLine.y1 + secondVertCenterLine.y2) / 2
|
||||||
@ -2380,7 +2394,7 @@ export function useMode() {
|
|||||||
roofPatternPolygonArray.push(middleRoofPolygon) //중간라인 폴리곤
|
roofPatternPolygonArray.push(middleRoofPolygon) //중간라인 폴리곤
|
||||||
roofPatternPolygonArray.push(smallRoofPolygon) //작은지붕폴리곤
|
roofPatternPolygonArray.push(smallRoofPolygon) //작은지붕폴리곤
|
||||||
setRoofPolygonPattern({ roofPatternPolygonArray, lines }) //모든 행을 저장
|
setRoofPolygonPattern({ roofPatternPolygonArray, lines }) //모든 행을 저장
|
||||||
|
setTemplateCenterLine(templateCenterLine) //A,B 템플릿의 센터 라인을 저장
|
||||||
canvas?.renderAll()
|
canvas?.renderAll()
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -3129,6 +3143,8 @@ export function useMode() {
|
|||||||
const middleRoofPolygon = []
|
const middleRoofPolygon = []
|
||||||
const smallRoofPolygon = []
|
const smallRoofPolygon = []
|
||||||
|
|
||||||
|
const templateCenterLine = []
|
||||||
|
|
||||||
rerangeOdd.forEach((line, index) => {
|
rerangeOdd.forEach((line, index) => {
|
||||||
const centeredPoint = getCenterPoint(line.y1, line.y2)
|
const centeredPoint = getCenterPoint(line.y1, line.y2)
|
||||||
let points1 = []
|
let points1 = []
|
||||||
@ -3285,6 +3301,9 @@ export function useMode() {
|
|||||||
]
|
]
|
||||||
subLines.forEach((sLine, index) => {
|
subLines.forEach((sLine, index) => {
|
||||||
const subLine = new QLine(sLine, qlineOpt)
|
const subLine = new QLine(sLine, qlineOpt)
|
||||||
|
if (index === 1) {
|
||||||
|
templateCenterLine.push(subLine)
|
||||||
|
}
|
||||||
canvas.add(subLine)
|
canvas.add(subLine)
|
||||||
})
|
})
|
||||||
centralSubDashLinePoint.x1 = getCenterPoint(line.x1, line.x2 + edge)
|
centralSubDashLinePoint.x1 = getCenterPoint(line.x1, line.x2 + edge)
|
||||||
@ -3298,6 +3317,9 @@ export function useMode() {
|
|||||||
]
|
]
|
||||||
subLines.forEach((sLine, index) => {
|
subLines.forEach((sLine, index) => {
|
||||||
const subLine = new QLine(sLine, qlineOpt)
|
const subLine = new QLine(sLine, qlineOpt)
|
||||||
|
if (index === 1) {
|
||||||
|
templateCenterLine.push(subLine)
|
||||||
|
}
|
||||||
canvas.add(subLine)
|
canvas.add(subLine)
|
||||||
})
|
})
|
||||||
centralSubDashLinePoint.x1 = getCenterPoint(line.x1, line.x2 + edge)
|
centralSubDashLinePoint.x1 = getCenterPoint(line.x1, line.x2 + edge)
|
||||||
@ -3315,6 +3337,9 @@ export function useMode() {
|
|||||||
]
|
]
|
||||||
subLines.forEach((sLine, index) => {
|
subLines.forEach((sLine, index) => {
|
||||||
const subLine = new QLine(sLine, qlineOpt)
|
const subLine = new QLine(sLine, qlineOpt)
|
||||||
|
if (index === 0) {
|
||||||
|
templateCenterLine.push(subLine)
|
||||||
|
}
|
||||||
canvas.add(subLine)
|
canvas.add(subLine)
|
||||||
})
|
})
|
||||||
centralSubDashLinePoint.x1 = getCenterPoint(line.x1 - edge, line.x2)
|
centralSubDashLinePoint.x1 = getCenterPoint(line.x1 - edge, line.x2)
|
||||||
@ -3344,8 +3369,12 @@ export function useMode() {
|
|||||||
]
|
]
|
||||||
subLines.forEach((sLine, index) => {
|
subLines.forEach((sLine, index) => {
|
||||||
const subLine = new QLine(sLine, qlineOpt)
|
const subLine = new QLine(sLine, qlineOpt)
|
||||||
|
if (index === 0) {
|
||||||
|
templateCenterLine.push(subLine)
|
||||||
|
}
|
||||||
canvas.add(subLine)
|
canvas.add(subLine)
|
||||||
})
|
})
|
||||||
|
|
||||||
centralSubDashLinePoint.x1 = getCenterPoint(line.x1 - edge, line.x2)
|
centralSubDashLinePoint.x1 = getCenterPoint(line.x1 - edge, line.x2)
|
||||||
centralSubDashLinePoint.x2 = getCenterPoint(line.x1 - edge, line.x2)
|
centralSubDashLinePoint.x2 = getCenterPoint(line.x1 - edge, line.x2)
|
||||||
centralSubDashLinePoint.y1 = line.y1 - eaves
|
centralSubDashLinePoint.y1 = line.y1 - eaves
|
||||||
@ -3371,6 +3400,7 @@ export function useMode() {
|
|||||||
qlineOptDash,
|
qlineOptDash,
|
||||||
)
|
)
|
||||||
canvas.add(centralSubDashLine)
|
canvas.add(centralSubDashLine)
|
||||||
|
templateCenterLine.push(centralLine)
|
||||||
|
|
||||||
if (polygon.shape === 1) {
|
if (polygon.shape === 1) {
|
||||||
bigRoofPolygon[3] = { x: centralLine.x1, y: centralLine.y1 }
|
bigRoofPolygon[3] = { x: centralLine.x1, y: centralLine.y1 }
|
||||||
@ -3398,6 +3428,7 @@ export function useMode() {
|
|||||||
roofPatternPolygonArray.push(middleRoofPolygon)
|
roofPatternPolygonArray.push(middleRoofPolygon)
|
||||||
roofPatternPolygonArray.push(smallRoofPolygon)
|
roofPatternPolygonArray.push(smallRoofPolygon)
|
||||||
setRoofPolygonPattern({ roofPatternPolygonArray, lines: polygon.lines })
|
setRoofPolygonPattern({ roofPatternPolygonArray, lines: polygon.lines })
|
||||||
|
setTemplateCenterLine(templateCenterLine)
|
||||||
// }
|
// }
|
||||||
|
|
||||||
canvas?.renderAll()
|
canvas?.renderAll()
|
||||||
@ -3646,6 +3677,8 @@ export function useMode() {
|
|||||||
// 외각선을 안쪽으로 그려 가대선을 그린다.
|
// 외각선을 안쪽으로 그려 가대선을 그린다.
|
||||||
polygons.forEach((polygon, index) => {
|
polygons.forEach((polygon, index) => {
|
||||||
const trestlePolygon = handleOuterlinesTest(polygon, -12)
|
const trestlePolygon = handleOuterlinesTest(polygon, -12)
|
||||||
|
let referenceDirection = 'none' //상단 기준 값
|
||||||
|
let parallelPoint = -1
|
||||||
trestlePolygon.setViewLengthText(false) //얘는 set으로 안먹는다...
|
trestlePolygon.setViewLengthText(false) //얘는 set으로 안먹는다...
|
||||||
trestlePolygon.set({
|
trestlePolygon.set({
|
||||||
stroke: 'red',
|
stroke: 'red',
|
||||||
@ -3661,6 +3694,62 @@ export function useMode() {
|
|||||||
name: 'trestlePolygon',
|
name: 'trestlePolygon',
|
||||||
})
|
})
|
||||||
|
|
||||||
|
if (polygon.points.length > 4) {
|
||||||
|
//4각 이상일때만 한다
|
||||||
|
const concave = findConcavePointIndices(polygon.points) //오목한 부분기준으로 시작점을 찾으려 계산
|
||||||
|
parallelPoint = parseInt(concave.concavePointIndices[0] + 3) % polygon.points.length //시작점을 찾기 위해 적용
|
||||||
|
|
||||||
|
if (templateType === 2) {
|
||||||
|
//셀이 그려져야할 기준 방향
|
||||||
|
//A타입
|
||||||
|
if (parallelPoint === 0 || parallelPoint === 5) {
|
||||||
|
referenceDirection = 'top'
|
||||||
|
} else {
|
||||||
|
referenceDirection = 'bottom'
|
||||||
|
}
|
||||||
|
} else if (templateType === 3) {
|
||||||
|
//B타입
|
||||||
|
if (parallelPoint === 0 || parallelPoint === 1) {
|
||||||
|
referenceDirection = 'left'
|
||||||
|
} else {
|
||||||
|
referenceDirection = 'right'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//셀이 생성될 지붕의 흐름방향을 정함
|
||||||
|
templateCenterLine.some((centerLine) => {
|
||||||
|
if (templateType === 2) {
|
||||||
|
trestlePolygon.set({
|
||||||
|
referenceDirection: referenceDirection,
|
||||||
|
startIndex: parallelPoint,
|
||||||
|
}) //기준면 방향
|
||||||
|
trestlePolygon.points.forEach((trestleLine, index) => {
|
||||||
|
if (trestleLine.x === centerLine.x1 - 12) {
|
||||||
|
trestlePolygon.set({ wallDirection: 'left' })
|
||||||
|
return true
|
||||||
|
} else if (trestleLine.x === centerLine.x1 + 12) {
|
||||||
|
trestlePolygon.set({ wallDirection: 'right' })
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
} else if (templateType === 3) {
|
||||||
|
trestlePolygon.set({
|
||||||
|
referenceDirection: referenceDirection,
|
||||||
|
startIndex: parallelPoint,
|
||||||
|
}) //기준면 방향
|
||||||
|
trestlePolygon.points.forEach((trestleLine, index) => {
|
||||||
|
if (trestleLine.y === centerLine.y1 - 12) {
|
||||||
|
trestlePolygon.set({ wallDirection: 'top' })
|
||||||
|
return true
|
||||||
|
} else if (trestleLine.y === centerLine.y1 + 12) {
|
||||||
|
trestlePolygon.set({ wallDirection: 'bottom' })
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 가대 선택 이벤트
|
* 가대 선택 이벤트
|
||||||
*/
|
*/
|
||||||
@ -3709,25 +3798,16 @@ export function useMode() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
selectedCellRoofArray.forEach((polygon, index) => {
|
selectedCellRoofArray.forEach((polygon, index) => {
|
||||||
let parallelPoint = -1 //오목한 부분의 반대 꼭지점 //없는 애들도 있어서 -1
|
//오목한 부분의 반대 꼭지점 //없는 애들도 있어서 -1
|
||||||
const startPoint = {} //도형의 시작점을 찾기 위해
|
|
||||||
|
|
||||||
if (polygon.lines.length > 4) {
|
const drawCells = polygon.fillCellABType({
|
||||||
const concave = findConcavePointIndices(polygon.points) //오목한 부분기준으로 시작점을 찾으려 계산
|
|
||||||
parallelPoint = parseInt(concave.concavePointIndices[0] + 3) % polygon.points.length //시작점을 찾기 위해 적용
|
|
||||||
startPoint.x = polygon.points[parallelPoint].x
|
|
||||||
startPoint.y = polygon.points[parallelPoint].y
|
|
||||||
}
|
|
||||||
|
|
||||||
const drawCells = polygon.fillCellABTemplate({
|
|
||||||
width: cellSize.width,
|
width: cellSize.width,
|
||||||
height: cellSize.height,
|
height: cellSize.height,
|
||||||
padding: 10,
|
padding: 10,
|
||||||
parallelPoint: parallelPoint,
|
wallDirection: polygon.wallDirection,
|
||||||
startX: startPoint.x,
|
referenceDirection: polygon.referenceDirection,
|
||||||
startY: startPoint.y,
|
startIndex: polygon.startIndex,
|
||||||
})
|
})
|
||||||
// const drawCells = polygon.fillCell({ width: cellSize.width, height: cellSize.height, padding: 10 })
|
|
||||||
drawCellsArray.push({ roofIndex: polygon.customIndex, drawCells: drawCells })
|
drawCellsArray.push({ roofIndex: polygon.customIndex, drawCells: drawCells })
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
43
yarn.lock
43
yarn.lock
@ -1351,6 +1351,42 @@
|
|||||||
resolved "https://registry.yarnpkg.com/@prisma/client/-/client-5.18.0.tgz#526e4281a448f214c0ff81d65c39243608c98294"
|
resolved "https://registry.yarnpkg.com/@prisma/client/-/client-5.18.0.tgz#526e4281a448f214c0ff81d65c39243608c98294"
|
||||||
integrity sha512-BWivkLh+af1kqC89zCJYkHsRcyWsM8/JHpsDMM76DjP3ZdEquJhXa4IeX+HkWPnwJ5FanxEJFZZDTWiDs/Kvyw==
|
integrity sha512-BWivkLh+af1kqC89zCJYkHsRcyWsM8/JHpsDMM76DjP3ZdEquJhXa4IeX+HkWPnwJ5FanxEJFZZDTWiDs/Kvyw==
|
||||||
|
|
||||||
|
"@prisma/debug@5.18.0":
|
||||||
|
version "5.18.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/@prisma/debug/-/debug-5.18.0.tgz#527799e044d2903a35945e61ac2d8916e4b61ead"
|
||||||
|
integrity sha512-f+ZvpTLidSo3LMJxQPVgAxdAjzv5OpzAo/eF8qZqbwvgi2F5cTOI9XCpdRzJYA0iGfajjwjOKKrVq64vkxEfUw==
|
||||||
|
|
||||||
|
"@prisma/engines-version@5.18.0-25.4c784e32044a8a016d99474bd02a3b6123742169":
|
||||||
|
version "5.18.0-25.4c784e32044a8a016d99474bd02a3b6123742169"
|
||||||
|
resolved "https://registry.yarnpkg.com/@prisma/engines-version/-/engines-version-5.18.0-25.4c784e32044a8a016d99474bd02a3b6123742169.tgz#203426ebf4ec4e1acce7da4a59ec8f0df92b29e7"
|
||||||
|
integrity sha512-a/+LpJj8vYU3nmtkg+N3X51ddbt35yYrRe8wqHTJtYQt7l1f8kjIBcCs6sHJvodW/EK5XGvboOiwm47fmNrbgg==
|
||||||
|
|
||||||
|
"@prisma/engines@5.18.0":
|
||||||
|
version "5.18.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/@prisma/engines/-/engines-5.18.0.tgz#26ea46e26498be622407cf95663d7fb4c39c895b"
|
||||||
|
integrity sha512-ofmpGLeJ2q2P0wa/XaEgTnX/IsLnvSp/gZts0zjgLNdBhfuj2lowOOPmDcfKljLQUXMvAek3lw5T01kHmCG8rg==
|
||||||
|
dependencies:
|
||||||
|
"@prisma/debug" "5.18.0"
|
||||||
|
"@prisma/engines-version" "5.18.0-25.4c784e32044a8a016d99474bd02a3b6123742169"
|
||||||
|
"@prisma/fetch-engine" "5.18.0"
|
||||||
|
"@prisma/get-platform" "5.18.0"
|
||||||
|
|
||||||
|
"@prisma/fetch-engine@5.18.0":
|
||||||
|
version "5.18.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/@prisma/fetch-engine/-/fetch-engine-5.18.0.tgz#5b343e2b36b27e2713901ddd032ddd6932b3d55f"
|
||||||
|
integrity sha512-I/3u0x2n31rGaAuBRx2YK4eB7R/1zCuayo2DGwSpGyrJWsZesrV7QVw7ND0/Suxeo/vLkJ5OwuBqHoCxvTHpOg==
|
||||||
|
dependencies:
|
||||||
|
"@prisma/debug" "5.18.0"
|
||||||
|
"@prisma/engines-version" "5.18.0-25.4c784e32044a8a016d99474bd02a3b6123742169"
|
||||||
|
"@prisma/get-platform" "5.18.0"
|
||||||
|
|
||||||
|
"@prisma/get-platform@5.18.0":
|
||||||
|
version "5.18.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/@prisma/get-platform/-/get-platform-5.18.0.tgz#0dc4c82fe9a4971f4519a57cb2dd69d8e0df4b71"
|
||||||
|
integrity sha512-Tk+m7+uhqcKDgnMnFN0lRiH7Ewea0OEsZZs9pqXa7i3+7svS3FSCqDBCaM9x5fmhhkufiG0BtunJVDka+46DlA==
|
||||||
|
dependencies:
|
||||||
|
"@prisma/debug" "5.18.0"
|
||||||
|
|
||||||
"@react-aria/breadcrumbs@3.5.13":
|
"@react-aria/breadcrumbs@3.5.13":
|
||||||
version "3.5.13"
|
version "3.5.13"
|
||||||
resolved "https://registry.npmjs.org/@react-aria/breadcrumbs/-/breadcrumbs-3.5.13.tgz"
|
resolved "https://registry.npmjs.org/@react-aria/breadcrumbs/-/breadcrumbs-3.5.13.tgz"
|
||||||
@ -2389,7 +2425,7 @@
|
|||||||
resolved "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.7.tgz"
|
resolved "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.7.tgz"
|
||||||
integrity sha512-8wTvZawATi/lsmNu10/j2hk1KEP0IvjubqPE3cu1Xz7xfXXt5oCq3SNUz4fMIP4XGF9Ky+Ue2tBA3hcS7LSBlA==
|
integrity sha512-8wTvZawATi/lsmNu10/j2hk1KEP0IvjubqPE3cu1Xz7xfXXt5oCq3SNUz4fMIP4XGF9Ky+Ue2tBA3hcS7LSBlA==
|
||||||
|
|
||||||
"@types/node@>=18":
|
"@types/node@*", "@types/node@>=18":
|
||||||
version "22.1.0"
|
version "22.1.0"
|
||||||
resolved "https://registry.yarnpkg.com/@types/node/-/node-22.1.0.tgz#6d6adc648b5e03f0e83c78dc788c2b037d0ad94b"
|
resolved "https://registry.yarnpkg.com/@types/node/-/node-22.1.0.tgz#6d6adc648b5e03f0e83c78dc788c2b037d0ad94b"
|
||||||
integrity sha512-AOmuRF0R2/5j1knA3c6G3HOk523Ga+l+ZXltX8SF1+5oqcXijjfTd8fY3XRZqSihEu9XhtQnKYLmkFaoxgsJHw==
|
integrity sha512-AOmuRF0R2/5j1knA3c6G3HOk523Ga+l+ZXltX8SF1+5oqcXijjfTd8fY3XRZqSihEu9XhtQnKYLmkFaoxgsJHw==
|
||||||
@ -4061,6 +4097,11 @@ safe-buffer@^5.0.1, safe-buffer@~5.2.0:
|
|||||||
resolved "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz"
|
resolved "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz"
|
||||||
integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
|
integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
|
||||||
|
|
||||||
|
safe-buffer@~5.1.1:
|
||||||
|
version "5.1.2"
|
||||||
|
resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
|
||||||
|
integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
|
||||||
|
|
||||||
"safer-buffer@>= 2.1.2 < 3.0.0":
|
"safer-buffer@>= 2.1.2 < 3.0.0":
|
||||||
version "2.1.2"
|
version "2.1.2"
|
||||||
resolved "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz"
|
resolved "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz"
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user