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

수동모듈 이동시 언마운트, 도머 방향 오류 수정

Browse Source
This commit is contained in:
yjnoh 2025-02-24 16:47:27 +09:00
parent 8820711ac6
commit 9109db9b40
5 changed files with 98 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/common/common.js
View File

@ -188,6 +188,7 @@ export const SAVE_KEY = [
'onlyOffset',
'isChidory',
'textVisible',
'groupPoints',
]
export const OBJECT_PROTOTYPE = [fabric.Line.prototype, fabric.Polygon.prototype, fabric.Triangle.prototype]

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

@ -115,11 +115,6 @@ export default function BasicSetting({ id, pos = { x: 50, y: 230 } }) {
//팝업 닫기 버튼 이벤트
const handleClosePopup = (id) => {
if (tabNum == 3) {
if (isManualModuleSetup) {
setIsManualModuleSetup(false)
}
}
setIsClosePopup({ close: true, id: id })
}

8
src/components/floor-plan/modal/basic/step/Placement.jsx
View File

@ -1,7 +1,7 @@
import { forwardRef, useEffect, useState } from 'react'
import { useMessage } from '@/hooks/useMessage'
import { useModuleBasicSetting } from '@/hooks/module/useModuleBasicSetting'
import { checkedModuleState, currentCanvasPlanState } from '@/store/canvasAtom'
import { checkedModuleState, currentCanvasPlanState, isManualModuleSetupState } from '@/store/canvasAtom'
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
import { moduleSelectionDataState, selectedModuleState } from '@/store/selectedModuleOptions'
import { isObjectNotEmpty } from '@/util/common-utils'
@ -23,6 +23,8 @@ const Placement = forwardRef((props, refs) => {
const [isMultiModule, setIsMultiModule] = useState(false)
const [isManualModuleSetup, setIsManualModuleSetup] = useRecoilState(isManualModuleSetupState)
//모듈 배치면 생성
useEffect(() => {
if (moduleSelectionData) {
@ -33,6 +35,10 @@ const Placement = forwardRef((props, refs) => {
}
makeModuleInitArea(moduleSelectionData)
}
return () => {
setIsManualModuleSetup(false)
}
}, [])
//최초 지입시 체크

3
src/hooks/module/useModuleBasicSetting.js
View File

@ -22,14 +22,13 @@ import { v4 as uuidv4 } from 'uuid'
// import { useCircuitTrestle } from '@/hooks/useCirCuitTrestle'
import { isObjectNotEmpty } from '@/util/common-utils'
import { useCircuitTrestle } from '@/hooks/useCirCuitTrestle'
import { useMode } from '../useMode'
import { useMode } from '@/hooks/useMode'
export function useModuleBasicSetting(tabNum) {
const canvas = useRecoilValue(canvasState)
const { getMessage } = useMessage()
const roofDisplay = useRecoilValue(roofDisplaySelector)
const [moduleSetupSurface, setModuleSetupSurface] = useRecoilState(moduleSetupSurfaceState)
const [moduleIsSetup, setModuleIsSetup] = useRecoilState(moduleIsSetupState)
const { addCanvasMouseEventListener, initEvent, removeMouseEvent, addTargetMouseEventListener } = useEvent()
// const { setModuleStatisticsData } = useCircuitTrestle()
const { swalFire } = useSwal()

103
src/hooks/object/useObjectBatch.js
View File

@ -298,6 +298,7 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
if (buttonAct === 3) {
const bottomLength = height / (pitch * 0.25)
const bottomOffsetLength = (height + offsetRef) / (pitch * 0.25)
let groupDormerPoints = [] //나중에 offset을 위한 포인트 저장용
addCanvasMouseEventListener('mouse:move', (e) => {
isDown = true
@ -403,9 +404,8 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
direction = 'north'
}
const groupPoints = offsetRef > 0 ? triangleToPolygon(dormerOffset) : triangleToPolygon(dormer)
let splitedTriangle = offsetRef > 0 ? splitDormerTriangle(dormerOffset, directionRef) : splitDormerTriangle(dormer, directionRef)
let { leftPoints, rightPoints, groupPoints } =
offsetRef > 0 ? splitDormerTriangle(dormerOffset, directionRef) : splitDormerTriangle(dormer, directionRef)
canvas?.remove(offsetRef > 0 ? dormerOffset : dormer)
if (offsetRef > 0)
@ -416,7 +416,7 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
strokeDashArray: [0],
}) //오프셋이 있을땐 같이 도머로 만든다
const leftTriangle = new QPolygon(splitedTriangle[0], {
const leftTriangle = new QPolygon(leftPoints, {
fill: 'white',
stroke: 'black',
strokeWidth: 1,
@ -435,7 +435,7 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
fontWeight: lengthTextFont.fontWeight.value,
})
const rightTriangle = new QPolygon(splitedTriangle[1], {
const rightTriangle = new QPolygon(rightPoints, {
fill: 'white',
stroke: 'black',
strokeWidth: 1,
@ -467,6 +467,8 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
let offsetPolygon
groupDormerPoints = groupPoints
if (offsetRef > 0) {
canvas?.remove(dormer)
@ -499,7 +501,7 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
parentId: selectedSurface.id,
originX: 'center',
originY: 'center',
groupPoints: groupPoints,
groupPoints: groupDormerPoints,
})
canvas?.add(objectGroup)
@ -526,6 +528,8 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
//(동의길이 깊이)+출폭(깊이)-[(입력한 폭값)/2+출폭(폭)]*(0.25*입력한 寸)
const heightOffsetLength = height + offsetRef - (width / 2 + offsetWidthRef) * (pitch * 0.25)
let groupDormerPoints = []
addCanvasMouseEventListener('mouse:move', (e) => {
isDown = true
if (!isDown) return
@ -639,7 +643,7 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
}
const offsetMode = offsetRef > 0 || offsetWidthRef > 0 ? 'offset' : 'normal'
let splitedPentagon =
let { leftPoints, rightPoints, groupPoints } =
offsetRef > 0 || offsetWidthRef > 0
? splitDormerPentagon(dormerOffset, directionRef, offsetMode)
: splitDormerPentagon(dormer, directionRef, offsetMode)
@ -653,7 +657,7 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
strokeDashArray: [0],
}) //오프셋이 있을땐 같이 도머로 만든다
const leftPentagon = new QPolygon(splitedPentagon[0], {
const leftPentagon = new QPolygon(leftPoints, {
fill: 'transparent',
stroke: 'red',
strokeWidth: 1,
@ -670,7 +674,7 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
pitch: pitch,
})
const rightPentagon = new QPolygon(splitedPentagon[1], {
const rightPentagon = new QPolygon(rightPoints, {
fill: 'transparent',
stroke: 'red',
strokeWidth: 1,
@ -699,6 +703,8 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
let offsetPolygon
groupDormerPoints = groupPoints
if (offsetRef > 0) {
canvas?.remove(dormer)
@ -723,7 +729,6 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
}
const groupPolygon = offsetPolygon ? [leftPentagon, rightPentagon, offsetPolygon] : [leftPentagon, rightPentagon]
const groupPoints = offsetRef > 0 ? pentagonOffsetPoints : pentagonPoints
const objectGroup = new fabric.Group(groupPolygon, {
subTargetCheck: true,
@ -733,7 +738,7 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
groupYn: true,
originX: 'center',
originY: 'center',
groupPoints: groupPoints,
groupPoints: groupDormerPoints,
})
canvas?.add(objectGroup)
@ -774,6 +779,7 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
let leftPoints = []
let rightPoints = []
let groupPoints = []
if (direction === 'down') {
leftPoints = [
@ -787,6 +793,12 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
{ x: triangle.left, y: triangle.top + triangle.height },
{ x: triangle.left + halfWidth, y: triangle.top + triangle.height },
]
groupPoints = [
{ x: triangle.left, y: triangle.top },
{ x: triangle.left - halfWidth, y: triangle.top + triangle.height },
{ x: triangle.left + halfWidth, y: triangle.top + triangle.height },
]
} else if (direction === 'up') {
leftPoints = [
{ x: triangle.left, y: triangle.top },
@ -799,6 +811,12 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
{ x: triangle.left, y: triangle.top - triangle.height },
{ x: triangle.left + halfWidth, y: triangle.top - triangle.height },
]
groupPoints = [
{ x: triangle.left, y: triangle.top },
{ x: triangle.left - halfWidth, y: triangle.top - triangle.height },
{ x: triangle.left + halfWidth, y: triangle.top - triangle.height },
]
} else if (direction === 'left') {
leftPoints = [
{ x: triangle.left, y: triangle.top },
@ -811,6 +829,12 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
{ x: triangle.left - triangle.height, y: triangle.top },
{ x: triangle.left - triangle.height, y: triangle.top + halfWidth },
]
groupPoints = [
{ x: triangle.left, y: triangle.top },
{ x: triangle.left - triangle.height, y: triangle.top - halfWidth },
{ x: triangle.left - triangle.height, y: triangle.top + halfWidth },
]
} else if (direction === 'right') {
leftPoints = [
{ x: triangle.left, y: triangle.top },
@ -820,11 +844,17 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
rightPoints = [
{ x: triangle.left, y: triangle.top },
{ x: triangle.left + triangle.height, y: triangle.top },
{ x: triangle.left + triangle.height, y: triangle.top + triangle.height },
{ x: triangle.left + triangle.height, y: triangle.top - triangle.height },
]
groupPoints = [
{ x: triangle.left, y: triangle.top },
{ x: triangle.left + triangle.height, y: triangle.top + triangle.height },
{ x: triangle.left + triangle.height, y: triangle.top - triangle.height },
]
}
return [leftPoints, rightPoints]
return { leftPoints, rightPoints, groupPoints }
}
const splitDormerPentagon = (pentagon, direction, offsetMode) => {
@ -832,6 +862,7 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
let leftPoints = []
let rightPoints = []
let groupPoints = []
if (direction === 'down') {
leftPoints = [
@ -847,6 +878,14 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
{ x: points[3].x, y: points[3].y },
{ x: points[4].x, y: points[4].y },
]
groupPoints = [
{ x: points[0].x, y: points[0].y },
{ x: points[1].x, y: points[1].y },
{ x: points[2].x, y: points[3].y },
{ x: points[3].x, y: points[3].y },
{ x: points[4].x, y: points[4].y },
]
} else if (direction === 'up') {
leftPoints = [
{ x: points[0].x, y: points[0].y },
@ -861,6 +900,14 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
{ x: points[3].x, y: points[0].y - (points[2].y - points[0].y) },
{ x: points[0].x, y: points[0].y - (points[2].y - points[0].y) },
]
groupPoints = [
{ x: points[0].x, y: points[0].y }, // 기준점
{ x: points[1].x, y: points[0].y - (points[1].y - points[0].y) },
{ x: points[2].x, y: points[0].y - (points[2].y - points[0].y) },
{ x: points[3].x, y: points[0].y - (points[2].y - points[0].y) },
{ x: points[3].x, y: points[0].y - (points[1].y - points[0].y) },
]
} else if (direction === 'left') {
leftPoints = [
{ x: points[0].x, y: points[0].y },
@ -881,6 +928,20 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
},
{ x: points[0].x - (points[1].y - points[0].y) - (points[2].y - points[1].y), y: points[0].y },
]
groupPoints = [
{ x: points[0].x, y: points[0].y },
{ x: points[0].x - (points[1].y - points[0].y), y: points[0].y - (points[0].x - points[1].x) },
{
x: points[0].x - (points[1].y - points[0].y) - (points[2].y - points[1].y),
y: points[0].y - (points[0].x - points[1].x),
},
{
x: points[0].x - (points[1].y - points[0].y) - (points[2].y - points[1].y),
y: points[0].y + (points[0].x - points[1].x),
},
{ x: points[0].x - (points[1].y - points[0].y), y: points[0].y + (points[0].x - points[1].x) },
]
} else if (direction === 'right') {
leftPoints = [
{ x: points[0].x, y: points[0].y },
@ -901,9 +962,23 @@ export function useObjectBatch({ isHidden, setIsHidden }) {
},
{ x: points[0].x + (points[1].y - points[0].y) + (points[2].y - points[1].y), y: points[0].y },
]
groupPoints = [
{ x: points[0].x, y: points[0].y },
{ x: points[0].x + (points[1].y - points[0].y), y: points[0].y + (points[0].x - points[1].x) },
{
x: points[0].x + (points[1].y - points[0].y) + (points[2].y - points[1].y),
y: points[0].y + (points[0].x - points[1].x),
},
{
x: points[0].x + (points[1].y - points[0].y) + (points[2].y - points[1].y),
y: points[0].y - (points[0].x - points[1].x),
},
{ x: points[0].x + (points[1].y - points[0].y), y: points[0].y - (points[0].x - points[1].x) },
]
}
return [leftPoints, rightPoints]
return { leftPoints, rightPoints, groupPoints }
}
const resizeObjectBatch = (side, target, width, height) => {