Merge branch 'dev' into feature/dev-yj-layout

src/components/floor-plan/modal/basic/step/Trestle.jsx

@@ -124,7 +124,6 @@ const Trestle = forwardRef((props, ref) => {
 
   useEffect(() => {
     if (constructionList.length > 0) {
-      console.log(constructionList)
       setSelectedConstruction(constructionList.find((construction) => construction.constTp === trestleState?.construction?.constTp) ?? null)
     } else {
       setSelectedConstruction(null)
@@ -144,6 +143,19 @@ const Trestle = forwardRef((props, ref) => {
     return 'no-click'
   }
 
+  const onChangeLength = (e) => {
+    setLengthBase(e)
+    dispatch({
+      type: 'SET_LENGTH',
+      roof: {
+        length: e,
+        moduleTpCd: selectedModules.itemTp ?? '',
+        roofMatlCd: selectedRoof?.roofMatlCd ?? '',
+        raftBaseCd: selectedRaftBase?.clCode,
+      },
+    })
+  }
+
   const onChangeRaftBase = (e) => {
     setSelectedRaftBase(e)
     dispatch({
@@ -225,7 +237,8 @@ const Trestle = forwardRef((props, ref) => {
           snowGdPossYn: constructionList[index].snowGdPossYn,
           cvrYn: constructionList[index].cvrYn,
           mixMatlNo: selectedModules.mixMatlNo,
-          workingWidth: selectedRoof?.length?.toString() ?? '',
+          // workingWidth: selectedRoof?.length?.toString() ?? '',
+          workingWidth: lengthBase,
         },
       })
 
@@ -242,7 +255,7 @@ const Trestle = forwardRef((props, ref) => {
         return {
           ...selectedRoof,
           hajebichi,
-          lenBase: lengthBase,
+          length: lengthBase,
           eavesMargin,
           ridgeMargin,
           kerabaMargin,
@@ -518,7 +531,7 @@ const Trestle = forwardRef((props, ref) => {
                             type="text"
                             className="input-origin block"
                             value={lengthBase}
-                            onChange={(e) => setLengthBase(e.target.value)}
+                            onChange={(e) => onChangeLength(e.target.value)}
                             disabled={selectedRoof.lenAuth === 'R'}
                           />
                         </div>

src/hooks/module/useModuleTrestle.js

@@ -10,6 +10,7 @@ const RAFT_BASE_CODE = '203800'
 
 const trestleReducer = (state, action) => {
   switch (action.type) {
+    case 'SET_LENGTH':
     case 'SET_RAFT_BASE':
     case 'SET_TRESTLE_MAKER':
     case 'SET_CONST_MTHD':
@@ -96,11 +97,15 @@ export function useModuleTrestle(props) {
   useEffect(() => {
     if (trestleState) {
       handleSetTrestleList()
+
       if (!trestleState?.trestleMkrCd) {
         setConstMthdList([])
         setRoofBaseList([])
         setConstructionList([])
         setTrestleDetail(null)
+        setEavesMargin(0)
+        setRidgeMargin(0)
+        setKerabaMargin(0)
         return
       }
 
@@ -109,6 +114,9 @@ export function useModuleTrestle(props) {
         setRoofBaseList([])
         setConstructionList([])
         setTrestleDetail(null)
+        setEavesMargin(0)
+        setRidgeMargin(0)
+        setKerabaMargin(0)
         return
       }
 
@@ -116,12 +124,18 @@ export function useModuleTrestle(props) {
       if (!trestleState?.roofBaseCd) {
         setConstructionList([])
         setTrestleDetail(null)
+        setEavesMargin(0)
+        setRidgeMargin(0)
+        setKerabaMargin(0)
         return
       }
 
       handleSetConstructionList()
       if (!trestleState?.constTp) {
         setTrestleDetail(null)
+        setEavesMargin(0)
+        setRidgeMargin(0)
+        setKerabaMargin(0)
         return
       }
 
@@ -224,7 +238,8 @@ export function useModuleTrestle(props) {
         constTp: trestleState.constTp ?? '',
         mixMatlNo: trestleState.mixMatlNo ?? '',
         roofPitch: trestleState.roofPitch ?? '',
-        workingWidth: trestleState.workingWidth ?? '',
+        // workingWidth: trestleState.length ?? '',
+        workingWidth: lengthBase ?? '',
       },
     ])
       .then((res) => {

src/hooks/surface/usePlacementShapeDrawing.js

@@ -14,7 +14,7 @@ import { useMouse } from '@/hooks/useMouse'
 import { useLine } from '@/hooks/useLine'
 import { useTempGrid } from '@/hooks/useTempGrid'
 import { useEffect, useRef } from 'react'
-import { distanceBetweenPoints } from '@/util/canvas-util'
+import { calculateIntersection, distanceBetweenPoints, findClosestPoint } from '@/util/canvas-util'
 import { fabric } from 'fabric'
 import { calculateAngle } from '@/util/qpolygon-utils'
 import {
@@ -37,12 +37,13 @@ import { useSurfaceShapeBatch } from './useSurfaceShapeBatch'
 import { roofDisplaySelector } from '@/store/settingAtom'
 import { useRoofFn } from '@/hooks/common/useRoofFn'
 import PlacementSurfaceLineProperty from '@/components/floor-plan/modal/placementShape/PlacementSurfaceLineProperty'
+import { useAdsorptionPoint } from '@/hooks/useAdsorptionPoint'
 
 // 배치면 그리기
 export function usePlacementShapeDrawing(id) {
   const canvas = useRecoilValue(canvasState)
   const roofDisplay = useRecoilValue(roofDisplaySelector)
-  const { addCanvasMouseEventListener, addDocumentEventListener, removeAllMouseEventListeners, removeAllDocumentEventListeners, removeMouseEvent } =
+  const { addCanvasMouseEventListener, addDocumentEventListener, removeAllMouseEventListeners, removeAllDocumentEventListeners, removeMouseLine } =
     useEvent()
   // const { addCanvasMouseEventListener, addDocumentEventListener, removeAllMouseEventListeners, removeAllDocumentEventListeners, removeMouseEvent } =
   //   useContext(EventContext)
@@ -118,6 +119,7 @@ export function usePlacementShapeDrawing(id) {
   }, [type])
 
   const clear = () => {
+    addCanvasMouseEventListener('mouse:move', mouseMove)
     setLength1(0)
     setLength2(0)
 
@@ -173,6 +175,80 @@ export function usePlacementShapeDrawing(id) {
     }
   }
 
+/*
+mouseMove
+ */
+  const roofs = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
+  const roofAdsorptionPoints = useRef([])
+  const intersectionPoints = useRef([])
+  const { getAdsorptionPoints } = useAdsorptionPoint()
+
+  const mouseMove = (e) => {
+    removeMouseLine();
+    const pointer = canvas.getPointer(e.e)
+    const roofsPoints = roofs.map((roof) => roof.points).flat()
+    roofAdsorptionPoints.current = [...roofsPoints]
+
+    const auxiliaryLines = canvas.getObjects().filter((obj) => obj.name === 'auxiliaryLine' && !obj.isFixed)
+    const otherAdsorptionPoints = []
+
+    auxiliaryLines.forEach((line1) => {
+      auxiliaryLines.forEach((line2) => {
+        if (line1 === line2) {
+          return
+        }
+
+        const intersectionPoint = calculateIntersection(line1, line2)
+        if (!intersectionPoint || intersectionPoints.current.some((point) => point.x === intersectionPoint.x && point.y === intersectionPoint.y)) {
+          return
+        }
+        otherAdsorptionPoints.push(intersectionPoint)
+      })
+    })
+
+    let innerLinePoints = []
+    canvas
+      .getObjects()
+      .filter((obj) => obj.innerLines)
+      .forEach((polygon) => {
+        polygon.innerLines.forEach((line) => {
+          innerLinePoints.push({ x: line.x1, y: line.y1 })
+          innerLinePoints.push({ x: line.x2, y: line.y2 })
+        })
+      })
+
+    const adsorptionPoints = [
+      ...getAdsorptionPoints(),
+      ...roofAdsorptionPoints.current,
+      ...otherAdsorptionPoints,
+      ...intersectionPoints.current,
+      ...innerLinePoints,
+    ]
+
+    let arrivalPoint = { x: pointer.x, y: pointer.y }
+    let adsorptionPoint = findClosestPoint(pointer, adsorptionPoints)
+
+    if (adsorptionPoint && distanceBetweenPoints(pointer, adsorptionPoint) <= adsorptionRange) {
+      arrivalPoint = { ...adsorptionPoint }
+    }
+    const horizontalLine = new fabric.Line([-1 * canvas.width, arrivalPoint.y, 2 * canvas.width, arrivalPoint.y], {
+      stroke: 'red',
+      strokeWidth: 1,
+      selectable: false,
+      name: 'mouseLine',
+    })
+
+    const verticalLine = new fabric.Line([arrivalPoint.x, -1 * canvas.height, arrivalPoint.x, 2 * canvas.height], {
+      stroke: 'red',
+      strokeWidth: 1,
+      selectable: false,
+      name: 'mouseLine',
+    })
+    canvas?.add(horizontalLine, verticalLine)
+    canvas?.renderAll()
+
+  }
+
   useEffect(() => {
     canvas
       ?.getObjects()

src/hooks/useCanvasEvent.js

@@ -206,6 +206,7 @@ export function useCanvasEvent() {
         selected.forEach((obj) => {
           if (obj.type === 'QPolygon' && currentMenu !== MENU.MODULE_CIRCUIT_SETTING.BASIC_SETTING) {
             obj.set({ stroke: 'red' })
+            obj.bringToFront()
           }
         })
         canvas.renderAll()
@@ -243,6 +244,7 @@ export function useCanvasEvent() {
         selected.forEach((obj) => {
           if (obj.type === 'QPolygon' && currentMenu !== MENU.MODULE_CIRCUIT_SETTING.BASIC_SETTING) {
             obj.set({ stroke: 'red' })
+            obj.bringToFront()
           }
         })
       }

src/locales/ja.json

@@ -3,7 +3,7 @@
   "welcome": "ようこそ。 {0}さん",
   "header.menus.home": "ホーム",
   "header.menus.management": "見積書管理画面",
-  "header.menus.management.newStuff": "新規見積登録",
+  "header.menus.management.newStuff": "新規物件登録",
   "header.menus.management.detail": "物件詳細",
   "header.menus.management.stuffList": "物件検索",
   "header.menus.community": "コミュニティ",
@@ -187,7 +187,7 @@
   "modal.circuit.trestle.setting.circuit.allocation.passivity.all.power.conditional.validation.error02": "シリーズを選択してください。",
   "modal.circuit.trestle.setting.circuit.allocation.passivity.circuit.num.fix": "番号確定",
   "modal.circuit.trestle.setting.step.up.allocation": "昇圧設定",
-  "modal.circuit.trestle.setting.step.up.allocation.serial.amount": "シリアル枚数",
+  "modal.circuit.trestle.setting.step.up.allocation.serial.amount": "直列枚数",
   "modal.circuit.trestle.setting.step.up.allocation.total.amount": "総回路数",
   "modal.circuit.trestle.setting.step.up.allocation.connected": "接続する",
   "modal.circuit.trestle.setting.step.up.allocation.circuit.amount": "昇圧回路数",