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

마크업 수정

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/floor-plan/CanvasFrame.jsx
View File

@ -6,8 +6,6 @@ import { useCanvas } from '@/hooks/useCanvas'
import { useEvent } from '@/hooks/useEvent' import { useEvent } from '@/hooks/useEvent'
import QContextMenu from '@/components/common/context-menu/QContextMenu' import QContextMenu from '@/components/common/context-menu/QContextMenu'
import { useContextMenu } from '@/hooks/useContextMenu' import { useContextMenu } from '@/hooks/useContextMenu'
import { useRecoilValue } from 'recoil'
import { currentObjectState } from '@/store/canvasAtom'
export default function CanvasFrame({ plan }) { export default function CanvasFrame({ plan }) {
const canvasRef = useRef(null) const canvasRef = useRef(null)
@ -35,7 +33,10 @@ export default function CanvasFrame({ plan }) {
return ( return (
<div className="canvas-frame flex justify-center"> <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}> <QContextMenu contextRef={canvasRef} canvasProps={canvas}>
{contextMenu.map((menus, index) => ( {contextMenu.map((menus, index) => (
<ul key={index}> <ul key={index}>

5
src/components/floor-plan/CanvasLayout.jsx
View File

@ -9,7 +9,8 @@ import { usePlan } from '@/hooks/usePlan'
import { globalLocaleStore } from '@/store/localeAtom' import { globalLocaleStore } from '@/store/localeAtom'
import { SessionContext } from '@/app/SessionProvider' import { SessionContext } from '@/app/SessionProvider'
export default function CanvasLayout() { export default function CanvasLayout(props) {
const { menuNumber } = props
const { session } = useContext(SessionContext) const { session } = useContext(SessionContext)
const [objectNo, setObjectNo] = useState('test123240822001') // 이후 삭제 필요 const [objectNo, setObjectNo] = useState('test123240822001') // 이후 삭제 필요
const globalLocaleState = useRecoilValue(globalLocaleStore) const globalLocaleState = useRecoilValue(globalLocaleStore)
@ -24,7 +25,7 @@ export default function CanvasLayout() {
return ( return (
<div className="canvas-layout"> <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"> <div className="canvas-plane-wrap">
{plans.map((plan) => ( {plans.map((plan) => (
<button <button

3
src/components/floor-plan/CanvasMenu.jsx
View File

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

58
src/components/floor-plan/FloorPlan.jsx
View File

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