{
+ const firstPoint = historyPoints.current[0]
+ const lastPoint = historyPoints.current[historyPoints.current.length - 1]
+ historyPoints.current.forEach((point) => {
+ canvas?.remove(point)
+ })
+ drawLineWithLength(lastPoint, firstPoint)
+ points.current = []
+ historyPoints.current = []
+
+ // handleOuterlines()
+ const wall = makePolygon()
+ setWall(wall)
+
+ return wall
+ }
+
const templateMode = () => {
changeMode(canvas, Mode.EDIT)
if (historyPoints.current.length >= 4) {
- const firstPoint = historyPoints.current[0]
- const lastPoint = historyPoints.current[historyPoints.current.length - 1]
- historyPoints.current.forEach((point) => {
- canvas?.remove(point)
- })
- drawLineWithLength(lastPoint, firstPoint)
- points.current = []
- historyPoints.current = []
+ drawWallPolygon()
+ //아래 내용 drawWallPolygon()으로 대체
+ // const firstPoint = historyPoints.current[0]
+ // const lastPoint = historyPoints.current[historyPoints.current.length - 1]
+ // historyPoints.current.forEach((point) => {
+ // canvas?.remove(point)
+ // })
+ // drawLineWithLength(lastPoint, firstPoint)
+ // points.current = []
+ // historyPoints.current = []
+
+ // // handleOuterlines()
+ // const wall = makePolygon()
+ // setWall(wall)
- // handleOuterlines()
handleOuterlinesTest() //외곽선 그리기 테스트
-
- const wall = makePolygon()
- setWall(wall)
}
}
@@ -895,6 +921,171 @@ export function useMode() {
return rtnLines
}
+ /**
+ * 템플릿 B 적용
+ * 1. 모드 체인지
+ * 2. 외벽선 그리기 마무리
+ */
+ const applyTemplateB = () => {
+ changeMode(canvas, Mode.EDIT)
+ const polygon = drawWallPolygon()
+ handleOuterLineTemplateB(polygon)
+ }
+
+ const handleOuterLineTemplateB = (polygon) => {
+ polygon.points.forEach((point, index) => {
+ let x2 =
+ index === polygon.points.length - 1
+ ? polygon.points[0].x
+ : polygon.points[index + 1].x
+ let y2 =
+ index === polygon.points.length - 1
+ ? polygon.points[0].y
+ : polygon.points[index + 1].y
+
+ let x1 = point.x
+ let y1 = point.y
+ if (index % 2 === 0) {
+ if (polygon.lines[index].direction === 'bottom') {
+ y1 = y1 - 50
+ y2 = y2 + 50
+ x1 = x1 - 20
+ x2 = x2 - 20
+ } else {
+ y1 = y1 + 50
+ y2 = y2 - 50
+ x1 = x1 + 20
+ x2 = x2 + 20
+ }
+ } else {
+ if (polygon.lines[index].direction === 'right') {
+ x1 = x1 - 20
+ x2 = x2 + 20
+ y1 = y1 + 50
+ y2 = y2 + 50
+ } else {
+ x1 = x1 + 20
+ x2 = x2 - 20
+ y1 = y1 - 50
+ y2 = y2 - 50
+ }
+ }
+
+ switch (polygon.shape) {
+ case 1:
+ break
+ case 2:
+ const centerPoint =
+ polygon.points[3].y +
+ (polygon.points[2].y - polygon.points[3].y) / 2
+ if (index === 0) {
+ const subLine = new QLine(
+ [
+ point.x - 20,
+ polygon.points[0].y +
+ (polygon.points[1].y - polygon.points[0].y) / 2,
+ polygon.points[5].x + 20,
+ polygon.points[0].y +
+ (polygon.points[1].y - polygon.points[0].y) / 2,
+ ],
+ {
+ stroke: 'blue',
+ strokeWidth: 2,
+ selectable: false,
+ fontSize: fontSize,
+ },
+ )
+ canvas.add(subLine)
+ }
+ if (index === 3) {
+ x2 = x2 + 20
+
+ const subLine = new QLine([x2, y2, x2, centerPoint], {
+ stroke: 'blue',
+ strokeWidth: 2,
+ selectable: false,
+ fontSize: fontSize,
+ })
+ canvas.add(subLine)
+ }
+ if (index === 4) {
+ y1 =
+ point.y +
+ (polygon.points[index - 2].y - polygon.points[index - 1].y) / 2
+
+ const subLine = new QLine(
+ [point.x, centerPoint, polygon.points[2].x + 20, centerPoint],
+ {
+ stroke: 'blue',
+ strokeWidth: 2,
+ selectable: false,
+ fontSize: fontSize,
+ },
+ )
+ canvas.add(subLine)
+
+ const subVerticalLine = new QLine(
+ [
+ getCenterPoint(point.x, polygon.points[2].x + 20),
+ polygon.points[3].y - 50,
+ getCenterPoint(point.x, polygon.points[2].x + 20),
+ centerPoint,
+ ],
+ {
+ stroke: 'black',
+ strokeWidth: 2,
+ strokeDashArray: [5, 5],
+ selectable: false,
+ fontSize: fontSize,
+ },
+ )
+ canvas.add(subVerticalLine)
+ }
+
+ if (index === 5) {
+ const centeredPoint = getCenterPoint(
+ polygon.points[0].x,
+ polygon.points[5].x,
+ )
+ const verticalSubLine = new QLine(
+ [
+ centeredPoint,
+ polygon.points[0].y - 50,
+ centeredPoint,
+ polygon.points[1].y + 50,
+ ],
+ {
+ stroke: 'black',
+ strokeWidth: 2,
+ strokeDashArray: [5, 5],
+ selectable: false,
+ fontSize: fontSize,
+ },
+ )
+
+ canvas.add(verticalSubLine)
+ }
+
+ break
+ case 3:
+ break
+ case 4:
+ break
+ default:
+ break
+ }
+
+ const line = new QLine([x1, y1, x2, y2], {
+ stroke: 'blue',
+ strokeWidth: 2,
+ selectable: false,
+ fontSize: fontSize,
+ })
+ canvas.add(line)
+ })
+ canvas.renderAll()
+ }
+
return {
mode,
changeMode,
@@ -905,5 +1096,6 @@ export function useMode() {
zoom,
togglePolygonLine,
handleOuterlinesTest2,
+ applyTemplateB,
}
}
diff --git a/src/util/canvas-util.js b/src/util/canvas-util.js
index 84563f34..e1c4b0fa 100644
--- a/src/util/canvas-util.js
+++ b/src/util/canvas-util.js
@@ -74,6 +74,24 @@ export function anchorWrapper(anchorIndex, fn) {
}
}
+/**
+ * 두 좌표의 중간점 좌표를 계산해서 반환하는 함수
+ * @param {number} point1
+ * @param {number} point2 방향에 상관없이 항상 큰 값이 뒤에 위치해야 함
+ * @returns
+ */
+export const getCenterPoint = (point1, point2) => {
+ return point1 + (point2 - point1) / 2
+}
+
+/**
+ * 두 점 사이의 거리를 계산하는 함수
+ * @param {*} x1 첫번째 점 x좌표
+ * @param {*} y1 첫번째 점 y좌표
+ * @param {*} x2 두번째 점 x좌표
+ * @param {*} y2 두번째 점 y좌표
+ * @returns
+ */
export const getDistance = (x1, y1, x2, y2) => {
return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2))
}