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

context menu 추가

Browse Source
This commit is contained in:
김창수 2024-10-10 14:29:05 +09:00
parent 97b2de382d
commit f589ef74af
5 changed files with 135 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/canvas/page.jsx
View File

@ -54,6 +54,7 @@ import AdditionalColumnDelete from '@/components/canvas/modal/additionalfunction
import AdditionalColumnEdit from '@/components/canvas/modal/additionalfunction/moduleadditional/AdditionalColumnEdit'
import AdditionalBundleDelete from '@/components/canvas/modal/additionalfunction/moduleadditional/AdditionalBundleDelete'
import AdditionalBundleEdit from '@/components/canvas/modal/additionalfunction/moduleadditional/AdditionalBundleEdit'
import CanvasContextMenu from '@/components/canvas/CanvasContextMenu'
export default function CanvasPage() {
const modalOption = useRecoilValue(modalState);
@ -67,6 +68,9 @@ export default function CanvasPage() {
<div className="canvas-content">
<CanvasLayout menuValue={menuValue}/>
</div>
{/* 우클릭 context menu */}
<CanvasContextMenu/>
{/* 패널 배치 집계 */}
{/* <Penal01/> */}
{/* <Penal02/> */}
@ -169,7 +173,7 @@ export default function CanvasPage() {
{/* <AdditionalColumnDelete/> */}
{/* <AdditionalColumnEdit/> */}
{/* <AdditionalBundleDelete/> */}
<AdditionalBundleEdit/>
{/* <AdditionalBundleEdit/> */}
</div>
</div>
</div>

22
src/components/canvas/CanvasContextMenu.jsx Normal file
View File

@ -0,0 +1,22 @@
export default function CanvasContextMenu() {
return(
<div className="context-menu-wrap" style={{position: 'absolute', top: '200px', left: '200px'}}>
<ul>
<li>屋根材の配置</li>
<li>屋根材の削除</li>
<li>材全体を削除</li>
<li>選択∙移動</li>
<li>外壁の削除</li>
</ul>
<ul>
<li>サイズ変更</li>
<li>補助線移動(M)</li>
<li>補助線のコピー(C)</li>
<li>補助線削除(D)</li>
<li>線垂直二等分線</li>
<li>補助線切削</li>
<li>補助線全体を削除</li>
</ul>
</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;
}
}
}
}

80
src/styles/_contents.scss
View File

@ -850,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;
}
}
}

1
src/styles/contents.scss
View File

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