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

Merge remote-tracking branch 'origin/qcast-pub' into dev

Browse Source
This commit is contained in:
김민식 2024-12-30 15:13:52 +09:00
commit 8f2f0d7e75
3 changed files with 278 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/floor-plan/modal/module/column/ColumnInsert.jsx
View File

@ -5,20 +5,22 @@ import { usePopup } from '@/hooks/usePopup'
import { useMessage } from '@/hooks/useMessage'
import { useState } from 'react'
import Image from 'next/image'
import { MODULE_INSERT_TYPE, useModule } from '@/hooks/module/useModule'
export default function ColumnInsert(props) {
const contextPopupPosition = useRecoilValue(contextPopupPositionState)
const { id, pos = contextPopupPosition, apply } = props
const { closePopup } = usePopup()
const [selectedType, setSelectedType] = useState(1)
const [selectedType, setSelectedType] = useState(MODULE_INSERT_TYPE.LEFT)
const { getMessage } = useMessage()
const { moduleColumnInsert } = useModule()
const handleApply = () => {
if (apply) apply()
moduleColumnInsert(selectedType)
closePopup(id)
}
const HandleRadioChange = (e) => {
setSelectedType(Number(e.target.value))
const handleRadioChange = (e) => {
setSelectedType(e.target.value)
}
return (
@ -36,16 +38,30 @@ export default function ColumnInsert(props) {
<div className="additional-wrap">
<div className="additional-radio-wrap">
<div className="d-check-radio pop">
<input type="radio" name="radio01" id="ra01" onChange={HandleRadioChange} value={1} checked={selectedType === 1} />
<input
type="radio"
name="radio01"
id="ra01"
onChange={handleRadioChange}
value={MODULE_INSERT_TYPE.LEFT}
checked={selectedType === MODULE_INSERT_TYPE.LEFT}
/>
<label htmlFor="ra01">{getMessage('modal.panel.column.insert.type.left')}</label>
</div>
<div className="d-check-radio pop">
<input type="radio" name="radio01" id="ra02" onChange={HandleRadioChange} value={2} checked={selectedType === 2} />
<input
type="radio"
name="radio01"
id="ra02"
onChange={handleRadioChange}
value={MODULE_INSERT_TYPE.RIGHT}
checked={selectedType === MODULE_INSERT_TYPE.RIGHT}
/>
<label htmlFor="ra02">{getMessage('modal.panel.column.insert.type.right')}</label>
</div>
</div>
<div className="additional-img-wrap">
{selectedType === 1 && (
{selectedType === MODULE_INSERT_TYPE.LEFT && (
<Image
src="/static/images/canvas/additional-edit01.svg"
alt="react"
@ -54,7 +70,7 @@ export default function ColumnInsert(props) {
style={{ width: 'auto', height: 'auto' }}
/>
)}
{selectedType === 2 && (
{selectedType === MODULE_INSERT_TYPE.RIGHT && (
<Image
src="/static/images/canvas/additional-edit02.svg"
alt="react"

30
src/components/floor-plan/modal/module/row/RowInsert.jsx
View File

@ -5,20 +5,22 @@ import { useRecoilValue } from 'recoil'
import { contextPopupPositionState } from '@/store/popupAtom'
import { usePopup } from '@/hooks/usePopup'
import { useMessage } from '@/hooks/useMessage'
import { MODULE_INSERT_TYPE, useModule } from '@/hooks/module/useModule'
export default function RowInsert(props) {
const contextPopupPosition = useRecoilValue(contextPopupPositionState)
const { id, pos = contextPopupPosition, apply } = props
const { closePopup } = usePopup()
const [selectedType, setSelectedType] = useState(1)
const [selectedType, setSelectedType] = useState(MODULE_INSERT_TYPE.TOP)
const { getMessage } = useMessage()
const { muduleRowInsert } = useModule()
const handleApply = () => {
if (apply) apply()
muduleRowInsert(selectedType)
closePopup(id)
}
const HandleRadioChange = (e) => {
setSelectedType(Number(e.target.value))
setSelectedType(e.target.value)
}
return (
@ -36,16 +38,30 @@ export default function RowInsert(props) {
<div className="additional-wrap">
<div className="additional-radio-wrap">
<div className="d-check-radio pop">
<input type="radio" name="radio01" id="ra01" onChange={HandleRadioChange} value={1} checked={selectedType === 1} />
<input
type="radio"
name="radio01"
id="ra01"
onChange={HandleRadioChange}
value={MODULE_INSERT_TYPE.TOP}
checked={selectedType === MODULE_INSERT_TYPE.TOP}
/>
<label htmlFor="ra01">{getMessage('modal.row.insert.type.up')}</label>
</div>
<div className="d-check-radio pop">
<input type="radio" name="radio01" id="ra02" onChange={HandleRadioChange} value={2} checked={selectedType === 2} />
<input
type="radio"
name="radio01"
id="ra02"
onChange={HandleRadioChange}
value={MODULE_INSERT_TYPE.BOTTOM}
checked={selectedType === MODULE_INSERT_TYPE.BOTTOM}
/>
<label htmlFor="ra02">{getMessage('modal.row.insert.type.down')}</label>
</div>
</div>
<div className="additional-img-wrap">
{selectedType === 1 && (
{selectedType === MODULE_INSERT_TYPE.TOP && (
<Image
src="/static/images/canvas/additional_bundle-edit01.svg"
alt="react"
@ -54,7 +70,7 @@ export default function RowInsert(props) {
style={{ width: 'auto', height: 'auto' }}
/>
)}
{selectedType === 2 && (
{selectedType === MODULE_INSERT_TYPE.BOTTOM && (
<Image
src="/static/images/canvas/additional_bundle-edit02.svg"
alt="react"

234
src/hooks/module/useModule.js
View File

@ -18,6 +18,13 @@ export const MODULE_REMOVE_TYPE = {
NONE: 'none',
}
export const MODULE_INSERT_TYPE = {
LEFT: 'left',
RIGHT: 'right',
TOP: 'up',
BOTTOM: 'down',
}
export function useModule() {
const canvas = useRecoilValue(canvasState)
const { swalFire } = useSwal()
@ -256,9 +263,15 @@ export function useModule() {
.getObjects()
.filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE && obj.id === modules[0].surfaceId)[0]
let [isOverlapOtherModules, isOverlapObjects, isOutsideSurface] = [[], [], []]
let moduleLength = 0
if (['up', 'down'].includes(direction)) {
moduleLength = Number(modules[modules.length - 1].top) + Number(modules[modules.length - 1].height) - Number(modules[0].top)
} else if (['left', 'right'].includes(direction)) {
moduleLength = Number(modules[modules.length - 1].left) + Number(modules[modules.length - 1].width) - Number(modules[0].left)
}
modules.forEach((module) => {
const { top, left } = getPosotion(module, direction, length, false)
const { top, left } = getPosotion(module, direction, Number(length) + Number(moduleLength), false)
const moduleOptions = { ...module, left, top, id: uuidv4() }
const rect = new QPolygon(module.getCurrentPoints(), moduleOptions)
canvas.add(rect)
@ -530,12 +543,225 @@ export function useModule() {
canvas.renderAll()
}
const moduleColumnInsert = (type) => {
const activeModule = canvas.getObjects().filter((obj) => canvas.getActiveObjects()[0].id === obj.id)[0]
const columnModules = getColumnModules(activeModule)
let otherModules = getOtherModules(columnModules)
const targetModules =
type === MODULE_INSERT_TYPE.LEFT
? otherModules.filter((module) => module.left < activeModule.left).sort((a, b) => a.left - b.left)
: otherModules.filter((module) => module.left > activeModule.left).sort((a, b) => b.left - a.left)
const objects = getObjects()
const copyModules = []
const moduleSetupSurface = canvas
.getObjects()
.filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE && obj.id === activeModule.surfaceId)[0]
let width = -1
let [isOverlapOtherModules, isOverlapObjects, isOutsideSurface] = [[], [], []]
if (targetModules.length === 0) {
swalFire({
title: '마지막 모듈입니다.',
icon: 'error',
type: 'alert',
})
return
}
canvas.discardActiveObject()
targetModules.forEach((module) => {
if (width === -1)
width = type === MODULE_INSERT_TYPE.LEFT ? Number(activeModule.left) - Number(module.left) : Number(module.left) - Number(activeModule.left)
const { top, left } = getPosotion(module, type, width, false)
module.originPos = {
left: module.left,
top: module.top,
}
module.set({ left, top })
canvas.renderAll()
if (objects.length > 0) {
isOverlapObjects.push(!checkModuleDisjointObjects(polygonToTurfPolygon(module, true), objects))
}
isOutsideSurface.push(
!turf.booleanContains(polygonToTurfPolygon(moduleSetupSurface, true), polygonToTurfPolygon(module, true)) ||
!turf.booleanWithin(polygonToTurfPolygon(module, true), polygonToTurfPolygon(moduleSetupSurface, true)),
)
module.setCoords()
})
otherModules = getOtherModules(columnModules)
columnModules.forEach((module) => {
const { top, left } = getPosotion(module, type, width, false)
const moduleOptions = { ...module, left, top, id: uuidv4() }
const copyModule = new QPolygon(module.points, moduleOptions)
canvas.add(copyModule)
copyModules.push(copyModule)
canvas.renderAll()
if (otherModules.length > 0) {
isOverlapOtherModules.push(
otherModules.some(
(otherModule) =>
turf.booleanOverlap(polygonToTurfPolygon(copyModule, true), polygonToTurfPolygon(otherModule, true)) ||
turf.booleanWithin(polygonToTurfPolygon(copyModule, true), polygonToTurfPolygon(otherModule, true)),
),
)
}
if (objects.length > 0) {
isOverlapObjects.push(!checkModuleDisjointObjects(polygonToTurfPolygon(module, true), objects))
}
isOutsideSurface.push(
!turf.booleanContains(polygonToTurfPolygon(moduleSetupSurface, true), polygonToTurfPolygon(copyModule, true)) ||
!turf.booleanWithin(polygonToTurfPolygon(copyModule, true), polygonToTurfPolygon(moduleSetupSurface, true)),
)
module.setCoords()
})
if (
isOverlapOtherModules.some((isOverlap) => isOverlap) ||
isOverlapObjects.some((isOverlap) => isOverlap) ||
isOutsideSurface.some((isOutside) => isOutside)
) {
swalFire({
title: isOverlapOtherModules.some((isOverlap) => isOverlap)
? '겹치는 모듈이 있습니다.'
: isOverlapObjects.some((isOverlap) => isOverlap)
? '모듈이 오브젝트와 겹칩니다.'
: '영역 밖',
icon: 'error',
type: 'confirm',
confirmFn: () => {
targetModules.forEach((module) => {
module.set({ top: module.originPos.top, left: module.originPos.left })
module.setCoords()
})
canvas.renderAll()
copyModules.forEach((module) => {
canvas.remove(module)
})
canvas.renderAll()
},
})
}
}
const muduleRowInsert = (type) => {
console.log('🚀 ~ muduleRowInsert ~ type:', type)
const activeModule = canvas.getObjects().filter((obj) => canvas.getActiveObjects()[0].id === obj.id)[0]
const rowModules = getRowModules(activeModule)
console.log('🚀 ~ muduleRowInsert ~ rowModules:', rowModules)
let otherModules = getOtherModules(rowModules)
const targetModules =
type === MODULE_INSERT_TYPE.TOP
? otherModules.filter((module) => module.top < activeModule.top).sort((a, b) => b.top - a.top)
: otherModules.filter((module) => module.top > activeModule.top).sort((a, b) => a.top - b.top)
console.log('🚀 ~ muduleRowInsert ~ targetModules:', targetModules)
if (targetModules.length === 0) {
swalFire({
title: '마지막 모듈입니다.',
icon: 'error',
type: 'alert',
})
return
}
const objects = getObjects()
const copyModules = []
const moduleSetupSurface = canvas
.getObjects()
.filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE && obj.id === activeModule.surfaceId)[0]
let height = -1
let [isOverlapOtherModules, isOverlapObjects, isOutsideSurface] = [[], [], []]
canvas.discardActiveObject()
targetModules.forEach((module) => {
if (height === -1)
height = type === MODULE_INSERT_TYPE.TOP ? Number(activeModule.top) - Number(module.top) : Number(module.top) - Number(activeModule.top)
const { top, left } = getPosotion(module, type, height, false)
module.originPos = {
left: module.left,
top: module.top,
}
module.set({ left, top })
canvas.renderAll()
if (objects.length > 0) {
isOverlapObjects.push(!checkModuleDisjointObjects(polygonToTurfPolygon(module, true), objects))
}
isOutsideSurface.push(
!turf.booleanContains(polygonToTurfPolygon(moduleSetupSurface, true), polygonToTurfPolygon(module, true)) ||
!turf.booleanWithin(polygonToTurfPolygon(module, true), polygonToTurfPolygon(moduleSetupSurface, true)),
)
module.setCoords()
})
otherModules = getOtherModules(rowModules)
rowModules.forEach((module) => {
const { top, left } = getPosotion(module, type, height, false)
const moduleOptions = { ...module, left, top, id: uuidv4() }
const copyModule = new QPolygon(module.points, moduleOptions)
canvas.add(copyModule)
copyModules.push(copyModule)
canvas.renderAll()
if (otherModules.length > 0) {
isOverlapOtherModules.push(
otherModules.some(
(otherModule) =>
turf.booleanOverlap(polygonToTurfPolygon(copyModule, true), polygonToTurfPolygon(otherModule, true)) ||
turf.booleanWithin(polygonToTurfPolygon(copyModule, true), polygonToTurfPolygon(otherModule, true)),
),
)
}
if (objects.length > 0) {
isOverlapObjects.push(!checkModuleDisjointObjects(polygonToTurfPolygon(module, true), objects))
}
isOutsideSurface.push(
!turf.booleanContains(polygonToTurfPolygon(moduleSetupSurface, true), polygonToTurfPolygon(copyModule, true)) ||
!turf.booleanWithin(polygonToTurfPolygon(copyModule, true), polygonToTurfPolygon(moduleSetupSurface, true)),
)
module.setCoords()
})
if (
isOverlapOtherModules.some((isOverlap) => isOverlap) ||
isOverlapObjects.some((isOverlap) => isOverlap) ||
isOutsideSurface.some((isOutside) => isOutside)
) {
swalFire({
title: isOverlapOtherModules.some((isOverlap) => isOverlap)
? '겹치는 모듈이 있습니다.'
: isOverlapObjects.some((isOverlap) => isOverlap)
? '모듈이 오브젝트와 겹칩니다.'
: '영역 밖',
icon: 'error',
type: 'confirm',
confirmFn: () => {
targetModules.forEach((module) => {
module.set({ top: module.originPos.top, left: module.originPos.left })
module.setCoords()
})
canvas.renderAll()
copyModules.forEach((module) => {
canvas.remove(module)
})
canvas.renderAll()
},
})
}
}
const getRowModules = (target) => {
return canvas.getObjects().filter((obj) => target.surfaceId === obj.surfaceId && obj.name === POLYGON_TYPE.MODULE && obj.top === target.top)
return canvas
.getObjects()
.filter((obj) => target.surfaceId === obj.surfaceId && obj.name === POLYGON_TYPE.MODULE && obj.top === target.top)
.sort((a, b) => a.left - b.left)
}
const getColumnModules = (target) => {
return canvas.getObjects().filter((obj) => target.surfaceId === obj.surfaceId && obj.name === POLYGON_TYPE.MODULE && obj.left === target.left)
return canvas
.getObjects()
.filter((obj) => target.surfaceId === obj.surfaceId && obj.name === POLYGON_TYPE.MODULE && obj.left === target.left)
.sort((a, b) => a.top - b.top)
}
const getPosotion = (target, direction, length, hasMargin = false) => {
@ -601,5 +827,7 @@ export function useModule() {
moduleMultiCopy,
moduleColumnRemove,
moduleRowRemove,
moduleColumnInsert,
muduleRowInsert,
}
}