Allow center pane to be collapsed

Author: SanderMertens

etc/js/components/pages/entities/page.vue

@@ -25,7 +25,8 @@
       ref="pane_content"
       v-model:tab="appParams.entities.tab"
       v-model:scripts="appParams.scripts"
-      @onCodeChange="onCodeChange">
+      @onCodeChange="onCodeChange"
+      v-show="!rootEl?.centerPaneHidden">
     </pane-content>
 
     <splitter

etc/js/components/widgets/pane-container.vue

@@ -27,7 +27,9 @@ const defaultLeftPaneWidth = 300;
 const defaultRightPaneWidth = 500;
 const minLeftPaneWidth = 180;
 const minRightPaneWidth = 320;
-const minCenterWidth = 200;
+const hideCenterThreshold = 100;
+
+const containerWidth = ref(0);
 
 const leftPaneWidth = ref(Number(localStorage.getItem(`${props.id}.leftPaneWidth`)) || defaultLeftPaneWidth);
 const rightPaneWidth = ref(Number(localStorage.getItem(`${props.id}.rightPaneWidth`)) || defaultRightPaneWidth);
@@ -36,18 +38,19 @@ let dragging = null; // 'sidebar' | 'inspector' | null
 let containerRect = null;
 
 function clampLeftPane(width, totalInnerWidth) {
-  const max = totalInnerWidth - (props.showRightPane ? (rightPaneWidth.value + minCenterWidth) : minCenterWidth);
+  const max = totalInnerWidth - (props.showRightPane ? rightPaneWidth.value : 0);
   return Math.max(minLeftPaneWidth, Math.min(width, max));
 }
 
 function clampRightPane(width, totalInnerWidth) {
-  const max = totalInnerWidth - (props.showLeftPane ? (leftPaneWidth.value + minCenterWidth) : minCenterWidth);
+  const max = totalInnerWidth - (props.showLeftPane ? leftPaneWidth.value : 0);
   return Math.max(minRightPaneWidth, Math.min(width, max));
 }
 
 function onWindowMouseMove(e) {
   if (!dragging || !containerRect) return;
   const totalInnerWidth = containerRect.width; // grid area width
+  containerWidth.value = totalInnerWidth;
   if (dragging === 'leftPane') {
     const newWidth = clampLeftPane(e.clientX - containerRect.left, totalInnerWidth);
     leftPaneWidth.value = Math.round(newWidth);
@@ -57,6 +60,7 @@ function onWindowMouseMove(e) {
     rightPaneWidth.value = Math.round(newWidth);
     localStorage.setItem(`${props.id}.rightPaneWidth`, String(rightPaneWidth.value));
   }
+  updateCenterHidden(dragging === 'rightPane');
   // Notify canvas to resize while dragging
   window.dispatchEvent(new Event('resize'));
 }
@@ -96,6 +100,7 @@ function ensureWidthsFit() {
   if (!rootEl.value) return;
   const el = rootEl.value;
   const rect = el.getBoundingClientRect();
+  containerWidth.value = rect.width;
 
   const hasLeftPane = props.showLeftPane;
   const hasRightPane = props.showRightPane;
@@ -115,27 +120,55 @@ function ensureWidthsFit() {
     rightPaneWidth.value = Math.round(right);
     localStorage.setItem(`${props.id}.rightPaneWidth`, String(rightPaneWidth.value));
   }
+
+  updateCenterHidden(false);
+}
+
+const centerPaneHidden = ref(false);
+
+function getCenterAvailable() {
+  let available = containerWidth.value;
+  if (props.showLeftPane) available -= leftPaneWidth.value;
+  if (props.showRightPane) available -= rightPaneWidth.value;
+  return available;
+}
+
+// Any source can collapse the center pane, but only the right pane
+// splitter can uncollapse it.
+function updateCenterHidden(canUncollapse) {
+  if (getCenterAvailable() < hideCenterThreshold) {
+    centerPaneHidden.value = true;
+  } else if (canUncollapse) {
+    centerPaneHidden.value = false;
+  }
 }
 
 const gridStyle = computed(() => {
   // Use split columns as the visual gaps/handles; container gap is 0
   const split = `var(--gap)`;
+  const hideCenter = centerPaneHidden.value;
   if (props.showLeftPane && props.showRightPane) {
     const left = `${leftPaneWidth.value}px`;
+    if (hideCenter) {
+      return `grid-template-columns: ${left} ${split} 0px ${split} 1fr;`;
+    }
     const right = `${rightPaneWidth.value}px`;
     return `grid-template-columns: ${left} ${split} 1fr ${split} ${right};`;
   } else if (props.showLeftPane && !props.showRightPane) {
     const left = `${leftPaneWidth.value}px`;
     return `grid-template-columns: ${left} ${split} 1fr;`;
   } else if (!props.showLeftPane && props.showRightPane) {
+    if (hideCenter) {
+      return `grid-template-columns: 0px ${split} 1fr;`;
+    }
     const right = `${rightPaneWidth.value}px`;
     return `grid-template-columns: 1fr ${split} ${right};`;
   } else {
     return `grid-template-columns: 1fr;`;
   }
 });
 
-defineExpose({startDragging});
+defineExpose({startDragging, centerPaneHidden});
 
 </script>