팝업 함수 수정

public/static/images/canvas/menu_icon00.svg

@@ -0,0 +1,8 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="elements">
+<path id="Rectangle 2056" d="M9.4 1.8H8.6C5.01733 1.8 3.22599 1.8 2.11299 2.913C1 4.02599 1 5.81733 1 9.4C1 12.9827 1 14.774 2.11299 15.887C3.22599 17 5.01733 17 8.6 17C12.1827 17 13.974 17 15.087 15.887C16.2 14.774 16.2 12.9827 16.2 9.4V8.6" stroke="#AAAAAA" stroke-width="1.5" stroke-linecap="round"/>
+<path id="Ellipse 40" d="M17 3.8C17 5.3464 15.7464 6.6 14.2 6.6C12.6536 6.6 11.4 5.3464 11.4 3.8C11.4 2.2536 12.6536 1 14.2 1C15.7464 1 17 2.2536 17 3.8Z" stroke="#AAAAAA" stroke-width="1.5"/>
+<path id="Vector 4052" d="M5 8.2H8.2" stroke="#AAAAAA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector 4053" d="M5 12.2H11.4" stroke="#AAAAAA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

src/components/canvas/CanvasMenu.jsx

@@ -5,6 +5,7 @@ import MenuDepth01 from "./MenuDepth01";
 
 export default function CanvasMenu({setModalOpen}) {
     const [menuNumber, setMenuNumber] = useState(null);
+    const [vertical, setVertical] = useState(true);
     const SelectOption = [
         {name: '瓦53A',}, {name: '瓦53A'}
     ]
@@ -18,6 +19,9 @@ export default function CanvasMenu({setModalOpen}) {
         <div className={`canvas-menu-wrap ${menuNumber !== null ? 'active' : ""}`}>
             <div className="canvas-menu-inner">
                 <ul className="canvas-menu-list">
+                    <li className={`canvas-menu-item ${menuNumber === 0 ? 'active' : ''}`} onClick={() => onClickNav(0)}>
+                        <button><span className="menu-icon con00"></span>配置面 初期設定</button>
+                    </li>
                     <li className={`canvas-menu-item ${menuNumber === 1 ? 'active' : ''}`} onClick={() => onClickNav(1)}>
                         <button><span className="menu-icon con01"></span>配置面 初期設定</button>
                     </li>
@@ -31,20 +35,26 @@ export default function CanvasMenu({setModalOpen}) {
                         <button><span className="menu-icon con04"></span>モジュール回路構成</button>
                     </li>
                     <li className={`canvas-menu-item ${menuNumber === 5 ? 'active' : ''}`} onClick={() => onClickNav(5)}>
-                        <button><span className="menu-icon con05"></span>発展シミュレーション</button>
+                        <button><span className="menu-icon con06"></span>見積</button>
                     </li>
                     <li className={`canvas-menu-item ${menuNumber === 6 ? 'active' : ''}`} onClick={() => onClickNav(6)}>
-                        <button><span className="menu-icon con06"></span>見積</button>
+                        <button><span className="menu-icon con05"></span>発展シミュレーション</button>
                     </li>
                 </ul>
                 <div className="canvas-side-btn-wrap">
-                    <div className="select-box">
-                        <Qselect title={'瓦53A'} option={SelectOption}/>
-                    </div>
                     <div className="btn-from">
                         <button className="btn01 "></button>
                         <button className="btn02 active"></button>
                         <button className="btn03"></button>
+                    </div>
+                    <div className="vertical-horizontal">
+                        <span>垂直水平モード</span>
+                        <button onClick={() => setVertical(!vertical)}>{vertical ? "ON" : "OFF"}</button>
+                    </div>
+                    <div className="select-box">
+                        <Qselect title={'瓦53A'} option={SelectOption}/>
+                    </div>
+                    <div className="btn-from">
                         <button className="btn04" onClick={() => setModalOpen('option')}></button>
                         <button className="btn05"></button>
                         <button className="btn06"></button>
@@ -62,6 +72,7 @@ export default function CanvasMenu({setModalOpen}) {
                 </div>
             </div>
             <div className={`canvas-depth2-wrap ${menuNumber !== null ? 'active' : ''}`}>
+                {menuNumber === 0 && <MenuDepth01/>}
                 {menuNumber === 1 && <MenuDepth01/>}
                 {menuNumber === 2 && <MenuDepth01/>}
                 {menuNumber === 3 && <MenuDepth01/>}

src/components/canvas/modal/settoing01/FirstOption.jsx

@@ -1,5 +1,3 @@
-import { HandleBtnClick } from "./SettingModal01"
-
 const buttonList01 = [
     {id: 1, name: '割り当て表示'},
     {id: 2, name: '実寸表示'},
@@ -19,14 +17,15 @@ const buttonList02 = [
     {id: 3, name: 'All painted'},
 ]
 
-export default function FirstOption (){
+export default function FirstOption (props){
+    const { onClick } = props
     return(
         <>
             <div className="modal-check-btn-wrap">
                 <h3 className="check-wrap-title light">※図面に表示する項目をクリックすると適用されます。</h3>
                 <div className="flex-check-box for2">
                     {buttonList01.map((item)=>(
-                        <button key={item.id} className="check-btn" onClick={(e) => HandleBtnClick(e)}>
+                        <button key={item.id} className="check-btn" onClick={(e) => onClick(e)}>
                             <span className="check-area"></span>
                             <span className="title-area">{item.name}</span>
                         </button>
@@ -37,7 +36,7 @@ export default function FirstOption (){
                 <h3 className="check-wrap-title">画面表示</h3>
                 <div className="flex-check-box for-line">
                     {buttonList02.map((item)=>(
-                        <button key={item.id} className="check-btn" onClick={(e) => HandleBtnClick(e)}>
+                        <button key={item.id} className="check-btn" onClick={(e) => onClick(e)}>
                             <span className="check-area"></span>
                             <span className="title-area">{item.name}</span>
                         </button>

src/components/canvas/modal/settoing01/SecondOption.jsx

@@ -1,5 +1,3 @@
-import { HandleBtnClick } from "./SettingModal01"
-
 const buttonList01 = [
     {id: 1, name: '文字フォントの変更'},
     {id: 2, name: 'フロー方向フォントの変更'},
@@ -13,7 +11,8 @@ const buttonList02 = [
     {id: 4, name: 'ティーン'},
 ]
 
-export default function SecondOption (){
+export default function SecondOption (props){
+    const { onClick } = props
     return(
         <>
             <div className="modal-check-btn-wrap">
@@ -30,7 +29,7 @@ export default function SecondOption (){
                 <h3 className="check-wrap-title">吸着範囲の設定</h3>
                 <div className="flex-check-box for-line">
                     {buttonList02.map((item)=>(
-                        <button key={item.id} className="check-btn" onClick={(e) => HandleBtnClick(e)}>
+                        <button key={item.id} className="check-btn" onClick={(e) => onClick(e)}>
                             <span className="check-area"></span>
                             <span className="title-area">{item.name}</span>
                         </button>

src/components/canvas/modal/settoing01/SettingModal01.jsx

@@ -5,7 +5,7 @@ import FirstOption from "./FirstOption";
 import SecondOption from "./SecondOption";
 import WithDraggable from "@/components/common/draggable/withDraggable";
 
-export const HandleBtnClick = (e) => {
+const HandleBtnClick = (e) => {
     const button = e.target.closest('button');
     if(!button.classList.contains('act')){
         button.classList.add('act');
@@ -13,6 +13,9 @@ export const HandleBtnClick = (e) => {
         button.classList.remove('act');
     }
 }
+const propsClick = {
+    onClick: HandleBtnClick
+}
 
 export default function SettingModal01 ({modalOpen, setModalOpen}){
     const [buttonAct, setButtonAct] = useState(1);
@@ -47,8 +50,8 @@ export default function SettingModal01 ({modalOpen, setModalOpen}){
                             フォントと図面サイズの設定
                         </button>
                     </div>
-                    {buttonAct === 1 && <FirstOption/>}
+                    {buttonAct === 1 && <FirstOption {...propsClick}/>}
-                    {buttonAct === 2 && <SecondOption/>}
+                    {buttonAct === 2 && <SecondOption {...propsClick}/>}
                 </div>
             </div>
         </WithDraggable>

src/styles/_contents.scss

@@ -51,6 +51,7 @@
                         background-position: center;
                         background-size: cover;
                         margin-right: 10px;
+                        &.con00{background-image: url(/static/images/canvas/menu_icon00.svg);}
                         &.con01{background-image: url(/static/images/canvas/menu_icon01.svg);}
                         &.con02{background-image: url(/static/images/canvas/menu_icon02.svg);}
                         &.con03{background-image: url(/static/images/canvas/menu_icon03.svg);}
@@ -109,6 +110,30 @@
                     }
                 }
             }
+            .vertical-horizontal{
+                display: flex;
+                min-width: 170px;
+                height: 28px;
+                margin: 0 5px;
+                border-radius: 2px;
+                background: #373737;
+                line-height: 28px;
+                overflow: hidden;
+                span{
+                    padding: 0 10px;
+                    font-size: 13px;
+                    color: #fff;
+                }
+                button{
+                    margin-left: auto;
+                    height: 100%;
+                    background-color: #4B4B4B;
+                    font-size: 13px;
+                    font-weight: 400;
+                    color: #fff;
+                    padding: 0 7.5px;
+                }
+            }
             .size-control{
                 display: flex;
                 align-items: center;
@@ -318,7 +343,7 @@
 
 .canvas-frame{
     position: relative;
-    height: calc(100% - 35.5px);
+    height: calc(100% - 36.5px);
     canvas{
         position: absolute;
         top: 0;