line, polygon 변환 시 길이 안맞는 것 수정

src/components/fabric/QLine.js

@@ -75,7 +75,7 @@ export const QLine = fabric.util.createClass(fabric.Line, {
     const y2 = this.top + this.height * scaleY
     const dx = x2 - x1
     const dy = y2 - y1
-    this.length = Number(Math.sqrt(dx * dx + dy * dy).toFixed(0))
+    this.length = Number(Math.sqrt(dx * dx + dy * dy).toFixed(1))
   },
 
   addLengthText() {
@@ -150,7 +150,7 @@ export const QLine = fabric.util.createClass(fabric.Line, {
 
   getLength() {
     //10배 곱해진 값 return
-    return Number(this.length.toFixed(1) * 10)
+    return Number(this.length.toFixed(0) * 10)
   },
 
   setViewLengthText(bool) {

src/components/fabric/QPolygon.js

@@ -199,7 +199,7 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
       const end = points[(i + 1) % points.length]
       const dx = end.x - start.x
       const dy = end.y - start.y
-      const length = Number(Math.sqrt(dx * dx + dy * dy).toFixed(1)) * 10
+      const length = Number(Math.sqrt(dx * dx + dy * dy).toFixed(0)) * 10
 
       let midPoint
 
@@ -224,7 +224,7 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
       const degree = (Math.atan2(dy, dx) * 180) / Math.PI
 
       // Create new text object if it doesn't exist
-      const text = new fabric.Text(length.toFixed(0), {
+      const text = new fabric.Text(length.toString(), {
         left: midPoint.x,
         top: midPoint.y,
         fontSize: this.fontSize,

src/components/floor-plan/CanvasFrame.jsx

@@ -13,11 +13,7 @@ export default function CanvasFrame({ plan }) {
   const canvasRef = useRef(null)
   const { canvas } = useCanvas('canvas')
   const { contextMenu, currentContextMenu, setCurrentContextMenu } = useContextMenu()
-  const currentObject = useRecoilValue(currentObjectState)
 
-  useEffect(() => {
-    console.log(currentObject)
-  }, [currentObject])
   useEvent()
 
   const loadCanvas = () => {

src/components/floor-plan/CanvasMenu.jsx

@@ -19,6 +19,7 @@ import { MENU } from '@/common/common'
 import KO from '@/locales/ko.json'
 import JA from '@/locales/ja.json'
 import { settingModalFirstOptionsState } from '@/store/settingAtom'
+import { placementShapeDrawingPointsState } from '@/store/placementShapeDrawingAtom'
 
 const canvasMenus = [
   { index: 0, name: 'plan.menu.plan.drawing', icon: 'con00', title: MENU.PLAN_DRAWING },
@@ -58,7 +59,8 @@ export default function CanvasMenu(props) {
   const [verticalHorizontalMode, setVerticalHorizontalMode] = useRecoilState(verticalHorizontalModeState)
   const [appMessageState, setAppMessageState] = useRecoilState(appMessageStore)
   const setCurrentMenu = useSetRecoilState(currentMenuState)
-  const setPoints = useSetRecoilState(outerLinePointsState)
+  const setOuterLinePoints = useSetRecoilState(outerLinePointsState)
+  const setPlacementPoints = useSetRecoilState(placementShapeDrawingPointsState)
   const [canvasZoom, setCanvasZoom] = useRecoilState(canvasZoomState)
   const [currentCanvasPlan, setcurrentCanvasPlan] = useRecoilState(currentCanvasPlanState)
 
@@ -140,7 +142,8 @@ export default function CanvasMenu(props) {
   }
 
   const handleClear = () => {
-    setPoints([])
+    setOuterLinePoints([])
+    setPlacementPoints([])
     canvas?.clear()
   }
 

src/hooks/roofcover/useAuxiliaryDrawing.js

@@ -23,10 +23,11 @@ import {
   outerLineLength2State,
   outerLineTypeState,
 } from '@/store/outerLineAtom'
-import { calculateDistance, calculateIntersection, distanceBetweenPoints, findClosestPoint } from '@/util/canvas-util'
+import { calculateDistance, calculateIntersection, distanceBetweenPoints, findClosestPoint, polygonToTurfPolygon } from '@/util/canvas-util'
 import { fabric } from 'fabric'
 import { useAdsorptionPoint } from '@/hooks/useAdsorptionPoint'
 import { useSwal } from '@/hooks/useSwal'
+import { booleanPointInPolygon } from '@turf/turf'
 
 // 보조선 작성
 export function useAuxiliaryDrawing(setShowAuxiliaryModal) {
@@ -76,6 +77,8 @@ export function useAuxiliaryDrawing(setShowAuxiliaryModal) {
 
   useEffect(() => {
     typeRef.current = type
+    clear()
+    addDocumentEventListener('keydown', document, keydown[type])
   }, [type])
 
   useEffect(() => {
@@ -103,12 +106,8 @@ export function useAuxiliaryDrawing(setShowAuxiliaryModal) {
     }
   }, [])
 
-  useEffect(() => {
-    clear()
-    addDocumentEventListener('keydown', document, keydown[type])
-  }, [type])
-
   const clear = () => {
+    addCanvasMouseEventListener('mouse:move', mouseMove)
     setLength1(0)
     setLength2(0)
 
@@ -459,8 +458,9 @@ export function useAuxiliaryDrawing(setShowAuxiliaryModal) {
   }
 
   const mouseDown = (e) => {
-    addCanvasMouseEventListener('mouse:move', mouseMove)
+    canvas.renderAll()
     const pointer = getIntersectMousePoint(e)
+    console.log(pointer)
 
     mousePointerArr.current.push(pointer)
     if (mousePointerArr.current.length === 2) {
@@ -621,10 +621,24 @@ export function useAuxiliaryDrawing(setShowAuxiliaryModal) {
       return
     }
 
-    const roofBases = canvas.getObjects().find((obj) => obj.name === 'roofBase')
+    const roofBases = canvas.getObjects().filter((obj) => obj.name === 'roofBase')
     const innerLines = [...lineHistory.current]
 
-    roofBases.innerLines = [...innerLines]
+    roofBases.forEach((roofBase) => {
+      const roofInnerLines = innerLines.filter((line) => {
+        const turfPolygon = polygonToTurfPolygon(roofBase)
+
+        // innerLines의 두 점이 모두 polygon 안에 있는지 확인
+        const inPolygon1 = booleanPointInPolygon([line.x1, line.y1], turfPolygon)
+        const inPolygon2 = booleanPointInPolygon([line.x2, line.y2], turfPolygon)
+
+        if (inPolygon1 && inPolygon2) {
+          return true
+        }
+      })
+
+      roofBase.innerLines = [...roofInnerLines]
+    })
 
     setShowAuxiliaryModal(false)
   }

src/hooks/roofcover/useRoofAllocationSetting.js

@@ -95,7 +95,11 @@ export function useRoofAllocationSetting(setShowRoofAllocationSettingModal) {
     const roofBases = canvas.getObjects().filter((obj) => obj.name === 'roofBase')
     const wallLines = canvas.getObjects().filter((obj) => obj.name === 'wallLine')
     roofBases.forEach((roofBase) => {
-      splitPolygonWithLines(roofBase)
+      try {
+        splitPolygonWithLines(roofBase)
+      } catch (e) {
+        return
+      }
 
       roofBase.innerLines.forEach((line) => {
         canvas.remove(line)

src/hooks/roofcover/useRoofShapePassivitySetting.js

@@ -33,6 +33,9 @@ export function useRoofShapePassivitySetting(setShowRoofShapePassivitySettingMod
 
   const [type, setType] = useState(TYPES.EAVES)
 
+  const isFix = useRef(false)
+  const initLines = useRef([])
+
   const buttons = [
     { id: 1, name: getMessage('eaves'), type: TYPES.EAVES },
     { id: 2, name: getMessage('gable'), type: TYPES.GABLE },
@@ -52,9 +55,11 @@ export function useRoofShapePassivitySetting(setShowRoofShapePassivitySettingMod
   useEffect(() => {
     addCanvasMouseEventListener('mouse:down', mouseDown)
     const wallLines = canvas.getObjects().filter((obj) => obj.name === 'wallLine')
-    canvas.remove(wallLines)
+
+    canvas?.remove(...wallLines)
 
     const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
+    initLines.current = outerLines.map((line) => ({ ...line }))
     outerLines.forEach((outerLine, idx) => {
       if (idx === 0) {
         currentLineRef.current = outerLine
@@ -66,6 +71,7 @@ export function useRoofShapePassivitySetting(setShowRoofShapePassivitySettingMod
     canvas?.renderAll()
 
     return () => {
+      handleLineToPolygon()
       canvas?.discardActiveObject()
       initEvent()
     }
@@ -166,6 +172,14 @@ export function useRoofShapePassivitySetting(setShowRoofShapePassivitySettingMod
   }
 
   const handleSave = () => {
+    isFix.current = true
+    handleLineToPolygon()
+
+    setShowRoofShapePassivitySettingModal(false)
+  }
+
+  const handleLineToPolygon = () => {
+    const roofBases = canvas.getObjects().filter((obj) => obj.name === 'roofBase')
     const exceptObjs = canvas.getObjects().filter((obj) => obj.name !== 'outerLine' && obj.parent?.name !== 'outerLine')
     const lines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
     exceptObjs.forEach((obj) => {
@@ -176,13 +190,26 @@ export function useRoofShapePassivitySetting(setShowRoofShapePassivitySettingMod
       hideLine(line)
     })
 
-    const wall = addPolygonByLines(lines, { name: 'wallLine', fill: 'transparent', stroke: 'black' })
+    let wall
+
+    if (isFix.current) {
+      wall = addPolygonByLines(lines, { name: 'wallLine', fill: 'transparent', stroke: 'black' })
+    } else {
+      // 그냥 닫을 경우 처리
+      wall = addPolygonByLines([...initLines.current], { name: 'wallLine', fill: 'transparent', stroke: 'black' })
+      lines.forEach((line, idx) => {
+        line.attributes = initLines.current[idx].attributes
+      })
+    }
 
     wall.lines = [...lines]
-
+    // 기존 그려진 지붕이 없다면
+    if (roofBases.length === 0) {
+      return
+    }
     const roof = drawRoofPolygon(wall)
     canvas.renderAll()
-    setShowRoofShapePassivitySettingModal(false)
   }
+
   return { handleSave, handleConfirm, buttons, type, setType, TYPES, offsetRef, pitchRef, handleRollback }
 }

src/hooks/roofcover/useRoofShapeSetting.js

@@ -244,8 +244,13 @@ export function useRoofShapeSetting(setShowRoofShapeSettingModal) {
       }
     }
 
-    // 기존 wallLine 제거
+    // 기존 wallLine, roofBase 제거
-    canvas?.remove(canvas.getObjects().filter((obj) => obj.name === 'wallLine'))
+    canvas
+      .getObjects()
+      .filter((obj) => obj.name === 'wallLine' || obj.name === 'roofBase')
+      .forEach((line) => {
+        canvas.remove(line)
+      })
 
     const polygon = addPolygonByLines(outerLines, { name: 'wallLine' })
     polygon.lines = [...outerLines]

src/hooks/useEvent.js

@@ -43,7 +43,6 @@ export function useEvent() {
     //default Event 추가
     addCanvasMouseEventListener('mouse:move', defaultMouseMoveEvent)
     addCanvasMouseEventListener('mouse:out', defaultMouseOutEvent)
-    addDocumentEventListener('keydown', document, defaultKeyboardEvent)
     addDocumentEventListener('contextmenu', document, defaultContextMenuEvent)
     if (adsorptionPointAddMode) {
       addCanvasMouseEventListener('mouse:down', adsorptionPointAddModeStateEvent)