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

열.단 삭제 추가

Browse Source
This commit is contained in:
김민식 2024-12-26 18:07:55 +09:00
parent 363214654d
commit f56e5ca4b0
5 changed files with 326 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/floor-plan/modal/module/PanelEdit.jsx
View File

@ -12,9 +12,18 @@ import { POLYGON_TYPE } from '@/common/common'
import { useModal } from '@nextui-org/react'
import { useModule } from '@/hooks/module/useModule'
export const PANEL_EDIT_TYPE = {
MOVE: 'move',
COPY: 'copy',
COLUMN_MOVE: 'columnMove',
COLUMN_COPY: 'columnCopy',
ROW_MOVE: 'rowMove',
ROW_COPY: 'rowCopy',
}
export default function PanelEdit(props) {
const contextPopupPosition = useRecoilValue(contextPopupPositionState)
const { id, pos = contextPopupPosition, type = 'move', apply } = props
const { id, pos = contextPopupPosition, type = PANEL_EDIT_TYPE.MOVE, apply } = props
const { closePopup } = usePopup()
const [length, setLength] = useState(0)
const [direction, setDirection] = useState('up')
@ -32,17 +41,17 @@ export default function PanelEdit(props) {
//모듈 이동 적용
const handleApply = () => {
// const activeModuleIds = canvas.getActiveObjects().map((obj) => obj.id)
if (type === 'move') {
if (type === PANEL_EDIT_TYPE.MOVE) {
moduleMove(length, direction)
} else if (type === 'copy') {
} else if (type === PANEL_EDIT_TYPE.COPY) {
moduleCopy(length, direction)
} else if (type === 'columnMove') {
} else if (type === PANEL_EDIT_TYPE.COLUMN_MOVE) {
moduleMultiMove('column', length, direction)
} else if (type === 'columnCopy') {
} else if (type === PANEL_EDIT_TYPE.COLUMN_COPY) {
moduleMultiCopy('column', length, direction)
} else if (type === 'rowMove') {
} else if (type === PANEL_EDIT_TYPE.ROW_MOVE) {
moduleMultiMove('row', length, direction)
} else if (type === 'rowCopy') {
} else if (type === PANEL_EDIT_TYPE.ROW_COPY) {
moduleMultiCopy('row', length, direction)
}
closePopup(id)

27
src/components/floor-plan/modal/module/column/ColumnRemove.jsx
View File

@ -5,21 +5,24 @@ import { usePopup } from '@/hooks/usePopup'
import { useMessage } from '@/hooks/useMessage'
import { useState } from 'react'
import Image from 'next/image'
import { MODULE_REMOVE_TYPE, useModule } from '@/hooks/module/useModule'
export default function ColumnRemove(props) {
const contextPopupPosition = useRecoilValue(contextPopupPositionState)
const { id, pos = contextPopupPosition, apply } = props
const { closePopup } = usePopup()
const [selectedType, setSelectedType] = useState(1)
const [selectedType, setSelectedType] = useState(MODULE_REMOVE_TYPE.LEFT)
const { getMessage } = useMessage()
const { moduleColumnRemove } = useModule()
const types = [
{ name: getMessage('modal.panel.column.remove.type.left'), value: 1 },
{ name: getMessage('modal.panel.column.remove.type.right'), value: 2 },
{ name: getMessage('modal.panel.column.remove.type.side'), value: 3 },
{ name: getMessage('modal.panel.column.remove.type.none'), value: 4 },
{ name: getMessage('modal.panel.column.remove.type.left'), value: MODULE_REMOVE_TYPE.LEFT },
{ name: getMessage('modal.panel.column.remove.type.right'), value: MODULE_REMOVE_TYPE.RIGHT },
{ name: getMessage('modal.panel.column.remove.type.side'), value: MODULE_REMOVE_TYPE.HORIZONTAL_SIDE },
{ name: getMessage('modal.panel.column.remove.type.none'), value: MODULE_REMOVE_TYPE.NONE },
]
const handleApply = () => {
if (apply) apply()
// if (apply) apply()
moduleColumnRemove(selectedType)
closePopup(id)
}
@ -39,12 +42,12 @@ export default function ColumnRemove(props) {
<div className="additional-radio-wrap">
{types.map((type, index) => {
return (
<div className="d-check-radio pop">
<div className="d-check-radio pop" key={index}>
<input
type="radio"
name="radio01"
id={`ra0${index + 1}`}
onClick={(e) => setSelectedType(Number(e.target.value))}
onClick={(e) => setSelectedType(e.target.value)}
value={type.value}
checked={selectedType === type.value}
/>
@ -54,7 +57,7 @@ export default function ColumnRemove(props) {
})}
</div>
<div className="additional-img-wrap">
{selectedType === 1 && (
{selectedType === MODULE_REMOVE_TYPE.LEFT && (
<Image
src="/static/images/canvas/additional_del01.svg"
alt="react"
@ -63,7 +66,7 @@ export default function ColumnRemove(props) {
style={{ width: 'auto', height: 'auto' }}
/>
)}
{selectedType === 2 && (
{selectedType === MODULE_REMOVE_TYPE.RIGHT && (
<Image
src="/static/images/canvas/additional_del02.svg"
alt="react"
@ -72,7 +75,7 @@ export default function ColumnRemove(props) {
style={{ width: 'auto', height: 'auto' }}
/>
)}
{selectedType === 3 && (
{selectedType === MODULE_REMOVE_TYPE.HORIZONTAL_SIDE && (
<Image
src="/static/images/canvas/additional_del03.svg"
alt="react"
@ -81,7 +84,7 @@ export default function ColumnRemove(props) {
style={{ width: 'auto', height: 'auto' }}
/>
)}
{selectedType === 4 && (
{selectedType === MODULE_REMOVE_TYPE.NONE && (
<Image
src="/static/images/canvas/additional_del04.svg"
alt="react"

29
src/components/floor-plan/modal/module/row/RowRemove.jsx
View File

@ -5,21 +5,24 @@ import { useRecoilValue } from 'recoil'
import { contextPopupPositionState } from '@/store/popupAtom'
import { usePopup } from '@/hooks/usePopup'
import { useMessage } from '@/hooks/useMessage'
import { MODULE_REMOVE_TYPE, useModule } from '@/hooks/module/useModule'
export default function RowRemove(props) {
const contextPopupPosition = useRecoilValue(contextPopupPositionState)
const { id, pos = contextPopupPosition, apply } = props
const { closePopup } = usePopup()
const [selectedType, setSelectedType] = useState(1)
const [selectedType, setSelectedType] = useState(MODULE_REMOVE_TYPE.TOP)
const { getMessage } = useMessage()
const { moduleRowRemove } = useModule()
const types = [
{ name: getMessage('modal.row.remove.type.up'), value: 1 },
{ name: getMessage('modal.row.remove.type.down'), value: 2 },
{ name: getMessage('modal.row.remove.type.side'), value: 3 },
{ name: getMessage('modal.row.remove.type.none'), value: 4 },
{ name: getMessage('modal.row.remove.type.up'), value: MODULE_REMOVE_TYPE.TOP },
{ name: getMessage('modal.row.remove.type.down'), value: MODULE_REMOVE_TYPE.BOTTOM },
{ name: getMessage('modal.row.remove.type.side'), value: MODULE_REMOVE_TYPE.VERTICAL_SIDE },
{ name: getMessage('modal.row.remove.type.none'), value: MODULE_REMOVE_TYPE.NONE },
]
const handleApply = () => {
if (apply) apply()
// if (apply) apply()
moduleRowRemove(selectedType)
closePopup(id)
}
@ -39,22 +42,22 @@ export default function RowRemove(props) {
<div className="additional-radio-wrap">
{types.map((type, index) => {
return (
<div className="d-check-radio pop">
<div className="d-check-radio pop" key={index}>
<input
type="radio"
name="radio01"
id={`ra0${index + 1}`}
onClick={() => setSelectedType(Number(e.target.value))}
onClick={(e) => setSelectedType(e.target.value)}
value={type.value}
checked={selectedType === type.value}
/>
<label htmlFor="ra01">{getMessage(type.name)}</label>
<label htmlFor={`ra0${index + 1}`}>{type.name}</label>
</div>
)
})}
</div>
<div className="additional-img-wrap">
{selectedType === 1 && (
{selectedType === MODULE_REMOVE_TYPE.TOP && (
<Image
src="/static/images/canvas/additional_bundle-del01.svg"
alt="react"
@ -63,7 +66,7 @@ export default function RowRemove(props) {
style={{ width: 'auto', height: 'auto' }}
/>
)}
{selectedType === 2 && (
{selectedType === MODULE_REMOVE_TYPE.BOTTOM && (
<Image
src="/static/images/canvas/additional_bundle-del02.svg"
alt="react"
@ -72,7 +75,7 @@ export default function RowRemove(props) {
style={{ width: 'auto', height: 'auto' }}
/>
)}
{selectedType === 3 && (
{selectedType === MODULE_REMOVE_TYPE.VERTICAL_SIDE && (
<Image
src="/static/images/canvas/additional_bundle-del03.svg"
alt="react"
@ -81,7 +84,7 @@ export default function RowRemove(props) {
style={{ width: 'auto', height: 'auto' }}
/>
)}
{selectedType === 4 && (
{selectedType === MODULE_REMOVE_TYPE.NONE && (
<Image
src="/static/images/canvas/additional_bundle-del04.svg"
alt="react"

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

@ -7,6 +7,16 @@ import * as turf from '@turf/turf'
import { useSwal } from '../useSwal'
import { QPolygon } from '@/components/fabric/QPolygon'
export const MODULE_REMOVE_TYPE = {
LEFT: 'left',
RIGHT: 'right',
HORIZONTAL_SIDE: 'horizontalSide',
TOP: 'top',
BOTTOM: 'bottom',
VERTICAL_SIDE: 'verticalSide',
NONE: 'none',
}
export function useModule() {
const canvas = useRecoilValue(canvasState)
const { swalFire } = useSwal()
@ -92,7 +102,7 @@ export function useModule() {
canvas.discardActiveObject() //선택해제
modules.forEach((module) => {
const { top, left } = getPosotion(module, direction, length)
const { top, left } = getPosotion(module, direction, length, true)
const moduleOptions = { ...module, left, top, id: uuidv4() }
const rect = new QPolygon(module.points, moduleOptions)
canvas.add(rect)
@ -255,12 +265,6 @@ export function useModule() {
)
})
console.log(
'🚀 ~ moduleMultiCopy ~ sOverlapOtherModules, isOverlapObjects, isOutsideSurface:',
isOverlapOtherModules,
isOverlapObjects,
isOutsideSurface,
)
if (
isOverlapOtherModules.some((isOverlap) => isOverlap) ||
isOverlapObjects.some((isOverlap) => isOverlap) ||
@ -280,6 +284,265 @@ export function useModule() {
}
}
const getIsOverlapOtherModules = (module, otherModules) => {
return otherModules.some(
(otherModule) =>
turf.booleanOverlap(polygonToTurfPolygon(module, true), polygonToTurfPolygon(otherModule, true)) ||
turf.booleanWithin(polygonToTurfPolygon(module, true), polygonToTurfPolygon(otherModule, true)),
)
}
const getIsOverlapObjects = (module, objects) => {
return objects.some(
(object) =>
turf.booleanOverlap(polygonToTurfPolygon(module, true), polygonToTurfPolygon(object, true)) ||
turf.booleanWithin(polygonToTurfPolygon(module, true), polygonToTurfPolygon(object, true)),
)
}
const getIsOutsideSurface = (module, moduleSetupSurface) => {
return (
!turf.booleanContains(polygonToTurfPolygon(moduleSetupSurface, true), polygonToTurfPolygon(module, true)) ||
!turf.booleanWithin(polygonToTurfPolygon(module, true), polygonToTurfPolygon(moduleSetupSurface, true))
)
}
const moduleColumnRemove = (type) => {
const activeModule = canvas.getObjects().filter((obj) => canvas.getActiveObjects()[0].id === obj.id)[0]
const columnModules = getColumnModules(activeModule)
const otherModules = getOtherModules(columnModules)
const objects = getObjects()
console.log('🚀 ~ moduleColumnRemove ~ objects:', objects)
let targetModules = []
const rightModules = otherModules.filter((module) => activeModule.left < module.left).sort((a, b) => a.left - b.left)
const leftModules = otherModules.filter((module) => activeModule.left > module.left).sort((a, b) => b.left - a.left)
let width = -1
const moduleSetupSurface = canvas
.getObjects()
.filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE && obj.id === activeModule.surfaceId)[0]
let [isOverlapOtherModules, isOverlapObjects, isOutsideSurface] = [[], [], []]
console.log(
'🚀 ~ moduleColumnRemove ~ isOverlapOtherModules, isOverlapObjects, isOutsideSurface:',
isOverlapOtherModules,
isOverlapObjects,
isOutsideSurface,
)
canvas.discardActiveObject()
canvas.remove(...columnModules)
canvas.renderAll()
if (type === MODULE_REMOVE_TYPE.LEFT) {
console.log('🚀 ~ moduleColumnRemove ~ rightModules:', rightModules)
rightModules.forEach((module) => {
module.originPos = {
left: module.left,
top: module.top,
}
if (width === -1) width = module.left - activeModule.left
module.set({ left: module.left - width })
module.setCoords()
canvas.renderAll()
isOverlapOtherModules.push(getIsOverlapOtherModules(module, leftModules))
isOverlapObjects.push(getIsOverlapObjects(module, objects))
isOutsideSurface.push(getIsOutsideSurface(module, moduleSetupSurface))
})
targetModules = rightModules
} else if (type === MODULE_REMOVE_TYPE.RIGHT) {
leftModules.forEach((module) => {
module.originPos = {
left: module.left,
top: module.top,
}
if (width === -1) width = activeModule.left - module.left
module.set({ left: module.left + width })
module.setCoords()
canvas.renderAll()
isOverlapOtherModules.push(getIsOverlapOtherModules(module, rightModules))
isOverlapObjects.push(getIsOverlapObjects(module, objects))
isOutsideSurface.push(getIsOutsideSurface(module, moduleSetupSurface))
})
targetModules = leftModules
} else if (type === MODULE_REMOVE_TYPE.HORIZONTAL_SIDE) {
const sideModules = [...leftModules, ...rightModules]
leftModules.forEach((module) => {
module.originPos = {
left: module.left,
top: module.top,
}
if (width === -1) width = activeModule.left - module.left
module.set({ left: module.left + width / 2 })
module.setCoords()
canvas.renderAll()
})
rightModules.forEach((module) => {
module.originPos = {
left: module.left,
top: module.top,
}
if (width === -1) width = module.left - activeModule.left
module.set({ left: module.left - width / 2 })
module.setCoords()
canvas.renderAll()
})
canvas.renderAll()
sideModules.forEach((module) => {
isOverlapOtherModules.push(
getIsOverlapOtherModules(
module,
sideModules.filter((m) => m.id !== module.id),
),
)
isOverlapObjects.push(getIsOverlapObjects(module, objects))
isOutsideSurface.push(getIsOutsideSurface(module, moduleSetupSurface))
})
targetModules = sideModules
}
console.log('🚀 ~ sideModules.forEach ~ objects:', objects)
console.log(
'🚀 ~ moduleColumnRemove ~ isOverlapOtherModules, isOverlapObjects, isOutsideSurface:',
isOverlapOtherModules,
isOverlapObjects,
isOutsideSurface,
)
if (
(isOverlapOtherModules.some((isOverlap) => isOverlap) ||
isOverlapObjects.some((isOverlap) => isOverlap) ||
isOutsideSurface.some((isOutside) => isOutside)) &&
type !== MODULE_REMOVE_TYPE.NONE
) {
swalFire({
title:
isOverlapOtherModules.some((isOverlap) => isOverlap) || isOverlapObjects.some((isOverlap) => isOverlap)
? '겹치는 모듈이 있습니다.'
: '영역 밖',
icon: 'error',
type: 'confirm',
confirmFn: () => {
canvas.add(...columnModules)
targetModules.forEach((module) => {
module.set({ top: module.originPos.top, left: module.originPos.left })
module.setCoords()
})
canvas.renderAll()
},
})
}
}
const moduleRowRemove = (type) => {
const activeModule = canvas.getObjects().filter((obj) => canvas.getActiveObjects()[0].id === obj.id)[0]
const rowModules = getRowModules(activeModule)
const otherModules = getOtherModules(rowModules)
const objects = getObjects()
let targetModules = []
const topModules = otherModules.filter((module) => activeModule.top > module.top).sort((a, b) => b.top - a.top)
const bottomModules = otherModules.filter((module) => activeModule.top < module.top).sort((a, b) => a.top - b.top)
let height = -1
const moduleSetupSurface = canvas
.getObjects()
.filter((obj) => obj.name === POLYGON_TYPE.MODULE_SETUP_SURFACE && obj.id === activeModule.surfaceId)[0]
let [isOverlapOtherModules, isOverlapObjects, isOutsideSurface] = [[], [], []]
canvas.discardActiveObject()
canvas.remove(...rowModules)
canvas.renderAll()
if (type === MODULE_REMOVE_TYPE.TOP) {
bottomModules.forEach((module) => {
module.originPos = {
left: module.left,
top: module.top,
}
if (height === -1) height = module.top - activeModule.top
module.set({ top: module.top - height })
module.setCoords()
canvas.renderAll()
isOverlapOtherModules.push(getIsOverlapOtherModules(module, topModules))
isOverlapObjects.push(getIsOverlapObjects(module, objects))
isOutsideSurface.push(getIsOutsideSurface(module, moduleSetupSurface))
})
targetModules = bottomModules
} else if (type === MODULE_REMOVE_TYPE.BOTTOM) {
topModules.forEach((module) => {
module.originPos = {
left: module.left,
top: module.top,
}
if (height === -1) height = activeModule.top - module.top
module.set({ top: module.top + height })
module.setCoords()
canvas.renderAll()
isOverlapOtherModules.push(getIsOverlapOtherModules(module, bottomModules))
isOverlapObjects.push(getIsOverlapObjects(module, objects))
isOutsideSurface.push(getIsOutsideSurface(module, moduleSetupSurface))
})
targetModules = topModules
} else if (type === MODULE_REMOVE_TYPE.VERTICAL_SIDE) {
topModules.forEach((module) => {
module.originPos = {
left: module.left,
top: module.top,
}
if (height === -1) height = activeModule.top - module.top
module.set({ top: module.top + height / 2 })
module.setCoords()
canvas.renderAll()
})
bottomModules.forEach((module) => {
module.originPos = {
left: module.left,
top: module.top,
}
if (height === -1) height = module.top - activeModule.top
module.set({ top: module.top - height / 2 })
module.setCoords()
canvas.renderAll()
})
const sideModules = [...topModules, ...bottomModules]
canvas.renderAll()
sideModules.forEach((module) => {
isOverlapOtherModules.push(
getIsOverlapOtherModules(
module,
sideModules.filter((m) => m.id !== module.id),
),
)
isOverlapObjects.push(getIsOverlapObjects(module, objects))
isOutsideSurface.push(getIsOutsideSurface(module, moduleSetupSurface))
})
targetModules = sideModules
}
if (
(isOverlapOtherModules.some((isOverlap) => isOverlap) ||
isOverlapObjects.some((isOverlap) => isOverlap) ||
isOutsideSurface.some((isOutside) => isOutside)) &&
type !== MODULE_REMOVE_TYPE.NONE
) {
swalFire({
title:
isOverlapOtherModules.some((isOverlap) => isOverlap) || isOverlapObjects.some((isOverlap) => isOverlap)
? '겹치는 모듈이 있습니다.'
: '영역 밖',
icon: 'error',
type: 'confirm',
confirmFn: () => {
canvas.add(...rowModules)
targetModules.forEach((module) => {
module.set({ top: module.originPos.top, left: module.originPos.left })
module.setCoords()
})
canvas.renderAll()
},
})
}
}
const getRowModules = (target) => {
return canvas.getObjects().filter((obj) => target.surfaceId === obj.surfaceId && obj.name === POLYGON_TYPE.MODULE && obj.top === target.top)
}
@ -326,5 +589,7 @@ export function useModule() {
moduleMultiMove,
moduleCopy,
moduleMultiCopy,
moduleColumnRemove,
moduleRowRemove,
}
}

14
src/hooks/useContextMenu.js
View File

@ -23,7 +23,7 @@ import { useCommonUtils } from './common/useCommonUtils'
import { useMessage } from '@/hooks/useMessage'
import { useCanvasEvent } from '@/hooks/useCanvasEvent'
import { contextMenuListState, contextMenuState } from '@/store/contextMenu'
import PanelEdit from '@/components/floor-plan/modal/module/PanelEdit'
import PanelEdit, { PANEL_EDIT_TYPE } from '@/components/floor-plan/modal/module/PanelEdit'
import DimensionLineSetting from '@/components/floor-plan/modal/dimensionLine/DimensionLineSetting'
import ColumnRemove from '@/components/floor-plan/modal/module/column/ColumnRemove'
import ColumnInsert from '@/components/floor-plan/modal/module/column/ColumnInsert'
@ -609,24 +609,24 @@ export function useContextMenu() {
{
id: 'move',
name: getMessage('contextmenu.move'),
component: <PanelEdit id={popupId} type={'move'} />,
component: <PanelEdit id={popupId} type={PANEL_EDIT_TYPE.MOVE} />,
},
{
id: 'copy',
name: getMessage('contextmenu.copy'),
component: <PanelEdit id={popupId} type={'copy'} />,
component: <PanelEdit id={popupId} type={PANEL_EDIT_TYPE.COPY} />,
},
],
[
{
id: 'columnMove',
name: getMessage('contextmenu.column.move'),
component: <PanelEdit id={popupId} type={'columnMove'} />,
component: <PanelEdit id={popupId} type={PANEL_EDIT_TYPE.COLUMN_MOVE} />,
},
{
id: 'columnCopy',
name: getMessage('contextmenu.column.copy'),
component: <PanelEdit id={popupId} type={'columnCopy'} />,
component: <PanelEdit id={popupId} type={PANEL_EDIT_TYPE.COLUMN_COPY} />,
},
{
id: 'columnRemove',
@ -643,12 +643,12 @@ export function useContextMenu() {
{
id: 'rowMove',
name: getMessage('contextmenu.row.move'),
component: <PanelEdit id={popupId} type={'rowMove'} />,
component: <PanelEdit id={popupId} type={PANEL_EDIT_TYPE.ROW_MOVE} />,
},
{
id: 'rowCopy',
name: getMessage('contextmenu.row.copy'),
component: <PanelEdit id={popupId} type={'rowCopy'} />,
component: <PanelEdit id={popupId} type={PANEL_EDIT_TYPE.ROW_COPY} />,
},
{
id: 'rowRemove',