Merge branch 'dev' of https://git.jetbrains.space/nalpari/q-cast-iii/qcast-front into dev

src/components/fabric/QPolygon.js

@@ -186,12 +186,6 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
     })
   },
 
-  containsPoint: function (point) {
-    const isInside = this.inPolygon(point)
-    this.set('selectable', isInside)
-    return isInside
-  },
-
   // 보조선 그리기
   drawHelpLine() {
     // drawHelpLineInHexagon(this, pitch)

src/components/floor-plan/modal/movement/type/FlowLine.jsx

@@ -1,6 +1,5 @@
 import { useMessage } from '@/hooks/useMessage'
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
-import { useEvent } from '@/hooks/useEvent'
 
 const FLOW_LINE_TYPE = {
   DOWN_LEFT: 'downLeft',
@@ -11,16 +10,6 @@ export default function FlowLine({ FLOW_LINE_REF }) {
   const { getMessage } = useMessage()
   const [type, setType] = useState(FLOW_LINE_TYPE.DOWN_LEFT)
 
-  useEffect(() => {
-    if (type === FLOW_LINE_TYPE.DOWN_LEFT) {
-      FLOW_LINE_REF.UP_RIGHT_INPUT_REF.current.value = ''
-      FLOW_LINE_REF.DOWN_LEFT_INPUT_REF.current.focus()
-    } else {
-      FLOW_LINE_REF.DOWN_LEFT_INPUT_REF.current.value = ''
-      FLOW_LINE_REF.UP_RIGHT_INPUT_REF.current.focus()
-    }
-  }, [type])
-
   return (
     <>
       <div className="outline-wrap">
@@ -45,7 +34,7 @@ export default function FlowLine({ FLOW_LINE_REF }) {
             <div className="eaves-keraba-td">
               <div className="outline-form">
                 <div className="input-grid mr5" style={{ width: '100px' }}>
-                  <input type="text" className="input-origin block" readOnly={true} ref={FLOW_LINE_REF.DOWN_LEFT_INPUT_REF} />
+                  {/*<input type="text" className="input-origin block" readOnly={true} ref={FLOW_LINE_REF.POINTER_INPUT_REF} />*/}
                 </div>
               </div>
             </div>
@@ -68,12 +57,7 @@ export default function FlowLine({ FLOW_LINE_REF }) {
             <div className="eaves-keraba-td">
               <div className="outline-form">
                 <div className="input-grid mr5" style={{ width: '100px' }}>
-                  <input
+                  <input type="text" className="input-origin block" ref={FLOW_LINE_REF.FILLED_INPUT_REF} />
-                    type="text"
-                    className="input-origin block"
-                    readOnly={type !== FLOW_LINE_TYPE.UP_RIGHT}
-                    ref={FLOW_LINE_REF.UP_RIGHT_INPUT_REF}
-                  />
                 </div>
                 <span className="thin">mm</span>
               </div>

src/components/main/ChangePasswordPop.jsx

@@ -72,21 +72,25 @@ export default function ChangePasswordPop(props) {
       chgPwd: _password1,
     }
 
-    await patch({ url: '/api/login/v1.0/user/change-password', data: param }).then((res) => {
+    await patch({ url: '/api/login/v1.0/user/change-password', data: param })
-      if (res.result.code === 200) {
+      .then((res) => {
-        if (res.result.resultCode === 'S') {
+        if (res?.result?.code === 200) {
-          alert(getMessage('main.popup.login.success'))
+          if (res?.result?.resultCode === 'S') {
-          setSessionState({ ...sessionState, pwdInitYn: 'Y' })
+            alert(getMessage('main.popup.login.success'))
-          //메인으로 이동
+            //로그인 화면으로 이동해서 다시 로그인해야되서 setSessionState필요없음
-          props.setChagePasswordPopOpen(false)
+            // setSessionState({ ...sessionState, pwdInitYn: 'Y' })
-          router.push('/')
+            props.setChagePasswordPopOpen(false)
+            router.push('/login')
+          } else {
+            alert(res?.result?.resultMsg)
+          }
         } else {
-          alert(res.result.resultMsg)
+          console.log('code not 200 error')
         }
-      } else {
+      })
-        console.log('error')
+      .catch((error) => {
-      }
+        console.log('catch::::::::', error)
-    })
+      })
   }
 
   return (

src/hooks/roofcover/useMovementSetting.js

@@ -4,8 +4,7 @@ import { usePopup } from '@/hooks/usePopup'
 import { useMessage } from '@/hooks/useMessage'
 import { useEffect, useRef, useState } from 'react'
 import { useEvent } from '@/hooks/useEvent'
-import { POLYGON_TYPE } from '@/common/common'
+import { LINE_TYPE, POLYGON_TYPE } from '@/common/common'
-import { OUTER_LINE_TYPE } from '@/store/outerLineAtom'
 
 //동선이동 형 올림 내림
 export function useMovementSetting(id) {
@@ -28,8 +27,8 @@ export function useMovementSetting(id) {
   const typeRef = useRef(type)
 
   const FLOW_LINE_REF = {
-    DOWN_LEFT_INPUT_REF: useRef(null),
+    POINTER_INPUT_REF: useRef(null),
-    UP_RIGHT_INPUT_REF: useRef(null),
+    FILLED_INPUT_REF: useRef(null),
     DOWN_LEFT_RADIO_REF: useRef(null),
     UP_RIGHT_RADIO_REF: useRef(null),
   }
@@ -42,37 +41,42 @@ export function useMovementSetting(id) {
   }
 
   useEffect(() => {
-    removeFlowLine()
     typeRef.current = type
-    const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine') // 기존 outerLine의 selectable true
-    outerLines.forEach((line) => {
-      line.set({ stroke: 'black' })
-      line.set({ visible: false })
-    })
     canvas.getObjects().forEach((obj) => {
       obj.set({ selectable: false })
     })
     const roofs = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF) // 기존 wallLine의 visible false
     roofs.forEach((roof) => {
+      roof.set({ selectable: false })
+      roof.set({ strokeWidth: 1 })
+      roof.set({ stroke: '#000000' })
       roof.innerLines.forEach((line) => {
         line.bringToFront()
         line.set({ selectable: false })
         line.set({ strokeWidth: 1 })
+        line.set({ stroke: '#000000' })
+      })
+      roof.separatePolygon?.forEach((polygon) => {
+        polygon.bringToFront()
+        polygon.set({ selectable: false })
+        polygon.set({ strokeWidth: 1 })
+        polygon.set({ stroke: '#000000' })
       })
     })
     if (type === TYPE.FLOW_LINE) {
       roofs.forEach((roof) => {
         roof.innerLines.forEach((line) => {
-          line.bringToFront()
+          if (line.name === LINE_TYPE.SUBLINE.RIDGE) {
-          line.set({ selectable: true })
+            line.bringToFront()
-          line.set({ strokeWidth: 4 })
+            line.set({ selectable: true })
+            line.set({ strokeWidth: 4 })
+            line.set({ stroke: '#1083E3' })
+          }
         })
       })
     } else if (type === TYPE.UP_DOWN) {
-      const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine') // 기존 outerLine의 selectable true
+      const wallLine = canvas.getObjects().filter((obj) => obj.name === 'wallLine') // 기존 outerLine의 selectable true
-      outerLines.forEach((line) => {
+      wallLine.forEach((line) => {
-        line.set({ stroke: 'black' })
-        line.set({ visible: true })
         line.bringToFront()
         line.set({ selectable: true })
       })
@@ -81,26 +85,48 @@ export function useMovementSetting(id) {
   }, [type])
 
   useEffect(() => {
-    /*const wallLines = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.WALL) // 기존 wallLine의 visible false
-    wallLines.forEach((line) => {
-      line.set({ visible: false })
-    })*/
-
     canvas.renderAll()
     addCanvasMouseEventListener('mouse:move', mouseMoveEvent)
     addCanvasMouseEventListener('mouse:down', mouseDownEvent)
+
     return () => {
       initEvent()
-      removeFlowLine()
+
       const wallLines = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.WALL)
       wallLines.forEach((line) => {
         line.set({ visible: true })
       })
 
-      const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine') // 기존 outerLine의 selectable true
+      const wallLine = canvas.getObjects().filter((obj) => obj.name === 'wallLine') // 기존 outerLine의 selectable true
-      outerLines.forEach((line) => {
+      wallLine.forEach((line) => {
-        line.set({ stroke: 'black' })
+        let wallStroke, wallStrokeWidth
-        line.set({ visible: false })
+        switch (line.attributes.type) {
+          case LINE_TYPE.WALLLINE.EAVES:
+            wallStroke = '#45CD7D'
+            wallStrokeWidth = 4
+            break
+          case LINE_TYPE.WALLLINE.HIPANDGABLE:
+            wallStroke = '#45CD7D'
+            wallStrokeWidth = 4
+            break
+          case LINE_TYPE.WALLLINE.GABLE:
+            wallStroke = '#3FBAE6'
+            wallStrokeWidth = 4
+            break
+          case LINE_TYPE.WALLLINE.JERKINHEAD:
+            wallStroke = '#3FBAE6'
+            wallStrokeWidth = 4
+            break
+          case LINE_TYPE.WALLLINE.SHED:
+            wallStroke = '#000000'
+            wallStrokeWidth = 4
+            break
+          case LINE_TYPE.WALLLINE.WALL:
+            wallStroke = '#000000'
+            wallStrokeWidth = 4
+            break
+        }
+        line.set({ selectable: false, stroke: wallStroke, strokeWidth: wallStrokeWidth })
       })
 
       canvas.renderAll()
@@ -108,19 +134,14 @@ export function useMovementSetting(id) {
   }, [])
 
   useEffect(() => {
-    const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine') // 기존 outerLine의 selectable true
-    outerLines.forEach((line) => {
-      line.set({ stroke: 'black' })
-    })
     selectedObject.current = null
-
     if (!currentObject) {
       return
     }
 
     clearRef()
     selectedObject.current = currentObject
-    if (currentObject.name === OUTER_LINE_TYPE.OUTER_LINE) {
+    if (currentObject.name === 'wallLine') {
       currentObject.set({ stroke: '#EA10AC' })
       currentObject.bringToFront()
     }
@@ -129,34 +150,26 @@ export function useMovementSetting(id) {
 
   const clearRef = () => {
     if (type === TYPE.FLOW_LINE) {
-      FLOW_LINE_REF.DOWN_LEFT_INPUT_REF.current.value = ''
+      FLOW_LINE_REF.FILLED_INPUT_REF.current.value = ''
-      FLOW_LINE_REF.UP_RIGHT_INPUT_REF.current.value = ''
+      FLOW_LINE_REF.DOWN_LEFT_RADIO_REF.current.checked = true
-      FLOW_LINE_REF.DOWN_LEFT_RADIO_REF.current.checked = false
       FLOW_LINE_REF.UP_RIGHT_RADIO_REF.current.checked = false
     }
     if (type === TYPE.UP_DOWN) {
       UP_DOWN_REF.UP_INPUT_REF.current.value = ''
       UP_DOWN_REF.DOWN_INPUT_REF.current.value = ''
-      UP_DOWN_REF.UP_RADIO_REF.current.checked = false
+      UP_DOWN_REF.UP_RADIO_REF.current.checked = true
       UP_DOWN_REF.DOWN_RADIO_REF.current.checked = false
     }
   }
 
   const mouseDownEvent = (e) => {
     if (typeRef.current === TYPE.FLOW_LINE) {
-      flowLineDownEvent(e)
+      saveFlowLine(e)
     } else {
       updownDownEvent(e)
     }
   }
 
-  const removeFlowLine = () => {
-    const flowLine = canvas.getObjects().filter((obj) => obj.name === 'flowLine')
-    flowLine.forEach((line) => {
-      canvas.remove(line)
-    })
-  }
-
   const mouseMoveEvent = (e) => {
     if (typeRef.current === TYPE.FLOW_LINE) {
       flowLineMoveEvent(e)
@@ -165,61 +178,92 @@ export function useMovementSetting(id) {
     }
   }
   //동선 이동 마우스 클릭 이벤트
-  const flowLineDownEvent = (e) => {
+  const saveFlowLine = (e) => {
     const target = selectedObject.current
     if (!target) {
       return
     }
 
-    const direction = target.direction
-
-    removeFlowLine()
-
     let newPoint = []
-    if (direction === 'left' || direction === 'right') {
+    if (Math.sign(target.x1 - target.x2) !== 0) {
-      if (FLOW_LINE_REF.DOWN_LEFT_RADIO_REF.current.checked) {
+      newPoint = [
-        newPoint = [
+        target.x1,
-          target.x1,
+        target.y1 - Number(FLOW_LINE_REF.FILLED_INPUT_REF.current.value / 10),
-          target.y1 + Number(FLOW_LINE_REF.DOWN_LEFT_INPUT_REF.current.value / 10),
+        target.x2,
-          target.x2,
+        target.y2 - Number(FLOW_LINE_REF.FILLED_INPUT_REF.current.value / 10),
-          target.y2 + Number(FLOW_LINE_REF.DOWN_LEFT_INPUT_REF.current.value / 10),
+      ]
-        ]
-      } else {
-        newPoint = [
-          target.x1,
-          target.y1 - Number(FLOW_LINE_REF.UP_RIGHT_INPUT_REF.current.value / 10),
-          target.x2,
-          target.y2 - Number(FLOW_LINE_REF.UP_RIGHT_INPUT_REF.current.value / 10),
-        ]
-      }
     } else {
-      if (FLOW_LINE_REF.DOWN_LEFT_RADIO_REF.current.checked) {
+      newPoint = [
-        newPoint = [
+        target.x1 + Number(FLOW_LINE_REF.FILLED_INPUT_REF.current.value / 10),
-          target.x1 - Number(FLOW_LINE_REF.DOWN_LEFT_INPUT_REF.current.value / 10),
+        target.y1,
-          target.y1,
+        target.x2 + Number(FLOW_LINE_REF.FILLED_INPUT_REF.current.value / 10),
-          target.x2 - Number(FLOW_LINE_REF.DOWN_LEFT_INPUT_REF.current.value / 10),
+        target.y2,
-          target.y2,
+      ]
-        ]
-      } else {
-        newPoint = [
-          target.x1 + Number(FLOW_LINE_REF.UP_RIGHT_INPUT_REF.current.value / 10),
-          target.y1,
-          target.x2 + Number(FLOW_LINE_REF.UP_RIGHT_INPUT_REF.current.value / 10),
-          target.y2,
-        ]
-      }
     }
 
-    const cloned = new fabric.Line(newPoint, {
+    clearRef()
-      stroke: 'red',
+    const cloned = new fabric.Line(newPoint, {})
-      strokeWidth: 4,
+    let currentObject = selectedObject.current
-      name: 'flowLine',
+    const currentX1 = currentObject.x1,
-      currentLine: target,
+      currentY1 = currentObject.y1,
-    })
+      currentX2 = currentObject.x2,
+      currentY2 = currentObject.y2
+
+    const roof = canvas.getObjects().find((obj) => obj.id === currentObject.attributes.roofId)
+    if (roof.separatePolygon.length > 0) {
+      const separatePolygon = roof.separatePolygon
+      separatePolygon
+        .filter((polygon) =>
+          polygon.points.some((point) => (point.x === currentX1 && point.y === currentY1) || (point.x === currentX2 && point.y === currentY2)),
+        )
+        .forEach((polygon) => {
+          const newPoints = polygon.points.map((point) => {
+            if (point.x === currentX1 && point.y === currentY1) {
+              return { x: newPoint[0], y: newPoint[1] }
+            } else if (point.x === currentX2 && point.y === currentY2) {
+              return { x: newPoint[2], y: newPoint[3] }
+            } else {
+              return point
+            }
+          })
+          polygon.set({ points: newPoints })
+        })
+    } else {
+      roof.innerLines
+        .filter((line) => currentObject !== line)
+        .filter(
+          (line) =>
+            (line.x1 === currentX1 && line.y1 === currentY1) ||
+            (line.x2 === currentX1 && line.y2 === currentY1) ||
+            (line.x1 === currentX2 && line.y1 === currentY2) ||
+            (line.x2 === currentX2 && line.y2 === currentY2),
+        )
+        .forEach((line) => {
+          console.log('line : ', line)
+          if (line.x1 === currentX1 && line.y1 === currentY1) {
+            line.set({ x1: newPoint[0], y1: newPoint[1] })
+          } else if (line.x2 === currentX1 && line.y2 === currentY1) {
+            line.set({ x2: newPoint[0], y2: newPoint[1] })
+          } else if (line.x1 === currentX2 && line.y1 === currentY2) {
+            line.set({ x1: newPoint[2], y1: newPoint[3] })
+          } else if (line.x2 === currentX2 && line.y2 === currentY2) {
+            line.set({ x2: newPoint[2], y2: newPoint[3] })
+          }
+          line.setCoords()
+        })
+    }
+
+    currentObject.set({ x1: cloned.x1, y1: cloned.y1, x2: cloned.x2, y2: cloned.y2 })
+    currentObject.setCoords()
+
+    console.log('currentObject : ', currentObject.x1, currentObject.y1, currentObject.x2, currentObject.y2)
 
-    canvas.add(cloned)
     canvas.renderAll()
     canvas.discardActiveObject()
+
+    if (roof.separatePolygon.length > 0) {
+      console.log('roof.separatePolygon : ', roof.separatePolygon)
+    }
   }
 
   //형 올림내림 마우스 클릭 이벤트
@@ -231,35 +275,25 @@ export function useMovementSetting(id) {
     if (!target) {
       return
     }
-    const direction = target.direction
     const { top: targetTop, left: targetLeft } = target
     const currentX = canvas.getPointer(e.e).x
     const currentY = Math.floor(canvas.getPointer(e.e).y)
 
-    if (direction === 'left' || direction === 'right') {
+    if (Math.sign(target.x1 - target.x2) !== 0) {
       if (targetTop > currentY) {
-        console.log('targetTop > currentY')
         FLOW_LINE_REF.UP_RIGHT_RADIO_REF.current.checked = true
-        FLOW_LINE_REF.DOWN_LEFT_INPUT_REF.current.value = ''
+        FLOW_LINE_REF.FILLED_INPUT_REF.current.value = Math.floor((Number(Math.round(targetTop - currentY)) / 10000).toFixed(5) * 100000)
-
-        FLOW_LINE_REF.UP_RIGHT_INPUT_REF.current.value = Math.floor((Number(Math.abs(targetTop - currentY)) / 10000).toFixed(5) * 100000)
       } else {
         FLOW_LINE_REF.DOWN_LEFT_RADIO_REF.current.checked = true
-        FLOW_LINE_REF.UP_RIGHT_INPUT_REF.current.value = ''
+        FLOW_LINE_REF.FILLED_INPUT_REF.current.value = Math.floor((Number(Math.round(targetTop - currentY)) / 10000).toFixed(5) * 100000)
-
-        FLOW_LINE_REF.DOWN_LEFT_INPUT_REF.current.value = Math.floor((Number(Math.abs(targetTop - currentY)) / 10000).toFixed(5) * 100000)
       }
     } else {
       if (targetLeft > currentX) {
-        FLOW_LINE_REF.DOWN_LEFT_RADIO_REF.current.checked = true
-        FLOW_LINE_REF.UP_RIGHT_INPUT_REF.current.value = ''
-
-        FLOW_LINE_REF.DOWN_LEFT_INPUT_REF.current.value = Math.floor((Number(Math.abs(targetLeft - currentX)) / 10000).toFixed(5) * 100000)
-      } else {
         FLOW_LINE_REF.UP_RIGHT_RADIO_REF.current.checked = true
-        FLOW_LINE_REF.DOWN_LEFT_INPUT_REF.current.value = ''
+        FLOW_LINE_REF.FILLED_INPUT_REF.current.value = Math.floor((Number(Math.round(currentX - targetLeft)) / 10000).toFixed(5) * 100000)
-
+      } else {
-        FLOW_LINE_REF.UP_RIGHT_INPUT_REF.current.value = Math.floor((Number(Math.abs(targetLeft - currentX)) / 10000).toFixed(5) * 100000)
+        FLOW_LINE_REF.DOWN_LEFT_RADIO_REF.current.checked = true
+        FLOW_LINE_REF.FILLED_INPUT_REF.current.value = Math.floor((Number(Math.round(currentX - targetLeft)) / 10000).toFixed(5) * 100000)
       }
     }
 
@@ -307,24 +341,7 @@ export function useMovementSetting(id) {
 
   const handleSave = () => {
     if (type === TYPE.FLOW_LINE) {
-      const flowLine = canvas.getObjects().find((obj) => obj.name === 'flowLine')
+      saveFlowLine()
-
-      const currentLine = flowLine.currentLine
-      if (!flowLine || !currentLine) {
-        return
-      }
-
-      currentLine.set({
-        x1: flowLine.x1,
-        y1: flowLine.y1,
-        x2: flowLine.x2,
-        y2: flowLine.y2,
-      })
-      currentLine.startPoint = { x: flowLine.x1, y: flowLine.y1 }
-      currentLine.endPoint = { x: flowLine.x2, y: flowLine.y2 }
-
-      canvas.remove(flowLine)
-      canvas.renderAll()
     } else {
       // 형 올림내림
       if (UP_DOWN_REF.UP_RADIO_REF.current.checked) {

src/hooks/useMode.js

@@ -1806,7 +1806,8 @@ export function useMode() {
           break
       }
       const wallLine = new fabric.Line([line.x1, line.y1, line.x2, line.y2], {
-        attributes: { wallId: wall.id },
+        name: 'wallLine',
+        attributes: { wallId: wall.id, roofId: roof.id },
         stroke: wallStroke,
         strokeWidth: wallStrokeWidth,
         selectable: false,