Merge pull request '물건정보에서 저장이후 그림으로 클릭시 에러발생' (#104) from feature/ysCha into dev

Reviewed-on: #104

package.json

@@ -26,6 +26,7 @@
     "framer-motion": "^11.2.13",
     "fs": "^0.0.1-security",
     "iron-session": "^8.0.2",
+    "jimp": "^1.6.0",
     "js-cookie": "^3.0.5",
     "mathjs": "^13.0.2",
     "mssql": "^11.0.1",

src/app/api/image/canvas/route.js

@@ -1,7 +1,8 @@
 import { NextResponse } from 'next/server'
-import { S3Client, PutObjectCommand, DeleteObjectCommand, GetObjectCommand } from '@aws-sdk/client-s3'
-import sharp from 'sharp'
+import { DeleteObjectCommand, GetObjectCommand, PutObjectCommand, S3Client } from '@aws-sdk/client-s3'
 import { v4 as uuidv4 } from 'uuid'
+import { Jimp } from 'jimp'
+
 const Bucket = process.env.AMPLIFY_BUCKET
 const s3 = new S3Client({
   region: process.env.AWS_REGION,
@@ -23,8 +24,6 @@ const checkArea = (obj) => {
 
 const cropImage = async (Key, width, height, left, top) => {
   try {
-    const checkResult = checkArea({ width, height, left, top })
-
     // Get the image from S3
     const { Body } = await s3.send(
       new GetObjectCommand({
@@ -33,28 +32,45 @@ const cropImage = async (Key, width, height, left, top) => {
       }),
     )
 
-    // Convert stream to buffer
     const chunks = []
     for await (const chunk of Body) {
       chunks.push(chunk)
     }
-    const imageBuffer = Buffer.concat(chunks)
+    const buffer = Buffer.concat(chunks)
 
-    let processedImage
-    if (!checkResult) {
-      processedImage = await sharp(imageBuffer).toBuffer()
-    } else {
-      processedImage = await sharp(imageBuffer)
-        .extract({
-          width: parseInt(width),
-          height: parseInt(height),
-          left: parseInt(left),
-          top: parseInt(top),
-        })
-        .png()
-        .toBuffer()
-    }
-    return processedImage
+    const image = await Jimp.read(buffer)
+
+    image.autocrop({ tolerance: 0.0002, leaveBorder: 10 })
+    return await image.getBuffer('image/png')
+
+    // Convert stream to buffer
+    // const chunks = []
+    // for await (const chunk of Body) {
+    //   chunks.push(chunk)
+    // }
+    // const imageBuffer = Buffer.concat(chunks)
+
+    // const image = await Jimp.read(Body)
+
+    // if (!checkResult) {
+    //   processedImage = await image.toBuffer()
+    // }
+
+    //let processedImage
+    // if (!checkResult) {
+    //   processedImage = await sharp(imageBuffer).toBuffer()
+    // } else {
+    //   processedImage = await sharp(imageBuffer)
+    //     .extract({
+    //       width: parseInt(width),
+    //       height: parseInt(height),
+    //       left: parseInt(left),
+    //       top: parseInt(top),
+    //     })
+    //     .png()
+    //     .toBuffer()
+    // }
+    // return processedImage
   } catch (error) {
     console.error('Error processing image:', error)
     throw error

src/components/floor-plan/CanvasMenu.jsx

@@ -4,7 +4,7 @@ import { useContext, useEffect, useState } from 'react'
 
 import { usePathname, useRouter, useSearchParams } from 'next/navigation'
 
-import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
+import { useRecoilState, useRecoilValue, useResetRecoilState, useSetRecoilState } from 'recoil'
 
 import { v4 as uuidv4 } from 'uuid'
 
@@ -98,7 +98,7 @@ export default function CanvasMenu(props) {
   const [lockButtonStyle, setLockButtonStyle] = useState('') //잠금 버튼
 
   const setFloorPlanObjectNo = useSetRecoilState(floorPlanObjectState) //견적서 화면용 물건번호리코일
-
+  const resetCommonUtils = useResetRecoilState(commonUtilsState)
   // 발전시뮬레이션 메뉴 이동
   const { objectNo, pid } = floorPlanState
 
@@ -166,6 +166,7 @@ export default function CanvasMenu(props) {
   }
 
   const onClickNav = async (menu) => {
+    resetCommonUtils()
     switch (menu.type) {
       case 'drawing':
         swalFire({

src/components/floor-plan/MenuDepth01.jsx

@@ -5,9 +5,10 @@ import { useEffect } from 'react'
 import { useMessage } from '@/hooks/useMessage'
 import useMenu from '@/hooks/common/useMenu'
 import { canvasState, currentMenuState } from '@/store/canvasAtom'
-import { useRecoilState, useRecoilValue } from 'recoil'
+import { useRecoilState, useRecoilValue, useResetRecoilState } from 'recoil'
 import { subMenusState } from '@/store/menuAtom'
 import { useCanvasMenu } from '@/hooks/common/useCanvasMenu'
+import { commonUtilsState } from '@/store/commonUtilsAtom'
 
 export default function MenuDepth01() {
   const canvas = useRecoilValue(canvasState)
@@ -16,8 +17,10 @@ export default function MenuDepth01() {
   const { selectedMenu, setSelectedMenu } = useCanvasMenu()
   const [currentMenu, setCurrentMenu] = useRecoilState(currentMenuState)
   const subMenus = useRecoilValue(subMenusState)
+  const resetCommonUtils = useResetRecoilState(commonUtilsState)
 
   const onClickMenu = ({ id, menu }) => {
+    resetCommonUtils()
     if (menu === currentMenu) {
       handleMenu(selectedMenu)
     } else {

src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx

@@ -25,6 +25,8 @@ import { useCanvasPopupStatusController } from '@/hooks/common/useCanvasPopupSta
 import { useImgLoader } from '@/hooks/floorPlan/useImgLoader'
 import { usePlan } from '@/hooks/usePlan'
 import { QcastContext } from '@/app/QcastProvider'
+import { fabric } from 'fabric'
+import { fontSelector } from '@/store/fontAtom'
 
 const ALLOCATION_TYPE = {
   AUTO: 'auto',
@@ -44,6 +46,9 @@ export default function CircuitTrestleSetting({ id }) {
   const { managementState, setManagementState } = useContext(GlobalDataContext)
   const selectedModules = useRecoilValue(selectedModuleState)
   const { getPcsAutoRecommendList, getPcsVoltageChk, getPcsVoltageStepUpList, getPcsManualConfChk } = useMasterController()
+  const flowText = useRecoilValue(fontSelector('flowText'))
+  const lengthText = useRecoilValue(fontSelector('lengthText'))
+  const circuitNumberText = useRecoilValue(fontSelector('circuitNumberText'))
 
   // 회로할당(승합설정)에서 선택된 값들을 저장할 상태 추가
   const [selectedStepUpValues, setSelectedStepUpValues] = useState({})
@@ -102,10 +107,26 @@ export default function CircuitTrestleSetting({ id }) {
     }
   }, [])
 
-  const handleZoomClear = () => {
+  // 캡쳐 전 처리
+  const beforeCapture = () => {
+    // setCanvasZoom(100)
+    const x = canvas.width / 2
+    const y = canvas.height / 2
+    canvas.zoomToPoint(new fabric.Point(x, y), 0.5)
+    changeFontSize('lengthText', '28')
+    changeFontSize('circuitNumber', '28')
+    changeFontSize('flowText', '28')
+    canvas.renderAll()
+  }
+
+  // 캡쳐 후 처리
+  const afterCapture = () => {
     setCanvasZoom(100)
     canvas.set({ zoom: 1 })
     canvas.viewportTransform = [1, 0, 0, 1, 0, 0]
+    changeFontSize('lengthText', lengthText.fontSize.value)
+    changeFontSize('circuitNumber', circuitNumberText.fontSize.value)
+    changeFontSize('flowText', flowText.fontSize.value)
     canvas.renderAll()
   }
 
@@ -350,7 +371,7 @@ export default function CircuitTrestleSetting({ id }) {
 
   // 회로할당(승압설정) 저장 버튼 클릭 시
   const onApply = async () => {
-    handleZoomClear()
+    beforeCapture()
     setAllModuleSurfaceIsComplete(false)
 
     setIsGlobalLoading(true)
@@ -361,12 +382,9 @@ export default function CircuitTrestleSetting({ id }) {
         obj.pcses = getStepUpListData()
       })
 
-    setViewCircuitNumberTexts(false)
-
     handleCanvasToPng(1)
 
     //회로할당 저장 시 result=null인 경우에도 회로번호 텍스트 표시 유지 처리
-    setViewCircuitNumberTexts(true)
 
     // 회로할당 저장 클릭 시
     // 가대 및 지지금구 설치
@@ -382,6 +400,7 @@ export default function CircuitTrestleSetting({ id }) {
 
     if (result) {
       handleCanvasToPng(2)
+      afterCapture()
       // 견적서 저장
       await saveEstimate(result)
     } else {
@@ -391,6 +410,16 @@ export default function CircuitTrestleSetting({ id }) {
     // removeNotAllocationModules()
   }
 
+  const changeFontSize = (name, size) => {
+    const textObjs = canvas?.getObjects().filter((obj) => obj.name === name)
+    textObjs.forEach((obj) => {
+      obj.set({
+        fontSize: size,
+      })
+    })
+    canvas.renderAll()
+  }
+
   // 이전 버튼 클릭 시
   const onClickPrev = () => {
     // setAllocationType(ALLOCATION_TYPE.AUTO)

src/components/management/StuffSubHeader.jsx

@@ -56,19 +56,20 @@ export default function StuffSubHeader({ type }) {
    */
   const moveFloorPlan = () => {
     setFloorPlanObjectNo({ floorPlanObjectNo: objectNo })
+
     const param = {
-      pid: managementState?.planList?.length === 0 ? '1' : managementState?.planList[0].planNo,
+      pid: managementState?.planList?.length > 0 ? managementState?.planList[0].planNo : '1',
       objectNo: objectNo,
     }
 
-    if (managementState?.planList?.length === 0) {
-      setSelectedMenu('surface')
-    } else {
+    if (managementState?.planList?.length > 0) {
       if (managementState?.planList[0].estimateDate) {
         setSelectedMenu('module')
       } else {
         setSelectedMenu('surface')
       }
+    } else {
+      setSelectedMenu('surface')
     }
 
     const url = `/floor-plan?${queryStringFormatter(param)}`

src/hooks/common/useCommonUtils.js

@@ -1,11 +1,11 @@
 import { useEffect } from 'react'
-import { useRecoilState, useRecoilValue } from 'recoil'
+import { useRecoilState, useRecoilValue, useResetRecoilState } from 'recoil'
 import { wordDisplaySelector } from '@/store/settingAtom'
 import { useEvent } from '@/hooks/useEvent'
 import { checkLineOrientation, getDistance } from '@/util/canvas-util'
 import { commonUtilsState, dimensionLineSettingsState } from '@/store/commonUtilsAtom'
 import { fontSelector } from '@/store/fontAtom'
-import { canvasState } from '@/store/canvasAtom'
+import { canvasState, currentMenuState } from '@/store/canvasAtom'
 import { v4 as uuidv4 } from 'uuid'
 import { usePopup } from '@/hooks/usePopup'
 import Distance from '@/components/floor-plan/modal/distance/Distance'
@@ -16,7 +16,7 @@ import { BATCH_TYPE } from '@/common/common'
 export function useCommonUtils() {
   const canvas = useRecoilValue(canvasState)
   const wordDisplay = useRecoilValue(wordDisplaySelector)
-  const { addCanvasMouseEventListener, addDocumentEventListener, initEvent } = useEvent()
+  const { addCanvasMouseEventListener, addDocumentEventListener, initEvent, removeMouseEvent } = useEvent()
   const dimensionSettings = useRecoilValue(dimensionLineSettingsState)
   const dimensionLineTextFont = useRecoilValue(fontSelector('dimensionLineText'))
   const lengthTextFont = useRecoilValue(fontSelector('lengthText'))
@@ -27,12 +27,14 @@ export function useCommonUtils() {
   const { applyDormers } = useObjectBatch({})
 
   useEffect(() => {
-    if (commonUtils.text || !commonUtils.text) {
     commonTextMode()
-    } else if (commonUtils.dimension) {
+    if (commonUtils.dimension) {
       commonDimensionMode()
-    } else if (commonUtils.distance) {
+      return
+    }
+    if (commonUtils.distance) {
       commonDistanceMode()
+      return
     }
   }, [commonUtils, dimensionSettings, commonTextFont, dimensionLineTextFont])
 
@@ -72,8 +74,17 @@ export function useCommonUtils() {
         })
       }, 100)
     } else {
+      removeMouseEvent('mouse:down')
       const activeObject = canvas?.getActiveObject()
-      if (activeObject && activeObject.name === 'commonText') {
+      const commonTexts = canvas?.getObjects().filter((obj) => obj.name === 'commonText')
+      if (commonTexts) {
+        commonTexts.forEach((text) => {
+          if (text.text === '') {
+            canvas?.remove(text)
+          }
+        })
+      }
+      /*if (activeObject && activeObject.name === 'commonText') {
         if (activeObject && activeObject.isEditing) {
           if (activeObject.text === '') {
             canvas?.remove(activeObject)
@@ -87,7 +98,7 @@ export function useCommonUtils() {
           })
           canvas.renderAll()
         }
-      }
+      }*/
 
       initEvent()
     }

src/hooks/roofcover/useRoofAllocationSetting.js

@@ -314,7 +314,8 @@ export function useRoofAllocationSetting(id) {
     setSurfaceShapePattern(currentObject, roofDisplay.column, false, selectedRoofMaterial, true)
     drawDirectionArrow(currentObject)
     modifyModuleSelectionData()
-    closeAll()
+    // closeAll()
+    closePopup(id)
     basicSettingSave()
     setModuleSelectionData({ ...moduleSelectionData, roofConstructions: newRoofList })
   }

src/hooks/usePopup.js

@@ -1,5 +1,7 @@
-import { useRecoilState } from 'recoil'
+import { useRecoilState, useResetRecoilState } from 'recoil'
 import { contextPopupState, popupState } from '@/store/popupAtom'
+import { useEffect } from 'react'
+import { commonUtilsState } from '@/store/commonUtilsAtom'
 
 /**
  * 팝업 관리 훅