지붕형상 수동 설정 추가

src/components/floor-plan/modal/roofShape/RoofShapePassivitySetting.jsx

@@ -4,15 +4,26 @@ import Eaves from '@/components/floor-plan/modal/roofShape/passivity/Eaves'
 import Gable from '@/components/floor-plan/modal/roofShape/passivity/Gable'
 import Shed from '@/components/floor-plan/modal/roofShape/passivity/Shed'
 import { useMessage } from '@/hooks/useMessage'
+import { useRoofShapePassivitySetting } from '@/hooks/roofcover/useRoofShapePassivitySetting'
 
 export default function RoofShapePassivitySetting({ setShowRoofShapePassivitySettingModal }) {
+  const { handleSave, handleConfirm, handleRollback, buttons, type, setType, TYPES, offsetRef, pitchRef } = useRoofShapePassivitySetting()
   const { getMessage } = useMessage()
-  const [buttonAct, setButtonAct] = useState(1)
+
-  const buttons = [
+  const eavesProps = {
-    { id: 1, name: getMessage('eaves') },
+    offsetRef,
-    { id: 2, name: getMessage('gable') },
+    pitchRef,
-    { id: 3, name: getMessage('windage') },
+  }
-  ]
+
+  const gableProps = {
+    offsetRef,
+    pitchRef,
+  }
+
+  const shedProps = {
+    offsetRef,
+  }
+
   return (
     <WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
       <div className={`modal-pop-wrap xxm`}>
@@ -25,7 +36,7 @@ export default function RoofShapePassivitySetting({ setShowRoofShapePassivitySet
         <div className="modal-body">
           <div className="modal-btn-wrap">
             {buttons.map((button) => (
-              <button id={button.id} className={`btn-frame modal ${buttonAct === button.id ? 'act' : ''}`} onClick={() => setButtonAct(button.id)}>
+              <button id={button.id} className={`btn-frame modal ${type === button.type ? 'act' : ''}`} onClick={() => setType(button.type)}>
                 {button.name}
               </button>
             ))}
@@ -33,17 +44,23 @@ export default function RoofShapePassivitySetting({ setShowRoofShapePassivitySet
           <div className="modal-bottom-border-bx">
             <div className="setting-tit">{getMessage('setting')}</div>
             <div className="discrimination-box">
-              {buttonAct === 1 && <Eaves />}
+              {type === TYPES.EAVES && <Eaves {...eavesProps} />}
-              {buttonAct === 2 && <Gable />}
+              {type === TYPES.GABLE && <Gable {...gableProps} />}
-              {buttonAct === 3 && <Shed />}
+              {type === TYPES.SHED && <Shed {...shedProps} />}
             </div>
             <div className="grid-btn-wrap">
-              <button className="btn-frame sub-tab mr5">{getMessage('common.setting.rollback')}</button>
+              <button className="btn-frame sub-tab mr5" onClick={handleRollback}>
-              <button className="btn-frame sub-tab act">{getMessage('apply')}</button>
+                {getMessage('common.setting.rollback')}
+              </button>
+              <button className="btn-frame sub-tab act" onClick={handleConfirm}>
+                {getMessage('apply')}
+              </button>
             </div>
           </div>
           <div className="grid-btn-wrap">
-            <button className="btn-frame modal act">{getMessage('common.setting.finish')}</button>
+            <button className="btn-frame modal act" onClick={() => handleSave(setShowRoofShapePassivitySettingModal)}>
+              {getMessage('common.setting.finish')}
+            </button>
           </div>
         </div>
       </div>

src/components/floor-plan/modal/roofShape/passivity/Eaves.jsx

@@ -1,6 +1,6 @@
 import { useMessage } from '@/hooks/useMessage'
 
-export default function Eaves() {
+export default function Eaves({ offsetRef, pitchRef }) {
   const { getMessage } = useMessage()
   return (
     <>
@@ -9,7 +9,7 @@ export default function Eaves() {
           {getMessage('slope')}
         </span>
         <div className="input-grid mr5">
-          <input type="text" className="input-origin block" defaultValue={100} />
+          <input type="text" className="input-origin block" defaultValue={4} ref={pitchRef} />
         </div>
         <span className="thin">寸</span>
       </div>
@@ -18,7 +18,7 @@ export default function Eaves() {
           {getMessage('eaves.offset')}
         </span>
         <div className="input-grid mr5">
-          <input type="text" className="input-origin block" defaultValue={100} />
+          <input type="text" className="input-origin block" defaultValue={500} ref={offsetRef} />
         </div>
         <span className="thin">mm</span>
       </div>

src/components/floor-plan/modal/roofShape/passivity/Gable.jsx

@@ -1,6 +1,6 @@
 import { useMessage } from '@/hooks/useMessage'
 
-export default function Gable() {
+export default function Gable({ offsetRef, pitchRef }) {
   const { getMessage } = useMessage()
   return (
     <>
@@ -9,7 +9,7 @@ export default function Gable() {
           {getMessage('slope')}
         </span>
         <div className="input-grid mr5">
-          <input type="text" className="input-origin block" defaultValue={100} />
+          <input type="text" className="input-origin block" defaultValue={4} ref={pitchRef} />
         </div>
         <span className="thin">寸</span>
       </div>
@@ -18,7 +18,7 @@ export default function Gable() {
           {getMessage('gable.offset')}
         </span>
         <div className="input-grid mr5">
-          <input type="text" className="input-origin block" defaultValue={100} />
+          <input type="text" className="input-origin block" defaultValue={300} ref={offsetRef} />
         </div>
         <span className="thin">mm</span>
       </div>

src/components/floor-plan/modal/roofShape/passivity/Shed.js

@@ -1,6 +1,6 @@
 import { useMessage } from '@/hooks/useMessage'
 
-export default function Shed() {
+export default function Shed({ offsetRef }) {
   const { getMessage } = useMessage()
   return (
     <>
@@ -9,7 +9,7 @@ export default function Shed() {
           {getMessage('shed.width')}
         </span>
         <div className="input-grid mr5">
-          <input type="text" className="input-origin block" defaultValue={100} />
+          <input type="text" className="input-origin block" defaultValue={300} ref={offsetRef} />
         </div>
         <span className="thin">mm</span>
       </div>

src/hooks/roofcover/useAuxiliaryDrawing.js

@@ -27,6 +27,7 @@ import { calculateDistance, calculateIntersection, distanceBetweenPoints, findCl
 import { fabric } from 'fabric'
 import { useAdsorptionPoint } from '@/hooks/useAdsorptionPoint'
 
+// 보조선 작성
 export function useAuxiliaryDrawing() {
   const canvas = useRecoilValue(canvasState)
   const {

src/hooks/roofcover/useEavesGableEdit.js

@@ -7,6 +7,7 @@ import { LINE_TYPE } from '@/common/common'
 import { useLine } from '@/hooks/useLine'
 import { useMode } from '@/hooks/useMode'
 
+// 처마.케라바 변경
 export function useEavesGableEdit() {
   const canvas = useRecoilValue(canvasState)
   const { getMessage } = useMessage()

src/hooks/roofcover/useOuterLineWall.js

@@ -30,6 +30,7 @@ import {
 import { calculateAngle } from '@/util/qpolygon-utils'
 import { fabric } from 'fabric'
 
+//외벽선 그리기
 export function useOuterLineWall() {
   const canvas = useRecoilValue(canvasState)
   const { addCanvasMouseEventListener, addDocumentEventListener, removeAllMouseEventListeners, removeAllDocumentEventListeners, removeMouseEvent } =

src/hooks/roofcover/usePropertiesSetting.js

@@ -7,6 +7,7 @@ import { usePolygon } from '@/hooks/usePolygon'
 import { useLine } from '@/hooks/useLine'
 import { outerLinePointsState } from '@/store/outerLineAtom'
 
+// 외벽선 속성 설정
 export function usePropertiesSetting() {
   const canvas = useRecoilValue(canvasState)
 
@@ -19,17 +20,7 @@ export function usePropertiesSetting() {
   const { removeLine, hideLine } = useLine()
 
   useEffect(() => {
-    if (!currentObject) {
-      return
-    }
-    if (currentObject.name !== 'outerLine') {
-      return
-    }
-
-    const type = currentObject.attributes?.type
-
     const lines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
-
     lines.forEach((line) => {
       const lineType = line.attributes?.type
       if (!lineType) {
@@ -39,6 +30,14 @@ export function usePropertiesSetting() {
         })
       }
     })
+    if (!currentObject) {
+      return
+    }
+    if (currentObject.name !== 'outerLine') {
+      return
+    }
+
+    const type = currentObject.attributes?.type
 
     if (!type) {
       currentObject.set({
@@ -46,6 +45,8 @@ export function usePropertiesSetting() {
         strokeWidth: 4,
       })
     }
+
+    canvas.renderAll()
   }, [currentObject])
 
   const history = useRef([])
@@ -106,6 +107,7 @@ export function usePropertiesSetting() {
     }
     const lastLine = history.current.pop()
 
+    delete lastLine.attributes
     lastLine.set({
       stroke: '#000000',
       strokeWidth: 4,
@@ -131,7 +133,7 @@ export function usePropertiesSetting() {
       hideLine(line)
     })
 
-    const wall = addPolygonByLines(lines, { name: 'WallLine', fill: 'transparent', stroke: 'black' })
+    const wall = addPolygonByLines(lines, { name: 'wallLine', fill: 'transparent', stroke: 'black' })
 
     wall.lines = [...lines]
 

src/hooks/roofcover/useRoofShapePassivitySetting.js

@@ -0,0 +1,175 @@
+import { canvasState, currentObjectState } from '@/store/canvasAtom'
+import { useRecoilValue } from 'recoil'
+import { useEffect, useRef, useState } from 'react'
+import { useLine } from '@/hooks/useLine'
+import { useMessage } from '@/hooks/useMessage'
+import { useEvent } from '@/hooks/useEvent'
+import { LINE_TYPE } from '@/common/common'
+import { useMode } from '@/hooks/useMode'
+import { usePolygon } from '@/hooks/usePolygon'
+
+//지붕형상 수동 설정
+export function useRoofShapePassivitySetting() {
+  const TYPES = {
+    EAVES: 'eaves',
+    GABLE: 'gable',
+    SHED: 'shed',
+  }
+  const canvas = useRecoilValue(canvasState)
+  const { getMessage } = useMessage()
+  const { showLine, hideLine } = useLine()
+  const { addCanvasMouseEventListener, initEvent } = useEvent()
+  const { drawRoofPolygon } = useMode()
+  const { addPolygonByLines } = usePolygon()
+  const currentObject = useRecoilValue(currentObjectState)
+  const offsetRef = useRef(null)
+  const pitchRef = useRef(null)
+  const currentLineRef = useRef(null)
+
+  const history = useRef([])
+
+  const [type, setType] = useState(TYPES.EAVES)
+
+  const buttons = [
+    { id: 1, name: getMessage('eaves'), type: TYPES.EAVES },
+    { id: 2, name: getMessage('gable'), type: TYPES.GABLE },
+    { id: 3, name: getMessage('windage'), type: TYPES.SHED },
+  ]
+
+  useEffect(() => {
+    addCanvasMouseEventListener('mouse:down', mouseDown)
+    const wallLines = canvas.getObjects().filter((obj) => obj.name === 'wallLine')
+    canvas.remove(wallLines)
+
+    const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
+    outerLines.forEach((outerLine, idx) => {
+      if (idx === 0) {
+        currentLineRef.current = outerLine
+      }
+      outerLine.set({ selectable: true })
+      showLine(outerLine)
+      outerLine.bringToFront()
+    })
+    canvas?.renderAll()
+
+    return () => {
+      canvas?.discardActiveObject()
+      initEvent()
+    }
+  }, [])
+
+  useEffect(() => {
+    const lines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
+    lines.forEach((line) => {
+      line.set({
+        stroke: '#000000',
+        strokeWidth: 4,
+      })
+    })
+    if (!currentObject) {
+      return
+    }
+    if (currentObject.name !== 'outerLine') {
+      return
+    }
+
+    currentObject.set({
+      stroke: '#EA10AC',
+      strokeWidth: 4,
+    })
+
+    currentLineRef.current = currentObject
+
+    canvas.renderAll()
+  }, [currentObject])
+
+  const mouseDown = (e) => {
+    if (!e.target) {
+      currentLineRef.current = null
+      return
+    }
+
+    if (e.target && e.target.name === 'outerLine') {
+      currentLineRef.current = e.target
+    }
+  }
+
+  const nextLineFocus = (selectedLine) => {
+    const lines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
+    const index = lines.findIndex((line) => line === selectedLine)
+
+    const nextLine = lines[index + 1] || lines[0]
+    canvas.setActiveObject(nextLine)
+  }
+
+  const handleConfirm = () => {
+    if (!currentLineRef.current) {
+      alert('선택된 외곽선이 없습니다.')
+      return
+    }
+    let attributes
+    const offset = Number(offsetRef.current.value) / 10
+    if (type === TYPES.EAVES) {
+      attributes = {
+        type: LINE_TYPE.WALLLINE.EAVES,
+        offset,
+        pitch: pitchRef.current.value,
+      }
+    } else if (type === TYPES.GABLE) {
+      attributes = {
+        type: LINE_TYPE.WALLLINE.GABLE,
+        pitch: pitchRef.current.value,
+        offset,
+      }
+    } else if (type === TYPES.SHED) {
+      attributes = {
+        type: LINE_TYPE.WALLLINE.SHED,
+        offset,
+      }
+    }
+
+    currentLineRef.current.set({
+      attributes,
+    })
+
+    history.current.push(currentLineRef.current)
+    nextLineFocus(currentLineRef.current)
+  }
+
+  const handleRollback = () => {
+    if (history.current.length === 0) {
+      return
+    }
+    const lastLine = history.current.pop()
+
+    delete lastLine.attributes
+    lastLine.set({
+      stroke: '#000000',
+      strokeWidth: 4,
+    })
+
+    canvas.setActiveObject(lastLine)
+    canvas.renderAll()
+  }
+
+  const handleSave = (fn) => {
+    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) => {
+      canvas.remove(obj)
+    })
+
+    lines.forEach((line) => {
+      hideLine(line)
+    })
+
+    const wall = addPolygonByLines(lines, { name: 'wallLine', fill: 'transparent', stroke: 'black' })
+
+    wall.lines = [...lines]
+
+    const roof = drawRoofPolygon(wall)
+    canvas.renderAll()
+    fn(false)
+  }
+  return { handleSave, handleConfirm, buttons, type, setType, TYPES, offsetRef, pitchRef, handleRollback }
+}

src/hooks/roofcover/useRoofShapeSetting.js

@@ -7,6 +7,7 @@ import { usePolygon } from '@/hooks/usePolygon'
 import { useMode } from '@/hooks/useMode'
 import { useLine } from '@/hooks/useLine'
 
+// 지붕형상 설정
 export function useRoofShapeSetting() {
   const [shapeNum, setShapeNum] = useState(1)
   const [buttonAct, setButtonAct] = useState(1)

src/hooks/roofcover/useWallLineOffsetSetting.js

@@ -5,6 +5,7 @@ import { useMessage } from '@/hooks/useMessage'
 import { useEvent } from '@/hooks/useEvent'
 import { useLine } from '@/hooks/useLine'
 
+// 외벽선 편집 및 오프셋
 export function useWallLineOffsetSetting() {
   const canvas = useRecoilValue(canvasState)
   const { showLine, addLine } = useLine()
@@ -29,6 +30,7 @@ export function useWallLineOffsetSetting() {
       y1: point1.y,
       x2: point2.x,
       y2: point2.y,
+      direction: currentWallLineRef.current.direction,
     })
 
     line.attributes = { ...currentWallLineRef.current.attributes }
@@ -191,26 +193,42 @@ export function useWallLineOffsetSetting() {
         }
       })[0]
     const length = Number(length1Ref.current.value) / 10
-    let line1, line2
+    const currentIdx = currentWallLineRef.current.idx
+    let point1, point2, point3
     if (radioTypeRef.current === '1') {
       // 1지점 선택시 방향은 down, right만 가능
       if (arrow1Ref.current === 'down') {
-        drawLine({ x: startPoint.x, y: startPoint.y }, { x: startPoint.x, y: startPoint.y + length }, currentWallLineRef.current.idx)
+        point1 = { x: startPoint.x, y: startPoint.y }
-        drawLine({ x: startPoint.x, y: startPoint.y + length }, { x: endPoint.x, y: endPoint.y }, currentWallLineRef.current.idx)
+        point2 = { x: startPoint.x, y: startPoint.y + length }
+        point3 = { x: endPoint.x, y: endPoint.y }
       } else {
-        drawLine({ x: startPoint.x, y: startPoint.y }, { x: startPoint.x + length, y: startPoint.y }, currentWallLineRef.current.idx)
+        point1 = { x: startPoint.x, y: startPoint.y }
-        drawLine({ x: startPoint.x + length, y: startPoint.y }, { x: endPoint.x, y: endPoint.y }, currentWallLineRef.current.idx)
+        point2 = { x: startPoint.x + length, y: startPoint.y }
+        point3 = { x: endPoint.x, y: endPoint.y }
       }
     } else {
       // 2지점일 경우 방향은 up, left만 가능
       if (arrow2Ref.current === 'up') {
-        drawLine({ x: endPoint.x, y: endPoint.y }, { x: endPoint.x, y: endPoint.y - length }, currentWallLineRef.current.idx)
+        point1 = { x: startPoint.x, y: startPoint.y }
-        drawLine({ x: endPoint.x, y: endPoint.y - length }, { x: startPoint.x, y: startPoint.y }, currentWallLineRef.current.idx)
+        point2 = { x: startPoint.x, y: startPoint.y - length }
+        point3 = { x: endPoint.x, y: endPoint.y }
       } else {
-        drawLine({ x: endPoint.x, y: endPoint.y }, { x: endPoint.x - length, y: endPoint.y }, currentWallLineRef.current.idx)
+        point1 = { x: startPoint.x, y: startPoint.y }
-        drawLine({ x: endPoint.x - length, y: endPoint.y }, { x: startPoint.x, y: startPoint.y }, currentWallLineRef.current.idx)
+        point2 = { x: startPoint.x - length, y: startPoint.y }
+        point3 = { x: endPoint.x, y: endPoint.y }
       }
     }
+
+    const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
+    outerLines.forEach((outerLine) => {
+      if (outerLine.idx >= currentIdx + 1) {
+        outerLine.idx = outerLine.idx + 1
+      }
+    })
+
+    drawLine(point1, point2, currentIdx)
+    drawLine(point2, point3, currentIdx + 1)
+
     removeOuterLineEditCircle()
     canvas.remove(currentWallLineRef.current)
     currentWallLineRef.current = null