PC、タブレット画面で左右の切り替えができるようにする

components/Atomics/PositionChangeToggleSwitch.vue

@@ -0,0 +1,83 @@
+<template>
+    <div class="switchArea">
+        <input
+            id="switch"
+            v-model="toggleState.isChecked"
+            type="checkbox"
+            @change="changeFlag"
+        />
+        <label for="switch"></label>
+        <div id="circle"></div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive } from '@nuxtjs/composition-api';
+import { SettingModule } from '~/store/modules/setting';
+
+export default defineComponent({
+    name: 'PositionChangeToggleSwitch',
+    components: {},
+    setup() {
+        const toggleState = reactive<{
+            isChecked: boolean;
+        }>({
+            isChecked: SettingModule.positionChange,
+        });
+
+        const changeFlag = () => {
+            SettingModule.setReversePotisionChange(toggleState.isChecked);
+        };
+
+        return { toggleState, changeFlag };
+    },
+});
+</script>
+
+<style lang="scss" scoped>
+.switchArea {
+    line-height: 44px;
+    letter-spacing: 0;
+    text-align: center;
+    font-size: 19px;
+    position: relative;
+    width: 100px;
+    input[type='checkbox'] {
+        display: none;
+    }
+    label {
+        display: block;
+        box-sizing: border-box;
+        height: 44px;
+        border: 2px solid #000;
+        border-radius: 22px;
+    }
+    input[type='checkbox']:checked + label {
+        border-color: #000;
+    }
+    label span:after {
+        content: 'OFF';
+        padding: 0 0 0 26px;
+        color: #000;
+    }
+    input[type='checkbox']:checked + label span:after {
+        content: 'ON';
+        padding: 0 26px 0 0;
+        color: #000;
+    }
+    #circle {
+        position: absolute;
+        width: 26px;
+        height: 26px;
+        background: #000;
+        top: 9px;
+        left: 8px;
+        border-radius: 18px;
+        transition: 0.2s;
+    }
+    input[type='checkbox']:checked ~ #circle {
+        transform: translateX(57px);
+        background: #84fabf;
+    }
+}
+</style>

components/Molecules/CanvasButtonArea.vue

@@ -9,6 +9,13 @@
                 <redo-button :click-event="redoEvent"></redo-button>
                 <div class="buttonText">リドゥ</div>
             </div>
+            <!-- TODO: PC用ダイアログを出す -->
+            <!-- <div class="buttonAreaWrapper">
+                <setting-button
+                    :click-event="pcSettingDrawerTransrate"
+                ></setting-button>
+                <div class="buttonText">設定</div>
+            </div> -->
             <div class="buttonAreaWrapper">
                 <grid-button :click-event="gridEvent"></grid-button>
                 <div class="buttonText">グリッド</div>
@@ -278,6 +285,12 @@ export default defineComponent({
             required: true,
             default: () => {},
         },
+        // PC用ダイアログを出す
+        // pcSettingDrawerTransrate: {
+        //     type: Function,
+        //     required: true,
+        //     default: () => {},
+        // },
         smartMode: {
             type: Boolean,
             default: false,

nuxt.config.ts

@@ -238,7 +238,12 @@ const nuxtConfig: NuxtConfig = {
     },
     sentry: {
         dsn: process.env.SENTRY_DSN || '',
+        publishRelease: true,
+        sourceMapStyle: 'hidden-source-map',
         disabled: process.env.NODE_ENV !== 'production',
+        config: {
+            release: process.env.npm_package_version || '',
+        },
     },
     env: {
         APP_NAME: String(process.env.npm_package_name),

pages/creator/canvas.scss

@@ -2,6 +2,15 @@
     height: 100% !important;
 }
 
+.pcSetting {
+    @media screen and (min-width: 960px) {
+        flex-direction: row-reverse;
+        &__areaMargin {
+            margin-left: 50px;
+        }
+    }
+}
+
 .Layout {
     display: flex;
     justify-content: center;

pages/creator/canvas.vue

@@ -3,7 +3,7 @@
         <v-layout style="height: 90vh" column justify-center fluid>
             <v-flex xs12 sm12 md12>
                 <div id="layout" class="Layout">
-                    <div class="canvasArea">
+                    <div id="canvasarea" class="canvasArea">
                         <div class="DrowCanvas">
                             <div class="DrowCanvas__Draw">
                                 <canvas
@@ -44,6 +44,7 @@
                     </div>
                     <div class="toolArea">
                         <div class="toolWrapper">
+                            <position-change-toggle-switch :switch-flg="true" />
                             <canvas-button-area
                                 class="canvasButtonArea"
                                 :undo-event="undo"
@@ -138,6 +139,7 @@ import {
     onMounted,
     reactive,
     useRouter,
+    watch,
 } from '@nuxtjs/composition-api';
 // import { Vue, Component } from 'nuxt-property-decorator';
 import { Point } from '@/types/Canvas/PointType';
@@ -166,6 +168,9 @@ import layerDrawer from '@/components/Molecules/layerDrawer.vue';
 import palletDrawer from '@/components/Molecules/palletDrawer.vue';
 import settingDrawer from '@/components/Molecules/settingDrawer.vue';
 import CanvasButtonArea from '@/components/Molecules/CanvasButtonArea.vue';
+import PositionChangeToggleSwitch from '@/components/Atomics/PositionChangeToggleSwitch.vue';
+
+// Store
 import { SettingModule } from '@/store/modules/setting';
 
 // constants
@@ -184,6 +189,7 @@ export default defineComponent({
         layerDrawer,
         palletDrawer,
         settingDrawer,
+        PositionChangeToggleSwitch,
     },
     setup() {
         const router = useRouter();
@@ -215,6 +221,10 @@ export default defineComponent({
             return SettingModule.smartphoneMode;
         });
 
+        const potisionChangeToggle = computed((): boolean => {
+            return SettingModule.positionChange;
+        });
+
         /* TODO: canvasColorState.getCanvasIndexDataに代入処理を行う場合はこちらも検討する
          *  こちらはcomputedをgetter/setterとして利用できる記法
          *  ただし呼び出す側の型もWritableComputedRefに代わっていくので注意
@@ -335,6 +345,7 @@ export default defineComponent({
             layerDrawerFlg: boolean;
             settingDrawerFlg: boolean;
             smartMode: boolean;
+            positionChange: boolean;
             mobileView: boolean;
             windowWidth: number;
             SwipingFlg: boolean;
@@ -345,6 +356,7 @@ export default defineComponent({
             layerDrawerFlg: false, // スマホ画面でのレイヤーメニュー開閉フラグ
             settingDrawerFlg: false,
             smartMode: SettingModule.smartphoneMode, // スマホモードのフラグ
+            positionChange: SettingModule.positionChange, // スマホモードのフラグ
             mobileView: false,
             windowWidth: 0,
             SwipingFlg: false,
@@ -567,6 +579,21 @@ export default defineComponent({
             return mobileState.mobileView;
         };
 
+        // PC画面の左右切り替え
+        watch(potisionChangeToggle, () => {
+            const layout = document.querySelector('#layout')!;
+            const canvasarea = document.querySelector('#canvasarea')!;
+            console.log(potisionChangeToggle.value);
+            if (potisionChangeToggle.value) {
+                layout.classList.add('pcSetting');
+                canvasarea.classList.add('pcSetting__areaMargin');
+            } else {
+                layout.classList.remove('pcSetting');
+                canvasarea.classList.remove('pcSetting__areaMargin');
+            }
+            console.log(layout.classList);
+        });
+
         onMounted((): void => {
             // ページが立ち上がる時の処理
             // canvasのコンテキスト取得(絵を描く領域)
@@ -1406,6 +1433,7 @@ export default defineComponent({
             // End
             imageSave,
             smartModeToggle,
+            potisionChangeToggle,
         };
     },
 });

store/modules/setting.ts

@@ -11,12 +11,18 @@ import { SettingState } from '~/types/Store/SettingType';
 class Setting extends VuexModule implements SettingState {
     // state
     smartphoneMode: boolean = false;
+    positionChange: boolean = false;
 
     // フラグを反転する
     @Mutation
     public setReverseSmartPhoneMode(flg: boolean) {
         this.smartphoneMode = flg;
     }
+
+    @Mutation
+    public setReversePotisionChange(flg: boolean) {
+        this.positionChange = flg;
+    }
 }
 
 // モジュール化

types/Store/SettingType.ts

@@ -1,3 +1,4 @@
 export type SettingState = {
     smartphoneMode: boolean;
+    positionChange: boolean;
 };