diff --git a/src/app/canvas/page.jsx b/src/app/canvas/page.jsx index e56e895..da62fdb 100644 --- a/src/app/canvas/page.jsx +++ b/src/app/canvas/page.jsx @@ -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() {
+ {/* 우클릭 context menu */} + + {/* 패널 배치 집계 */} {/* */} {/* */} @@ -169,7 +173,7 @@ export default function CanvasPage() { {/* */} {/* */} {/* */} - + {/* */} diff --git a/src/components/canvas/CanvasContextMenu.jsx b/src/components/canvas/CanvasContextMenu.jsx new file mode 100644 index 0000000..caaebd6 --- /dev/null +++ b/src/components/canvas/CanvasContextMenu.jsx @@ -0,0 +1,22 @@ +export default function CanvasContextMenu() { + return( +
+
    +
  • 屋根材の配置
    • +
  • 屋根材の削除
    • +
  • 材全体を削除
    • +
  • 選択∙移動
    • +
  • 外壁の削除
    • +
+
    +
  • サイズ変更
    • +
  • 補助線移動(M)
    • +
  • 補助線のコピー(C)
    • +
  • 補助線削除(D)
    • +
  • 線垂直二等分線
    • +
  • 補助線切削
    • +
  • 補助線全体を削除
    • +
+
+ ) +} \ No newline at end of file diff --git a/src/styles/_canvasside.scss b/src/styles/_canvasside.scss new file mode 100644 index 0000000..66bba83 --- /dev/null +++ b/src/styles/_canvasside.scss @@ -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; + } + } + } +} \ No newline at end of file diff --git a/src/styles/_contents.scss b/src/styles/_contents.scss index 3f3580b..7e087a8 100644 --- a/src/styles/_contents.scss +++ b/src/styles/_contents.scss @@ -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; - } - } -} \ No newline at end of file diff --git a/src/styles/contents.scss b/src/styles/contents.scss index 3e82124..38e7ff8 100644 --- a/src/styles/contents.scss +++ b/src/styles/contents.scss @@ -1,3 +1,4 @@ @import '_contents.scss'; @import '_modal.scss'; -@import '_table.scss'; \ No newline at end of file +@import '_table.scss'; +@import '_canvasside.scss'; \ No newline at end of file