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

refactor: 캔버스 변경사항 확인 방법을 실시간 오브젝트 이벤트를 감지하도록 변경

Browse Source
This commit is contained in:
Daseul Kim 2024-10-22 18:14:37 +09:00
parent cc9eee731b
commit 0ce703a392
4 changed files with 101 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/floor-plan/CanvasFrame.jsx
View File

@ -4,6 +4,7 @@ import { useEffect, useRef } from 'react'
import { useCanvas } from '@/hooks/useCanvas'
import { useEvent } from '@/hooks/useEvent'
import { usePlan } from '@/hooks/usePlan'
import { useContextMenu } from '@/hooks/useContextMenu'
import { useRecoilValue } from 'recoil'
import { currentObjectState } from '@/store/canvasAtom'
@ -19,6 +20,7 @@ export default function CanvasFrame({ plan }) {
handleZoomClear,
},
})
const { checkCanvasObjectEvent, checkUnsavedCanvasPlan } = usePlan()
const currentObject = useRecoilValue(currentObjectState)
@ -36,7 +38,41 @@ export default function CanvasFrame({ plan }) {
}
useEffect(() => {
// const checkEventName = [
// 'object:modified',
// 'object:moving',
// 'object:scaling',
// 'object:rotating',
// 'object:skewing',
// 'object:resizing',
// 'object:selected',
// 'object:added',
// 'object:removed',
// ]
canvas?.off('object:added')
canvas?.off('object:modified')
canvas?.off('object:removed')
loadCanvas()
if (plan) {
canvas?.on('object:added', (e) => {
if (e?.target.name !== 'mouseLine') {
checkCanvasObjectEvent(e, plan.id)
}
})
canvas?.on('object:modified', (e) => {
if (e?.target.name !== 'mouseLine') {
checkCanvasObjectEvent(e, plan.id)
}
})
canvas?.on('object:removed', (e) => {
if (e?.target.name !== 'mouseLine') {
checkCanvasObjectEvent(e, plan.id)
}
})
}
}, [plan, canvas])
const onClickContextMenu = (index) => {}

7
src/components/floor-plan/CanvasLayout.jsx
View File

@ -17,7 +17,7 @@ export default function CanvasLayout(props) {
const { getMessage } = useMessage()
const { swalFire } = useSwal()
const { plans, loadCanvasPlanData, handleCurrentPlan, handleAddPlan, handleDeletePlan } = usePlan()
const { plans, modifiedPlans, loadCanvasPlanData, handleCurrentPlan, handleAddPlan, handleDeletePlan } = usePlan()
useEffect(() => {
loadCanvasPlanData(session.userId, objectNo)
@ -33,7 +33,10 @@ export default function CanvasLayout(props) {
className={`canvas-page-box ${plan.isCurrent === true ? 'on' : ''}`}
onClick={() => handleCurrentPlan(session.userId, plan.id)}
>
<span>{plan.name}</span>
<span>
{plan.name}
{modifiedPlans.some((modifiedPlan) => modifiedPlan === plan.id) && ' [ M ]'}
</span>
<i
className="close"
onClick={(e) =>

77
src/hooks/usePlan.js
View File

@ -1,7 +1,7 @@
import { useEffect, useState } from 'react'
import { useRecoilState } from 'recoil'
import { v4 as uuidv4 } from 'uuid'
import { canvasState, currentCanvasPlanState, initCanvasPlansState, plansState } from '@/store/canvasAtom'
import { canvasState, currentCanvasPlanState, initCanvasPlansState, plansState, modifiedPlansState } from '@/store/canvasAtom'
import { useAxios } from '@/hooks/useAxios'
import { useMessage } from '@/hooks/useMessage'
import { useSwal } from '@/hooks/useSwal'
@ -13,6 +13,7 @@ export function usePlan() {
const [currentCanvasPlan, setCurrentCanvasPlan] = useRecoilState(currentCanvasPlanState)
const [initCanvasPlans, setInitCanvasPlans] = useRecoilState(initCanvasPlansState) // DB에 저장된 plan
const [plans, setPlans] = useRecoilState(plansState) // 전체 plan (DB에 저장된 plan + 저장 안된 새로운 plan)
const [modifiedPlans, setModifiedPlans] = useRecoilState(modifiedPlansState) // 변경된 canvas plan
const { swalFire } = useSwal()
const { getMessage } = useMessage()
@ -87,11 +88,20 @@ export function usePlan() {
}
/**
* 실시간 캔버스 상태와 DB에 저장된 캔버스 상태를 비교하여 수정 여부를 판단
* 캔버스에서 발생하는 실시간 오브젝트 이벤트를 감지하여 수정 여부를 판단
*/
const checkModifiedCanvasPlan = () => {
const checkCanvasObjectEvent = (e, planId) => {
if (!modifiedPlans.some((modifiedPlan) => modifiedPlan === planId) && checkModifiedCanvasPlan(planId)) {
setModifiedPlans([...modifiedPlans, planId])
}
}
/**
* 현재 캔버스 상태와 DB에 저장된 캔버스 상태를 비교하여 수정 여부를 판단
*/
const checkModifiedCanvasPlan = (planId) => {
const canvasStatus = currentCanvasData()
const initPlanData = initCanvasPlans.find((plan) => plan.id === currentCanvasPlan.id)
const initPlanData = initCanvasPlans.find((plan) => plan.id === planId)
if (!initPlanData) {
// 새로운 캔버스
@ -110,6 +120,21 @@ export function usePlan() {
.map((obj) => obj.id)
.sort()
}
/**
* 캔버스에 저장되지 않은 변경사항이 있는 경우 저장 여부를 확인 후 저장
*/
const checkUnsavedCanvasPlan = async () => {
if (modifiedPlans.length > 0) {
swalFire({
text: `${currentCanvasPlan.name} ` + getMessage('plan.message.confirm.save'),
type: 'confirm',
confirmFn: async () => {
await saveCanvas(userId)
},
})
setModifiedPlans([])
}
}
/**
* DB에 저장된 데이터를 canvas에서 사용할 수 있도록 포맷화
@ -139,7 +164,6 @@ export function usePlan() {
* objectNo에 해당하는 canvas 목록을 조회
*/
const getCanvasByObjectNo = async (userId, objectNo) => {
// console.log(`[GET] objectNo: ${objectNo} / userId: ${userId}`)
return get({ url: `/api/canvas-management/canvas-statuses/by-object/${objectNo}/${userId}` }).then((res) =>
res.map((item) => ({
id: item.id,
@ -163,7 +187,6 @@ export function usePlan() {
}
await promisePost({ url: '/api/canvas-management/canvas-statuses', data: planData })
.then((res) => {
swalFire({ text: getMessage('plan.message.save') })
setInitCanvasPlans((initCanvasPlans) => [...initCanvasPlans, { id: res.data, canvasStatus: canvasStatus }])
setPlans((plans) =>
plans.map((plan) =>
@ -177,6 +200,8 @@ export function usePlan() {
: plan,
),
)
setModifiedPlans((modifiedPlans) => modifiedPlans.filter((planId) => planId !== currentCanvasPlan.id))
swalFire({ text: getMessage('plan.message.save') })
})
.catch((error) => {
swalFire({ text: error.message, icon: 'error' })
@ -193,11 +218,12 @@ export function usePlan() {
}
await promisePut({ url: '/api/canvas-management/canvas-statuses', data: planData })
.then((res) => {
swalFire({ text: getMessage('plan.message.save') })
setInitCanvasPlans((initCanvasPlans) =>
initCanvasPlans.map((plan) => (plan.id === currentCanvasPlan.id ? { ...plan, canvasStatus: canvasStatus } : plan)),
)
setPlans((plans) => plans.map((plan) => (plan.id === currentCanvasPlan.id ? { ...plan, canvasStatus: canvasStatus } : plan)))
setModifiedPlans((modifiedPlans) => modifiedPlans.filter((planId) => planId !== currentCanvasPlan.id))
swalFire({ text: getMessage('plan.message.save') })
})
.catch((error) => {
swalFire({ text: error.message, icon: 'error' })
@ -222,23 +248,23 @@ export function usePlan() {
* plan 이동
* 현재 plan의 작업상태를 확인, 저장 후 이동
*/
const handleCurrentPlan = (userId, newCurrentId) => {
const handleCurrentPlan = async (userId, newCurrentId) => {
if (!currentCanvasPlan || currentCanvasPlan.id !== newCurrentId) {
if (currentCanvasPlan?.id && checkModifiedCanvasPlan()) {
swalFire({
text: `${currentCanvasPlan.name} ` + getMessage('plan.message.confirm.save'),
type: 'confirm',
confirmFn: async () => {
await saveCanvas(userId)
updateCurrentPlan(newCurrentId)
},
denyFn: () => {
updateCurrentPlan(newCurrentId)
},
})
} else {
updateCurrentPlan(newCurrentId)
if (currentCanvasPlan?.id && modifiedPlans.some((modifiedPlan) => modifiedPlan === currentCanvasPlan.id)) {
// swalFire({
// text: `${currentCanvasPlan.name} ` + getMessage('plan.message.confirm.save'),
// type: 'confirm',
// confirmFn: async () => {
// await saveCanvas(userId)
// updateCurrentPlan(newCurrentId)
// },
// denyFn: () => {
// updateCurrentPlan(newCurrentId)
// },
// })
await saveCanvas(userId)
}
updateCurrentPlan(newCurrentId)
}
}
const updateCurrentPlan = (newCurrentId) => {
@ -293,15 +319,17 @@ export function usePlan() {
if (initCanvasPlans.some((plan) => plan.id === id)) {
delCanvasById(id)
.then((res) => {
swalFire({ text: getMessage('plan.message.delete') })
setInitCanvasPlans((initCanvasPlans) => initCanvasPlans.filter((plan) => plan.id !== id))
setPlans((plans) => plans.filter((plan) => plan.id !== id))
setModifiedPlans((modifiedPlans) => modifiedPlans.filter((planId) => planId !== currentCanvasPlan.id))
swalFire({ text: getMessage('plan.message.delete') })
})
.catch((error) => {
swalFire({ text: error.message, icon: 'error' })
})
} else {
setPlans((plans) => plans.filter((plan) => plan.id !== id))
setModifiedPlans((modifiedPlans) => modifiedPlans.filter((planId) => planId !== currentCanvasPlan.id))
swalFire({ text: getMessage('plan.message.delete') })
}
@ -335,6 +363,9 @@ export function usePlan() {
return {
canvas,
plans,
modifiedPlans,
checkCanvasObjectEvent,
checkUnsavedCanvasPlan,
saveCanvas,
handleCurrentPlan,
handleAddPlan,

6
src/store/canvasAtom.js
View File

@ -270,6 +270,12 @@ export const plansState = atom({
default: [],
})
// 변경된 canvas plan 목록
export const modifiedPlansState = atom({
key: 'modifiedPlansState',
default: [],
})
export const tempGridModeState = atom({
key: 'tempGridModeState',
default: false,