배치면 초기설정 시 서까래 값 이상 현상 수정

지지금구 위치 수정

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

@@ -227,7 +227,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla
     console.log('save Info', {
       ...basicSetting,
       selectedRoofMaterial: {
-        roofInfo,
+        ...newAddedRoofs[0],
       },
     })
 
@@ -240,7 +240,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, pla
        * 선택된 지붕재 정보
        */
       selectedRoofMaterial: {
-        roofInfo,
+        ...newAddedRoofs[0],
       },
     })
 

src/hooks/module/useTrestle.js

@@ -1627,6 +1627,8 @@ export const useTrestle = () => {
   // 랙 없음의 지지금구를 그린다.
   const drawBracketWithOutRack = (module, rackIntvlPct, count, l, direction, moduleIntvlHor, moduleIntvlVer) => {
     const { leftFindModuleList, rightFindModuleList, centerFindModuleList } = module
+    rackIntvlPct = rackIntvlPct === 0 ? 1 : rackIntvlPct // 0인 경우 1로 변경
+    rackIntvlPct = 100 / rackIntvlPct // 퍼센트로 변경
 
     let { width, height, left, top } = module
     let startPointX
@@ -1641,14 +1643,14 @@ export const useTrestle = () => {
           break
         } else if (direction === 'east') {
           startPointX = left + width
-          startPointY = top + height - height / rackIntvlPct
+          startPointY = top + height - height / rackIntvlPct - 10
           break
         } else if (direction === 'west') {
           startPointX = left
           startPointY = top + height / rackIntvlPct
           break
         } else if (direction === 'north') {
-          startPointX = left + width - width / rackIntvlPct
+          startPointX = left + width - width / rackIntvlPct - 10
           startPointY = top
           break
         }
@@ -1657,7 +1659,7 @@ export const useTrestle = () => {
       case 'R': {
         // 오른쪽부분 시작 점
         if (direction === 'south') {
-          startPointX = left + width - width / rackIntvlPct
+          startPointX = left + width - width / rackIntvlPct - 10
           startPointY = top + height / 2 + height / 2
           break
         } else if (direction === 'east') {
@@ -1666,7 +1668,7 @@ export const useTrestle = () => {
           break
         } else if (direction === 'west') {
           startPointX = left
-          startPointY = top + height - height / rackIntvlPct
+          startPointY = top + height - height / rackIntvlPct - 10
           break
         } else if (direction === 'north') {
           startPointX = left + width / rackIntvlPct

src/hooks/option/useCanvasSetting.js

@@ -498,11 +498,26 @@ export function useCanvasSetting(executeEffect = true) {
             roofSeq: 0,
             roofMatlCd:
               params.roofsData.roofMatlCd === null || params.roofsData.roofMatlCd === undefined ? 'ROOF_ID_WA_53A' : params.roofsData.roofMatlCd,
-            roofWidth: params.roofsData.roofWidth === null || params.roofsData.roofWidth === undefined ? 0 : params.roofsData.roofWidth,
+            roofWidth:
-            roofHeight: params.roofsData.roofHeight === null || params.roofsData.roofHeight === undefined ? 0 : params.roofsData.roofHeight,
+              params.selectedRoofMaterial.width === null || params.selectedRoofMaterial.width === undefined
+                ? !params.selectedRoofMaterial.widBase
+                  ? 0
+                  : Number(params.roofsData.widBase)
+                : Number(params.selectedRoofMaterial.width),
+            roofHeight:
+              params.selectedRoofMaterial.height === null || params.selectedRoofMaterial.height === undefined
+                ? !params.selectedRoofMaterial.lenBase
+                  ? 0
+                  : Number(params.selectedRoofMaterial.lenBase)
+                : Number(params.roofsData.roofHeight),
             roofHajebichi:
-              params.roofsData.roofHajebichi === null || params.roofsData.roofHajebichi === undefined ? 0 : params.roofsData.roofHajebichi,
+              params.selectedRoofMaterial.hajebichi === null || params.selectedRoofMaterial.hajebichi === undefined
-            roofGap: params.roofsData.roofGap === null || params.roofsData.roofGap === undefined ? 'HEI_455' : params.roofsData.roofGap,
+                ? 0
+                : Number(params.selectedRoofMaterial.hajebichi),
+            roofGap:
+              params.selectedRoofMaterial.raft === null || params.selectedRoofMaterial.raft === undefined
+                ? params.selectedRoofMaterial.raftBaseCd
+                : params.roofsData.raft,
             roofLayout: params.roofsData.roofLayout === null || params.roofsData.roofLayout === undefined ? 'P' : params.roofsData.roofLayout,
             roofPitch: params.roofsData.roofPitch === null || params.roofsData.roofPitch === undefined ? 0 : params.roofsData.roofPitch,
             roofAngle: params.roofsData.roofAngle === null || params.roofsData.roofAngle === undefined ? 0 : params.roofsData.roofAngle,

src/hooks/useEvent.js

@@ -1,4 +1,4 @@
-import { useRef } from 'react'
+import { useEffect, useRef } from 'react'
 import { useRecoilValue, useSetRecoilState } from 'recoil'
 import { canvasState, canvasZoomState, currentMenuState, textModeState } from '@/store/canvasAtom'
 import { fabric } from 'fabric'
@@ -15,7 +15,8 @@ import { useDotLineGrid } from '@/hooks/useDotLineGrid'
 import { useTempGrid } from '@/hooks/useTempGrid'
 import { gridColorState } from '@/store/gridAtom'
 import { gridDisplaySelector } from '@/store/settingAtom'
-import { POLYGON_TYPE } from '@/common/common'
+import { MENU, POLYGON_TYPE } from '@/common/common'
+import useMenu from '@/hooks/common/useMenu'
 
 export function useEvent() {
   const canvas = useRecoilValue(canvasState)
@@ -25,6 +26,7 @@ export function useEvent() {
   const setCanvasZoom = useSetRecoilState(canvasZoomState)
   const gridColor = useRecoilValue(gridColorState)
   const isGridDisplay = useRecoilValue(gridDisplaySelector)
+  const zoom = useRecoilValue(canvasZoomState)
 
   const { adsorptionPointAddMode, adsorptionPointMode, adsorptionRange, getAdsorptionPoints, adsorptionPointAddModeStateEvent } = useAdsorptionPoint()
   const { dotLineGridSetting, interval, getClosestLineGrid } = useDotLineGrid()
@@ -59,6 +61,13 @@ export function useEvent() {
     addDefaultEvent()
   }
 
+  useEffect(() => {
+    const whiteMenus = [MENU.BATCH_CANVAS.SURFACE_SHAPE_BATCH, MENU.BATCH_CANVAS.OBJECT_BATCH, MENU.MODULE_CIRCUIT_SETTING.BASIC_SETTING]
+    if (canvas && !whiteMenus.includes(currentMenu)) {
+      addCanvasMouseEventListener('mouse:move', defaultMouseMoveEvent)
+    }
+  }, [zoom])
+
   const addDefaultEvent = () => {
     //default Event 추가
     addCanvasMouseEventListener('mouse:move', defaultMouseMoveEvent)
@@ -280,7 +289,7 @@ export function useEvent() {
   }
 
   const drawMouseLine = (pointer) => {
-    const horizontalLine = new fabric.Line([-4 * canvas.width, pointer.y, 4 * canvas.width, pointer.y], {
+    const horizontalLine = new fabric.Line([-2 * canvas.width, pointer.y, 2 * canvas.width, pointer.y], {
       stroke: 'red',
       strokeWidth: 1,
       selectable: false,
@@ -288,7 +297,7 @@ export function useEvent() {
     })
 
     // 세로선
-    const verticalLine = new fabric.Line([pointer.x, -4 * canvas.height, pointer.x, 4 * canvas.height], {
+    const verticalLine = new fabric.Line([pointer.x, -2 * canvas.height, pointer.x, 2 * canvas.height], {
       stroke: 'red',
       strokeWidth: 1,
       selectable: false,

src/hooks/usePolygon.js

@@ -1193,7 +1193,7 @@ export const usePolygon = () => {
       })
 
       canvas.add(roof)
-      // addLengthText(roof)
+      addLengthText(roof)
       canvas.remove(polygon)
       canvas.renderAll()
     })