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

Merge branch 'qcast-pub' into dev

Browse Source
This commit is contained in:
minsik 2024-10-10 17:53:31 +09:00
commit a95c870f56
9 changed files with 282 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/common/context-menu/QContextMenu.jsx
View File

@ -1,5 +1,6 @@
'use client'
import { Children, useEffect, useState } from 'react'
import { useEffect, useState } from 'react'
import '@/styles/contents.scss'
export default function QContextMenu(props) {
const { contextRef, canvasProps } = props
@ -7,7 +8,7 @@ export default function QContextMenu(props) {
// const children = useRecoilValue(modalContent)
const [contextMenu, setContextMenu] = useState({ visible: false, x: 0, y: 0 })
const activeObject = canvasProps.getActiveObject() //액티브된 객체를 가져옴
const activeObject = canvasProps?.getActiveObject() //액티브된 객체를 가져옴
let contextType = ''
@ -26,7 +27,8 @@ export default function QContextMenu(props) {
const handleContextMenu = (e) => {
e.preventDefault() //기존 contextmenu 막고
setContextMenu({ visible: true, x: e.pageX, y: e.pageY })
canvasProps.upperCanvasEl.removeEventListener('contextmenu', handleContextMenu) //한번 노출 후 이벤트 삭제
console.log(111, canvasProps)
canvasProps?.upperCanvasEl.removeEventListener('contextmenu', handleContextMenu) //한번 노출 후 이벤트 삭제
}
const handleClick = (e) => {
@ -41,7 +43,7 @@ export default function QContextMenu(props) {
}
}
canvasProps.upperCanvasEl.addEventListener('contextmenu', handleContextMenu)
canvasProps?.upperCanvasEl.addEventListener('contextmenu', handleContextMenu)
document.addEventListener('click', handleClick)
document.addEventListener('click', handleOutsideClick)
@ -57,7 +59,7 @@ export default function QContextMenu(props) {
lockMovementY: false, // Y 축 이동 잠금
})
canvasProps.on('object:modified', function (e) {
canvasProps?.on('object:modified', function (e) {
activeObject.set({
lockMovementX: true, // X 축 이동 잠금
lockMovementY: true, // Y 축 이동 잠금
@ -89,19 +91,19 @@ export default function QContextMenu(props) {
return (
<>
{contextMenu.visible && (
<div style={{ position: 'absolute', top: contextMenu.y, left: contextMenu.x, zIndex: 2000 }}>
<ul style={{ listStyle: 'none', margin: 0, padding: '5px' }}>
<li style={{ padding: '8px 12px', cursor: 'pointer' }} onClick={() => handleObjectMove()}>
이동
</li>
<li style={{ padding: '8px 12px', cursor: 'pointer' }} onClick={() => handleObjectDelete()}>
삭제
</li>
<li style={{ padding: '8px 12px', cursor: 'pointer' }} onClick={() => handleObjectCopy()}>
복사
</li>
{props.children}
</ul>
<div className="context-menu-wrap" style={{ position: 'fixed', top: contextMenu.y, left: contextMenu.x, zIndex: 2000 }}>
{/*<ul>*/}
{/*<li style={{ padding: '8px 12px', cursor: 'pointer' }} onClick={() => handleObjectMove()}>*/}
{/* 이동*/}
{/*</li>*/}
{/*<li style={{ padding: '8px 12px', cursor: 'pointer' }} onClick={() => handleObjectDelete()}>*/}
{/* 삭제*/}
{/*</li>*/}
{/*<li style={{ padding: '8px 12px', cursor: 'pointer' }} onClick={() => handleObjectCopy()}>*/}
{/* 복사*/}
{/*</li>*/}
{/*</ul>*/}
{props.children}
</div>
)}
</>

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

@ -1,13 +1,19 @@
'use client'
import { useEffect, useRef } from 'react'
import { useEffect, useRef, useState } from 'react'
import { useCanvas } from '@/hooks/useCanvas'
import { useEvent } from '@/hooks/useEvent'
import QContextMenu from '@/components/common/context-menu/QContextMenu'
import { useRecoilValue } from 'recoil'
import { currentMenuState } from '@/store/canvasAtom'
import { MENU } from '@/common/common'
export default function CanvasFrame({ plan }) {
const canvasRef = useRef(null)
const { canvas } = useCanvas('canvas')
const currentMenu = useRecoilValue(currentMenuState)
const [contextMenu, setContextMenu] = useState([[]])
useEvent()
const loadCanvas = () => {
@ -25,9 +31,142 @@ export default function CanvasFrame({ plan }) {
loadCanvas()
}, [plan])
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])
return (
<div className="canvas-frame flex justify-center">
<canvas ref={canvasRef} id={'canvas'}></canvas>
<QContextMenu contextRef={canvasRef} canvasProps={canvas}>
{contextMenu.map((menus, index) => (
<ul key={index}>
{menus.map((menu) => (
<li>{menu.name}</li>
))}
</ul>
))}
</QContextMenu>
</div>
)
}

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

@ -23,6 +23,7 @@ import EavesGableEdit from '@/components/floor-plan/modal/eavesGable/EavesGableE
import WallLineOffsetSetting from '@/components/floor-plan/modal/wallLineOffset/WallLineOffsetSetting'
import ObjectSetting from '@/components/floor-plan/modal/object/ObjectSetting'
import PlacementSurfaceSetting from '@/components/floor-plan/modal/placementSurface/PlacementSurfaceSetting'
import RoofShapePassivitySetting from '@/components/floor-plan/modal/roofShape/RoofShapePassivitySetting'
export default function FloorPlan() {
const [showCanvasSettingModal, setShowCanvasSettingModal] = useState(false)
@ -132,8 +133,12 @@ export default function FloorPlan() {
{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} />}

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

@ -25,7 +25,7 @@ export default function RoofShapePassivitySetting({ setShowRoofShapePassivitySet
<div className="modal-body">
<div className="modal-btn-wrap">
{buttons.map((button) => (
<button className={`btn-frame modal ${buttonAct === button.id ? 'act' : ''}`} onClick={() => setButtonAct(button.id)}>
<button id={button.id} className={`btn-frame modal ${buttonAct === button.id ? 'act' : ''}`} onClick={() => setButtonAct(button.id)}>
{button.name}
</button>
))}

18
src/components/floor-plan/modal/roofShape/passivity/Eaves.jsx
View File

@ -22,24 +22,6 @@ export default function Eaves() {
</div>
<span className="thin">mm</span>
</div>
<div className="outline-form mb10">
<span className="mr10" style={{ width: '63px' }}>
{getMessage('gable.offset')}
</span>
<div className="input-grid mr5">
<input type="text" className="input-origin block" defaultValue={100} />
</div>
<span className="thin">mm</span>
</div>
<div className="outline-form mb10">
<span className="mr10" style={{ width: '63px' }}>
{getMessage('shed.width')}
</span>
<div className="input-grid mr5">
<input type="text" className="input-origin block" defaultValue={100} />
</div>
<span className="thin">mm</span>
</div>
</>
)
}

106
src/styles/_canvasside.scss Normal file
View File

@ -0,0 +1,106 @@
// 패널 배치 집계
.penal-wrap{
position: fixed;
top: 200px;
left: 50px;
z-index: 999999;
width: 237px;
height: 40px;
line-height: 40px;
background-color: #fff;
border: 1px solid #DFDFDF;
padding: 0 34px 0 10px;
border-radius: 2px;
box-shadow: 0px 7px 14px 0px rgba(0, 0, 0, 0.05);
cursor: pointer;
&::before{
content: '';
position: absolute;
top: 50%;
right: 12px;
transform: translateY(-50%);
width: 10px;
height: 6px;
background: url(../../public/static/images/canvas/penal_arr.svg)no-repeat center;
background-size: cover;
}
h2{
font-size: 12px;
font-weight: 500;
color: #3D3D3D;
}
.penal-table-wrap{
display: none;
position: absolute;
top: 100%;
left: -1px;
min-width: calc(100% + 2px);
background-color: #3D3D3D;
border: 1px solid #3D3D3D;
padding: 20px;
.penal-table{
table-layout: fixed;
border-collapse: collapse;
thead{
th{
text-align: center;
background-color:rgba(255, 255, 255, 0.05);
font-size: 12px;
font-weight: 500;
color: #fff;
border: 1px solid #505050;
}
}
tbody{
td{
font-size: 12px;
color: #fff;
font-weight: 400;
text-align: center;
padding: 0 10px;
border: 1px solid #505050;
}
}
}
}
&.act{
border: 1px solid #3D3D3D;
background-color: #3D3D3D;
h2{
color: #fff;
}
&::before{
background: url(../../public/static/images/canvas/penal_arr_white.svg)no-repeat center;
}
.penal-table-wrap{
display: block;
}
}
}
// context menu
.context-menu-wrap{
min-width: 238px;
border-radius: 4px;
border: 1px solid #E9E9E9;
background: #FFF;
box-shadow: 0px 6px 14px 0px rgba(0, 0, 0, 0.05);
ul{
padding: 17px 0;
border-bottom: 1px solid #E9E9E9;
&:last-child{
border: none;
}
li{
padding: 4px 30px;
cursor: pointer;
font-size: 12px;
font-weight: 400;
color: #101010;
&:hover{
color: #fff;
background-color: #0D99FF;
}
}
}
}

86
src/styles/_contents.scss
View File

@ -543,6 +543,12 @@
font-weight: 600;
margin-right: 14px;
}
.option{
padding-left: 5px;
font-size: 13px;
color: #101010;
font-weight: 400;
}
.info-wrap{
display: flex;
align-items: center;
@ -844,83 +850,3 @@
}
}
// 패널 배치 집계
.penal-wrap{
position: fixed;
top: 200px;
left: 50px;
z-index: 999999;
width: 237px;
height: 40px;
line-height: 40px;
background-color: #fff;
border: 1px solid #DFDFDF;
padding: 0 34px 0 10px;
border-radius: 2px;
box-shadow: 0px 7px 14px 0px rgba(0, 0, 0, 0.05);
cursor: pointer;
&::before{
content: '';
position: absolute;
top: 50%;
right: 12px;
transform: translateY(-50%);
width: 10px;
height: 6px;
background: url(../../public/static/images/canvas/penal_arr.svg)no-repeat center;
background-size: cover;
}
h2{
font-size: 12px;
font-weight: 500;
color: #3D3D3D;
}
.penal-table-wrap{
display: none;
position: absolute;
top: 100%;
left: -1px;
min-width: calc(100% + 2px);
background-color: #3D3D3D;
border: 1px solid #3D3D3D;
padding: 20px;
.penal-table{
table-layout: fixed;
border-collapse: collapse;
thead{
th{
text-align: center;
background-color:rgba(255, 255, 255, 0.05);
font-size: 12px;
font-weight: 500;
color: #fff;
border: 1px solid #505050;
}
}
tbody{
td{
font-size: 12px;
color: #fff;
font-weight: 400;
text-align: center;
padding: 0 10px;
border: 1px solid #505050;
}
}
}
}
&.act{
border: 1px solid #3D3D3D;
background-color: #3D3D3D;
h2{
color: #fff;
}
&::before{
background: url(../../public/static/images/canvas/penal_arr_white.svg)no-repeat center;
}
.penal-table-wrap{
display: block;
}
}
}

3
src/styles/contents.scss
View File

@ -1,3 +1,4 @@
@import '_contents.scss';
@import '_modal.scss';
@import '_table.scss';
@import '_table.scss';
@import '_canvasside.scss';

3
src/styles/style.scss
View File

@ -1 +1,2 @@
@import '_main.scss';
@import '_main.scss';
@import '_contents';