fix(playground): resize editor panes (#3249)

unocss · Oct 21, 2023 · 7a4fd15 · 7a4fd15
1 parent 3d59b7b
commit 7a4fd15
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 32 deletions.
diff --git a/playground/src/components/Editor.vue b/playground/src/components/Editor.vue
@@ -22,7 +22,7 @@ const _panelEl = ref(panelEl)
   <div flex="~ col" h-full>
     <HeaderBar flex="[0_0_36px]" />
     <div flex-1 of-hidden>
-      <Splitpanes ref="_panelEl" :class="{ loading }" horizontal @resize="handleResize">
+      <Splitpanes ref="_panelEl" :class="{ loading }" horizontal @resized="handleResize">
         <PanelHtml :index="0" />
         <PanelConfig :index="1" />
         <PanelCustomCss :index="2" />

diff --git a/playground/src/components/panel/PanelOutputCss.vue b/playground/src/components/panel/PanelOutputCss.vue
@@ -7,7 +7,7 @@ defineProps<{ index: number }>()
 </script>
 
 <template>
-  <Pane :min-size="titleHeightPercent" :size="panelSizes[index]" flex flex-col min-h-30px>
+  <Pane :min-size="titleHeightPercent" :size="panelSizes[index]" flex flex-col>
     <TitleBar title="Output CSS" @title-click="togglePanel(index)">
       <template #before>
         <div

diff --git a/playground/src/composables/panel.ts b/playground/src/composables/panel.ts
@@ -1,6 +1,7 @@
 export const panelEl = ref()
 const TITLE_HEIGHT = 29
 const { height: vh } = useElementSize(panelEl)
+const collapsedPanels = ref(new Set())
 
 export const titleHeightPercent = computed(() => {
   if (!vh.value)
@@ -23,47 +24,44 @@ export function getInitialPanelSizes(percent: number): number[] {
   ]
 }
 
-export function isCollapsed(index: number) {
-  return panelSizes.value[index] <= titleHeightPercent.value + 3
+export function isCollapsed(idx: number) {
+  return collapsedPanels.value.has(idx)
 }
 
-export function togglePanel(index: number) {
-  if (isCollapsed(index))
-    panelSizes.value[index] = 100 / panelSizes.value.length
-  else
-    panelSizes.value[index] = titleHeightPercent.value
+export function togglePanel(idx: number) {
+  if (collapsedPanels.value.has(idx)) {
+    collapsedPanels.value.delete(idx)
+  }
+  else {
+    collapsedPanels.value.add(idx)
+    if (collapsedPanels.value.size === panelSizes.value.length)
+      collapsedPanels.value.delete((idx + 1) % panelSizes.value.length)
+  }
 
   normalizePanels()
 }
 
 export function normalizePanels() {
-  const ignoredIndex: number[] = []
-  let originalSum = 0
-  let ignoredSum = 0
-
-  panelSizes.value.forEach((v, idx) => {
-    if (v <= titleHeightPercent.value) {
-      ignoredIndex.push(idx)
-      ignoredSum += v
-    }
-    else {
-      originalSum += v
-    }
-  })
-
-  const resize = (100 - ignoredSum) / originalSum
-
-  panelSizes.value.forEach((v, idx) => {
-    if (ignoredIndex.includes(idx))
-      return
-    panelSizes.value[idx] *= resize
-  })
+  const height = (100 - collapsedPanels.value.size * titleHeightPercent.value) / (panelSizes.value.length - collapsedPanels.value.size)
+  panelSizes.value = panelSizes.value.map((_, idx) => collapsedPanels.value.has(idx) ? titleHeightPercent.value : height)
 }
 
+watch(
+  panelSizes,
+  (value: number[]) => {
+    value.forEach((height, idx) => {
+      if (height > titleHeightPercent.value)
+        collapsedPanels.value.delete(idx)
+      else
+        collapsedPanels.value.add(idx)
+    })
+  },
+)
+
 watch(
   titleHeightPercent,
   (value: number) => {
-    if (panelSizes.value.includes(100))
-      panelSizes.value = getInitialPanelSizes(value)
+    const spareSpace = (100 - collapsedPanels.value.size * value - panelSizes.value.reduce((uncollapsed, height, idx) => collapsedPanels.value.has(idx) ? uncollapsed : uncollapsed + height, 0)) / (panelSizes.value.length - collapsedPanels.value.size)
+    panelSizes.value = panelSizes.value.map((height, idx) => (height <= value || collapsedPanels.value.has(idx)) ? value : height + spareSpace)
   },
 )