Merge branch 'qcast-pub' into dev

src/components/floor-plan/modal/circuitTrestle/step/type/PassivityCircuitAllocation.jsx

@@ -262,12 +262,13 @@ export default function PassivityCircuitAllocation(props) {
         const circuitModules = canvas.getObjects().filter((obj) => obj.name === 'module' && obj.circuit?.circuitInfo?.id === selectedPcs.id)
         const circuitNumbers = circuitModules.map((obj) => {
           const circuitNumber = obj.circuitNumber.replace(/[()]/g, '').split('-')
-          return parseInt(circuitNumber[circuitNumber.length - 1])
+          return parseInt(circuitNumber[0])
         })
         const minCircuitNumber = Math.min(...circuitNumbers)
         canvas.remove(...circuitModules.map((module) => module.circuit))
         circuitModules.forEach((obj) => {
           obj.circuit = null
+          obj.circuitNumber = null
           obj.pcsItemId = null
         })
         setCircuitNumber(minCircuitNumber)
@@ -293,9 +294,11 @@ export default function PassivityCircuitAllocation(props) {
         canvas.remove(...circuitModules.map((module) => module.circuit))
         circuitModules.forEach((obj) => {
           obj.circuit = null
+          obj.circuitNumber = null
           obj.pcsItemId = null
         })
         canvas.renderAll()
+        setCircuitNumber(1)
         setTargetModules([])
         setModuleStatisticsData()
       },

src/components/floor-plan/modal/placementShape/PlacementSurfaceLineProperty.jsx

@@ -0,0 +1,74 @@
+import WithDraggable from '@/components/common/draggable/WithDraggable'
+import { useMessage } from '@/hooks/useMessage'
+import { usePopup } from '@/hooks/usePopup'
+import { useRoofLinePropertySetting } from '@/hooks/surface/useRoofLinePropertySetting'
+import { useEffect } from 'react'
+import { LINE_TYPE } from '@/common/common'
+import { useSwal } from '@/hooks/useSwal'
+
+export default function PlacementSurfaceLineProperty(props) {
+  const { id, pos = { x: 50, y: 230 }, roof } = props
+  const { closePopup } = usePopup()
+  // const { handleSetEaves, handleSetGable, handleRollback, handleFix, closeModal } = usePropertiesSetting(id)
+  const { roofLinesInit, handleSetRidge, handleSetEaves, handleSetGable, handleRollback, handleFix } = useRoofLinePropertySetting(id, roof)
+  const { getMessage } = useMessage()
+  const { swalFire } = useSwal()
+
+  useEffect(() => {
+    roofLinesInit(roof)
+  }, [])
+
+  const handleClose = () => {
+    const notSettingLines = roof.lines.filter(
+      (line) =>
+        !line.attributes.type || ![LINE_TYPE.WALLLINE.EAVES, LINE_TYPE.WALLLINE.GABLE, LINE_TYPE.SUBLINE.RIDGE].includes(line.attributes.type),
+    )
+    if (notSettingLines.length > 0) {
+      swalFire({ text: getMessage('modal.canvas.setting.roofline.properties.setting.not.setting'), type: 'alert', icon: 'warning' })
+      return
+    }
+
+    closePopup(id)
+  }
+
+  return (
+    <WithDraggable isShow={true} pos={pos}>
+      <div className={`modal-pop-wrap mount lr`}>
+        <div className="modal-head modal-handle">
+          <h1 className="title">{getMessage('modal.canvas.setting.roofline.properties.setting')}</h1>
+          <button className="modal-close" onClick={() => handleClose()}>
+            닫기
+          </button>
+        </div>
+        <div className="modal-body">
+          <div className="left-bar modal-handle"></div>
+          <div className="right-bar modal-handle"></div>
+          <div className="properties-guide">{getMessage('modal.canvas.setting.roofline.properties.setting.info')}</div>
+          <div className="properties-setting-wrap">
+            <div className="setting-tit">{getMessage('setting')}</div>
+            <div className="setting-btn-wrap">
+              <button className="setting-btn green mr5" onClick={handleSetEaves}>
+                {getMessage('modal.canvas.setting.wallline.properties.setting.eaves')}
+              </button>
+              <button className="setting-btn blue mr5" onClick={handleSetGable}>
+                {getMessage('modal.canvas.setting.wallline.properties.setting.edge')}
+              </button>
+              <button className="setting-btn gray" onClick={handleSetRidge}>
+                {getMessage('modal.canvas.setting.wallline.properties.setting.ridge')}
+              </button>
+            </div>
+          </div>
+          <div className="grid-btn-wrap">
+            <button className="btn-frame modal mr5" onClick={handleRollback}>
+              {getMessage('modal.cover.outline.rollback')}
+            </button>
+            <button className="btn-frame modal act" onClick={() => handleFix()}>
+              {getMessage('modal.cover.outline.finish')}
+            </button>
+          </div>
+        </div>
+        <div className="modal-foot modal-handle"></div>
+      </div>
+    </WithDraggable>
+  )
+}

src/hooks/surface/usePlacementShapeDrawing.js

@@ -34,6 +34,7 @@ import { usePopup } from '@/hooks/usePopup'
 
 import { roofDisplaySelector } from '@/store/settingAtom'
 import { useRoofFn } from '@/hooks/common/useRoofFn'
+import PlacementSurfaceLineProperty from '@/components/floor-plan/modal/placementShape/PlacementSurfaceLineProperty'
 
 // 면형상 배치
 export function usePlacementShapeDrawing(id) {
@@ -76,7 +77,7 @@ export function usePlacementShapeDrawing(id) {
 
   const isFix = useRef(false)
 
-  const { closePopup } = usePopup()
+  const { closePopup, addPopup } = usePopup()
 
   const globalPitch = useRecoilValue(globalPitchState)
 
@@ -244,7 +245,8 @@ export function usePlacementShapeDrawing(id) {
 
         setPoints([])
         canvas?.renderAll()
-        closePopup(id)
+
+        addPopup(id, 1, <PlacementSurfaceLineProperty id={id} roof={roof} />, false)
       }
 
       if (points.length < 3) {

src/hooks/surface/useRoofLinePropertySetting.js

@@ -0,0 +1,151 @@
+import { LINE_TYPE } from '@/common/common'
+import { canvasState, currentObjectState } from '@/store/canvasAtom'
+import { useEffect, useRef } from 'react'
+import { useRecoilValue } from 'recoil'
+import { usePopup } from '../usePopup'
+import useSWR from 'swr'
+import { useSwal } from '../useSwal'
+import { useMessage } from '../useMessage'
+
+const LINE_COLOR = {
+  EAVES: '#45CD7D',
+  GABLE: '#3FBAE6',
+  RIDGE: '#9e9e9e',
+  DEFAULT: '#000000',
+}
+
+export function useRoofLinePropertySetting(id, roof) {
+  const canvas = useRecoilValue(canvasState)
+  const currentObject = useRecoilValue(currentObjectState)
+  const history = useRef([])
+  const { closePopup } = usePopup()
+  const { swalFire } = useSwal()
+  const { getMessage } = useMessage()
+
+  useEffect(() => {
+    if (currentObject) {
+      currentObject.set({
+        stroke: '#EA10AC',
+        strokeWidth: 4,
+      })
+    }
+  }, [currentObject])
+
+  const roofLinesInit = () => {
+    roof.lines.forEach((line) => {
+      line.set({
+        stroke: '#000000',
+        strokeWidth: 4,
+        visible: true,
+      })
+      line.bringToFront()
+      line.setViewLengthText(false)
+    })
+    canvas.renderAll()
+  }
+
+  const handleSetEaves = () => {
+    currentObject.set({
+      attributes: {
+        ...currentObject.attributes,
+        type: LINE_TYPE.WALLLINE.EAVES,
+      },
+      stroke: LINE_COLOR.EAVES,
+    })
+
+    history.current.push(currentObject)
+    nextLineFocus(currentObject)
+    canvas.renderAll()
+  }
+
+  const handleSetGable = () => {
+    currentObject.set({
+      attributes: {
+        ...currentObject.attributes,
+        type: LINE_TYPE.WALLLINE.GABLE,
+      },
+      stroke: LINE_COLOR.GABLE,
+    })
+
+    history.current.push(currentObject)
+    nextLineFocus(currentObject)
+    canvas.renderAll()
+  }
+
+  const handleSetRidge = () => {
+    currentObject.set({
+      attributes: {
+        ...currentObject.attributes,
+        type: LINE_TYPE.SUBLINE.RIDGE,
+      },
+      stroke: LINE_COLOR.RIDGE,
+    })
+
+    history.current.push(currentObject)
+    nextLineFocus(currentObject)
+    canvas.renderAll()
+  }
+
+  const handleRollback = () => {
+    if (history.current.length === 0) {
+      return
+    }
+    const lastLine = history.current.pop()
+
+    delete lastLine.attributes
+    lastLine.set({
+      stroke: LINE_COLOR.DEFAULT,
+      strokeWidth: 4,
+    })
+
+    canvas.setActiveObject(lastLine)
+    canvas.renderAll()
+  }
+
+  const handleFix = () => {
+    // const roof = canvas.getObjects().find((obj) => currentObject.parentId === obj.id)
+    const notSettingLines = roof.lines.filter(
+      (line) =>
+        !line.attributes.type || ![LINE_TYPE.WALLLINE.EAVES, LINE_TYPE.WALLLINE.GABLE, LINE_TYPE.SUBLINE.RIDGE].includes(line.attributes.type),
+    )
+    if (notSettingLines.length > 0) {
+      swalFire({ text: getMessage('modal.canvas.setting.roofline.properties.setting.not.setting'), type: 'alert', icon: 'warning' })
+      return
+    }
+
+    roof.lines.forEach((line) => {
+      line.set({
+        stroke: LINE_COLOR.DEFAULT,
+        strokeWidth: 4,
+        visible: false,
+      })
+    })
+
+    canvas.renderAll()
+    closePopup(id)
+  }
+
+  const nextLineFocus = (selectedLine) => {
+    // const roof = canvas.getObjects().find((obj) => currentObject.parentId === obj.id)
+    const lines = roof?.lines
+    if (!lines) return
+    const index = lines.findIndex((line) => line === selectedLine)
+
+    const nextLine = lines[index + 1] || lines[0]
+    if (!nextLine.attributes?.type) {
+      canvas.setActiveObject(nextLine)
+    } else {
+      //activeObject 해제
+      canvas.discardActiveObject()
+    }
+  }
+
+  return {
+    roofLinesInit,
+    handleSetEaves,
+    handleSetGable,
+    handleSetRidge,
+    handleRollback,
+    handleFix,
+  }
+}

src/locales/ja.json

@@ -269,6 +269,10 @@
   "modal.canvas.setting.wallline.properties.setting.info": "※属性を変更する外壁線を選択し、軒で設定またはケラバで設定\nボタンをクリックして設定値を適用してください。\n",
   "modal.canvas.setting.wallline.properties.setting.eaves": "軒で設定",
   "modal.canvas.setting.wallline.properties.setting.edge": "ケラバに設定",
+  "modal.canvas.setting.wallline.properties.setting.ridge": "용마루로 설정(JA)",
+  "modal.canvas.setting.roofline.properties.setting": "지붕선 속성 설정(JA)",
+  "modal.canvas.setting.roofline.properties.setting.info": "※ 속성을 변경할 지붕선을 선택하고 처마로 설정 또는 케라바로 설정\n    버튼을 클릭하여 설정값을 적용하십시오.\n(JA)",
+  "modal.canvas.setting.roofline.properties.setting.not.setting": "설정하지 않은 라인이 존재합니다.(JA)",
   "modal.eaves.gable.edit": "軒/ケラバ変更",
   "modal.eaves.gable.edit.basic": "通常",
   "modal.eaves.gable.edit.wall.merge.info": "河屋などの壁に面する屋根を作成します。",

src/locales/ko.json

@@ -269,6 +269,10 @@
   "modal.canvas.setting.wallline.properties.setting.info": "※ 속성을 변경할 외벽선을 선택하고 처마로 설정 또는 케라바로 설정\n    버튼을 클릭하여 설정값을 적용하십시오.\n",
   "modal.canvas.setting.wallline.properties.setting.eaves": "처마로 설정",
   "modal.canvas.setting.wallline.properties.setting.edge": "케라바로 설정",
+  "modal.canvas.setting.wallline.properties.setting.ridge": "용마루로 설정",
+  "modal.canvas.setting.roofline.properties.setting": "지붕선 속성 설정",
+  "modal.canvas.setting.roofline.properties.setting.info": "※ 속성을 변경할 지붕선을 선택하고 처마로 설정 또는 케라바로 설정\n    버튼을 클릭하여 설정값을 적용하십시오.\n",
+  "modal.canvas.setting.roofline.properties.setting.not.setting": "설정하지 않은 라인이 존재합니다.",
   "modal.eaves.gable.edit": "처마/케라바 변경",
   "modal.eaves.gable.edit.basic": "통상",
   "modal.eaves.gable.edit.wall.merge.info": "하옥 등 벽에 접하는 지붕을 작성합니다.",

src/styles/_modal.scss

@@ -769,6 +769,13 @@ $alert-color: #101010;
                     background-color: #365f6e;
                 }
             }
+            &.gray{
+                background-color: #535353;
+                border: 1px solid #9e9e9e;
+                &:hover{
+                    background-color: #6b6b6b;
+                }
+            }
         }
     }
 }