feat: introduce vertical resizer in horizontal layout mode (fixes #75)

Author: MathiasVDA

packages/yasgui/src/Tab.ts

@@ -78,6 +78,8 @@ export class Tab extends EventEmitter {
   private settingsModal?: TabSettingsModal;
   private currentOrientation: "vertical" | "horizontal";
   private orientationToggleButton?: HTMLButtonElement;
+  private verticalResizerEl?: HTMLDivElement;
+  private editorWrapperEl?: HTMLDivElement;
 
   constructor(yasgui: Yasgui, conf: PersistedJson) {
     super();
@@ -115,6 +117,7 @@ export class Tab extends EventEmitter {
     // Useful for adding an infos div that goes alongside the editor without needing to rebuild the whole Yasgui class
     const editorWrapper = document.createElement("div");
     editorWrapper.className = "editorwrapper";
+    this.editorWrapperEl = editorWrapper;
     const controlbarAndYasqeDiv = document.createElement("div");
     //controlbar
     this.controlBarEl = document.createElement("div");
@@ -132,6 +135,10 @@ export class Tab extends EventEmitter {
 
     this.initTabSettingsMenu();
     this.rootEl.appendChild(editorWrapper);
+
+    // Add vertical resizer for horizontal layout
+    this.drawVerticalResizer();
+
     this.rootEl.appendChild(this.yasrWrapperEl);
     this.initControlbar();
     this.initYasqe();
@@ -321,6 +328,12 @@ export class Tab extends EventEmitter {
           tab.updateOrientationToggleIcon();
         }
 
+        // Reset editor wrapper width when switching orientations
+        if (tab.editorWrapperEl) {
+          tab.editorWrapperEl.style.width = "";
+          tab.editorWrapperEl.style.flex = "";
+        }
+
         // Refresh components to adjust to new layout
         if (tab.yasqe) {
           tab.yasqe.refresh();
@@ -986,7 +999,94 @@ WHERE {
     });
   }
 
+  private drawVerticalResizer() {
+    if (this.verticalResizerEl || !this.rootEl) return;
+    this.verticalResizerEl = document.createElement("div");
+    addClass(this.verticalResizerEl, "verticalResizeWrapper");
+    const chip = document.createElement("div");
+    addClass(chip, "verticalResizeChip");
+    this.verticalResizerEl.appendChild(chip);
+    this.verticalResizerEl.addEventListener("mousedown", this.initVerticalDrag, false);
+    this.verticalResizerEl.addEventListener("dblclick", this.resetVerticalSplit, false);
+    this.rootEl.appendChild(this.verticalResizerEl);
+  }
+
+  private initVerticalDrag = () => {
+    document.documentElement.addEventListener("mousemove", this.doVerticalDrag, false);
+    document.documentElement.addEventListener("mouseup", this.stopVerticalDrag, false);
+  };
+
+  private calculateVerticalDragOffset(event: MouseEvent): number {
+    if (!this.rootEl) return 0;
+
+    let parentOffset = 0;
+    if (this.rootEl.offsetParent) {
+      parentOffset = (this.rootEl.offsetParent as HTMLElement).offsetLeft;
+    }
+
+    let scrollOffset = 0;
+    let parentElement = this.rootEl.parentElement;
+    while (parentElement) {
+      scrollOffset += parentElement.scrollLeft;
+      parentElement = parentElement.parentElement;
+    }
+
+    return event.clientX - parentOffset - this.rootEl.offsetLeft + scrollOffset;
+  }
+
+  private doVerticalDrag = (event: MouseEvent) => {
+    if (!this.editorWrapperEl || !this.rootEl) return;
+
+    const offset = this.calculateVerticalDragOffset(event);
+    const totalWidth = this.rootEl.offsetWidth;
+
+    // Ensure minimum widths (at least 200px for each panel)
+    const minWidth = 200;
+    const maxWidth = totalWidth - minWidth - 10; // 10px for resizer
+
+    const newWidth = Math.max(minWidth, Math.min(maxWidth, offset));
+    this.editorWrapperEl.style.width = newWidth + "px";
+    this.editorWrapperEl.style.flex = "0 0 " + newWidth + "px";
+  };
+
+  private stopVerticalDrag = () => {
+    document.documentElement.removeEventListener("mousemove", this.doVerticalDrag, false);
+    document.documentElement.removeEventListener("mouseup", this.stopVerticalDrag, false);
+
+    // Refresh editors after resizing
+    if (this.yasqe) {
+      this.yasqe.refresh();
+    }
+    if (this.yasr) {
+      this.yasr.refresh();
+    }
+  };
+
+  private resetVerticalSplit = () => {
+    if (!this.editorWrapperEl) return;
+
+    // Reset to 50/50 split
+    this.editorWrapperEl.style.width = "";
+    this.editorWrapperEl.style.flex = "1 1 50%";
+
+    // Refresh editors after resizing
+    if (this.yasqe) {
+      this.yasqe.refresh();
+    }
+    if (this.yasr) {
+      this.yasr.refresh();
+    }
+  };
+
   destroy() {
+    // Clean up vertical resizer event listeners
+    if (this.verticalResizerEl) {
+      this.verticalResizerEl.removeEventListener("mousedown", this.initVerticalDrag, false);
+      this.verticalResizerEl.removeEventListener("dblclick", this.resetVerticalSplit, false);
+    }
+    document.documentElement.removeEventListener("mousemove", this.doVerticalDrag, false);
+    document.documentElement.removeEventListener("mouseup", this.stopVerticalDrag, false);
+
     this.removeAllListeners();
     this.settingsModal?.destroy();
     this.endpointSelect?.destroy();

packages/yasgui/src/tab.scss

@@ -49,7 +49,7 @@
         flex: 1 1 50%;
         display: flex;
         flex-direction: column;
-        min-width: 0;
+        min-width: 400px;
         max-width: 50%;
         height: 100%;
         overflow: hidden;
@@ -97,11 +97,40 @@
         height: 100%;
       }
 
-      // Hide resize wrapper in horizontal mode (not applicable)
-      .resizeWrapper {
+      // Hide horizontal resize wrapper in horizontal mode (vertical resizer is used instead)
+      .horizontalResizeWrapper {
         display: none;
       }
     }
+
+    // Vertical resizer for horizontal layout
+    .verticalResizeWrapper {
+      display: none; // Hidden by default (shown only in horizontal mode)
+      width: 10px;
+      flex-shrink: 0;
+      align-items: center;
+      justify-content: center;
+      cursor: col-resize;
+      position: relative;
+      z-index: 10;
+
+      &:hover .verticalResizeChip {
+        visibility: visible;
+      }
+    }
+
+    .verticalResizeChip {
+      width: 4px;
+      height: 20%;
+      background-color: #d1d1d1;
+      visibility: hidden;
+      border-radius: 2px;
+    }
+
+    // Show vertical resizer only in horizontal mode
+    &.orientation-horizontal .verticalResizeWrapper {
+      display: flex;
+    }
   }
 
   .tabContextButton {

packages/yasqe/src/index.ts

@@ -55,7 +55,7 @@ export class Yasqe extends CodeMirror {
   private queryBtn: HTMLButtonElement | undefined;
   private fullscreenBtn: HTMLButtonElement | undefined;
   private isFullscreen: boolean = false;
-  private resizeWrapper?: HTMLDivElement;
+  private horizontalResizeWrapper?: HTMLDivElement;
   private snippetsBar?: HTMLDivElement;
   private snippetsClickHandler?: (e: MouseEvent) => void;
   private snippetsResizeHandler?: () => void;
@@ -727,15 +727,15 @@ export class Yasqe extends CodeMirror {
   }
 
   private drawResizer() {
-    if (this.resizeWrapper) return;
-    this.resizeWrapper = document.createElement("div");
-    addClass(this.resizeWrapper, "resizeWrapper");
+    if (this.horizontalResizeWrapper) return;
+    this.horizontalResizeWrapper = document.createElement("div");
+    addClass(this.horizontalResizeWrapper, "horizontalResizeWrapper");
     const chip = document.createElement("div");
-    addClass(chip, "resizeChip");
-    this.resizeWrapper.appendChild(chip);
-    this.resizeWrapper.addEventListener("mousedown", this.initDrag, false);
-    this.resizeWrapper.addEventListener("dblclick", this.expandEditor);
-    this.rootEl.appendChild(this.resizeWrapper);
+    addClass(chip, "horizontalResizeChip");
+    this.horizontalResizeWrapper.appendChild(chip);
+    this.horizontalResizeWrapper.addEventListener("mousedown", this.initDrag, false);
+    this.horizontalResizeWrapper.addEventListener("dblclick", this.expandEditor);
+    this.rootEl.appendChild(this.horizontalResizeWrapper);
   }
   private initDrag() {
     document.documentElement.addEventListener("mousemove", this.doDrag, false);
@@ -1407,8 +1407,8 @@ export class Yasqe extends CodeMirror {
     // Abort running query
     this.abortQuery();
     this.unregisterEventListeners();
-    this.resizeWrapper?.removeEventListener("mousedown", this.initDrag, false);
-    this.resizeWrapper?.removeEventListener("dblclick", this.expandEditor);
+    this.horizontalResizeWrapper?.removeEventListener("mousedown", this.initDrag, false);
+    this.horizontalResizeWrapper?.removeEventListener("dblclick", this.expandEditor);
     if (this.snippetsClickHandler) {
       document.removeEventListener("click", this.snippetsClickHandler);
       this.snippetsClickHandler = undefined;

packages/yasqe/src/scss/yasqe.scss

@@ -85,7 +85,7 @@
     vertical-align: middle;
   }
 
-  .resizeWrapper {
+  .horizontalResizeWrapper {
     width: 100%;
     height: 10px;
     flex-shrink: 0;
@@ -95,15 +95,15 @@
     cursor: row-resize;
   }
 
-  .resizeChip {
+  .horizontalResizeChip {
     width: 20%;
     height: 4px;
     background-color: #d1d1d1;
     visibility: hidden;
     border-radius: 2px;
   }
 
-  &:hover .resizeChip {
+  &:hover .horizontalResizeChip {
     visibility: visible;
   }
 }