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 19:50:57 +09:00
parent 22831a4da3
commit f7ce90d921
3 changed files with 74 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,12 +11,13 @@ import WithDraggable from '@/components/common/draggable/WithDraggable'
import { useCanvas } from '@/hooks/useCanvas'
import { useRecoilValue } from 'recoil'
import { canvasState } from '@/store/canvasAtom'
import { useImgLoader } from '@/hooks/floorPlan/useImgLoader'
// import { initImageLoaderPopup } from '@/lib/planAction'
export default function ImgLoad() {
const { currentCanvasPlan, setCurrentCanvasPlan } = usePlan()
const { getMessage } = useMessage()
const { canvas, handleCanvasToPng } = useCanvas()
const { canvas } = useCanvas()
const { floorPlanState, setFloorPlanState } = useContext(FloorPlanContext)
const {
refImage,
@ -32,6 +33,7 @@ export default function ImgLoad() {
handleMapImageDown,
handleAddressDelete,
} = useRefFiles()
const { handleCanvasToPng } = useImgLoader()
const handleModal = () => {
setFloorPlanState({ ...floorPlanState, refFileModalOpen: false, toggleRotate: false })
@ -151,6 +153,7 @@ export default function ImgLoad() {
<button className="btn-frame modal act" onClick={handleModal}>
{getMessage('common.finish')}
</button>
<button className="btn-frame modal act" onClick={() => handleCanvasToPng(1)}></button>
</div>
</div>
</div>

70
src/hooks/floorPlan/useImgLoader.js Normal file
View File

@ -0,0 +1,70 @@
import { useRecoilValue } from 'recoil'
import { canvasState } from '@/store/canvasAtom'
import { useCanvas } from '../useCanvas'
import { useAxios } from '../useAxios'
import { usePlan } from '../usePlan'
import { POLYGON_TYPE } from '@/common/common'
/**
* 이미지 로더 hook
* @returns {function} handleCanvasToPng
*/
export function useImgLoader() {
const canvas = useRecoilValue(canvasState)
const { removeMouseLines } = useCanvas()
const { currentCanvasPlan } = usePlan()
const { post } = useAxios()
/**
* 이미지 저장 시 왼쪽 위, 오른쪽 아래 좌표
* 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()
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 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)
}
return { handleCanvasToPng }
}

67
src/hooks/useCanvas.js
View File

@ -24,9 +24,7 @@ export function useCanvas(id) {
const [canvasSize] = useRecoilState(canvasSizeState)
const [fontSize] = useRecoilState(fontSizeState)
const { setCanvasForEvent, attachDefaultEventOnCanvas } = useCanvasEvent()
const { post } = useAxios()
const {} = useFont()
const { currentCanvasPlan, setCurrentCanvasPlan } = usePlan()
/**
* 처음 셋팅
@ -544,70 +542,6 @@ 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',
@ -655,6 +589,5 @@ export function useCanvas(id) {
handleCadImageInit,
backImg,
setBackImg,
handleCanvasToPng,
}
}