diff --git a/src/hooks/useMode.js b/src/hooks/useMode.js index 5af1b0f8..31336413 100644 --- a/src/hooks/useMode.js +++ b/src/hooks/useMode.js @@ -1265,7 +1265,6 @@ export function useMode() { const wall = makePolygon(null, sort) wall.name = 'wall' - // wall.set({ name: 'wall' }) return wall } @@ -1363,7 +1362,8 @@ export function useMode() { const polygon = new QPolygon( points, { - stroke: 'black', + stroke: '#1083E3', + strokeWidth: 2, fill: 'transparent', viewLengthText: true, fontSize: fontSize, @@ -1515,7 +1515,24 @@ export function useMode() { pitch: 4, sleeve: true, }*/ - if (index % 2 === 0) { + /*if (index % 2 === 0) { + line.attributes = { + type: LINE_TYPE.WALLLINE.GABLE, + offset: 30, + width: 50, + pitch: 4, + sleeve: true, + } + } else { + line.attributes = { + type: LINE_TYPE.WALLLINE.EAVES, + offset: 50, + width: 50, + pitch: 4, + sleeve: true, + } + }*/ + if (index === polygon.lines.length - 1) { line.attributes = { type: LINE_TYPE.WALLLINE.GABLE, offset: 30, @@ -1748,6 +1765,10 @@ export function useMode() { roofId: roof.id, } + canvas + .getObjects() + .filter((line) => line.attributes?.wallId === wall.id) + .forEach((line) => canvas.remove(line)) wall.lines.forEach((line, index) => { const lineLength = Math.sqrt( Math.pow(Math.round(Math.abs(line.x1 - line.x2) * 10), 2) + Math.pow(Math.round(Math.abs(line.y1 - line.y2) * 10), 2), @@ -1756,11 +1777,45 @@ export function useMode() { line.attributes.currentRoof = roof.lines[index].id line.attributes.planeSize = lineLength line.attributes.actualSize = lineLength + + let wallStroke, wallStrokeWidth + switch (line.attributes.type) { + case LINE_TYPE.WALLLINE.EAVES: + wallStroke = '#45CD7D' + wallStrokeWidth = 4 + break + case LINE_TYPE.WALLLINE.HIPANDGABLE: + wallStroke = '#45CD7D' + wallStrokeWidth = 4 + break + case LINE_TYPE.WALLLINE.GABLE: + wallStroke = '#3FBAE6' + wallStrokeWidth = 4 + break + case LINE_TYPE.WALLLINE.JERKINHEAD: + wallStroke = '#3FBAE6' + wallStrokeWidth = 4 + break + case LINE_TYPE.WALLLINE.SHED: + wallStroke = '#000000' + wallStrokeWidth = 4 + break + case LINE_TYPE.WALLLINE.WALL: + wallStroke = '#000000' + wallStrokeWidth = 4 + break + } + const wallLine = new fabric.Line([line.x1, line.y1, line.x2, line.y2], { + attributes: { wallId: wall.id }, + stroke: wallStroke, + strokeWidth: wallStrokeWidth, + selectable: false, + }) + canvas.add(wallLine) }) setRoof(roof) setWall(wall) - return roof } diff --git a/src/util/qpolygon-utils.js b/src/util/qpolygon-utils.js index 4b2e390c..493417bd 100644 --- a/src/util/qpolygon-utils.js +++ b/src/util/qpolygon-utils.js @@ -1786,7 +1786,7 @@ const drawRidge = (roof, canvas) => { const checkLine = new QLine([startXPoint, startYPoint, checkEndXPoint, checkEndYPoint], { fontSize: roof.fontSize, stroke: 'red', - strokeWidth: 1, + strokeWidth: 2, name: LINE_TYPE.SUBLINE.HIP, attributes: { roofId: roof.id, currentRoof: currentRoof.id, actualSize: 0 }, }) @@ -1838,8 +1838,8 @@ const drawRidge = (roof, canvas) => { const ridge = new QLine([startXPoint, startYPoint, endXPoint, endYPoint], { fontSize: roof.fontSize, - stroke: 'blue', - strokeWidth: 1, + stroke: '#1083E3', + strokeWidth: 2, name: LINE_TYPE.SUBLINE.RIDGE, attributes: { roofId: roof.id }, }) @@ -1877,8 +1877,8 @@ const drawRidge = (roof, canvas) => { let y2 = Math.max(ridge.y1, ridge2.y1, ridge.y2, ridge2.y2) const newRidge = new QLine([x1, y1, x2, y2], { fontSize: roof.fontSize, - stroke: 'blue', - strokeWidth: 1, + stroke: '#1083E3', + strokeWidth: 2, name: LINE_TYPE.SUBLINE.RIDGE, attributes: { roofId: roof.id }, }) @@ -1964,12 +1964,11 @@ const drawHips = (roof, canvas) => { const vectorX1 = ridgeCoordinate.x1 - currentRoof.x1 const vectorY1 = ridgeCoordinate.y1 - currentRoof.y1 const angle1 = Math.atan2(vectorY1, vectorX1) * (180 / Math.PI) - console.log('angle1', Math.abs(Math.round(angle1)) % 45) if (Math.abs(Math.round(angle1)) % 45 === 0) { const hip1 = new QLine([currentRoof.x1, currentRoof.y1, ridgeCoordinate.x1, ridgeCoordinate.y1], { fontSize: roof.fontSize, - stroke: 'red', - strokeWidth: 1, + stroke: '#1083E3', + strokeWidth: 2, name: LINE_TYPE.SUBLINE.HIP, attributes: { roofId: roof.id, currentRoof: currentRoof.id, actualSize: 0 }, }) @@ -1991,8 +1990,8 @@ const drawHips = (roof, canvas) => { if (Math.abs(Math.round(angle2)) % 45 === 0) { const hip2 = new QLine([currentRoof.x2, currentRoof.y2, ridgeCoordinate.x1, ridgeCoordinate.y1], { fontSize: roof.fontSize, - stroke: 'red', - strokeWidth: 1, + stroke: '#1083E3', + strokeWidth: 2, name: LINE_TYPE.SUBLINE.HIP, attributes: { roofId: roof.id, currentRoof: currentRoof.id, actualSize: 0 }, }) @@ -2063,8 +2062,8 @@ const drawHips = (roof, canvas) => { if (ridgePoints !== undefined) { const hip = new QLine([currentRoof.x1, currentRoof.y1, ridgePoints.x, ridgePoints.y], { fontSize: roof.fontSize, - stroke: 'yellow', - strokeWidth: 1, + stroke: '#1083E3', + strokeWidth: 2, name: LINE_TYPE.SUBLINE.HIP, attributes: { roofId: roof.id, currentRoof: currentRoof.id, actualSize: 0 }, }) @@ -2211,8 +2210,8 @@ const connectLinePoint = (polygon) => { const line = new QLine([p.x1, p.y1, p.x2, p.y2], { attributes: { roofId: polygon.id }, fontSize: polygon.fontSize, - stroke: 'purple', - strokeWidth: 1, + stroke: '#1083E3', + strokeWidth: 2, }) line.attributes.planeSize = Math.round(Math.sqrt(Math.pow(line.x1 - line.x2, 2) + Math.pow(line.y1 - line.y2, 2)) * 10) / 10 line.attributes.actualSize = Math.round(Math.sqrt(Math.pow(line.x1 - line.x2, 2) + Math.pow(line.y1 - line.y2, 2)) * 10) / 10 @@ -2269,8 +2268,8 @@ const connectLinePoint = (polygon) => { const line = new QLine([p.x1, p.y1, p.x2, p.y2], { attributes: { roofId: polygon.id }, fontSize: polygon.fontSize, - stroke: 'purple', - strokeWidth: 1, + stroke: '#1083E3', + strokeWidth: 2, }) line.attributes.planeSize = Math.round(Math.sqrt(Math.pow(line.x1 - line.x2, 2) + Math.pow(line.y1 - line.y2, 2)) * 10) line.attributes.actualSize = Math.round(Math.sqrt(Math.pow(line.x1 - line.x2, 2) + Math.pow(line.y1 - line.y2, 2)) * 10) @@ -2323,8 +2322,8 @@ const connectLinePoint = (polygon) => { let y2 = Math.max(ridge.y1, ridge2.y1, ridge.y2, ridge2.y2) const newRidge = new QLine([x1, y1, x2, y2], { fontSize: polygon.fontSize, - stroke: 'blue', - strokeWidth: 1, + stroke: '#1083E3', + strokeWidth: 2, name: LINE_TYPE.SUBLINE.RIDGE, attributes: { roofId: polygon.id }, }) @@ -2554,8 +2553,6 @@ const changeEavesRoof = (currentRoof, canvas) => { if (ridgeLines.length > 0) { const ridge = ridgeLines[0] - console.log(currentRoof.attributes.ridgeCoordinate) - console.log('ridge.x1 : ', ridge.x1, 'ridge.y1 : ', ridge.y1, 'ridge.x2 : ', ridge.x2, 'ridge.y2 : ', ridge.y2) if (ridge.x1 === currentRoof.attributes.ridgeCoordinate.x1 && ridge.y1 === currentRoof.attributes.ridgeCoordinate.y1) { ridge.set({ x1: hipX2, @@ -2574,7 +2571,6 @@ const changeEavesRoof = (currentRoof, canvas) => { }) currentRoof.attributes.ridgeCoordinate = { x1: ridge.x2, y1: ridge.y2 } } - console.log('ridge.x1 : ', ridge.x1, 'ridge.y1 : ', ridge.y1, 'ridge.x2 : ', ridge.x2, 'ridge.y2 : ', ridge.y2) ridge.attributes.planeSize = Math.round(Math.sqrt(Math.pow(ridge.x1 - ridge.x2, 2) + Math.pow(ridge.y1 - ridge.y2, 2)) * 10) ridge.attributes.actualSize = Math.round(Math.sqrt(Math.pow(ridge.x1 - ridge.x2, 2) + Math.pow(ridge.y1 - ridge.y2, 2)) * 10) } @@ -2592,8 +2588,8 @@ const changeEavesRoof = (currentRoof, canvas) => { const hip1 = new QLine([currentRoof.x1, currentRoof.y1, hipX2, hipY2], { fontSize: roof.fontSize, - stroke: 'red', - strokeWidth: 1, + stroke: '#1083E3', + strokeWidth: 2, name: LINE_TYPE.SUBLINE.HIP, attributes: { roofId: roof.id, @@ -2611,8 +2607,8 @@ const changeEavesRoof = (currentRoof, canvas) => { const hip2 = new QLine([currentRoof.x2, currentRoof.y2, hipX2, hipY2], { fontSize: roof.fontSize, - stroke: 'red', - strokeWidth: 1, + stroke: '#1083E3', + strokeWidth: 2, name: LINE_TYPE.SUBLINE.HIP, attributes: { roofId: roof.id, @@ -2761,8 +2757,8 @@ const changeGableRoof = (currentRoof, canvas) => { let hip1 = new QLine([currentRoof.x1, currentRoof.y1, midX, midY], { fontSize: roof.fontSize, - stroke: 'red', - strokeWidth: 1, + stroke: '#1083E3', + strokeWidth: 2, name: LINE_TYPE.SUBLINE.HIP, attributes: { roofId: roofId, @@ -2778,8 +2774,8 @@ const changeGableRoof = (currentRoof, canvas) => { let hip2 = new QLine([currentRoof.x2, currentRoof.y2, midX, midY], { fontSize: roof.fontSize, - stroke: 'red', - strokeWidth: 1, + stroke: '#1083E3', + strokeWidth: 2, name: LINE_TYPE.SUBLINE.HIP, attributes: { roofId: roofId, @@ -2950,8 +2946,8 @@ const changeHipAndGableRoof = (currentRoof, canvas) => { const hip1 = new QLine([currentRoof.x1, currentRoof.y1, midX + hipX2, midY + hipY2], { fontSize: roof.fontSize, - stroke: 'red', - strokeWidth: 1, + stroke: '#1083E3', + strokeWidth: 2, name: LINE_TYPE.SUBLINE.HIP, attributes: { roofId: roof.id, @@ -2970,8 +2966,8 @@ const changeHipAndGableRoof = (currentRoof, canvas) => { const hip2 = new QLine([currentRoof.x2, currentRoof.y2, midX + hipX2, midY + hipY2], { fontSize: roof.fontSize, - stroke: 'red', - strokeWidth: 1, + stroke: '#1083E3', + strokeWidth: 2, name: LINE_TYPE.SUBLINE.HIP, attributes: { roofId: roof.id, @@ -3005,8 +3001,8 @@ const changeHipAndGableRoof = (currentRoof, canvas) => { hipLines.forEach((hip, i) => { const gableLine = new QLine([hip.x2, hip.y2, currentRoof.attributes.ridgeCoordinate.x1, currentRoof.attributes.ridgeCoordinate.y1], { fontSize: roof.fontSize, - stroke: 'red', - strokeWidth: 1, + stroke: '#1083E3', + strokeWidth: 2, name: LINE_TYPE.SUBLINE.GABLE, attributes: { roofId: roof.id, @@ -3191,8 +3187,8 @@ const changeJerkInHeadRoof = (currentRoof, canvas) => { const gable1 = new QLine([midX + hipX1, midY + hipY1, hipX2, hipY2], { fontSize: roof.fontSize, - stroke: 'red', - strokeWidth: 1, + stroke: '#1083E3', + strokeWidth: 2, name: LINE_TYPE.SUBLINE.GABLE, attributes: { roofId: roof.id, @@ -3213,8 +3209,8 @@ const changeJerkInHeadRoof = (currentRoof, canvas) => { const gable2 = new QLine([midX + hipX1, midY + hipY1, hipX2, hipY2], { fontSize: roof.fontSize, - stroke: 'red', - strokeWidth: 1, + stroke: '#1083E3', + strokeWidth: 2, name: LINE_TYPE.SUBLINE.GABLE, attributes: { roofId: roof.id, @@ -3231,8 +3227,8 @@ const changeJerkInHeadRoof = (currentRoof, canvas) => { const gable3 = new QLine([gable1.x1, gable1.y1, gable2.x1, gable2.y1], { fontSize: roof.fontSize, - stroke: 'red', - strokeWidth: 1, + stroke: '#1083E3', + strokeWidth: 2, name: LINE_TYPE.SUBLINE.GABLE, attributes: { roofId: roof.id, @@ -3247,8 +3243,8 @@ const changeJerkInHeadRoof = (currentRoof, canvas) => { const hip1 = new QLine([currentRoof.x1, currentRoof.y1, gable1.x1, gable1.y1], { fontSize: roof.fontSize, - stroke: 'red', - strokeWidth: 1, + stroke: '#1083E3', + strokeWidth: 2, name: LINE_TYPE.SUBLINE.GABLE, attributes: { roofId: roof.id, @@ -3265,8 +3261,8 @@ const changeJerkInHeadRoof = (currentRoof, canvas) => { const hip2 = new QLine([currentRoof.x2, currentRoof.y2, gable2.x1, gable2.y1], { fontSize: roof.fontSize, - stroke: 'red', - strokeWidth: 1, + stroke: '#1083E3', + strokeWidth: 2, name: LINE_TYPE.SUBLINE.HIP, attributes: { roofId: roof.id, @@ -3421,8 +3417,8 @@ const changeWallRoof = (currentRoof, canvas) => { const addPrevWallLine1 = new QLine([prevX2, prevY2, wallLine.x1 - prevWidthX, wallLine.y1 - prevWidthY], { fontSize: roof.fontSize, - stroke: 'red', - strokeWidth: 1, + stroke: '#1083E3', + strokeWidth: 2, name: 'roofLine', attributes: { roofId: roofId, type: LINE_TYPE.WALLLINE.ETC }, }) @@ -3431,8 +3427,8 @@ const changeWallRoof = (currentRoof, canvas) => { [addPrevWallLine1.x2, addPrevWallLine1.y2, addPrevWallLine1.x2 + prevWidthX, addPrevWallLine1.y2 + prevWidthY], { fontSize: roof.fontSize, - stroke: 'cyan', - strokeWidth: 1, + stroke: '#1083E3', + strokeWidth: 2, name: 'roofLine', attributes: { roofId: roofId, type: LINE_TYPE.WALLLINE.ETC }, }, @@ -3440,16 +3436,16 @@ const changeWallRoof = (currentRoof, canvas) => { const addNextWallLine1 = new QLine([wallLine.x2, wallLine.y2, wallLine.x2 + nextWidthX, wallLine.y2 + nextWidthY], { fontSize: roof.fontSize, - stroke: 'green', - strokeWidth: 1, + stroke: '#1083E3', + strokeWidth: 2, name: 'roofLine', attributes: { roofId: roofId, type: LINE_TYPE.WALLLINE.ETC }, }) const addNextWallLine2 = new QLine([addNextWallLine1.x2, addNextWallLine1.y2, nextX1, nextY1], { fontSize: roof.fontSize, - stroke: 'red', - strokeWidth: 1, + stroke: '#1083E3', + strokeWidth: 2, name: 'roofLine', attributes: { roofId: roofId, type: LINE_TYPE.WALLLINE.ETC }, }) @@ -3493,8 +3489,8 @@ const changeWallRoof = (currentRoof, canvas) => { let hip1 = new QLine([currentRoof.x1, currentRoof.y1, wallMidX, wallMidY], { fontSize: roof.fontSize, - stroke: 'red', - strokeWidth: 1, + stroke: '#1083E3', + strokeWidth: 2, name: LINE_TYPE.SUBLINE.HIP, attributes: { roofId: roof.id, @@ -3509,8 +3505,8 @@ const changeWallRoof = (currentRoof, canvas) => { let hip2 = new QLine([currentRoof.x2, currentRoof.y2, wallMidX, wallMidY], { fontSize: roof.fontSize, - stroke: 'red', - strokeWidth: 1, + stroke: '#1083E3', + strokeWidth: 2, name: LINE_TYPE.SUBLINE.HIP, attributes: { roofId: roof.id,