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, drawGableRoof, drawRidgeRoof, drawShedRoof, toGeoJSON } from '@/util/qpolygon-utils'
+import { calculateAngle, 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,7 +255,6 @@ 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'
@@ -275,75 +274,50 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
         break
     }
 
-    const types = this.lines.map((line) => line.attributes.type)
+    const types = []
+    this.lines.forEach((line) => types.push(line.attributes.type))
 
-    const isGableRoof = function (types) {
+    const gableType = [LINE_TYPE.WALLLINE.GABLE, LINE_TYPE.WALLLINE.JERKINHEAD]
-      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 oddAllEaves = oddTypes.every((type) => type === LINE_TYPE.WALLLINE.EAVES)
+    const hasShed = types.includes(LINE_TYPE.WALLLINE.SHED)
-      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))
 
-      return (oddAllEaves && evenAllGable) || (evenAllEaves && oddAllGable)
+    if (hasShed) {
-    }
+      const sheds = this.lines.filter((line) => line.attributes !== undefined && line.attributes.type === LINE_TYPE.WALLLINE.SHED)
-
+      const areLinesParallel = function (line1, line2) {
-    const isShedRoof = function (types, lines) {
+        const angle1 = calculateAngle(line1.startPoint, line1.endPoint)
-      const gableTypes = [LINE_TYPE.WALLLINE.GABLE, LINE_TYPE.WALLLINE.JERKINHEAD]
+        const angle2 = calculateAngle(line2.startPoint, line2.endPoint)
-      if (!types.includes(LINE_TYPE.WALLLINE.SHED)) {
+        return angle1 === angle2
-        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
       }
 
-      const getParallelEavesLines = function (shedLines, lines) {
+      let isShedRoof = true
-        const eavesLines = lines.filter((line) => line.attributes?.type === LINE_TYPE.WALLLINE.EAVES)
+      sheds.forEach((shed, i) => {
-
+        isShedRoof = areLinesParallel(shed, sheds[(i + 1) % sheds.length])
-        const referenceAngle = calculateAngle(shedLines[0].startPoint, shedLines[0].endPoint)
+      })
-
+      if (isShedRoof) {
-        return eavesLines.filter((line) => {
+        const eaves = this.lines
-          const eavesAngle = calculateAngle(line.startPoint, line.endPoint)
+          .filter((line) => line.attributes !== undefined && line.attributes.type === LINE_TYPE.WALLLINE.EAVES)
-          return Math.abs(referenceAngle - eavesAngle) === 180
+          .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 gables = this.lines.filter((line) => sheds.includes(line) === false && eaves.includes(line) === false)
+          const isGable = gables.every((line) => gableType.includes(line.attributes.type))
+          if (isGable) {
+            drawShedRoof(this.id, this.canvas, textMode)
+          } else {
+            drawRidgeRoof(this.id, this.canvas, textMode)
+          }
+        } else {
+          drawRidgeRoof(this.id, this.canvas, textMode)
+        }
+      } else {
+        drawRidgeRoof(this.id, this.canvas, textMode)
       }
-
-      const parallelEaves = getParallelEavesLines(shedLines, lines)
-      if (parallelEaves.length === 0) {
-        return false
-      }
-
-      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 {
-      console.log('변별로 설정')
       drawRidgeRoof(this.id, this.canvas, textMode)
     }
   },

src/hooks/roofcover/useMovementSetting.js

@@ -411,35 +411,6 @@ 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 =
@@ -474,56 +445,58 @@ export function useMovementSetting(id) {
       }
     }
     value = value.div(10)
-    targetBaseLines
+    targetBaseLines.forEach((target) => {
-      .filter((line) => Math.sqrt(Math.pow(line.line.x2 - line.line.x1, 2) + Math.pow(line.line.y2 - line.line.y1, 2)) >= 1)
+      const currentLine = target.line
-      .forEach((target) => {
+      const index = baseLines.findIndex((line) => line === currentLine)
-        const currentLine = target.line
+      const nextLine = baseLines[(index + 1) % baseLines.length]
-        const index = baseLines.findIndex((line) => line === currentLine)
+      const prevLine = baseLines[(index - 1 + baseLines.length) % baseLines.length]
-        const nextLine = baseLines[(index + 1) % baseLines.length]
+      let deltaX = 0
-        const prevLine = baseLines[(index - 1 + baseLines.length) % baseLines.length]
+      let deltaY = 0
-        let deltaX = 0
+      if (currentLine.y1 === currentLine.y2) {
-        let deltaY = 0
+        deltaY = value.toNumber()
-        if (currentLine.y1 === currentLine.y2) {
+      } else {
-          deltaY = value.toNumber()
+        deltaX = value.toNumber()
-        } else {
+      }
-          deltaX = value.toNumber()
-        }
 
-        currentLine.set({
+      currentLine.set({
-          x1: currentLine.x1 + deltaX,
+        x1: currentLine.x1 + deltaX,
-          y1: currentLine.y1 + deltaY,
+        y1: currentLine.y1 + deltaY,
-          x2: currentLine.x2 + deltaX,
+        x2: currentLine.x2 + deltaX,
-          y2: currentLine.y2 + deltaY,
+        y2: currentLine.y2 + deltaY,
-          startPoint: { x: currentLine.x1 + deltaX, y: currentLine.y1 + deltaY },
+        startPoint: { x: currentLine.x1 + deltaX, y: currentLine.y1 + deltaY },
-          endPoint: { x: currentLine.x2 + deltaX, y: currentLine.y2 + deltaY },
+        endPoint: { x: currentLine.x2 + deltaX, y: currentLine.y2 + deltaY },
-        })
-        const currentSize = calcLinePlaneSize({
-          x1: currentLine.x1,
-          y1: currentLine.y1,
-          x2: currentLine.x2,
-          y2: currentLine.y2,
-        })
-        currentLine.attributes.planeSize = currentSize
-        currentLine.attributes.actualSize = currentSize
-
-        nextLine.set({
-          x1: currentLine.x2,
-          y1: currentLine.y2,
-          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
-
-        prevLine.set({
-          x2: currentLine.x1,
-          y2: currentLine.y1,
-          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
       })
+      const currentSize = calcLinePlaneSize({
+        x1: currentLine.x1,
+        y1: currentLine.y1,
+        x2: currentLine.x2,
+        y2: currentLine.y2,
+      })
+      currentLine.attributes.planeSize = currentSize
+      currentLine.attributes.actualSize = currentSize
+
+      const nextOldActualSize = nextLine.attributes.planeSize
+      nextLine.set({
+        x1: nextLine.x1 + deltaX,
+        y1: nextLine.y1 + deltaY,
+        startPoint: { x: nextLine.x1 + deltaX, y: nextLine.y1 + deltaY },
+      })
+      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,
+        y2: prevLine.y2 + deltaY,
+        endPoint: { x: prevLine.x2 + deltaX, y: prevLine.y2 + deltaY },
+      })
+      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()
     initEvent()