444 lines
14 KiB
JavaScript
444 lines
14 KiB
JavaScript
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
|
|
import { currentMenuState, currentObjectState } from '@/store/canvasAtom'
|
|
import { useEffect, useState } from 'react'
|
|
import { MENU } from '@/common/common'
|
|
import AuxiliaryMove from '@/components/floor-plan/modal/auxiliary/AuxiliaryMove'
|
|
import AuxiliarySize from '@/components/floor-plan/modal/auxiliary/AuxiliarySize'
|
|
import { usePopup } from '@/hooks/usePopup'
|
|
import { v4 as uuidv4 } from 'uuid'
|
|
import GridMove from '@/components/floor-plan/modal/grid/GridMove'
|
|
import GridCopy from '@/components/floor-plan/modal/grid/GridCopy'
|
|
import ColorPickerModal from '@/components/common/color-picker/ColorPickerModal'
|
|
import { gridColorState } from '@/store/gridAtom'
|
|
import { contextPopupPositionState } from '@/store/popupAtom'
|
|
import AuxiliaryCopy from '@/components/floor-plan/modal/auxiliary/AuxiliaryCopy'
|
|
import SizeSetting from '@/components/floor-plan/modal/object/SizeSetting'
|
|
import RoofMaterialSetting from '@/components/floor-plan/modal/object/RoofMaterialSetting'
|
|
import DormerOffset from '@/components/floor-plan/modal/object/DormerOffset'
|
|
import FontSetting from '@/components/common/font/FontSetting'
|
|
import DimensionLineSetting from '@/components/floor-plan/modal/dimensionLine/DimensionLineSetting'
|
|
import RoofAllocationSetting from '@/components/floor-plan/modal/roofAllocation/RoofAllocationSetting'
|
|
import LinePropertySetting from '@/components/floor-plan/modal/lineProperty/LinePropertySetting'
|
|
import FlowDirectionSetting from '@/components/floor-plan/modal/flowDirection/FlowDirectionSetting'
|
|
import { useMessage } from '@/hooks/useMessage'
|
|
import { useCanvasEvent } from '@/hooks/useCanvasEvent'
|
|
|
|
export function useContextMenu() {
|
|
const currentMenu = useRecoilValue(currentMenuState) // 현재 메뉴
|
|
const setContextPopupPosition = useSetRecoilState(contextPopupPositionState) // 현재 메뉴
|
|
const [contextMenu, setContextMenu] = useState([[]]) // 메뉴.object 별 context menu
|
|
const [currentContextMenu, setCurrentContextMenu] = useState(null) // 선택한 contextMenu
|
|
const currentObject = useRecoilValue(currentObjectState)
|
|
const { getMessage } = useMessage()
|
|
const { addPopup } = usePopup()
|
|
const [popupId, setPopupId] = useState(uuidv4())
|
|
const [gridColor, setGridColor] = useRecoilState(gridColorState)
|
|
const { handleZoomClear } = useCanvasEvent()
|
|
const currentMenuSetting = (position) => {
|
|
switch (currentMenu) {
|
|
case MENU.PLAN_DRAWING:
|
|
setContextMenu([
|
|
[
|
|
{
|
|
id: 'gridMove',
|
|
name: getMessage('modal.grid.move'),
|
|
component: <GridMove id={popupId} />,
|
|
},
|
|
{
|
|
id: 'gridCopy',
|
|
name: getMessage('modal.grid.copy'),
|
|
component: <GridCopy id={popupId} />,
|
|
},
|
|
{
|
|
id: 'gridColorEdit',
|
|
name: getMessage('modal.grid.color.edit'),
|
|
component: <ColorPickerModal id={popupId} color={gridColor} setColor={setGridColor} />,
|
|
},
|
|
{
|
|
id: 'remove',
|
|
name: getMessage('delete'),
|
|
},
|
|
{
|
|
id: 'removeAll',
|
|
name: getMessage('delete.all'),
|
|
},
|
|
],
|
|
])
|
|
break
|
|
case MENU.ROOF_COVERING.EXTERIOR_WALL_LINE:
|
|
case MENU.ROOF_COVERING.ROOF_SHAPE_SETTINGS:
|
|
case MENU.ROOF_COVERING.ROOF_SHAPE_PASSIVITY_SETTINGS:
|
|
case MENU.ROOF_COVERING.ROOF_SHAPE_EDITING:
|
|
case MENU.ROOF_COVERING.HELP_LINE_DRAWING:
|
|
case MENU.ROOF_COVERING.EAVES_KERAVA_EDIT:
|
|
case MENU.ROOF_COVERING.MOVEMENT_SHAPE_UPDOWN:
|
|
case MENU.ROOF_COVERING.OUTLINE_EDIT_OFFSET:
|
|
case MENU.ROOF_COVERING.ROOF_SHAPE_ALLOC:
|
|
case MENU.ROOF_COVERING.DEFAULT:
|
|
setContextMenu([
|
|
[
|
|
{
|
|
id: 'refresh',
|
|
name: getMessage('refresh'),
|
|
fn: () => handleZoomClear(),
|
|
},
|
|
{
|
|
id: 'roofMaterialPlacement',
|
|
name: getMessage('contextmenu.roof.material.placement'),
|
|
},
|
|
{
|
|
id: 'roofMaterialRemove',
|
|
name: getMessage('contextmenu.roof.material.remove'),
|
|
},
|
|
{
|
|
id: 'roofMaterialRemoveAll',
|
|
name: getMessage('contextmenu.roof.material.remove.all'),
|
|
},
|
|
{
|
|
id: 'selectMove',
|
|
name: getMessage('contextmenu.select.move'),
|
|
},
|
|
{
|
|
id: 'wallLineRemove',
|
|
name: getMessage('contextmenu.wallline.remove'),
|
|
},
|
|
],
|
|
[
|
|
{
|
|
id: 'sizeEdit',
|
|
name: getMessage('contextmenu.size.edit'),
|
|
component: <AuxiliarySize id={popupId} />,
|
|
},
|
|
{
|
|
id: 'auxiliaryMove',
|
|
name: `${getMessage('contextmenu.auxiliary.move')}(M)`,
|
|
component: <AuxiliaryMove id={popupId} />,
|
|
},
|
|
{
|
|
id: 'auxiliaryCopy',
|
|
name: `${getMessage('contextmenu.auxiliary.copy')}(C)`,
|
|
component: <AuxiliaryCopy id={popupId} />,
|
|
},
|
|
{
|
|
id: 'auxiliaryRemove',
|
|
name: `${getMessage('contextmenu.auxiliary.remove')}(D)`,
|
|
},
|
|
{
|
|
id: 'auxiliaryVerticalBisector',
|
|
name: getMessage('contextmenu.auxiliary.vertical.bisector'),
|
|
},
|
|
{
|
|
id: 'auxiliaryCut',
|
|
name: getMessage('contextmenu.auxiliary.cut'),
|
|
},
|
|
{
|
|
id: 'auxiliaryRemoveAll',
|
|
name: getMessage('contextmenu.auxiliary.remove.all'),
|
|
},
|
|
],
|
|
])
|
|
break
|
|
case MENU.BATCH_CANVAS.SLOPE_SETTING:
|
|
case MENU.BATCH_CANVAS.BATCH_DRAWING:
|
|
case MENU.BATCH_CANVAS.SURFACE_SHAPE_BATCH:
|
|
case MENU.BATCH_CANVAS.OBJECT_BATCH:
|
|
case MENU.BATCH_CANVAS.ALL_REMOVE:
|
|
case MENU.BATCH_CANVAS.DEFAULT:
|
|
setContextMenu([
|
|
[
|
|
{
|
|
id: 'sizeEdit',
|
|
name: getMessage('contextmenu.size.edit'),
|
|
},
|
|
{
|
|
id: 'remove',
|
|
name: `${getMessage('contextmenu.remove')}(D)`,
|
|
},
|
|
{
|
|
id: 'move',
|
|
name: `${getMessage('contextmenu.move')}(M)`,
|
|
},
|
|
{
|
|
id: 'copy',
|
|
name: `${getMessage('contextmenu.copy')}(C)`,
|
|
},
|
|
],
|
|
[
|
|
{
|
|
id: 'roofMaterialEdit',
|
|
name: getMessage('contextmenu.roof.material.edit'),
|
|
},
|
|
{
|
|
id: 'linePropertyEdit',
|
|
name: getMessage('contextmenu.line.property.edit'),
|
|
component: <LinePropertySetting id={popupId} />,
|
|
},
|
|
{
|
|
id: 'flowDirectionEdit',
|
|
name: getMessage('contextmenu.flow.direction.edit'),
|
|
},
|
|
],
|
|
])
|
|
break
|
|
default:
|
|
setContextMenu([])
|
|
break
|
|
}
|
|
}
|
|
|
|
const handleClick = (e, menu) => {
|
|
setContextPopupPosition({
|
|
x: e.clientX,
|
|
y: e.clientY,
|
|
})
|
|
setCurrentContextMenu(menu)
|
|
}
|
|
|
|
useEffect(() => {
|
|
currentMenuSetting()
|
|
}, [gridColor, currentMenu])
|
|
|
|
useEffect(() => {
|
|
if (currentContextMenu?.component) addPopup(popupId, 1, currentContextMenu?.component)
|
|
}, [currentContextMenu])
|
|
|
|
useEffect(() => {
|
|
if (currentObject?.name) {
|
|
switch (currentObject.name) {
|
|
case 'triangleDormer':
|
|
case 'pentagonDormer':
|
|
setContextMenu([
|
|
[
|
|
{
|
|
id: 'sizeEdit',
|
|
name: getMessage('contextmenu.size.edit'),
|
|
component: <SizeSetting id={popupId} target={currentObject} />,
|
|
},
|
|
{
|
|
id: 'dormerRemove',
|
|
name: `${getMessage('contextmenu.remove')}(D)`,
|
|
},
|
|
{
|
|
id: 'dormerMove',
|
|
name: `${getMessage('contextmenu.move')}(M)`,
|
|
},
|
|
{
|
|
id: 'dormerCopy',
|
|
name: `${getMessage('contextmenu.copy')}(C)`,
|
|
},
|
|
{
|
|
id: 'roofMaterialEdit',
|
|
name: getMessage('contextmenu.roof.material.edit'),
|
|
component: <RoofMaterialSetting id={popupId} />,
|
|
},
|
|
{
|
|
id: 'dormerOffset',
|
|
name: getMessage('contextmenu.dormer.offset'),
|
|
component: <DormerOffset id={popupId} />,
|
|
},
|
|
],
|
|
])
|
|
break
|
|
case 'roof':
|
|
setContextMenu([
|
|
[
|
|
{
|
|
id: 'sizeEdit',
|
|
name: '사이즈 변경',
|
|
component: <SizeSetting id={popupId} />,
|
|
},
|
|
{
|
|
id: 'roofMaterialRemove',
|
|
name: `${getMessage('contextmenu.remove')}(D)`,
|
|
},
|
|
{
|
|
id: 'roofMaterialMove',
|
|
name: `${getMessage('contextmenu.move')}(M)`,
|
|
},
|
|
{
|
|
id: 'roofMaterialCopy',
|
|
name: `${getMessage('contextmenu.copy')}(C)`,
|
|
},
|
|
],
|
|
[
|
|
{
|
|
id: 'roofMaterialEdit',
|
|
name: getMessage('contextmenu.roof.material.edit'),
|
|
component: <RoofAllocationSetting id={popupId} />,
|
|
},
|
|
{
|
|
id: 'linePropertyEdit',
|
|
name: getMessage('contextmenu.line.property.edit'),
|
|
component: <LinePropertySetting id={popupId} />,
|
|
},
|
|
{
|
|
id: 'flowDirectionEdit',
|
|
name: getMessage('contextmenu.flow.direction.edit'),
|
|
component: <FlowDirectionSetting id={popupId} target={currentObject} />,
|
|
},
|
|
],
|
|
])
|
|
break
|
|
case 'opening':
|
|
setContextMenu([
|
|
[
|
|
{
|
|
id: 'sizeEdit',
|
|
name: getMessage('contextmenu.size.edit'),
|
|
},
|
|
{
|
|
id: 'openingRemove',
|
|
name: `${getMessage('contextmenu.remove')}(D)`,
|
|
},
|
|
{
|
|
id: 'openingMove',
|
|
name: `${getMessage('contextmenu.move')}(M)`,
|
|
},
|
|
{
|
|
id: 'openingCopy',
|
|
name: `${getMessage('contextmenu.copy')}(C)`,
|
|
},
|
|
{
|
|
id: 'openingOffset',
|
|
name: getMessage('contextmenu.opening.offset'),
|
|
},
|
|
],
|
|
])
|
|
break
|
|
case 'lengthText':
|
|
setContextMenu([
|
|
[
|
|
{
|
|
id: 'lengthTextRemove',
|
|
name: getMessage('contextmenu.remove'),
|
|
},
|
|
{
|
|
id: 'lengthTextMove',
|
|
name: getMessage('contextmenu.move'),
|
|
},
|
|
{
|
|
id: 'lengthTextAuxiliaryLineEdit',
|
|
name: getMessage('contextmenu.dimension.auxiliary.line.edit'),
|
|
},
|
|
{
|
|
id: 'displayEdit',
|
|
name: getMessage('contextmenu.display.edit'),
|
|
},
|
|
],
|
|
])
|
|
break
|
|
case 'commonText':
|
|
setContextMenu([
|
|
[
|
|
{
|
|
id: 'commonTextRemove',
|
|
name: getMessage('contextmenu.remove'),
|
|
},
|
|
{
|
|
id: 'commonTextMove',
|
|
name: getMessage('contextmenu.move'),
|
|
},
|
|
{
|
|
id: 'commonTextCopy',
|
|
name: getMessage('contextmenu.copy'),
|
|
},
|
|
{
|
|
id: 'commonTextFontSetting',
|
|
name: getMessage('contextmenu.font.setting'),
|
|
component: <FontSetting id={popupId} type={'commonText'} />,
|
|
},
|
|
{
|
|
id: 'commonTextEdit',
|
|
name: getMessage('contextmenu.edit'),
|
|
},
|
|
],
|
|
])
|
|
break
|
|
case 'lineGrid':
|
|
setContextMenu([
|
|
[
|
|
{
|
|
id: 'gridMove',
|
|
name: getMessage('modal.grid.move'),
|
|
},
|
|
{
|
|
id: 'gridCopy',
|
|
name: getMessage('modal.grid.copy'),
|
|
},
|
|
{
|
|
id: 'gridColorEdit',
|
|
name: getMessage('contextmenu.grid.color.edit'),
|
|
},
|
|
{
|
|
id: 'remove',
|
|
name: getMessage('contextmenu.remove'),
|
|
},
|
|
{
|
|
id: 'removeAll',
|
|
name: getMessage('contextmenu.remove.all'),
|
|
},
|
|
],
|
|
])
|
|
break
|
|
case 'dimensionLine':
|
|
setContextMenu([
|
|
[
|
|
{
|
|
id: 'dimensionLineRemove',
|
|
name: getMessage('contextmenu.remove'),
|
|
},
|
|
{
|
|
id: 'dimensionLineMove',
|
|
name: getMessage('contextmenu.move'),
|
|
},
|
|
{
|
|
id: 'dimensionAuxiliaryLineEdit',
|
|
name: getMessage('contextmenu.dimension.auxiliary.line.edit'),
|
|
},
|
|
{
|
|
id: 'dimensionLineDisplayEdit',
|
|
name: getMessage('contextmenu.display.edit'),
|
|
component: <DimensionLineSetting id={popupId} />,
|
|
},
|
|
],
|
|
])
|
|
break
|
|
case 'shadow':
|
|
setContextMenu([
|
|
[
|
|
{
|
|
id: 'sizeEdit',
|
|
name: getMessage('contextmenu.size.edit'),
|
|
component: <SizeSetting id={popupId} />,
|
|
},
|
|
{
|
|
id: 'remove',
|
|
name: `${getMessage('contextmenu.remove')}(D)`,
|
|
},
|
|
{
|
|
id: 'move',
|
|
name: `${getMessage('contextmenu.move')}(M)`,
|
|
},
|
|
{
|
|
id: 'copy',
|
|
name: `${getMessage('contextmenu.copy')}(C)`,
|
|
},
|
|
],
|
|
])
|
|
break
|
|
default:
|
|
currentMenuSetting()
|
|
}
|
|
} else {
|
|
currentMenuSetting()
|
|
}
|
|
}, [currentObject])
|
|
|
|
return {
|
|
contextMenu,
|
|
currentContextMenu,
|
|
setCurrentContextMenu,
|
|
handleClick,
|
|
}
|
|
}
|