Merge pull request 'dev' (#365) from dev into prd-deploy

Reviewed-on: #365

src/components/fabric/QPolygon.js

@@ -2,7 +2,7 @@ import { fabric } from 'fabric'
 import { v4 as uuidv4 } from 'uuid'
 import { QLine } from '@/components/fabric/QLine'
 import { distanceBetweenPoints, findTopTwoIndexesByDistance, getDirectionByPoint, sortedPointLessEightPoint, sortedPoints } from '@/util/canvas-util'
-import { calculateAngle, drawRidgeRoof, drawShedRoof, toGeoJSON } from '@/util/qpolygon-utils'
+import { calculateAngle, drawGableRoof, drawRidgeRoof, drawShedRoof, toGeoJSON } from '@/util/qpolygon-utils'
 import * as turf from '@turf/turf'
 import { LINE_TYPE, POLYGON_TYPE } from '@/common/common'
 import Big from 'big.js'
@@ -255,6 +255,7 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
         // && obj.name !== 'outerLinePoint',
       )
       .forEach((obj) => this.canvas.remove(obj))
+    this.innerLines = []
     this.canvas.renderAll()
 
     let textMode = 'plane'
@@ -274,50 +275,75 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
         break
     }
 
-    const types = []
+    const types = this.lines.map((line) => line.attributes.type)
-    this.lines.forEach((line) => types.push(line.attributes.type))
 
-    const gableType = [LINE_TYPE.WALLLINE.GABLE, LINE_TYPE.WALLLINE.JERKINHEAD]
+    const isGableRoof = function (types) {
+      if (!types.includes(LINE_TYPE.WALLLINE.GABLE)) {
+        return false
+      }
+      const gableTypes = [LINE_TYPE.WALLLINE.GABLE, LINE_TYPE.WALLLINE.JERKINHEAD]
+      const oddTypes = types.filter((type, i) => i % 2 === 0)
+      const evenTypes = types.filter((type, i) => i % 2 === 1)
 
-    const hasShed = types.includes(LINE_TYPE.WALLLINE.SHED)
+      const oddAllEaves = oddTypes.every((type) => type === LINE_TYPE.WALLLINE.EAVES)
+      const evenAllGable = evenTypes.every((type) => gableTypes.includes(type))
+      const evenAllEaves = evenTypes.every((type) => type === LINE_TYPE.WALLLINE.EAVES)
+      const oddAllGable = oddTypes.every((type) => gableTypes.includes(type))
 
-    if (hasShed) {
+      return (oddAllEaves && evenAllGable) || (evenAllEaves && oddAllGable)
-      const sheds = this.lines.filter((line) => line.attributes !== undefined && line.attributes.type === LINE_TYPE.WALLLINE.SHED)
+    }
-      const areLinesParallel = function (line1, line2) {
+
-        const angle1 = calculateAngle(line1.startPoint, line1.endPoint)
+    const isShedRoof = function (types, lines) {
-        const angle2 = calculateAngle(line2.startPoint, line2.endPoint)
+      const gableTypes = [LINE_TYPE.WALLLINE.GABLE, LINE_TYPE.WALLLINE.JERKINHEAD]
+      if (!types.includes(LINE_TYPE.WALLLINE.SHED)) {
+        return false
+      }
+      const shedLines = lines.filter((line) => line.attributes?.type === LINE_TYPE.WALLLINE.SHED)
+      const areShedLinesParallel = function (shedLines) {
+        return shedLines.every((shed, i) => {
+          const nextShed = shedLines[(i + 1) % shedLines.length]
+          const angle1 = calculateAngle(shed.startPoint, shed.endPoint)
+          const angle2 = calculateAngle(nextShed.startPoint, nextShed.endPoint)
           return angle1 === angle2
+        })
+      }
+      if (!areShedLinesParallel(shedLines)) {
+        return false
       }
 
-      let isShedRoof = true
+      const getParallelEavesLines = function (shedLines, lines) {
-      sheds.forEach((shed, i) => {
+        const eavesLines = lines.filter((line) => line.attributes?.type === LINE_TYPE.WALLLINE.EAVES)
-        isShedRoof = areLinesParallel(shed, sheds[(i + 1) % sheds.length])
+
+        const referenceAngle = calculateAngle(shedLines[0].startPoint, shedLines[0].endPoint)
+
+        return eavesLines.filter((line) => {
+          const eavesAngle = calculateAngle(line.startPoint, line.endPoint)
+          return Math.abs(referenceAngle - eavesAngle) === 180
         })
-      if (isShedRoof) {
-        const eaves = this.lines
-          .filter((line) => line.attributes !== undefined && line.attributes.type === LINE_TYPE.WALLLINE.EAVES)
-          .filter((line) => {
-            const angle1 = calculateAngle(sheds[0].startPoint, sheds[0].endPoint)
-            const angle2 = calculateAngle(line.startPoint, line.endPoint)
-            if (Math.abs(angle1 - angle2) === 180) {
-              return line
       }
-          })
+
-        if (eaves.length > 0) {
+      const parallelEaves = getParallelEavesLines(shedLines, lines)
-          const gables = this.lines.filter((line) => sheds.includes(line) === false && eaves.includes(line) === false)
+      if (parallelEaves.length === 0) {
-          const isGable = gables.every((line) => gableType.includes(line.attributes.type))
+        return false
-          if (isGable) {
+      }
+
+      const remainingLines = lines.filter((line) => !shedLines.includes(line) && !parallelEaves.includes(line))
+      return remainingLines.every((line) => gableTypes.includes(line.attributes.type))
+    }
+
+    if (types.every((type) => type === LINE_TYPE.WALLLINE.EAVES)) {
+      // 용마루 -- straight-skeleton
+      console.log('용마루 지붕')
+      drawRidgeRoof(this.id, this.canvas, textMode)
+    } else if (isGableRoof(types)) {
+      // A형, B형 박공 지붕
+      console.log('패턴 지붕')
+      drawGableRoof(this.id, this.canvas, textMode)
+    } else if (isShedRoof(types, this.lines)) {
+      console.log('한쪽흐름 지붕')
       drawShedRoof(this.id, this.canvas, textMode)
     } else {
-            drawRidgeRoof(this.id, this.canvas, textMode)
+      console.log('변별로 설정')
-          }
-        } else {
-          drawRidgeRoof(this.id, this.canvas, textMode)
-        }
-      } else {
-        drawRidgeRoof(this.id, this.canvas, textMode)
-      }
-    } else {
       drawRidgeRoof(this.id, this.canvas, textMode)
     }
   },

src/components/simulator/Simulator.jsx

@@ -49,34 +49,25 @@ export default function Simulator() {
           return isNaN(num) ? 0 : num
         }),
 
-        backgroundColor: [
+        backgroundColor: (context) => {
-          'rgba(255, 99, 132, 0.2)',
+          const chart = context.chart
-          'rgba(54, 162, 235, 0.2)',
+          const { ctx, chartArea } = chart
-          'rgba(255, 206, 86, 0.2)',
+
-          'rgba(75, 192, 192, 0.2)',
+          if (!chartArea) {
-          'rgba(153, 102, 255, 0.2)',
+            // This case happens on initial chart load
-          'rgba(255, 159, 64, 0.2)',
+            return null
-          'rgba(0, 99, 132, 0.2)',
+          }
-          'rgba(0, 162, 235, 0.2)',
+
-          'rgba(0, 206, 86, 0.2)',
+          const gradient = ctx.createLinearGradient(0, chartArea.bottom, 0, chartArea.top)
-          'rgba(0, 192, 192, 0.2)',
+          gradient.addColorStop(0, '#4FC3F7')  // Light blue at bottom
-          'rgba(0, 102, 255, 0.2)',
+          gradient.addColorStop(0.3, '#2FA8E0') // Original blue
-          'rgba(0, 159, 64, 0.2)',
+          gradient.addColorStop(0.7, '#1976D2') // Medium blue
-        ],
+          gradient.addColorStop(1, '#0D47A1')   // Dark blue at top
-        borderColor: [
+
-          'rgba(255, 99, 132, 0.2)',
+
-          'rgba(54, 162, 235, 0.2)',
+          return gradient
-          'rgba(255, 206, 86, 0.2)',
+        },
-          'rgba(75, 192, 192, 0.2)',
+        borderColor: '#2FA8E0' ,
-          'rgba(153, 102, 255, 0.2)',
-          'rgba(255, 159, 64, 0.2)',
-          'rgba(0, 99, 132, 0.2)',
-          'rgba(0, 162, 235, 0.2)',
-          'rgba(0, 206, 86, 0.2)',
-          'rgba(0, 192, 192, 0.2)',
-          'rgba(0, 102, 255, 0.2)',
-          'rgba(0, 159, 64, 0.2)',
-        ],
         borderWidth: 1,
       },
     ],

src/hooks/roofcover/useMovementSetting.js

@@ -411,6 +411,35 @@ export function useMovementSetting(id) {
 
     targetBaseLines.sort((a, b) => a.distance - b.distance)
     targetBaseLines = targetBaseLines.filter((line) => line.distance === targetBaseLines[0].distance)
+
+    if (isGableRoof) {
+      const zeroLengthLines = targetBaseLines.filter(
+        (line) => Math.sqrt(Math.pow(line.line.x2 - line.line.x1, 2) + Math.pow(line.line.y2 - line.line.y1, 2)) < 1,
+      )
+      if (zeroLengthLines.length > 0) {
+        zeroLengthLines.forEach((line) => {
+          const findLine = line.line
+          const findCoords = [
+            { x: findLine.x1, y: findLine.y1 },
+            { x: findLine.x2, y: findLine.y2 },
+          ]
+          wall.baseLines
+            .filter((baseLine) => {
+              return findCoords.some(
+                (coord) =>
+                  (Math.abs(coord.x - baseLine.x1) < 0.1 && Math.abs(coord.y - baseLine.y1) < 0.1) ||
+                  (Math.abs(coord.x - baseLine.x2) < 0.1 && Math.abs(coord.y - baseLine.y2) < 0.1),
+              )
+            })
+            .forEach((baseLine) => {
+              const isAlready = targetBaseLines.find((target) => target.line === baseLine)
+              if (isAlready) return
+              targetBaseLines.push({ line: baseLine, distance: targetBaseLines[0].distance })
+            })
+        })
+      }
+    }
+
     let value
     if (typeRef.current === TYPE.FLOW_LINE) {
       value =
@@ -445,7 +474,9 @@ export function useMovementSetting(id) {
       }
     }
     value = value.div(10)
-    targetBaseLines.forEach((target) => {
+    targetBaseLines
+      .filter((line) => Math.sqrt(Math.pow(line.line.x2 - line.line.x1, 2) + Math.pow(line.line.y2 - line.line.y1, 2)) >= 1)
+      .forEach((target) => {
         const currentLine = target.line
         const index = baseLines.findIndex((line) => line === currentLine)
         const nextLine = baseLines[(index + 1) % baseLines.length]
@@ -475,27 +506,23 @@ export function useMovementSetting(id) {
         currentLine.attributes.planeSize = currentSize
         currentLine.attributes.actualSize = currentSize
 
-      const nextOldActualSize = nextLine.attributes.planeSize
         nextLine.set({
-        x1: nextLine.x1 + deltaX,
+          x1: currentLine.x2,
-        y1: nextLine.y1 + deltaY,
+          y1: currentLine.y2,
-        startPoint: { x: nextLine.x1 + deltaX, y: nextLine.y1 + deltaY },
+          startPoint: { x: currentLine.x2, y: currentLine.y2 },
         })
         const nextSize = calcLinePlaneSize({ x1: nextLine.x1, y1: nextLine.y1, x2: nextLine.x2, y2: nextLine.y2 })
         nextLine.attributes.planeSize = nextSize
         nextLine.attributes.actualSize = nextSize
 
-      const prevOldActualSize = prevLine.attributes.planeSize
         prevLine.set({
-        x2: prevLine.x2 + deltaX,
+          x2: currentLine.x1,
-        y2: prevLine.y2 + deltaY,
+          y2: currentLine.y1,
-        endPoint: { x: prevLine.x2 + deltaX, y: prevLine.y2 + deltaY },
+          endPoint: { x: currentLine.x1, y: currentLine.y1 },
         })
         const prevSize = calcLinePlaneSize({ x1: prevLine.x1, y1: prevLine.y1, x2: prevLine.x2, y2: prevLine.y2 })
         prevLine.attributes.planeSize = prevSize
         prevLine.attributes.actualSize = prevSize
-
-      canvas.renderAll()
       })
 
     roof.drawHelpLine()