qcast3/qcast-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

📌fix: 견적서 이미지 전송기능 추가

Browse Source
This commit is contained in:
yoosangwook 2025-02-07 17:53:23 +09:00
parent 2de4739cf0
commit f63db78f4b
3 changed files with 102 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/floor-plan/modal/ImgLoad.jsx
View File

@ -11,8 +11,13 @@ import WithDraggable from '@/components/common/draggable/WithDraggable'
import { useCanvas } from '@/hooks/useCanvas'
import { useRecoilValue } from 'recoil'
import { canvasState } from '@/store/canvasAtom'
import { initImageLoaderPopup } from '@/lib/planAction'
export default function ImgLoad() {
const { currentCanvasPlan, setCurrentCanvasPlan } = usePlan()
const { getMessage } = useMessage()
const { canvas, handleCanvasToPng } = useCanvas()
const { floorPlanState, setFloorPlanState } = useContext(FloorPlanContext)
const {
refImage,
queryRef,
@ -27,10 +32,6 @@ export default function ImgLoad() {
handleMapImageDown,
handleAddressDelete,
} = useRefFiles()
const { currentCanvasPlan, setCurrentCanvasPlan } = usePlan()
const { getMessage } = useMessage()
const canvas = useRecoilValue(canvasState)
const { floorPlanState, setFloorPlanState } = useContext(FloorPlanContext)
const handleModal = () => {
setFloorPlanState({ ...floorPlanState, refFileModalOpen: false, toggleRotate: false })
@ -44,6 +45,9 @@ export default function ImgLoad() {
useEffect(() => {
console.log('🚀 ~ ImgLoad ~ floorPlanState.refFileModalOpen:', floorPlanState.refFileModalOpen)
console.log('🚀 ~ ImgLoad ~ currentCanvasPlan:', currentCanvasPlan)
if (floorPlanState.refFileModalOpen) {
// initImageLoaderPopup({ objectNo: currentCanvasPlan.objectNo, planNo: currentCanvasPlan.planNo })
}
}, [floorPlanState.refFileModalOpen])
useEffect(() => {
@ -68,9 +72,9 @@ export default function ImgLoad() {
}, [currentCanvasPlan])
return (
<WithDraggable isShow={floorPlanState.refFileModalOpen} pos={{ x: 1000, y: 200 }} handle=".modal">
<WithDraggable isShow={floorPlanState.refFileModalOpen} pos={{ x: 1000, y: 200 }}>
<div className={`modal-pop-wrap r`}>
<div className="modal-head">
<div className="modal-head modal-handle">
<h1 className="title">{getMessage('common.input.file')}</h1>
{/* <button className="modal-close">닫기</button> */}
</div>

37
src/hooks/common/useRefFiles.js
View File

@ -15,8 +15,8 @@ export function useRefFiles() {
const [currentBgImage, setCurrentBgImage] = useState(null)
const queryRef = useRef(null)
const [currentCanvasPlan, setCurrentCanvasPlan] = useRecoilState(currentCanvasPlanState)
const canvas = useRecoilValue(canvasState)
const { handleBackImageLoadToCanvas } = useCanvas()
// const canvas = useRecoilValue(canvasState)
const { canvas, handleBackImageLoadToCanvas } = useCanvas()
const { swalFire } = useSwal()
const { get, post, promisePost } = useAxios()
@ -145,7 +145,11 @@ export function useRefFiles() {
console.log('🚀 ~ useEffect ~ currentBgImage:', currentBgImage)
// handleBackImageLoadToCanvas(`plan-images/${currentCanvasPlan.id}.png`)
handleBackImageLoadToCanvas(currentBgImage)
setCurrentCanvasPlan((prev) => ({ ...prev, bgImageName: refImage?.name ?? null, mapPositionAddress: queryRef.current.value }))
setCurrentCanvasPlan((prev) => ({
...prev,
bgImageName: refImage?.name ?? null,
mapPositionAddress: queryRef.current.value,
}))
}, [currentBgImage])
/**
@ -158,7 +162,10 @@ export function useRefFiles() {
// formData.append('fileName', currentCanvasPlan.id)
// const res = await post({ url: `${process.env.NEXT_PUBLIC_API_SERVER_PATH}/api/image-upload`, data: formData })
const res = await post({ url: `${process.env.NEXT_PUBLIC_HOST_URL}/image/upload`, data: formData })
const res = await post({
url: `${process.env.NEXT_PUBLIC_HOST_URL}/image/upload`,
data: formData,
})
console.log('🚀 ~ handleUploadImageRefFile ~ res:', res)
// const image = await readImage(res.filePath)
// console.log('🚀 ~ handleUploadImageRefFile ~ file:', image)
@ -176,7 +183,10 @@ export function useRefFiles() {
const res = await post({ url: converterUrl, data: formData })
console.log('🚀 ~ handleUploadConvertRefFile ~ res:', res)
const result = await post({ url: `${process.env.NEXT_PUBLIC_HOST_URL}/cad/convert`, data: res })
const result = await post({
url: `${process.env.NEXT_PUBLIC_HOST_URL}/cad/convert`,
data: res,
})
console.log('🚀 ~ handleUploadConvertRefFile ~ result:', result)
setCurrentBgImage(`${process.env.NEXT_PUBLIC_HOST_URL}${result.filePath}`)
setRefImage(res.Files[0].FileData)
@ -199,23 +209,6 @@ export function useRefFiles() {
setRefFileMethod(e.target.value)
}
/**
* 이미지 저장 시 왼쪽 위, 오른쪽 아래 좌표
* return [start, end]
*/
const getImageCoordinates = () => {
const margin = 20
const minX = canvas.getObjects().reduce((acc, cur) => (cur.left < acc ? cur.left : acc), 0)
const minY = canvas.getObjects().reduce((acc, cur) => (cur.top < acc ? cur.top : acc), 0)
const maxX = canvas.getObjects().reduce((acc, cur) => (cur.left + cur.width > acc ? cur.left + cur.width : acc), 0)
const maxY = canvas.getObjects().reduce((acc, cur) => (cur.top + cur.height > acc ? cur.top + cur.height : acc), 0)
return [
{ x: minX - margin, y: minY - margin },
{ x: maxX + margin, y: maxY + margin },
]
}
return {
refImage,
queryRef,

87
src/hooks/useCanvas.js
View File

@ -13,7 +13,8 @@ import { writeImage } from '@/lib/canvas'
import { useCanvasEvent } from '@/hooks/useCanvasEvent'
import { useAxios } from '@/hooks/useAxios'
import { useFont } from '@/hooks/common/useFont'
import { OBJECT_PROTOTYPE, RELOAD_TYPE_PROTOTYPE, SAVE_KEY } from '@/common/common'
import { OBJECT_PROTOTYPE, POLYGON_TYPE, RELOAD_TYPE_PROTOTYPE, SAVE_KEY } from '@/common/common'
import { usePlan } from './usePlan'
export function useCanvas(id) {
const [canvas, setCanvas] = useRecoilState(canvasState)
@ -25,6 +26,7 @@ export function useCanvas(id) {
const { setCanvasForEvent, attachDefaultEventOnCanvas } = useCanvasEvent()
const { post } = useAxios()
const {} = useFont()
const { currentCanvasPlan, setCurrentCanvasPlan } = usePlan()
/**
* 처음 셋팅
@ -383,18 +385,18 @@ export function useCanvas(id) {
console.log('err', err)
})
const canvasStatus = addCanvas()
// const canvasStatus = addCanvas()
const patternData = {
userId: userId,
imageName: title,
objectNo: 'test123240822001',
canvasStatus: JSON.stringify(canvasStatus).replace(/"/g, '##'),
}
// const patternData = {
// userId: userId,
// imageName: title,
// objectNo: 'test123240822001',
// canvasStatus: JSON.stringify(canvasStatus).replace(/"/g, '##'),
// }
await post({ url: '/api/canvas-management/canvas-statuses', data: patternData })
// await post({ url: '/api/canvas-management/canvas-statuses', data: patternData })
setThumbnails((prev) => [...prev, { imageName: `/canvasState/${title}.png`, userId, canvasStatus: JSON.stringify(canvasStatus) }])
// setThumbnails((prev) => [...prev, { imageName: `/canvasState/${title}.png`, userId, canvasStatus: JSON.stringify(canvasStatus) }])
}
const handleFlip = () => {
@ -542,6 +544,70 @@ export function useCanvas(id) {
canvas.clear()
}
/**
* 이미지 저장 시 왼쪽 위, 오른쪽 아래 좌표
* return [start, end]
*/
const getImageCoordinates = () => {
const margin = 20
const objects = canvas.getObjects().filter((obj) => [POLYGON_TYPE.ROOF, 'lengthText', 'arrow'].includes(obj.name))
const minX = objects.reduce((acc, cur) => (cur.left < acc ? cur.left : acc), objects[0].left)
const minY = objects.reduce((acc, cur) => (cur.top < acc ? cur.top : acc), objects[0].top)
const maxX = objects.reduce((acc, cur) => (cur.left + cur.width > acc ? cur.left + cur.width : acc), 0)
const maxY = objects.reduce((acc, cur) => (cur.top + cur.height > acc ? cur.top + cur.height : acc), 0)
return [
{ x: minX - margin, y: minY - margin },
{ x: maxX + margin, y: maxY + margin },
]
}
/**
* 캔버스를 이미지로 저장
* @param {integer} type 1: 모듈만 있는 상태, 2: 가대까지 올린 상태
*/
const handleCanvasToPng = async (type) => {
removeMouseLines()
// const currentCanvasStatus = canvas?.toDataURL('image/png').replace('data:image/png;base64,', '')
// const currentCanvasStatus = canvas
// ?.toDataURL({
// width: canvas.width,
// height: canvas.height,
// left: 0,
// top: 0,
// format: 'png',
// })
// .replace('data:image/png;base64,', '')
canvas.getObjects('image').forEach((obj) => {
if (obj.getSrc) {
const img = new Image()
img.crossOrigin = 'anonymous'
img.src = obj.getSrc()
obj.setElement(img)
}
})
canvas.renderAll()
// const dataURL = canvas.toDataURL({
// format: 'png',
// quality: 1,
// })
const res = await post({
url: `${process.env.NEXT_PUBLIC_HOST_URL}/image/canvas`,
data: {
objectNo: currentCanvasPlan.objectNo,
planNo: currentCanvasPlan.planNo,
type,
canvasToPng: canvas.toDataURL('image/png').replace('data:image/png;base64,', ''),
coordinates: getImageCoordinates(),
},
})
console.log('🚀 ~ handleCanvasToPng ~ res:', res)
}
const getCurrentCanvas = () => {
return canvas.toJSON([
'selectable',
@ -589,5 +655,6 @@ export function useCanvas(id) {
handleCadImageInit,
backImg,
setBackImg,
handleCanvasToPng,
}
}