637 lines
22 KiB
JavaScript
637 lines
22 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, contextPopupState } 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 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 { useCommonUtils } from './common/useCommonUtils'
|
|
import { useMessage } from '@/hooks/useMessage'
|
|
import { useCanvasEvent } from '@/hooks/useCanvasEvent'
|
|
import { contextMenuListState, contextMenuState } from '@/store/contextMenu'
|
|
import ImageSizeSetting from '@/components/floor-plan/modal/image/ImageSizeSetting'
|
|
import PanelEdit 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'
|
|
import RowRemove from '@/components/floor-plan/modal/module/row/RowRemove'
|
|
import RowInsert from '@/components/floor-plan/modal/module/row/RowInsert'
|
|
import CircuitNumberEdit from '@/components/floor-plan/modal/module/CircuitNumberEdit'
|
|
import { useObjectBatch } from '@/hooks/object/useObjectBatch'
|
|
import { useSurfaceShapeBatch } from '@/hooks/surface/useSurfaceShapeBatch'
|
|
|
|
export function useContextMenu() {
|
|
const currentMenu = useRecoilValue(currentMenuState) // 현재 메뉴
|
|
const setContextPopupPosition = useSetRecoilState(contextPopupPositionState) // 현재 메뉴
|
|
const [contextMenu, setContextMenu] = useRecoilState(contextMenuListState) // 메뉴.object 별 context menu
|
|
const [currentContextMenu, setCurrentContextMenu] = useRecoilState(contextPopupState) // 선택한 contextMenu
|
|
const currentObject = useRecoilValue(currentObjectState)
|
|
const { getMessage } = useMessage()
|
|
const { addPopup } = usePopup()
|
|
const [popupId, setPopupId] = useState(uuidv4())
|
|
const [gridColor, setGridColor] = useRecoilState(gridColorState)
|
|
const { deleteObject, moveObject, copyObject, editText, changeDimensionExtendLine, deleteOuterLineObject } = useCommonUtils()
|
|
const [qContextMenu, setQContextMenu] = useRecoilState(contextMenuState)
|
|
const [cell, setCell] = useState(null)
|
|
const [column, setColumn] = useState(null)
|
|
const { handleZoomClear } = useCanvasEvent()
|
|
const { moveObjectBatch } = useObjectBatch({})
|
|
const { moveSurfaceShapeBatch } = useSurfaceShapeBatch()
|
|
const currentMenuSetting = () => {
|
|
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'),
|
|
fn: () => deleteOuterLineObject(),
|
|
},
|
|
{
|
|
id: 'imageSizeEdit',
|
|
name: getMessage('modal.image.size.setting'),
|
|
component: <ImageSizeSetting id={popupId} />,
|
|
},
|
|
],
|
|
[
|
|
{
|
|
id: 'sizeEdit',
|
|
name: getMessage('contextmenu.size.edit'),
|
|
component: <AuxiliarySize id={popupId} />,
|
|
},
|
|
{
|
|
id: 'auxiliaryMove',
|
|
name: `${getMessage('contextmenu.auxiliary.move')}(M)`,
|
|
shortcut: ['m', 'M'],
|
|
component: <AuxiliaryMove id={popupId} />,
|
|
},
|
|
{
|
|
id: 'auxiliaryCopy',
|
|
name: `${getMessage('contextmenu.auxiliary.copy')}(C)`,
|
|
shortcut: ['c', 'C'],
|
|
component: <AuxiliaryCopy id={popupId} />,
|
|
},
|
|
{
|
|
id: 'auxiliaryRemove',
|
|
shortcut: ['d', 'D'],
|
|
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',
|
|
shortcut: ['d', 'D'],
|
|
name: `${getMessage('contextmenu.remove')}(D)`,
|
|
},
|
|
{
|
|
id: 'move',
|
|
shortcut: ['m', 'M'],
|
|
name: `${getMessage('contextmenu.move')}(M)`,
|
|
},
|
|
{
|
|
id: 'copy',
|
|
shortcut: ['c', 'C'],
|
|
name: `${getMessage('contextmenu.copy')}(C)`,
|
|
},
|
|
{
|
|
id: 'imageSizeEdit',
|
|
name: getMessage('modal.image.size.setting'),
|
|
component: <ImageSizeSetting id={popupId} />,
|
|
},
|
|
],
|
|
[
|
|
{
|
|
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) => {
|
|
if (menu?.fn) {
|
|
menu.fn()
|
|
}
|
|
|
|
setContextPopupPosition({
|
|
x: window.innerWidth / 2,
|
|
y: 180,
|
|
})
|
|
setCurrentContextMenu(menu)
|
|
currentMenuSetting()
|
|
setQContextMenu({ ...qContextMenu, visible: false })
|
|
}
|
|
|
|
const handleKeyup = (e) => {
|
|
let menu = null
|
|
for (let i = 0; i < contextMenu.length; i++) {
|
|
const temp = contextMenu[i].filter((menu) => {
|
|
return menu.shortcut?.includes(e.key)
|
|
})
|
|
|
|
if (temp.length > 0) menu = temp[0]
|
|
}
|
|
|
|
if (menu) handleClick(null, menu)
|
|
}
|
|
|
|
useEffect(() => {
|
|
currentMenuSetting()
|
|
}, [gridColor, currentMenu])
|
|
|
|
useEffect(() => {
|
|
if (currentContextMenu?.component) addPopup(popupId, 1, currentContextMenu?.component)
|
|
}, [currentContextMenu])
|
|
|
|
useEffect(() => {
|
|
console.log('currentObject', currentObject)
|
|
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',
|
|
shortcut: ['d', 'D'],
|
|
name: `${getMessage('contextmenu.remove')}(D)`,
|
|
fn: () => deleteObject(),
|
|
},
|
|
{
|
|
id: 'dormerMove',
|
|
shortcut: ['m', 'M'],
|
|
name: `${getMessage('contextmenu.move')}(M)`,
|
|
fn: () => moveObjectBatch(),
|
|
},
|
|
{
|
|
id: 'dormerCopy',
|
|
shortcut: ['c', 'C'],
|
|
name: `${getMessage('contextmenu.copy')}(C)`,
|
|
fn: () => copyObject(),
|
|
},
|
|
{
|
|
id: 'roofMaterialEdit',
|
|
name: getMessage('contextmenu.roof.material.edit'),
|
|
component: <RoofMaterialSetting id={popupId} />,
|
|
},
|
|
{
|
|
id: 'dormerOffset',
|
|
name: getMessage('contextmenu.dormer.offset'),
|
|
component: <DormerOffset id={popupId} title={getMessage('contextmenu.dormer.offset')} />,
|
|
},
|
|
],
|
|
])
|
|
break
|
|
case 'roof':
|
|
setContextMenu([
|
|
[
|
|
{
|
|
id: 'sizeEdit',
|
|
name: '사이즈 변경',
|
|
component: <SizeSetting id={popupId} target={currentObject} />,
|
|
},
|
|
{
|
|
id: 'roofMaterialRemove',
|
|
shortcut: ['d', 'D'],
|
|
name: `${getMessage('contextmenu.remove')}(D)`,
|
|
fn: () => deleteObject(),
|
|
},
|
|
{
|
|
id: 'roofMaterialMove',
|
|
shortcut: ['m', 'M'],
|
|
name: `${getMessage('contextmenu.move')}(M)`,
|
|
fn: () => moveSurfaceShapeBatch(),
|
|
},
|
|
{
|
|
id: 'roofMaterialCopy',
|
|
shortcut: ['c', 'C'],
|
|
name: `${getMessage('contextmenu.copy')}(C)`,
|
|
fn: () => copyObject(),
|
|
},
|
|
],
|
|
[
|
|
{
|
|
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'),
|
|
component: <SizeSetting id={popupId} target={currentObject} />,
|
|
},
|
|
{
|
|
id: 'openingRemove',
|
|
shortcut: ['d', 'D'],
|
|
name: `${getMessage('contextmenu.remove')}(D)`,
|
|
fn: () => deleteObject(),
|
|
},
|
|
{
|
|
id: 'openingMove',
|
|
shortcut: ['m', 'M'],
|
|
name: `${getMessage('contextmenu.move')}(M)`,
|
|
fn: () => moveObject(),
|
|
},
|
|
{
|
|
id: 'openingCopy',
|
|
shortcut: ['c', 'C'],
|
|
name: `${getMessage('contextmenu.copy')}(C)`,
|
|
fn: () => copyObject(),
|
|
},
|
|
{
|
|
id: 'openingOffset',
|
|
name: getMessage('contextmenu.opening.offset'),
|
|
component: <DormerOffset id={popupId} title={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'),
|
|
fn: () => deleteObject(),
|
|
},
|
|
{
|
|
id: 'commonTextMove',
|
|
name: getMessage('contextmenu.move'),
|
|
fn: () => moveObject(),
|
|
},
|
|
{
|
|
id: 'commonTextCopy',
|
|
name: getMessage('contextmenu.copy'),
|
|
fn: () => copyObject(),
|
|
},
|
|
{
|
|
id: 'commonTextFontSetting',
|
|
name: getMessage('contextmenu.font.setting'),
|
|
component: <FontSetting id={popupId} type={'commonText'} />,
|
|
},
|
|
{
|
|
id: 'commonTextEdit',
|
|
name: getMessage('contextmenu.edit'),
|
|
fn: () => editText(),
|
|
},
|
|
],
|
|
])
|
|
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 'dimensionGroup':
|
|
setContextMenu([
|
|
[
|
|
{
|
|
id: 'dimensionLineRemove',
|
|
name: getMessage('contextmenu.remove'),
|
|
fn: () => deleteObject(),
|
|
},
|
|
{
|
|
id: 'dimensionLineMove',
|
|
name: getMessage('contextmenu.move'),
|
|
fn: () => moveObject(),
|
|
},
|
|
{
|
|
id: 'dimensionAuxiliaryLineEdit',
|
|
name: getMessage('contextmenu.dimension.auxiliary.line.edit'),
|
|
fn: () => changeDimensionExtendLine(),
|
|
},
|
|
{
|
|
id: 'dimensionLineDisplayEdit',
|
|
name: getMessage('contextmenu.display.edit'),
|
|
component: <DimensionLineSetting id={popupId} isConfig={false} />,
|
|
},
|
|
],
|
|
])
|
|
break
|
|
case 'shadow':
|
|
setContextMenu([
|
|
[
|
|
{
|
|
id: 'sizeEdit',
|
|
name: getMessage('contextmenu.size.edit'),
|
|
component: <SizeSetting id={popupId} target={currentObject} />,
|
|
},
|
|
{
|
|
id: 'remove',
|
|
shortcut: ['d', 'D'],
|
|
name: `${getMessage('contextmenu.remove')}(D)`,
|
|
fn: () => deleteObject(),
|
|
},
|
|
{
|
|
id: 'move',
|
|
shortcut: ['m', 'M'],
|
|
name: `${getMessage('contextmenu.move')}(M)`,
|
|
fn: () => moveObject(),
|
|
},
|
|
{
|
|
id: 'copy',
|
|
shortcut: ['c', 'C'],
|
|
name: `${getMessage('contextmenu.copy')}(C)`,
|
|
fn: () => copyObject(),
|
|
},
|
|
],
|
|
])
|
|
break
|
|
case 'panel':
|
|
setContextMenu([
|
|
[
|
|
{
|
|
id: 'remove',
|
|
name: getMessage('contextmenu.remove'),
|
|
},
|
|
{
|
|
id: 'move',
|
|
name: getMessage('contextmenu.move'),
|
|
component: <PanelEdit id={popupId} type={'move'} />,
|
|
},
|
|
{
|
|
id: 'copy',
|
|
name: getMessage('contextmenu.copy'),
|
|
component: <PanelEdit id={popupId} type={'copy'} />,
|
|
},
|
|
],
|
|
[
|
|
{
|
|
id: 'columnMove',
|
|
name: getMessage('contextmenu.column.move'),
|
|
component: <PanelEdit id={popupId} type={'move'} />,
|
|
},
|
|
{
|
|
id: 'columnCopy',
|
|
name: getMessage('contextmenu.column.copy'),
|
|
component: <PanelEdit id={popupId} type={'copy'} />,
|
|
},
|
|
{
|
|
id: 'columnRemove',
|
|
name: getMessage('contextmenu.column.remove'),
|
|
component: <ColumnRemove id={popupId} />,
|
|
},
|
|
{
|
|
id: 'columnInsert',
|
|
name: getMessage('contextmenu.column.insert'),
|
|
component: <ColumnInsert id={popupId} />,
|
|
},
|
|
],
|
|
[
|
|
{
|
|
id: 'rowMove',
|
|
name: getMessage('contextmenu.row.move'),
|
|
component: <PanelEdit id={popupId} type={'move'} />,
|
|
},
|
|
{
|
|
id: 'rowCopy',
|
|
name: getMessage('contextmenu.row.copy'),
|
|
component: <PanelEdit id={popupId} type={'copy'} />,
|
|
},
|
|
{
|
|
id: 'rowRemove',
|
|
name: getMessage('contextmenu.row.remove'),
|
|
component: <RowRemove id={popupId} />,
|
|
},
|
|
{
|
|
id: 'rowInsert',
|
|
name: getMessage('contextmenu.row.insert'),
|
|
component: <RowInsert id={popupId} />,
|
|
},
|
|
],
|
|
])
|
|
break
|
|
case 'module':
|
|
case 'dimensionLineText':
|
|
setContextMenu([
|
|
[
|
|
{
|
|
id: 'moduleVerticalCenterAlign',
|
|
name: getMessage('contextmenu.module.vertical.align'),
|
|
},
|
|
{
|
|
id: 'moduleHorizonCenterAlign',
|
|
name: getMessage('contextmenu.module.horizon.align'),
|
|
},
|
|
{
|
|
id: 'moduleLeftAlign',
|
|
name: getMessage('contextmenu.module.left.align'),
|
|
},
|
|
{
|
|
id: 'moduleRightAlign',
|
|
name: getMessage('contextmenu.module.right.align'),
|
|
},
|
|
{
|
|
id: 'moduleUpAlign',
|
|
name: getMessage('contextmenu.module.up.align'),
|
|
},
|
|
{
|
|
id: 'moduleDownAlign',
|
|
name: getMessage('contextmenu.module.down.align'),
|
|
},
|
|
{
|
|
id: 'moduleRemove',
|
|
name: getMessage('contextmenu.module.remove'),
|
|
},
|
|
{
|
|
id: 'moduleCircuitNumberEdit',
|
|
name: getMessage('contextmenu.module.circuit.number.edit'),
|
|
component: <CircuitNumberEdit id={popupId} />,
|
|
},
|
|
],
|
|
])
|
|
break
|
|
default:
|
|
currentMenuSetting()
|
|
}
|
|
} else {
|
|
currentMenuSetting()
|
|
}
|
|
}, [currentObject])
|
|
|
|
return {
|
|
contextMenu,
|
|
currentContextMenu,
|
|
setCurrentContextMenu,
|
|
handleClick,
|
|
handleKeyup,
|
|
}
|
|
}
|