변 속성변경 로직 수정

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,8 +25,12 @@ 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) => {
+      canvas
+        .getObjects()
+        .filter((obj) => obj.name === 'cloneRoofLine')
+        .forEach((line) => {
           const lineType = line.attributes?.type
           if (!lineType) {
             line.set({
@@ -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,
+          stroke: line.attributes?.type ? LINE_COLOR[line.attributes.type.toUpperCase()] : LINE_COLOR.DEFAULT,
           strokeWidth: 4,
           visible: true,
-        name: 'roofLine',
+          name: 'cloneRoofLine',
+          selectable: true,
+          originLine: line.id,
         })
-      line.bringToFront()
+        line.set({
+          visible: false,
+        })
+        canvas.add(cloned)
+        cloned.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,7 +141,12 @@ 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(
+    console.log(canvas.getObjects().filter((obj) => obj.name === 'cloneRoofLine'))
+    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),
       )
@@ -130,14 +155,30 @@ export function useRoofLinePropertySetting(props) {
       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)
     if (setIsHidden) setIsHidden(false)
@@ -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,
   }
 }