add mode two tab

Author: tachibana-shin

src/components/sketch/SideBar/components/Dialog-SettingLayout.vue

@@ -5,13 +5,42 @@
         <div class="text-subtitle1">Setting Layout</div>
       </q-card-section>
       <q-card-section>
+        <section class="row">
+          <q-toggle
+            dense
+            size="35px"
+            class="mr-5"
+            v-model="areaActive[AreaComponent.Editor]"
+            label="Editor"
+          />
+          <q-toggle
+            dense
+            size="35px"
+            class="mr-5"
+            v-model="areaActive[AreaComponent.Console]"
+            label="Console"
+          />
+          <q-toggle
+            dense
+            size="35px"
+            class="mr-5"
+            v-model="areaActive[AreaComponent.Preview]"
+            label="Preview"
+          />
+        </section>
+
         <section class="row">
           <div
             v-for="(_, value) in ModeSize"
             :key="value"
-            v-memo="[value === mode]"
+            v-memo="[value === mode, settingsStore.isModeDisabled(value)]"
             class="col-4 py-1 cursor-pointer"
-            @click="mode = value"
+            :class="{
+              disabled: settingsStore.isModeDisabled(value),
+            }"
+            @click="
+              settingsStore.isModeDisabled(value) ? false : (mode = value)
+            "
           >
             <div
               class="flex items-center hover:bg-gray-100 hover:bg-opacity-10 px-3 py-2 rounded-xl transition-bg duration-100 text-[rgba(200,200,200,0.3)] hover:text-[rgba(200,200,200,0.5)]"
@@ -34,21 +63,26 @@
         <div class="text-subtitle1">Preview</div>
         <!-- frame preview -->
         <div class="aspect-4/3 max-w-full w-340px text-center">
-          <div class="container" :class="Mode[mode]">
-            <div class="area_1">
+          <div
+            class="container"
+            :class="[Mode[mode], `active-${countAreaActive}`]"
+          >
+            <div v-if="countAreaActive > 1" class="area_1">
               <q-select
                 v-model="area1"
                 dense
                 :options="options"
+                :option-disable="optionDisable"
                 :option-label="optionLabel"
               />
             </div>
             <div class="group">
-              <div class="area_2">
+              <div v-if="countAreaActive > 2" class="area_2">
                 <q-select
                   v-model="area2"
                   dense
                   :options="options"
+                  :option-disable="optionDisable"
                   :option-label="optionLabel"
                 />
               </div>
@@ -57,6 +91,7 @@
                   v-model="area3"
                   dense
                   :options="options"
+                  :option-disable="optionDisable"
                   :option-label="optionLabel"
                 />
               </div>
@@ -83,6 +118,7 @@
 
 <script lang="ts" setup>
 import {
+  Area,
   AreaComponent,
   AreaComponentSize,
   Mode,
@@ -91,10 +127,16 @@ import {
 
 const settingsStore = useSettingsStore()
 
+const areaActive = reactive<Record<AreaComponent, boolean>>({
+  [AreaComponent.Console]: true,
+  [AreaComponent.Editor]: true,
+  [AreaComponent.Preview]: false,
+})
 const options: AreaComponent[] = Array(AreaComponentSize)
   .fill(0)
   .map((_, index) => index)
 const optionLabel = (index: AreaComponent) => AreaComponent[index]
+const optionDisable = (index: AreaComponent) => !areaActive[index]
 
 const mode = ref(settingsStore.mode)
 watch(
@@ -142,6 +184,74 @@ watch([area2, area3], ([area2, area3]) => {
   }
 })
 
+const countAreaActive = computed(() => {
+  // eslint-disable-next-line functional/no-let
+  let count = 0
+  for (const val of Object.values(areaActive)) if (val) count++
+  return count
+})
+watchEffect(() => {
+  areaActive[AreaComponent.Console] =
+    settingsStore.areaActive[AreaComponent.Console]
+  areaActive[AreaComponent.Editor] =
+    settingsStore.areaActive[AreaComponent.Editor]
+  areaActive[AreaComponent.Preview] =
+    settingsStore.areaActive[AreaComponent.Preview]
+})
+watch(
+  countAreaActive,
+  (value) => {
+    if (settingsStore.isModeDisabled(mode.value, value)) {
+      mode.value = Mode.rows
+    }
+  },
+  { immediate: true }
+)
+const findNextAreaActive = (
+  start: AreaComponent,
+  ignore: (AreaComponent | false)[]
+) => {
+  for (let i = start; i < start + 3; i++) {
+    const index = (i >= 3 ? i - 3 : i) as AreaComponent
+    const val = areaActive[index]
+
+    if (ignore.includes(index)) continue
+
+    if (val) return index
+  }
+}
+watch(
+  areaActive,
+  (areaActive) => {
+    const a1 = countAreaActive.value > 1
+    const a2 = countAreaActive.value > 2
+    const a3 = true
+
+    if (countAreaActive.value > 1 && !areaActive[area1.value]) {
+      area1.value =
+        findNextAreaActive(area1.value, [
+          a2 && area2.value,
+          a3 && area3.value,
+        ]) ?? area1.value
+    }
+    if (countAreaActive.value > 2 && !areaActive[area2.value]) {
+      area2.value =
+        findNextAreaActive(area2.value, [
+          a1 && area1.value,
+          a3 && area3.value,
+        ]) ?? area2.value
+    }
+    if (!areaActive[area3.value]) {
+      area3.value =
+        findNextAreaActive(area3.value, [
+          a1 && area1.value,
+          a2 && area2.value,
+        ]) ?? area3.value
+    }
+  },
+  { immediate: true, deep: true }
+)
+
 // =============== setup ui done ==============
 function apply() {
   settingsStore.mode = mode.value
@@ -150,6 +260,7 @@ function apply() {
     area_2: area2.value,
     area_3: area3.value,
   }
+  Object.assign(settingsStore.areaActive, areaActive)
 }
 </script>
 

src/components/sketch/SketchMain/SketchMain.styles.scss

@@ -26,6 +26,16 @@
         border-bottom-width: 1px;
       }
     }
+
+    &.active-2 {
+      .area_1 {
+        @apply h-1/2 flex-none;
+        border-bottom-width: 1px;
+      }
+      .group .area_3 {
+        @apply h-full flex-1;
+      }
+    }
   }
   &.rows {
     &,
@@ -47,6 +57,16 @@
         border-right-width: 1px;
       }
     }
+
+    &.active-2 {
+      .area_1 {
+        @apply w-1/2 flex-none;
+        border-right-width: 1px;
+      }
+      .group .area_3 {
+        @apply w-full flex-1;
+      }
+    }
   }
   &.bottom {
     @apply flex flex-col flex-nowrap;
@@ -141,4 +161,10 @@
       }
     }
   }
+
+  &.active-1 {
+    .area_1 {
+      @apply fit;
+    }
+  }
 }

src/components/sketch/SketchMain/SketchMain.vue

@@ -1,9 +1,13 @@
 <template>
   <div
     class="container overflow-hidden max-w-full"
-    :class="Mode[settingsStore.mode]"
+    :class="[
+      Mode[settingsStore.mode],
+      `active-${settingsStore.countAreaActive}`,
+    ]"
   >
     <Resizable
+      v-if="settingsStore.countAreaActive > 1"
       class="area_1"
       :enable="{
         top: mode === Mode.bottom,
@@ -30,6 +34,7 @@
     </Resizable>
     <div class="group min-w-0">
       <Resizable
+        v-if="settingsStore.countAreaActive > 2"
         class="area_2"
         :enable="{
           top: false,

src/stores/settings.ts

@@ -7,6 +7,18 @@ import { defineStore } from "pinia"
 
 export const useSettingsStore = defineStore("settings", () => {
   const mode = ref<Mode>(Mode.top)
+
+  const areaActive = reactive<Record<AreaComponent, boolean>>({
+    [AreaComponent.Console]: true,
+    [AreaComponent.Editor]: true,
+    [AreaComponent.Preview]: true,
+  })
+  const countAreaActive = computed(() => {
+    // eslint-disable-next-line functional/no-let
+    let count = 0
+    for (const val of Object.values(areaActive)) if (val) count++
+    return count
+  })
   // bottom reverse
   // right reverse
 
@@ -38,5 +50,24 @@ export const useSettingsStore = defineStore("settings", () => {
     }
   }
 
-  return { mode, mapTargetTo, getMapTargetDefault }
+  function isModeDisabled(mode: Mode, count = countAreaActive.value): boolean {
+    // if (mode === Mode.left)
+    switch (count) {
+      case 3:
+        return false
+      case 2:
+        return mode !== Mode.columns && mode !== Mode.rows
+      default:
+        return true
+    }
+  }
+
+  return {
+    mode,
+    countAreaActive,
+    mapTargetTo,
+    getMapTargetDefault,
+    areaActive,
+    isModeDisabled,
+  }
 })