변 속성변경 로직 수정

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

@@ -10,7 +10,7 @@ export default function PlacementSurfaceLineProperty(props) {
   const { id, pos = { x: 50, y: 230 }, roof, setIsHidden } = props
   const { closePopup } = usePopup()
   // const { handleSetEaves, handleSetGable, handleRollback, handleFix, closeModal } = usePropertiesSetting(id)
-  const { roofLinesInit, handleSetRidge, handleSetEaves, handleSetGable, handleRollback, handleFix } = useRoofLinePropertySetting({
+  const { roofLinesInit, handleSetRidge, handleSetEaves, handleSetGable, handleRollback, handleFix, handleClosed } = useRoofLinePropertySetting({
     id,
     roof,
     setIsHidden,
@@ -33,6 +33,7 @@ export default function PlacementSurfaceLineProperty(props) {
     }
 
     closePopup(id)
+    handleClosed()
 
     if (setIsHidden) {
       setIsHidden(false)

src/hooks/surface/useRoofLinePropertySetting.js

@@ -25,16 +25,20 @@ export function useRoofLinePropertySetting(props) {
   const { getMessage } = useMessage()
 
   useEffect(() => {
-    if (currentObject && currentObject.name === 'roofLine') {
+    if (currentObject && currentObject.name === 'cloneRoofLine') {
-      roof.lines.forEach((line) => {
+      // roof.lines.forEach((line) => {
-        const lineType = line.attributes?.type
+      canvas
-        if (!lineType) {
+        .getObjects()
-          line.set({
+        .filter((obj) => obj.name === 'cloneRoofLine')
-            stroke: '#000000',
+        .forEach((line) => {
-            strokeWidth: 4,
+          const lineType = line.attributes?.type
-          })
+          if (!lineType) {
-        }
+            line.set({
-      })
+              stroke: '#000000',
+              strokeWidth: 4,
+            })
+          }
+        })
       currentObject.set({
         stroke: LINE_COLOR.ACTIVE,
         strokeWidth: 4,
@@ -44,15 +48,31 @@ export function useRoofLinePropertySetting(props) {
   }, [currentObject])
 
   const roofLinesInit = () => {
+    console.log('🚀 ~ roofLinesInit ~ roof:', roof)
     roof.lines.forEach((line) => {
-      canvas.add(line)
+      line.clone((cloned) => {
-      line.set({
+        cloned.set({
-        stroke: LINE_COLOR.DEFAULT,
+          ...line,
-        strokeWidth: 4,
+          stroke: line.attributes?.type ? LINE_COLOR[line.attributes.type.toUpperCase()] : LINE_COLOR.DEFAULT,
-        visible: true,
+          strokeWidth: 4,
-        name: 'roofLine',
+          visible: true,
+          name: 'cloneRoofLine',
+          selectable: true,
+          originLine: line.id,
+        })
+        line.set({
+          visible: false,
+        })
+        canvas.add(cloned)
+        cloned.bringToFront()
       })
-      line.bringToFront()
+      // line.set({
+      //   stroke: line.attributes?.type ? LINE_COLOR[line.attributes.type.toUpperCase()] : LINE_COLOR.DEFAULT,
+      //   strokeWidth: 4,
+      //   visible: true,
+      //   name: 'roofLine',
+      // })
+      // line.bringToFront()
     })
     canvas.renderAll()
   }
@@ -121,22 +141,43 @@ export function useRoofLinePropertySetting(props) {
 
   const handleFix = () => {
     // const roof = canvas.getObjects().find((obj) => currentObject.parentId === obj.id)
-    const notSettingLines = roof.lines.filter(
+    // const notSettingLines = roof.lines.filter(
-      (line) =>
+    console.log(canvas.getObjects().filter((obj) => obj.name === 'cloneRoofLine'))
-        !line.attributes.type || ![LINE_TYPE.WALLLINE.EAVES, LINE_TYPE.WALLLINE.GABLE, LINE_TYPE.SUBLINE.RIDGE].includes(line.attributes.type),
+    const notSettingLines = canvas
-    )
+      .getObjects()
+      .filter((obj) => obj.name === 'cloneRoofLine')
+      .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) => {
+    canvas
-      line.set({
+      .getObjects()
-        stroke: LINE_COLOR.DEFAULT,
+      .filter((obj) => obj.name === 'cloneRoofLine')
-        strokeWidth: 4,
+      .forEach((line) => {
-        visible: false,
+        const originLine = roof.lines.find((obj) => obj.id === line.originLine)
+
+        originLine.set({
+          attributes: {
+            ...originLine.attributes,
+            type: line.attributes.type,
+          },
+          visible: true,
+        })
+        canvas.remove(line)
       })
-    })
+
+    // roof.lines.forEach((line) => {
+    //   line.set({
+    //     stroke: LINE_COLOR.DEFAULT,
+    //     strokeWidth: 4,
+    //     visible: false,
+    //   })
+    // })
 
     canvas.renderAll()
     closePopup(id)
@@ -145,12 +186,15 @@ export function useRoofLinePropertySetting(props) {
 
   const nextLineFocus = (selectedLine) => {
     // const roof = canvas.getObjects().find((obj) => currentObject.parentId === obj.id)
-    const lines = roof?.lines
+    // const lines = roof?.lines
+    const lines = canvas.getObjects().filter((obj) => obj.name === 'cloneRoofLine')
+    console.log('🚀 ~ nextLineFocus ~ lines:', lines)
+
     if (!lines) return
     const index = lines.findIndex((line) => line === selectedLine)
 
     const nextLine = lines[index + 1] || lines[0]
-    if (!nextLine.attributes?.type) {
+    if (nextLine.attributes?.type === 'default') {
       canvas.setActiveObject(nextLine)
     } else {
       //activeObject 해제
@@ -158,6 +202,20 @@ export function useRoofLinePropertySetting(props) {
     }
   }
 
+  const handleClosed = () => {
+    canvas
+      .getObjects()
+      .filter((obj) => obj.name === 'cloneRoofLine')
+      .forEach((line) => {
+        roof.lines
+          .find((obj) => obj.id === line.originLine)
+          .set({
+            visible: true,
+          })
+        canvas.remove(line)
+      })
+  }
+
   return {
     roofLinesInit,
     handleSetEaves,
@@ -165,5 +223,6 @@ export function useRoofLinePropertySetting(props) {
     handleSetRidge,
     handleRollback,
     handleFix,
+    handleClosed,
   }
 }