보조선 이동, 사이즈 변경 모달 추가
This commit is contained in:
minsik
parent
78f892e4e3
commit
9d15682fe5
@ -1,19 +1,23 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
import { useEffect, useRef } from 'react'
|
||||
|
||||
import { useCanvas } from '@/hooks/useCanvas'
|
||||
import { useEvent } from '@/hooks/useEvent'
|
||||
import QContextMenu from '@/components/common/context-menu/QContextMenu'
|
||||
import { useContextMenu } from '@/hooks/useContextMenu'
|
||||
import { useRecoilValue } from 'recoil'
|
||||
import { currentMenuState } from '@/store/canvasAtom'
|
||||
import { MENU } from '@/common/common'
|
||||
import { currentObjectState } from '@/store/canvasAtom'
|
||||
|
||||
export default function CanvasFrame({ plan }) {
|
||||
const canvasRef = useRef(null)
|
||||
const { canvas } = useCanvas('canvas')
|
||||
const currentMenu = useRecoilValue(currentMenuState)
|
||||
const [contextMenu, setContextMenu] = useState([[]])
|
||||
const { contextMenu, currentContextMenu, setCurrentContextMenu } = useContextMenu()
|
||||
const currentObject = useRecoilValue(currentObjectState)
|
||||
|
||||
useEffect(() => {
|
||||
console.log(currentObject)
|
||||
}, [currentObject])
|
||||
useEvent()
|
||||
|
||||
const loadCanvas = () => {
|
||||
@ -31,129 +35,7 @@ export default function CanvasFrame({ plan }) {
|
||||
loadCanvas()
|
||||
}, [plan, canvas])
|
||||
|
||||
useEffect(() => {
|
||||
switch (currentMenu) {
|
||||
case MENU.PLAN_DRAWING:
|
||||
setContextMenu([
|
||||
[
|
||||
{
|
||||
name: '그리드 이동',
|
||||
},
|
||||
{
|
||||
name: '그리드 복사',
|
||||
},
|
||||
{
|
||||
name: '그리드 색 변경',
|
||||
},
|
||||
{
|
||||
name: '삭제',
|
||||
},
|
||||
{
|
||||
name: '전체 삭제',
|
||||
},
|
||||
],
|
||||
])
|
||||
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:
|
||||
console.log('지붕덮개')
|
||||
setContextMenu([
|
||||
[
|
||||
{
|
||||
name: '지붕재 배치',
|
||||
},
|
||||
{
|
||||
name: '지붕재 삭제',
|
||||
},
|
||||
{
|
||||
name: '지붕재 전체 삭제',
|
||||
},
|
||||
{
|
||||
name: '선택・이동',
|
||||
},
|
||||
{
|
||||
name: '외벽선 삭제',
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
name: '사이즈 변경',
|
||||
},
|
||||
{
|
||||
name: '보조선 이동(M)',
|
||||
},
|
||||
{
|
||||
name: '보조선 복사(C)',
|
||||
},
|
||||
{
|
||||
name: '보조선 삭제(D)',
|
||||
},
|
||||
{
|
||||
name: '보조선 수직이등분선',
|
||||
},
|
||||
{
|
||||
name: '보조선 절삭',
|
||||
},
|
||||
{
|
||||
name: '보조선 전체 삭제',
|
||||
},
|
||||
],
|
||||
])
|
||||
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:
|
||||
console.log('배치면')
|
||||
setContextMenu([
|
||||
[
|
||||
{
|
||||
name: '사이즈 변경',
|
||||
},
|
||||
{
|
||||
name: '삭제(D)',
|
||||
},
|
||||
{
|
||||
name: '이동(M)',
|
||||
},
|
||||
{
|
||||
name: '복사(C)',
|
||||
},
|
||||
],
|
||||
[
|
||||
{
|
||||
name: '지붕재 변경',
|
||||
},
|
||||
{
|
||||
name: '각 변 속성 변경',
|
||||
},
|
||||
{
|
||||
name: '흐름 방향 변경',
|
||||
},
|
||||
],
|
||||
])
|
||||
break
|
||||
default:
|
||||
console.log('default')
|
||||
setContextMenu([])
|
||||
break
|
||||
}
|
||||
}, [currentMenu])
|
||||
|
||||
useEffect(() => {
|
||||
console.log('currentMenu', currentMenu)
|
||||
console.log('contextMenu', contextMenu)
|
||||
}, [contextMenu])
|
||||
const onClickContextMenu = (index) => {}
|
||||
|
||||
return (
|
||||
<div className="canvas-frame flex justify-center">
|
||||
@ -162,11 +44,12 @@ export default function CanvasFrame({ plan }) {
|
||||
{contextMenu.map((menus, index) => (
|
||||
<ul key={index}>
|
||||
{menus.map((menu) => (
|
||||
<li>{menu.name}</li>
|
||||
<li onClick={(e) => setCurrentContextMenu(menu)}>{menu.name}</li>
|
||||
))}
|
||||
</ul>
|
||||
))}
|
||||
</QContextMenu>
|
||||
{currentContextMenu?.component}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,14 +1,16 @@
|
||||
import { useMessage } from '@/hooks/useMessage'
|
||||
import WithDraggable from '@/components/common/draggable/WithDraggable'
|
||||
|
||||
export default function AuxiliaryMove({ setShowAuxiliaryModal }) {
|
||||
export default function AuxiliaryMove({ setCurrentContextMenu }) {
|
||||
const { getMessage } = useMessage()
|
||||
return (
|
||||
<WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
|
||||
<WithDraggable isShow={true} pos={{ x: 0, y: 150 }}>
|
||||
<div className={`modal-pop-wrap xm`}>
|
||||
<div className="modal-head">
|
||||
<h1 className="title">補助線の移動 </h1>
|
||||
<button className="modal-close">닫기</button>
|
||||
<button className="modal-close" onClick={() => setCurrentContextMenu(null)}>
|
||||
닫기
|
||||
</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="grid-option-tit">移動する方向を入力してください</div>
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
import { useMessage } from '@/hooks/useMessage'
|
||||
import WithDraggable from '@/components/common/draggable/WithDraggable'
|
||||
|
||||
export default function AuxiliarySize({ setShowAuxiliaryModal }) {
|
||||
export default function AuxiliarySize({ setCurrentContextMenu }) {
|
||||
const { getMessage } = useMessage()
|
||||
return (
|
||||
<WithDraggable isShow={true} pos={{ x: 0, y: 150 }}>
|
||||
<div className={`modal-pop-wrap xm`}>
|
||||
<div className="modal-head">
|
||||
<h1 className="title">補助線サイズ変更 </h1>
|
||||
<button className="modal-close" onClick={() => setIsShow(false)}>
|
||||
<button className="modal-close" onClick={() => setCurrentContextMenu(null)}>
|
||||
닫기
|
||||
</button>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user