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 16:27:19 +09:00
parent f26429ef99
commit 82009ef281
19 changed files with 61 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,14 +4,15 @@ 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 { currentObjectState } from '@/store/canvasAtom'
import { useCanvasEvent } from '@/hooks/useCanvasEvent'
import QContextMenu from '@/components/common/context-menu/QContextMenu'
export default function CanvasFrame({ plan }) {
const canvasRef = useRef(null)
console.log(canvasRef)
const { canvas } = useCanvas('canvas')
const { handleZoomClear } = useCanvasEvent()
const { contextMenu, currentContextMenu, setCurrentContextMenu } = useContextMenu({
@ -42,10 +43,8 @@ export default function CanvasFrame({ plan }) {
const onClickContextMenu = (index) => {}
return (
<div className="canvas-frame flex justify-center">
<div className="canvas-container" style={{ position: 'relative' }}>
<canvas ref={canvasRef} id={'canvas'}></canvas>
</div>
<div className="canvas-frame">
<canvas ref={canvasRef} id="canvas" style={{ position: 'relative' }}></canvas>
<QContextMenu contextRef={canvasRef} canvasProps={canvas}>
{contextMenu.map((menus, index) => (
@ -62,7 +61,7 @@ export default function CanvasFrame({ plan }) {
>
{menu.name}
</li>
))}
))}
</ul>
))}
</QContextMenu>

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

@ -23,6 +23,7 @@ import { useCanvasEvent } from '@/hooks/useCanvasEvent'
import { popupState } from '@/store/popupAtom'
import SettingModal01 from '@/components/floor-plan/modal/setting01/SettingModal01'
import { usePopup } from '@/hooks/usePopup'
import { placementShapeDrawingPointsState } from '@/store/placementShapeDrawingAtom'
const canvasMenus = [
{ index: 0, name: 'plan.menu.plan.drawing', icon: 'con00', title: MENU.PLAN_DRAWING },
@ -79,6 +80,19 @@ export default function CanvasMenu(props) {
const { swalFire } = useSwal()
const [popup, setPopup] = useRecoilState(popupState)
const SelectOption = [{ name: '瓦53A' }, { name: '瓦53A' }]
useEffect(() => {
console.log(canvas)
if (canvas) {
const circle = new fabric.Circle({
left: 300,
top: 300,
radius: 5,
stroke: 'black',
})
canvas.add(circle)
canvas.renderAll()
}
}, [])
const onClickNav = (menu) => {
setMenuNumber(menu.index)
setCurrentMenu(menu.title)

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

@ -128,8 +128,8 @@ export default function FloorPlan() {
<>
<div className="canvas-wrap">
<CanvasMenu {...modalProps} />
<div className="canvas-content">
<CanvasLayout />
<div className={`canvas-content ${menuNumber === 2 || menuNumber === 3 || menuNumber === 4 ? 'active' : ''}`}>
<CanvasLayout menuNumber={menuNumber} />
{showOutlineModal && <WallLineSetting {...outlineProps} />}
{showPropertiesSettingModal && <PropertiesSetting {...propertiesSettingProps} />}
{showPlaceShapeModal && <PlacementShapeSetting setShowPlaceShapeModal={setShowPlaceShapeModal} />}

2
src/components/floor-plan/modal/Slope.jsx
View File

@ -9,7 +9,7 @@ export default function Slope({ setShowSlopeSettingModal }) {
const [globalPitch, setGlobalPitch] = useRecoilState(globalPitchState)
const inputRef = useRef()
return (
<WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
<WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
<div className={`modal-pop-wrap xxxm`}>
<div className="modal-head">
<h1 className="title">{getMessage('plan.menu.placement.surface.slope.setting')} </h1>

2
src/components/floor-plan/modal/auxiliary/AuxiliaryDrawing.jsx
View File

@ -121,7 +121,7 @@ export default function AuxiliaryDrawing({ setShowAuxiliaryModal }) {
setType(button.type)
}
return (
<WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
<WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
<div className={`modal-pop-wrap r`}>
<div className="modal-head">
<h1 className="title">{getMessage('modal.auxiliary.drawing')}</h1>

2
src/components/floor-plan/modal/basic/BasicSetting.jsx
View File

@ -14,7 +14,7 @@ export default function BasicSetting({ setShowBasicSettingModal }) {
const [tabNum, setTabNum] = useState(1)
const [canvasSetting, setCanvasSetting] = useRecoilState(canvasSettingState)
return (
<WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
<WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
<div className={`modal-pop-wrap lx-2`}>
<div className="modal-head">
<h1 className="title">{getMessage('plan.menu.module.circuit.setting.default')}</h1>

2
src/components/floor-plan/modal/circuitTrestle/CircuitTrestleSetting.jsx
View File

@ -14,7 +14,7 @@ export default function CircuitTrestleSetting({ setShowCircuitTrestleSettingModa
setCircuitAllocationType,
}
return (
<WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
<WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
<div className={`modal-pop-wrap lx-2`}>
<div className="modal-head">
<h1 className="title">{getMessage('modal.circuit.trestle.setting')} </h1>

3
src/components/floor-plan/modal/eavesGable/EavesGableEdit.jsx
View File

@ -1,6 +1,5 @@
import { useMessage } from '@/hooks/useMessage'
import WithDraggable from '@/components/common/draggable/WithDraggable'
import { useState } from 'react'
import Eaves from '@/components/floor-plan/modal/eavesGable/type/Eaves'
import Gable from '@/components/floor-plan/modal/eavesGable/type/Gable'
import WallMerge from '@/components/floor-plan/modal/eavesGable/type/WallMerge'
@ -35,7 +34,7 @@ export default function EavesGableEdit({ setShowEavesGableEditModal }) {
}
return (
<WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
<WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
<div className={`modal-pop-wrap r`}>
<div className="modal-head">
<h1 className="title">{getMessage('modal.eaves.gable.edit')}</h1>

2
src/components/floor-plan/modal/movement/MovementSetting.jsx
View File

@ -13,7 +13,7 @@ export default function MovementSetting({ setShowMovementModal }) {
]
return (
<WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
<WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
<div className={`modal-pop-wrap r`}>
<div className="modal-head">
<h1 className="title">{getMessage('plan.menu.roof.cover.movement.shape.updown')}</h1>

5
src/components/floor-plan/modal/object/ObjectSetting.jsx
View File

@ -1,9 +1,8 @@
'use client'
import { useState, useRef, useEffect } from 'react'
import { useEffect, useRef, useState } from 'react'
import { useRecoilValue } from 'recoil'
import { useMessage } from '@/hooks/useMessage'
import { useEvent } from '@/hooks/useEvent'
import { canvasState } from '@/store/canvasAtom'
import { useSwal } from '@/hooks/useSwal'
import { useObjectBatch } from '@/hooks/object/useObjectBatch'
@ -74,7 +73,7 @@ export default function ObjectSetting({ setShowObjectSettingModal }) {
{ id: 4, name: getMessage('modal.object.setting.type.pentagon.dormer') },
]
return (
<WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
<WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
<div className={`modal-pop-wrap lrr`}>
<div className="modal-head">
<h1 className="title">{getMessage('plan.menu.placement.surface.object')} </h1>

2
src/components/floor-plan/modal/outerlinesetting/PropertiesSetting.jsx
View File

@ -9,7 +9,7 @@ export default function PropertiesSetting(props) {
const { handleSetEaves, handleSetGable, handleRollback, handleFix, closeModal } = usePropertiesSetting(setShowPropertiesSettingModal)
return (
<WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
<WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
<div className={`modal-pop-wrap ssm`}>
<div className="modal-head">
<h1 className="title">{getMessage('modal.canvas.setting.wallline.properties.setting')}</h1>

2
src/components/floor-plan/modal/outerlinesetting/WallLineSetting.jsx
View File

@ -109,7 +109,7 @@ export default function WallLineSetting(props) {
}
return (
<WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
<WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
<div className={`modal-pop-wrap r mount`}>
<div className="modal-head">
<h1 className="title">{getMessage('modal.cover.outline.drawing')}</h1>

3
src/components/floor-plan/modal/placementShape/PlacementShapeDrawing.jsx
View File

@ -5,7 +5,6 @@ import RightAngle from '@/components/floor-plan/modal/lineTypes/RightAngle'
import DoublePitch from '@/components/floor-plan/modal/lineTypes/DoublePitch'
import Angle from '@/components/floor-plan/modal/lineTypes/Angle'
import Diagonal from '@/components/floor-plan/modal/lineTypes/Diagonal'
import { useOuterLineWall } from '@/hooks/roofcover/useOuterLineWall'
import { OUTER_LINE_TYPE } from '@/store/outerLineAtom'
import OuterLineWall from '@/components/floor-plan/modal/lineTypes/OuterLineWall'
import { usePlacementShapeDrawing } from '@/hooks/surface/usePlacementShapeDrawing'
@ -120,7 +119,7 @@ export default function PlacementShapeDrawing({ setShowPlaceShapeDrawingModal })
setType(button.type)
}
return (
<WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
<WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
<div className={`modal-pop-wrap r`}>
<div className="modal-head">
<h1 className="title">{getMessage('plan.menu.placement.surface.drawing')}</h1>

16
src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
View File

@ -1,7 +1,6 @@
import SizeGuide from '@/components/floor-plan/modal/placementShape/SizeGuide'
import MaterialGuide from '@/components/floor-plan/modal/placementShape/MaterialGuide'
import WithDraggable from '@/components/common/draggable/WithDraggable'
import { Button, Checkbox, CheckboxGroup, RadioGroup, Radio, Input, Select, SelectItem } from '@nextui-org/react'
import { useRecoilState } from 'recoil'
import { Fragment, useEffect, useState } from 'react'
import { canvasSettingState } from '@/store/canvasAtom'
@ -18,7 +17,18 @@ export default function PlacementShapeSetting({ setShowPlaceShapeModal }) {
const [basicSetting, setBasicSettings] = useState({
roofSizeSet: 1,
roofAngleSet: 'slope',
roofs: [{ roofApply: true, roofSeq: 1, roofType: 1, roofWidth: 200, roofHeight: 200, roofHajebichi: 200, roofGap: 0, roofLayout: 'parallel' }],
roofs: [
{
roofApply: true,
roofSeq: 1,
roofType: 1,
roofWidth: 200,
roofHeight: 200,
roofHajebichi: 200,
roofGap: 0,
roofLayout: 'parallel',
},
],
})
const { getMessage } = useMessage()
@ -159,7 +169,7 @@ export default function PlacementShapeSetting({ setShowPlaceShapeModal }) {
}
return (
<WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
<WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
<div className={`modal-pop-wrap l mount`}>
<div className="modal-head">
<h1 className="title">{getMessage('plan.menu.placement.surface.initial.setting')}</h1>

4
src/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting.jsx
View File

@ -1,6 +1,6 @@
import { useMessage } from '@/hooks/useMessage'
import WithDraggable from '@/components/common/draggable/WithDraggable'
import { useEffect, useState, useRef } from 'react'
import { useEffect, useRef, useState } from 'react'
import Image from 'next/image'
import PlacementSurface from '@/components/floor-plan/modal/placementSurface/PlacementSurface'
import { useSurfaceShapeBatch } from '@/hooks/surface/useSurfaceShapeBatch'
@ -239,7 +239,7 @@ export default function PlacementSurfaceSetting({ setShowPlacementSurfaceSetting
}, [])
return (
<WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
<WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
<div className={`modal-pop-wrap l-2`}>
<div className="modal-head">
<h1 className="title">{getMessage('plan.menu.placement.surface.arrangement')} </h1>

3
src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx
View File

@ -1,6 +1,5 @@
import { useMessage } from '@/hooks/useMessage'
import WithDraggable from '@/components/common/draggable/WithDraggable'
import { useState } from 'react'
import QSelectBox from '@/components/common/select/QSelectBox'
import { useRoofAllocationSetting } from '@/hooks/roofcover/useRoofAllocationSetting'
@ -10,7 +9,7 @@ export default function RoofAllocationSetting({ setShowRoofAllocationSettingModa
useRoofAllocationSetting(setShowRoofAllocationSettingModal)
return (
<WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
<WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
<div className={`modal-pop-wrap ml`}>
<div className="modal-head">
<h1 className="title">{getMessage('plan.menu.estimate.roof.alloc')}</h1>

2
src/components/floor-plan/modal/roofShape/RoofShapePassivitySetting.jsx
View File

@ -25,7 +25,7 @@ export default function RoofShapePassivitySetting({ setShowRoofShapePassivitySet
}
return (
<WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
<WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
<div className={`modal-pop-wrap xxm`}>
<div className="modal-head">
<h1 className="title">{getMessage('plan.menu.roof.cover.roof.shape.passivity.setting')}</h1>

13
src/components/floor-plan/modal/roofShape/RoofShapeSetting.jsx
View File

@ -67,10 +67,19 @@ export default function RoofShapeSetting({ setShowRoofShapeSettingModal }) {
handleRollBack,
}
const directionProps = { pitch, setPitch, eavesOffset, setEavesOffset, gableOffset, setGableOffset, shedWidth, setShedWidth }
const directionProps = {
pitch,
setPitch,
eavesOffset,
setEavesOffset,
gableOffset,
setGableOffset,
shedWidth,
setShedWidth,
}
return (
<WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
<WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
<div className={`modal-pop-wrap lr mount`}>
<div className="modal-head">
<h1 className="title">{getMessage('modal.roof.shape.setting')}</h1>

3
src/components/floor-plan/modal/wallLineOffset/WallLineOffsetSetting.jsx
View File

@ -1,6 +1,5 @@
import { useMessage } from '@/hooks/useMessage'
import WithDraggable from '@/components/common/draggable/WithDraggable'
import { useState } from 'react'
import WallLine from '@/components/floor-plan/modal/wallLineOffset/type/WallLine'
import Offset from '@/components/floor-plan/modal/wallLineOffset/type/Offset'
import { useWallLineOffsetSetting } from '@/hooks/roofcover/useWallLineOffsetSetting'
@ -38,7 +37,7 @@ export default function WallLineOffsetSetting({ setShowWallLineOffsetSettingModa
}
return (
<WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
<WithDraggable isShow={true} pos={{ x: 50, y: 230 }}>
<div className={`modal-pop-wrap r`}>
<div className="modal-head">
<h1 className="title">{getMessage('modal.wallline.offset.setting')}</h1>