@matdata/yasgui 5.7.0 → 5.8.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@matdata/yasgui",
   "description": "Yet Another SPARQL GUI",
-  "version": "5.7.0",
+  "version": "5.8.0",
   "main": "build/yasgui.min.js",
   "types": "build/ts/src/index.d.ts",
   "license": "MIT",
@@ -33,8 +33,8 @@
     "jsuri": "^1.3.1",
     "lodash-es": "^4.17.15",
     "sortablejs": "^1.10.2",
-    "@matdata/yasgui-graph-plugin": "^1.3.0",
-    "@matdata/yasgui-table-plugin": "^1.0.0"
+    "@matdata/yasgui-graph-plugin": "^1.4.0",
+    "@matdata/yasgui-table-plugin": "^1.1.0"
   },
   "devDependencies": {
     "@types/autosuggest-highlight": "^3.1.0",

package/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();

package/src/TabElements.scss

@@ -1,14 +1,19 @@
 @use "sass:color";
+
 $minTabHeight: 35px;
+
 .yasgui {
   .tabsList {
+    flex-shrink: 0; // Prevent tabs from shrinking
+    display: flex;
+    flex-wrap: wrap;
+
     .sortable-placeholder {
       min-width: 100px;
       min-height: $minTabHeight;
       border: 2px dotted color.adjust(#555, $lightness: 20%);
     }
-    display: flex;
-    flex-wrap: wrap;
+
     a {
       cursor: pointer;
       display: flex;
@@ -18,6 +23,7 @@ $minTabHeight: 35px;
       border-bottom: 2px solid transparent;
       box-sizing: border-box;
     }
+
     .themeToggle {
       cursor: pointer;
       height: 100%;
@@ -60,10 +66,12 @@ $minTabHeight: 35px;
       &:focus-visible {
         transform: scale(1.1);
       }
+
       &:focus {
         color: #faa857;
       }
     }
+
     .tab {
       position: relative;
       $activeColor: #337ab7;
@@ -82,6 +90,7 @@ $minTabHeight: 35px;
         animation-timing-function: ease;
         animation-iteration-count: infinite;
       }
+
       @keyframes slide {
         0% {
           left: 0;
@@ -96,24 +105,30 @@ $minTabHeight: 35px;
           right: 0;
         }
       }
+
       &.active .loader {
         background-color: $hoverColor;
       }
+
       &:hover .loader {
         background-color: $activeColor;
       }
+
       &.querying .loader {
         display: block;
       }
+
       &.active a {
         border-bottom-color: $activeColor;
         color: var(--yasgui-text-primary, #555);
       }
+
       input {
         display: none;
         outline: none;
         border: none;
       }
+
       &.renaming {
         span {
           display: none;
@@ -125,6 +140,7 @@ $minTabHeight: 35px;
           display: block;
         }
       }
+
       a {
         font-weight: 600;
         color: var(--yasgui-text-secondary, color.adjust(#555, $lightness: 20%));
@@ -135,14 +151,17 @@ $minTabHeight: 35px;
         padding: 0px 24px 0px 30px;
         white-space: nowrap;
         overflow: hidden;
+
         &:hover {
           border-bottom-color: $hoverColor;
           color: var(--yasgui-text-primary, #555);
         }
+
         &:focus {
           border-bottom-color: #faa857;
           color: var(--yasgui-text-primary, #555);
         }
+
         .closeTab {
           color: var(--yasgui-text-primary, #000);
           margin-left: 7px;
@@ -151,6 +170,7 @@ $minTabHeight: 35px;
           opacity: 0.2;
           font-weight: 700;
           padding: 2px;
+
           &:hover {
             opacity: 0.5;
           }

package/src/index.scss

@@ -1,4 +1,12 @@
+// Main YASGUI container - fills 100% of parent element
+// Parent element (typically body) should have height: 100%; width: 100%
 .yasgui {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  min-height: 800px; // Minimum to ensure usable UI (control bar + editor + yasr min)
+
   a {
     color: #337ab7;
     text-decoration: none;
@@ -28,6 +36,15 @@
     }
   }
 
+  // Container for tab panels - takes remaining height after tabsList
+  > div:not(.tabsList) {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 0; // Required for flex children to shrink properly
+    overflow: hidden;
+  }
+
   //css taken from https://www.muicss.com/docs/v1/css-js/forms
   $focusColor: #337ab7;
   $font-size: 15px;

package/src/tab.scss

@@ -2,8 +2,16 @@
   .tabPanel {
     display: none;
     position: relative;
+    flex: 1;
+    min-height: 0;
+
     &.active {
-      display: block;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .yasrWrapperEl {
+      height: 100%;
     }
 
     // Hide editor wrapper when yasr is in fullscreen
@@ -34,45 +42,95 @@
         display: flex;
         flex-direction: row;
         gap: 10px;
-        // Allow flexible height - can use 100vh or be constrained by parent
-        min-height: var(--yasgui-min-height);
-        max-height: calc(100vh - var(--yasgui-header-height));
+        height: 100%;
       }
 
       .editorwrapper {
-        flex: 1;
+        flex: 1 1 50%;
         display: flex;
         flex-direction: column;
-      }
-
-      // Make YASQE fill the vertical space in horizontal mode
-      .yasqe {
-        display: flex;
-        flex-direction: column;
-        flex: 1;
-        min-height: 0;
+        min-width: 400px;
+        max-width: 50%;
+        height: 100%;
         overflow: hidden;
 
-        .CodeMirror {
-          height: calc(100vh - var(--yasgui-header-height)) !important;
+        // Unnamed div container needs full height
+        > div {
+          height: 100%;
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+
+          // Container for tab panels - takes remaining height after tabsList
+          > div:not(.controlbar) {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            min-height: 0; // Required for flex children to shrink properly
+            overflow: hidden;
+
+            // Make YASQE fill the vertical space in horizontal mode
+            .yasqe {
+              flex: 1;
+              display: flex;
+              flex-direction: column;
+              height: 100%;
+              overflow: hidden;
+
+              .CodeMirror {
+                flex: 1;
+                height: 100%;
+              }
+            }
+          }
         }
       }
 
       .yasrWrapperEl {
-        flex: 1;
+        flex: 1 1 50%;
         min-width: 0;
-        height: calc(100vh - var(--yasgui-tabList-height)) !important;
-        overflow: hidden;
+        min-height: 400px;
       }
 
       .yasr {
         margin-top: 0;
         height: 100%;
       }
+
+      // 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;
     }
-  }
-  .yasr {
-    margin-top: 5px;
   }
 
   .tabContextButton {
@@ -91,9 +149,9 @@
     .svgImg {
       width: 15px;
       height: 15px;
-      font-family: initial; //font families can slightly misalign svgs with the .svgimg div
+      font-family: initial;
     }
-    // IE11 Needs this specified otherwise it will not resize the svg
+
     svg {
       width: 20px;
       height: 20px;
@@ -108,6 +166,7 @@
   .controlbar {
     display: flex;
     align-content: center;
+    flex-shrink: 0;
     max-height: 35px;
   }
 }

package/src/themes.scss

@@ -38,10 +38,8 @@
   --yasgui-nav-bg: #eee;
   --yasgui-match-highlight-bg: #dbdeed;
 
-  // Layout dimensions (used for horizontal orientation)
-  --yasgui-header-height: 150px; // Height to subtract from viewport in horizontal layout
-  --yasgui-tabList-height: 70px; // Height to subtract from yasr in horizontal layout
-  --yasgui-min-height: 400px; // Minimum height for horizontal layout panels
+  // Minimum heights
+  --yasgui-yasr-min-height: 400px; // Minimum height for yasr
 
   --yasgui-endpoint-button-bg: #337ab7;
   --yasgui-endpoint-button-border: #337ab7;

package/src/version.ts

@@ -1,3 +1,3 @@
 // Version information for YASGUI
 // This file is auto-generated during build - do not edit manually
-export const VERSION = "5.7.0";
+export const VERSION = "5.8.0";