Feature multiple splitpane

app.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { editorLayout } from '~/state/parser/parser'
+
 const title = 'AST Explorer'
 const desc = 'A web tool to explore the ASTs generated by parsers.'
 const url = 'https://ast-explorer.dev/'
@@ -35,8 +37,8 @@ useHeadSafe({
 <template>
   <ClientOnly>
     <Suspense>
-      <main flex="~ col" lg:h-screen>
-        <Navbar border-b />
+      <main flex="~ col" lg:h-screen lg:w-screen>
+        <Navbar v-model:layout="editorLayout" border-b />
 
         <div min-h-0 flex flex-1 flex-col gap2 lg:flex-row>
           <AppSideBar
@@ -47,16 +49,7 @@ useHeadSafe({
             lg:flex-none
           />
 
-          <div min-w-0 flex flex-col gap2 lg:flex-1 lg:flex-row>
-            <InputContainer v-show="showInputEditor" min-w-0 flex-1 py1 />
-            <div
-              v-show="showInputEditor && showOutput"
-              border-t
-              lg:border-l
-              lg:border-t-none
-            />
-            <OutputContainer v-show="showOutput" min-w-0 flex-1 py1 />
-          </div>
+          <Layout min-w-0 />
         </div>
       </main>
 

components/CodeEditor.vue

@@ -6,6 +6,7 @@ const props = defineProps<{
   language: MonacoLanguage
   input?: boolean
 }>()
+
 const code = defineModel<string>()
 
 const container = shallowRef<{

components/InputContainer.vue

@@ -1,13 +1,18 @@
 <script setup lang="ts">
 import { code } from '#imports'
-import { parserOptions } from '~/state/parser/options'
-import { currentParser } from '~/state/parser/parser'
+import { parsersOptions } from '~/state/parser/options'
+import { currentParsers } from '~/state/parser/parser'
+import { activeTab } from '~/state/ui'
 
 const language = computed(() => {
-  if (typeof currentParser.value.editorLanguage === 'string') {
-    return currentParser.value.editorLanguage
+  const currentParser = currentParsers.value.find(
+    (parser) => parser.id === activeTab.value,
+  )!
+
+  if (typeof currentParser.editorLanguage === 'string') {
+    return currentParser.editorLanguage
   }
-  return currentParser.value.editorLanguage(parserOptions.value)
+  return currentParser.editorLanguage(parsersOptions.value[currentParser.id])
 })
 
 function showSettings() {

components/Layout.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { editorLayout } from '~/state/parser/parser'
+</script>
+
+<template>
+  <div style="height: calc(100vh - 50px)">
+    <div v-if="editorLayout === 'left-right' && !showInputEditor" h-full w-full>
+      <OutputContainer
+        v-show="showOutput"
+        :index="0"
+        h-full
+        min-w-0
+        w-full
+        py1
+      />
+    </div>
+
+    <div v-else-if="!showOutput && showInputEditor" h-full w-full>
+      <InputContainer h-full min-w-0 w-full py1 />
+    </div>
+
+    <SplitPane
+      v-else-if="editorLayout === 'left-right' && showInputEditor && showOutput"
+    >
+      <template #left>
+        <InputContainer h-full min-w-0 w-full py1 />
+      </template>
+      <template #right>
+        <OutputContainer
+          v-show="showOutput"
+          :index="0"
+          h-full
+          min-w-0
+          w-full
+          py1
+        />
+      </template>
+    </SplitPane>
+
+    <SplitPane
+      v-else-if="
+        editorLayout === 'top-bottom-split' && !showInputEditor && showOutput
+      "
+    >
+      <template #left>
+        <OutputContainer
+          v-show="showOutput"
+          :index="0"
+          h-full
+          min-w-0
+          w-full
+          py1
+        />
+      </template>
+      <template #right>
+        <OutputContainer
+          v-show="showOutput"
+          :index="1"
+          h-full
+          min-w-0
+          w-full
+          py1
+        />
+      </template>
+    </SplitPane>
+
+    <SplitPane
+      v-else-if="
+        editorLayout === 'top-bottom-split' && showInputEditor && showOutput
+      "
+      layout="vertical"
+    >
+      <template #left>
+        <InputContainer h-full min-w-0 w-full py1 />
+      </template>
+      <template #right>
+        <SplitPane>
+          <template #left>
+            <OutputContainer v-show="showOutput" :index="0" h-full w-full py1 />
+          </template>
+          <template #right>
+            <OutputContainer v-show="showOutput" :index="1" h-full w-full py1 />
+          </template>
+        </SplitPane>
+      </template>
+    </SplitPane>
+  </div>
+</template>

components/SplitPane.vue

@@ -0,0 +1,161 @@
+<script setup lang="ts">
+import { computed, reactive, useTemplateRef } from 'vue'
+
+const props = withDefaults(
+  defineProps<{ layout?: 'horizontal' | 'vertical' }>(),
+  {
+    layout: 'horizontal',
+  },
+)
+const isVertical = computed(() => props.layout === 'vertical')
+
+const containerRef = useTemplateRef('container')
+const state = reactive({
+  dragging: false,
+  split: 50,
+  viewHeight: 0,
+  viewWidth: 0,
+})
+
+const boundSplit = computed(() => {
+  const { split } = state
+  return split < 10 ? 10 : Math.min(split, 90)
+})
+
+let startPosition = 0
+let startSplit = 0
+
+function dragStart(e: MouseEvent) {
+  state.dragging = true
+  startPosition = isVertical.value ? e.pageY : e.pageX
+  startSplit = boundSplit.value
+}
+
+function dragMove(e: MouseEvent) {
+  if (containerRef.value && state.dragging) {
+    const position = isVertical.value ? e.pageY : e.pageX
+    const totalSize = isVertical.value
+      ? containerRef.value.offsetHeight
+      : containerRef.value.offsetWidth
+    const dp = position - startPosition
+    state.split = startSplit + +((dp / totalSize) * 100).toFixed(2)
+  }
+}
+
+function dragEnd() {
+  state.dragging = false
+}
+</script>
+
+<template>
+  <div
+    ref="container"
+    class="split-pane"
+    :class="{
+      dragging: state.dragging,
+      [isVertical ? 'vertical' : 'horizontal']: true,
+    }"
+    @mousemove="dragMove"
+    @mouseup="dragEnd"
+    @mouseleave="dragEnd"
+  >
+    <div
+      class="left"
+      :style="{ [isVertical ? 'height' : 'width']: `${boundSplit}%` }"
+    >
+      <slot name="left" />
+      <div class="dragger" @mousedown.prevent="dragStart" />
+    </div>
+    <div
+      class="right"
+      :style="{ [isVertical ? 'height' : 'width']: `${100 - boundSplit}%` }"
+    >
+      <slot name="right" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.split-pane {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.split-pane.dragging {
+  cursor: ew-resize;
+}
+
+.dragging .left,
+.dragging .right {
+  pointer-events: none;
+}
+
+.horizontal > .left,
+.horizontal > .right {
+  position: relative;
+}
+
+.horizontal > .left {
+  border-right: 1px solid var(--c-border);
+}
+
+.horizontal > .left > .dragger {
+  position: absolute;
+  z-index: 3;
+  top: 0;
+  bottom: 0;
+  right: -5px;
+  width: 10px;
+  cursor: ew-resize;
+}
+
+.toggler {
+  display: none;
+  z-index: 3;
+  color: var(--c-text-base);
+  position: absolute;
+  left: 50%;
+  bottom: 20px;
+  background-color: var(--c-bg-base);
+  padding: 8px 12px;
+  border-radius: 8px;
+  transform: translateX(-50%);
+  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
+}
+
+.dark .toggler {
+  background-color: var(--c-bg-base);
+}
+
+.split-pane.vertical {
+  display: block;
+}
+
+.split-pane.vertical.dragging {
+  cursor: ns-resize;
+}
+
+.vertical > .left > .dragger {
+  position: absolute;
+  top: auto;
+  height: 10px;
+  width: 100%;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  cursor: ns-resize;
+}
+
+.vertical > .left,
+.vertical > .right {
+  position: relative;
+  width: 100%;
+}
+
+.vertical > .left {
+  border-right: none;
+  border-bottom: 1px solid var(--c-border);
+}
+</style>

components/app/SideBar.vue

@@ -1,23 +1,57 @@
 <script setup lang="ts">
-import {
-  currentParser,
-  currentParserGui as ParserGui,
-} from '~/state/parser/parser'
+import { currentParsers, currentParsersGuis } from '~/state/parser/parser'
+import { activeTab } from '~/state/ui'
+
+const tabs = computed(() => {
+  const tabIds = new Set(currentParsers.value.map((p) => p.id))
+  return Array.from(tabIds).map((id) => ({ label: id, value: id }))
+})
+
+watch(
+  tabs,
+  () => {
+    activeTab.value = tabs.value[0]!.value
+  },
+  {
+    immediate: true,
+  },
+)
 </script>
 
 <template>
   <div flex="~ y-center col" gap2 px3 py2>
-    <div>
-      <IconPreview :value="currentParser.icon" size="5em" />
-    </div>
-    <h2 flex="~ center" gap2 text-lg font-bold>
-      Parser Options
-      <ParserOptions v-if="currentParser.options.configurable" nav-button />
-    </h2>
-    <Suspense :timeout="0">
-      <ParserGui v-if="ParserGui" w-full class="sidebar-gui" />
-      <template #fallback><Loading /></template>
-    </Suspense>
+    <TabsTab v-show="sideBarAvailable" v-model="activeTab" :tabs="tabs">
+      <TabsTabPane
+        v-for="(tab, idx) in tabs"
+        :key="tab.label"
+        :label="tab.label"
+        :value="tab.value"
+      >
+        <div flex items-center justify-center>
+          <IconPreview :value="currentParsers[idx]!.icon" size="5em" />
+        </div>
+        <h2 flex="~ center" gap2 text-lg font-bold>
+          Parser Options
+          <ParserOptions
+            v-if="currentParsers[idx]!.options.configurable"
+            :parser-id="currentParsers[idx]!.id"
+            :index="idx"
+            nav-button
+          />
+        </h2>
+        <Suspense :timeout="0">
+          <Component
+            :is="currentParsersGuis[idx]"
+            v-if="currentParsersGuis[idx]"
+            w-full
+            class="sidebar-gui"
+          />
+          <template #fallback>
+            <Loading />
+          </template>
+        </Suspense>
+      </TabsTabPane>
+    </TabsTab>
   </div>
 </template>