sk2
This commit is contained in:
parent
e3196488c2
commit
25ae9afdb5
@ -8,6 +8,7 @@ import { line } from 'framer-motion/m'
|
||||
import { QPolygon } from '@/components/fabric/QPolygon'
|
||||
import { point } from '@turf/turf'
|
||||
import { add } from 'mathjs'
|
||||
import wallLine from '@/components/floor-plan/modal/wallLineOffset/type/WallLine'
|
||||
|
||||
/**
|
||||
* 지붕 폴리곤의 스켈레톤(중심선)을 생성하고 캔버스에 그립니다.
|
||||
@ -405,6 +406,8 @@ export const skeletonBuilder = (roofId, canvas, textMode) => {
|
||||
canvas.skeleton.lastPoints = points
|
||||
canvas.set("skeleton", cleanSkeleton);
|
||||
canvas.renderAll()
|
||||
|
||||
|
||||
console.log('skeleton rendered.', canvas);
|
||||
} catch (e) {
|
||||
console.error('스켈레톤 생성 중 오류 발생:', e)
|
||||
@ -560,18 +563,20 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => {
|
||||
|
||||
if (!lineExists) {
|
||||
|
||||
addLines.push(sktLine);
|
||||
|
||||
|
||||
let p1Line = findClosestRoofLine(p1, roof.lines)
|
||||
let p2Line = findClosestRoofLine(p2, roof.lines)
|
||||
let p1wallLine = findClosestRoofLine(p1, wall.lines)
|
||||
let p2wallLine = findClosestRoofLine(p2, wall.lines)
|
||||
|
||||
let p1wallLine = findClosestRoofLine(p1, wall.baseLines)
|
||||
let p2wallLine = findClosestRoofLine(p2, wall.baseLines)
|
||||
|
||||
console.log("p1LineV",p1Line)
|
||||
console.log("p2LineV",p2Line)
|
||||
console.log("p1wallLineV",p1wallLine)
|
||||
console.log("p2wallLineV",p2wallLine)
|
||||
//skt는 시계방향 p1 -> p2
|
||||
//와곽라인은 시계, 반시계
|
||||
//
|
||||
|
||||
|
||||
//외벽선과 접점이 없으면
|
||||
if(p1Line.distance > 0 && p2Line.distance > 0) {
|
||||
@ -589,12 +594,12 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => {
|
||||
console.log("p1,p2:::::",p1, p2)
|
||||
|
||||
if(isSamePoint(p1, p1Line.line.startPoint) || isSamePoint(p1, p1Line.line.endPoint)) {
|
||||
p1.y = p2wallLine.line.endPoint.y
|
||||
//p1.y = p2wallLine.line.endPoint.y
|
||||
return
|
||||
|
||||
}
|
||||
if(isSamePoint(p2, p2Line.line.startPoint) || isSamePoint(p2, p2Line.line.endPoint)) {
|
||||
p2.y = p1wallLine.line.endPoint.y
|
||||
//p2.y = p1wallLine.line.endPoint.y
|
||||
return
|
||||
}
|
||||
|
||||
@ -620,131 +625,125 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => {
|
||||
}
|
||||
|
||||
|
||||
const linesAtP1 = roof.lines.filter(roofLines => {
|
||||
console.log(roofLines.startPoint, roofLines.endPoint);
|
||||
console.log(isSamePoint(roofLines.startPoint, p1))
|
||||
console.log(isSamePoint(roofLines.endPoint, p1))
|
||||
return isSamePoint(roofLines.startPoint, p1) || isSamePoint(roofLines.endPoint, p1);
|
||||
});
|
||||
const orgP1 = { ...p1 };
|
||||
const orgP2 = { ...p2 };
|
||||
let p3,p4;
|
||||
|
||||
const linesAtP2 = roof.lines.filter(roofLines => {
|
||||
console.log(roofLines.startPoint, roofLines.endPoint);
|
||||
console.log(isSamePoint(roofLines.startPoint, p2))
|
||||
console.log(isSamePoint(roofLines.endPoint, p2))
|
||||
return isSamePoint(roofLines.startPoint, p2) || isSamePoint(roofLines.endPoint, p2);
|
||||
});
|
||||
let roofIdx = p2Line.index
|
||||
const changeLine = roof.lines[roofIdx]
|
||||
const changeWallLine = wall.baseLines[roofIdx]
|
||||
|
||||
// if(p2Line.distance > p1Line.distance){
|
||||
// p1Line = p2Line;
|
||||
// p2Line = p1Line;
|
||||
// }
|
||||
// //x점이 만날때..
|
||||
// if(Math.abs(p1.x - p1Line.line.startPoint.x) < 0.1) {
|
||||
// p1.y = p1Line.line.startPoint.y
|
||||
// } else if(Math.abs(p1.x - p1Line.line.endPoint.x) < 0.1){
|
||||
// p1.y = p1Line.line.endPoint.y
|
||||
// }
|
||||
// //y점이 만날때
|
||||
// if(Math.abs(p2.x - p2Line.line.startPoint.x) < 0.1) {
|
||||
// p2.y = p2Line.line.startPoint.y
|
||||
// } else if(Math.abs(p2.x - p2Line.line.endPoint.x) < 0.1){
|
||||
// p2.y = p2Line.line.endPoint.y
|
||||
// }
|
||||
p1 = p2Line.line.endPoint //changeLine.startPoint
|
||||
p2.x = changeWallLine.endPoint.x
|
||||
p2.y = changeLine.startPoint.y
|
||||
if(Math.abs(orgP2.y - changeLine.endPoint.y) < 0.1){
|
||||
p2 = orgP2
|
||||
|
||||
}
|
||||
|
||||
if(p1Line.distance > p2Line.distance){
|
||||
//반시계
|
||||
roofIdx = p1Line.index
|
||||
const changeLine2 = roof.lines[roofIdx]
|
||||
const changeWallLine2 = wall.baseLines[roofIdx]
|
||||
p1 = p1Line.line.endPoint.x//changeLine2.endPoint
|
||||
p2.x = changeLine2.endPoint.x
|
||||
p2.y = changeWallLine2.startPoint.y
|
||||
if(Math.abs(orgP1.x - changeLine2.endPoint.x) < 0.1){
|
||||
p2 = orgP1
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
if (Array.isArray(addLines)) {
|
||||
// 이미 동일한 p1, p2를 가진 객체가 있는지 확인
|
||||
const isDuplicate = addLines.some(line =>
|
||||
(line.p1.x === p1.x && line.p1.y === p1.y &&
|
||||
line.p2.x === p2.x && line.p2.y === p2.y) ||
|
||||
(line.p1.x === p2.x && line.p1.y === p2.y &&
|
||||
line.p2.x === p1.x && line.p2.y === p1.y)
|
||||
);
|
||||
|
||||
if (isDuplicate) {
|
||||
return; // 중복된 라인이 있으면 함수 종료
|
||||
}
|
||||
|
||||
// 중복이 없으면 추가
|
||||
addLines.push({p1, p2});
|
||||
|
||||
|
||||
|
||||
if(addLines.length === 2){
|
||||
|
||||
//기존 라인삭제
|
||||
|
||||
const existingNewLine2 = canvas.getObjects().find(obj => obj.lineName === "helpLine");
|
||||
if (existingNewLine2) {
|
||||
canvas.remove(existingNewLine2);
|
||||
canvas.renderAll();
|
||||
}
|
||||
const line1 = addLines[0];
|
||||
const line2 = addLines[1];
|
||||
// Find the common point (the vertex of the right angle)
|
||||
let commonPoint, p3, p4;
|
||||
|
||||
if (line1.p1.x === line2.p1.x || line1.p1.x === line2.p2.x) {
|
||||
commonPoint = line1.p1;
|
||||
} else {
|
||||
commonPoint = line1.p2;
|
||||
}
|
||||
|
||||
// Find the other two points
|
||||
const otherPoint1 = line1.p1 === commonPoint ? line1.p2 : line1.p1;
|
||||
const otherPoint2 = line2.p1 === commonPoint ? line2.p2 : line2.p1;
|
||||
|
||||
// Calculate the fourth point to form a rectangle
|
||||
p3 = {
|
||||
x: otherPoint1.x + (otherPoint2.x - commonPoint.x),
|
||||
y: otherPoint1.y + (otherPoint2.y - commonPoint.y)
|
||||
};
|
||||
|
||||
// Create the rectangle points in order (clockwise or counter-clockwise)
|
||||
const rectPoints = [commonPoint, otherPoint1, p3, otherPoint2];
|
||||
|
||||
const rect = new QPolygon(rectPoints, {
|
||||
type: POLYGON_TYPE.ROOF,
|
||||
fill: 'transparent',
|
||||
stroke: 'black',
|
||||
strokeWidth: 2,
|
||||
selectable: false,
|
||||
evented: false
|
||||
});
|
||||
canvas.add(rect);
|
||||
canvas.renderAll();
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const lineId = `${p1.x},${p1.y}-${p2.x},${p2.y}`;
|
||||
|
||||
|
||||
const newLine2 = new QLine(
|
||||
[p1.x, p1.y, p2.x, p2.y],
|
||||
{
|
||||
parentId : roof.id,
|
||||
fontSize : roof.fontSize,
|
||||
stroke : 'yellow',
|
||||
strokeWidth: lineStyle.width,
|
||||
name : (sktLine.attributes.isOuterEdge) ? 'eaves' : attributes.type,
|
||||
stroke : 'black',
|
||||
strokeWidth: 2,
|
||||
name : 'auxiliaryLine',
|
||||
attributes : attributes,
|
||||
direction : direction,
|
||||
isBaseLine : sktLine.attributes.isOuterEdge,
|
||||
lineName : (sktLine.attributes.isOuterEdge) ? 'outerLine' : attributes.type,
|
||||
selectable : (!sktLine.attributes.isOuterEdge),
|
||||
lineName : 'helpLine',
|
||||
isFixed: true,
|
||||
selectable : true,
|
||||
roofId : roofId,
|
||||
lineId: lineId
|
||||
|
||||
}
|
||||
);
|
||||
|
||||
canvas.add(newLine2);
|
||||
|
||||
/*
|
||||
console.log("그리는 선::::",p1,p2)
|
||||
|
||||
console.log("그리는 선::::",p1Line,p2Line)
|
||||
|
||||
console.log("p1:", p1);
|
||||
console.log("p1Line.intersectionPoint:", p1Line.intersectionPoint);
|
||||
console.log("p2:", p2);
|
||||
console.log("p2Line.intersectionPoint:", p2Line.intersectionPoint);
|
||||
|
||||
const isP1Same = isSamePoint(p1, p1Line.intersectionPoint);
|
||||
const isP2Same = isSamePoint(p2, p2Line.intersectionPoint);
|
||||
console.log("isP1Same:", isP1Same, "isP2Same:", isP2Same, "combined:", isP1Same && isP2Same);
|
||||
|
||||
if (isP1Same && isP2Same) {
|
||||
console.log("Condition is true");
|
||||
} else {
|
||||
console.log("Condition is false");
|
||||
}
|
||||
const xMatch = Math.abs(p1Line.intersectionPoint.x - p2Line.intersectionPoint.x) < 0.1; // x 좌표가 일치하는지 (0.1 오차 허용)
|
||||
const yMatch = Math.abs(p1Line.intersectionPoint.y - p2Line.intersectionPoint.y) < 0.1; // y 좌표가 일치하는지 (0.1 오차 허용)
|
||||
|
||||
if(xMatch) {
|
||||
console.log("xMatch:", xMatch);
|
||||
p1.y = p2Line.intersectionPoint.y
|
||||
//p2.y = p1Line.intersectionPoint.y
|
||||
|
||||
}else if(yMatch){
|
||||
console.log("yMatch:", yMatch);
|
||||
//p1.x = p2Line.intersectionPoint.x
|
||||
p2.x = p1Line.intersectionPoint.x
|
||||
}else{
|
||||
console.log("No Match:");
|
||||
|
||||
//if(isHorizontal) {
|
||||
|
||||
const xMatch = Math.abs(p1.x - p2.x) < 0.1; // x 좌표가 일치하는지 (0.1 오차 허용)
|
||||
const yMatch = Math.abs(p1.y - p2.y) < 0.1; // y 좌표가 일치하는지 (0.1 오차 허용)
|
||||
|
||||
if(yMatch){
|
||||
p1.x = p1Line.intersectionPoint.x;
|
||||
p1.y = p1Line.intersectionPoint.y;
|
||||
p2.x = p1.x;
|
||||
p2.y = p1wallLine.line.startPoint.y;
|
||||
console.log("p1LineV",p1Line)
|
||||
console.log("p2LineV",p2Line)
|
||||
console.log("p1wallLineV",p1wallLine)
|
||||
console.log("p2wallLineV",p2wallLine)
|
||||
}
|
||||
if(xMatch){
|
||||
p1.x = p2Line.intersectionPoint.x;
|
||||
p1.y = p2Line.intersectionPoint.y;
|
||||
p2.x = p2wallLine.line.endPoint.x;
|
||||
p2.y = p1.y;
|
||||
console.log("p1LineH",p1Line)
|
||||
console.log("p2LineH",p2Line)
|
||||
console.log("p1wallLineH",p1wallLine)
|
||||
console.log("p2wallLineH",p2wallLine)
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
console.log("New p1:", p1);
|
||||
|
||||
console.log("New p2:", p2);
|
||||
if( !xMatch && !yMatch) {
|
||||
//그림
|
||||
}
|
||||
|
||||
*/
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -776,8 +775,58 @@ const createInnerLinesFromSkeleton = (roofId, canvas, skeleton, textMode) => {
|
||||
canvas.renderAll();
|
||||
});
|
||||
|
||||
// 같은 라인이 없으므로 새 다각형 라인 생성
|
||||
// let outerLinePoints = canvas.getObjects().filter((obj) => obj.name === 'outerLinePoint' )
|
||||
// outerLinePoints.forEach((outerLinePoint) => {
|
||||
// canvas.remove(outerLinePoint)
|
||||
// canvas.renderAll()
|
||||
// });
|
||||
//
|
||||
// let outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine' && obj.attributes.roofId === roofId)
|
||||
// outerLines.forEach((outerLine) => {
|
||||
// canvas.remove(outerLine)
|
||||
// canvas.renderAll()
|
||||
// });
|
||||
|
||||
// let baseLines = canvas.getObjects().filter((obj) => obj.name === 'baseLine' && obj.parentId === roofId)
|
||||
// baseLines.forEach((baseLine) => {
|
||||
// canvas.remove(baseLine)
|
||||
// canvas.renderAll()
|
||||
// });
|
||||
|
||||
// 같은 라인이 없으므로 새 다각형 라인 생성
|
||||
//라인 편집
|
||||
let outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine' && obj.attributes.roofId === roofId)
|
||||
outerLines.forEach((outerLine) => {
|
||||
const wallLine = wall.baseLines[outerLine.idx - 1];
|
||||
const loofLine = roof.lines[outerLine.idx - 1];
|
||||
|
||||
if(isSamePoint(wallLine.startPoint, outerLine.startPoint) ||
|
||||
isSamePoint(wallLine.endPoint, outerLine.endPoint)){
|
||||
|
||||
}else{
|
||||
const p1 = loofLine.endPoint
|
||||
const p2 = wallLine.endPoint
|
||||
p2.x = p1.x
|
||||
|
||||
const newLine2 = new QLine(
|
||||
[p1.x, p1.y, p2.x, p2.y],
|
||||
{
|
||||
parentId : roof.id,
|
||||
fontSize : roof.fontSize,
|
||||
stroke : 'black',
|
||||
strokeWidth: 2,
|
||||
name : 'auxiliaryLine',
|
||||
lineName : 'helpLine',
|
||||
isFixed: true,
|
||||
selectable : true,
|
||||
roofId : roofId,
|
||||
}
|
||||
);
|
||||
|
||||
canvas.add(newLine2);
|
||||
canvas.renderAll();
|
||||
}
|
||||
});
|
||||
return innerLines;
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user