오브젝트 배치 리사이즈 수정 및 그림자 자유 모드

src/components/floor-plan/modal/object/SizeSetting.jsx

@@ -33,9 +33,9 @@ export default function SizeSetting(props) {
     const height = heightRef.current.value
 
     if (target.name === BATCH_TYPE.OPENING || target.name === BATCH_TYPE.SHADOW) {
-      resizeObjectBatch(settingTarget, target, width, height)
+      resizeObjectBatch(settingTarget, target, width, height, id)
     } else if (target.name === POLYGON_TYPE.ROOF) {
-      resizeSurfaceShapeBatch(settingTarget, target, width, height)
+      resizeSurfaceShapeBatch(settingTarget, target, width, height, id)
     }
   }
 
@@ -87,7 +87,7 @@ export default function SizeSetting(props) {
             </div>
           </div>
           <div className="grid-btn-wrap">
-            <button className="btn-frame modal act" onClick={() => handleReSizeObject()}>
+            <button className="btn-frame modal act" onClick={() => handleReSizeObject(id)}>
               {getMessage('write')}
             </button>
           </div>

src/hooks/object/useObjectBatch.js

@@ -22,6 +22,7 @@ import { v4 as uuidv4 } from 'uuid'
 import { fontSelector } from '@/store/fontAtom'
 import { useRoofFn } from '@/hooks/common/useRoofFn'
 import { roofDisplaySelector } from '@/store/settingAtom'
+import { usePopup } from '@/hooks/usePopup'
 
 export function useObjectBatch({ isHidden, setIsHidden }) {
   const { getMessage } = useMessage()
@@ -33,6 +34,7 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
   const { setSurfaceShapePattern } = useRoofFn()
   const lengthTextFont = useRecoilValue(fontSelector('lengthText'))
   const roofDisplay = useRecoilValue(roofDisplaySelector)
+  const { closePopup } = usePopup()
 
   useEffect(() => {
     if (canvas) {
@@ -160,6 +162,8 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
           const rectPolygon = pointsToTurfPolygon(rectToPolygon(rect))
           const selectedSurfacePolygon = polygonToTurfPolygon(selectedSurface)
 
+          //그림자는 배치면이 겹친부분에도 그려져야 한다
+          if (rect.name === BATCH_TYPE.OPENING_TEMP) {
             //지붕 밖으로 그렸을때
             if (!turf.booleanWithin(rectPolygon, selectedSurfacePolygon)) {
               swalFire({ text: getMessage('batch.object.outside.roof'), icon: 'error' })
@@ -167,6 +171,7 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
               deleteTempObjects()
               return
             }
+          }
 
           if (!isCrossChecked) {
             const preObjects = canvas?.getObjects().filter((obj) => obj.name === BATCH_TYPE.OPENING || obj.name === BATCH_TYPE.SHADOW)
@@ -242,6 +247,8 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
           const rectPolygon = pointsToTurfPolygon(rectToPolygon(rect))
           const selectedSurfacePolygon = polygonToTurfPolygon(selectedSurface)
 
+          //그림자는 배치면이 겹친부분에도 그려져야 한다
+          if (rect.name === BATCH_TYPE.OPENING_TEMP) {
             //지붕 밖으로 그렸을때
             if (!turf.booleanWithin(rectPolygon, selectedSurfacePolygon)) {
               swalFire({ text: getMessage('batch.object.outside.roof'), icon: 'error' })
@@ -249,6 +256,7 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
               deleteTempObjects()
               return
             }
+          }
 
           if (!isCrossChecked) {
             const preObjects = canvas?.getObjects().filter((obj) => obj.name === BATCH_TYPE.OPENING || obj.name === BATCH_TYPE.SHADOW)
@@ -1269,7 +1277,7 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
     return { leftPoints, rightPoints, groupPoints }
   }
 
-  const resizeObjectBatch = (side, target, width, height) => {
+  const resizeObjectBatch = (side, target, width, height, popupId) => {
     const objectWidth = target.width
     const objectHeight = target.height
 
@@ -1318,6 +1326,10 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
       originY: target.originY,
       left: changedCoords.x,
       top: changedCoords.y,
+      height: toFixedWithoutRounding(height / 10, 1),
+      width: toFixedWithoutRounding(width / 10, 1),
+      scaleX: 1,
+      scaleY: 1,
     })
 
     // target.setCoords()
@@ -1327,6 +1339,8 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
     target.points = currentPoints
 
     if (target.type === 'group') reGroupObject(target)
+
+    closePopup(popupId)
   }
 
   const reGroupObject = (groupObj) => {
@@ -1402,6 +1416,8 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
             points: rectToPolygon(obj),
           })
 
+          //그림자는 아무데나 설치 할 수 있게 해달라고 함
+          if (obj.name === BATCH_TYPE.OPENING) {
             const turfObject = pointsToTurfPolygon(obj.points)
 
             if (turf.booleanWithin(turfObject, turfSurface)) {
@@ -1423,6 +1439,13 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
               lockMovementX: true,
               lockMovementY: true,
             })
+            obj.bringToFront()
+          }
+        } else {
+          obj.set({
+            lockMovementX: true,
+            lockMovementY: true,
+          })
 
           if (obj.name === BATCH_TYPE.TRIANGLE_DORMER || obj.name === BATCH_TYPE.PENTAGON_DORMER) {
             const calcLeft = obj.left - originLeft