마크업 수정

This commit is contained in:
minsik 2024-10-21 15:31:01 +09:00
parent faf733da92
commit fa2231d5b0
4 changed files with 38 additions and 35 deletions

View File

@ -6,8 +6,6 @@ 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 { currentObjectState } from '@/store/canvasAtom'
export default function CanvasFrame({ plan }) {
const canvasRef = useRef(null)
@ -35,7 +33,10 @@ export default function CanvasFrame({ plan }) {
return (
<div className="canvas-frame flex justify-center">
<canvas ref={canvasRef} id={'canvas'}></canvas>
<div className="canvas-container" style={{ position: 'relative' }}>
<canvas ref={canvasRef} id={'canvas'}></canvas>
</div>
<QContextMenu contextRef={canvasRef} canvasProps={canvas}>
{contextMenu.map((menus, index) => (
<ul key={index}>

View File

@ -9,7 +9,8 @@ import { usePlan } from '@/hooks/usePlan'
import { globalLocaleStore } from '@/store/localeAtom'
import { SessionContext } from '@/app/SessionProvider'
export default function CanvasLayout() {
export default function CanvasLayout(props) {
const { menuNumber } = props
const { session } = useContext(SessionContext)
const [objectNo, setObjectNo] = useState('test123240822001') //
const globalLocaleState = useRecoilValue(globalLocaleStore)
@ -24,7 +25,7 @@ export default function CanvasLayout() {
return (
<div className="canvas-layout">
<div className="canvas-page-list">
<div className={`canvas-page-list ${menuNumber === 2 || menuNumber === 3 || menuNumber === 4 ? 'active' : ''}`}>
<div className="canvas-plane-wrap">
{plans.map((plan) => (
<button

View File

@ -33,6 +33,8 @@ const canvasMenus = [
export default function CanvasMenu(props) {
const {
menuNumber,
setMenuNumber,
setShowCanvasSettingModal,
showOutlineModal,
setShowOutlineModal,
@ -53,7 +55,6 @@ export default function CanvasMenu(props) {
setShowPropertiesSettingModal,
} = props
const [menuNumber, setMenuNumber] = useState(null)
const [type, setType] = useState('')
const [verticalHorizontalMode, setVerticalHorizontalMode] = useRecoilState(verticalHorizontalModeState)

View File

@ -53,7 +53,7 @@ export default function FloorPlan() {
const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState)
const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState)
const [objectNo, setObjectNo] = useState('test123240912001') //
const [menuNumber, setMenuNumber] = useState(null)
const [showDotLineGridModal, setShowDotLineGridModal] = useState(false)
const [showGridCopyModal, setShowGridCopyModal] = useState(false)
const [showGridMoveModal, setShowGridMoveModal] = useState(false)
@ -70,6 +70,8 @@ export default function FloorPlan() {
}
const modalProps = {
menuNumber,
setMenuNumber,
setShowCanvasSettingModal,
showOutlineModal,
setShowOutlineModal,
@ -136,35 +138,33 @@ export default function FloorPlan() {
useEffect(() => {}, [showOutlineModal])
return (
<>
<div className="canvas-wrap">
<CanvasMenu {...modalProps} />
<div className="canvas-content">
<CanvasLayout />
{showCanvasSettingModal && <SettingModal01 {...canvasSettingProps} />}
{showOutlineModal && <WallLineSetting {...outlineProps} />}
{showDotLineGridModal && <DotLineGrid {...dotLineProps} />}
{showColorPickerModal && <GridColorSetting {...gridColorProps} />}
{showPropertiesSettingModal && <PropertiesSetting {...propertiesSettingProps} />}
<div className="canvas-wrap">
<CanvasMenu {...modalProps} />
<div className={`canvas-content ${menuNumber === 2 || menuNumber === 3 || menuNumber === 4 ? 'active' : ''}`}>
<CanvasLayout menuNumber={menuNumber} setMenuNumber={setMenuNumber} />
{showCanvasSettingModal && <SettingModal01 {...canvasSettingProps} />}
{showOutlineModal && <WallLineSetting {...outlineProps} />}
{showDotLineGridModal && <DotLineGrid {...dotLineProps} />}
{showColorPickerModal && <GridColorSetting {...gridColorProps} />}
{showPropertiesSettingModal && <PropertiesSetting {...propertiesSettingProps} />}
{showPlaceShapeModal && <PlacementShapeSetting setShowPlaceShapeModal={setShowPlaceShapeModal} />}
{showRoofShapeSettingModal && <RoofShapeSetting setShowRoofShapeSettingModal={setShowRoofShapeSettingModal} />}
{showRoofShapePassivitySettingModal && (
<RoofShapePassivitySetting setShowRoofShapePassivitySettingModal={setShowRoofShapePassivitySettingModal} />
)}
{showAuxiliaryModal && <AuxiliaryDrawing setShowAuxiliaryModal={setShowAuxiliaryModal} />}
{showSlopeSettingModal && <Slope setShowSlopeSettingModal={setShowSlopeSettingModal} />}
{showPlaceShapeDrawingModal && <PlacementShapeDrawing setShowPlaceShapeDrawingModal={setShowPlaceShapeDrawingModal} />}
{showEavesGableEditModal && <EavesGableEdit setShowEavesGableEditModal={setShowEavesGableEditModal} />}
{showMovementModal && <MovementSetting setShowMovementModal={setShowMovementModal} />}
{showRoofAllocationSettingModal && <RoofAllocationSetting setShowRoofAllocationSettingModal={setShowRoofAllocationSettingModal} />}
{showWallLineOffsetSettingModal && <WallLineOffsetSetting setShowWallLineOffsetSettingModal={setShowWallLineOffsetSettingModal} />}
{showObjectSettingModal && <ObjectSetting setShowObjectSettingModal={setShowObjectSettingModal} />}
{showPlacementSurfaceSettingModal && <PlacementSurfaceSetting setShowPlacementSurfaceSettingModal={setShowPlacementSurfaceSettingModal} />}
{showBasicSettingModal && <BasicSetting setShowBasicSettingModal={setShowBasicSettingModal} />}
{showCircuitTrestleSettingModal && <CircuitTrestleSetting setShowCircuitTrestleSettingModal={setShowCircuitTrestleSettingModal} />}
</div>
{showPlaceShapeModal && <PlacementShapeSetting setShowPlaceShapeModal={setShowPlaceShapeModal} />}
{showRoofShapeSettingModal && <RoofShapeSetting setShowRoofShapeSettingModal={setShowRoofShapeSettingModal} />}
{showRoofShapePassivitySettingModal && (
<RoofShapePassivitySetting setShowRoofShapePassivitySettingModal={setShowRoofShapePassivitySettingModal} />
)}
{showAuxiliaryModal && <AuxiliaryDrawing setShowAuxiliaryModal={setShowAuxiliaryModal} />}
{showSlopeSettingModal && <Slope setShowSlopeSettingModal={setShowSlopeSettingModal} />}
{showPlaceShapeDrawingModal && <PlacementShapeDrawing setShowPlaceShapeDrawingModal={setShowPlaceShapeDrawingModal} />}
{showEavesGableEditModal && <EavesGableEdit setShowEavesGableEditModal={setShowEavesGableEditModal} />}
{showMovementModal && <MovementSetting setShowMovementModal={setShowMovementModal} />}
{showRoofAllocationSettingModal && <RoofAllocationSetting setShowRoofAllocationSettingModal={setShowRoofAllocationSettingModal} />}
{showWallLineOffsetSettingModal && <WallLineOffsetSetting setShowWallLineOffsetSettingModal={setShowWallLineOffsetSettingModal} />}
{showObjectSettingModal && <ObjectSetting setShowObjectSettingModal={setShowObjectSettingModal} />}
{showPlacementSurfaceSettingModal && <PlacementSurfaceSetting setShowPlacementSurfaceSettingModal={setShowPlacementSurfaceSettingModal} />}
{showBasicSettingModal && <BasicSetting setShowBasicSettingModal={setShowBasicSettingModal} />}
{showCircuitTrestleSettingModal && <CircuitTrestleSetting setShowCircuitTrestleSettingModal={setShowCircuitTrestleSettingModal} />}
</div>
</>
</div>
)
}