Add lateResize mode back in

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tp/tp-splitter",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "",
   "main": "tp-splitter.js",
   "scripts": {

tp-hsplitter.js

@@ -64,6 +64,7 @@ class TpHSplitter extends LitElement {
       bottomHidden: { type: Boolean, reflect: true },
       dragging: { type: Boolean, reflect: true },
       minSideHeight: { type: Number },
+      lateResize: { type: Boolean },
     };
   }
 
@@ -72,6 +73,7 @@ class TpHSplitter extends LitElement {
 
     this._disableDrag = this._disableDrag.bind(this);
     this._resize = this._resize.bind(this);
+    this._bufferedDelta = 0;
   }
 
   get top() {
@@ -107,6 +109,13 @@ class TpHSplitter extends LitElement {
     document.removeEventListener('mousemove', this._resize);
     document.body.style['userSelect'] = '';
     this.dragging = false;
+
+    if (this.lateResize && this._bufferedDelta) {
+      this.splitter.style.transform = '';
+      this.style.gridTemplateRows = `${this._topHeight + this._bufferedDelta}px 5px 1fr`;
+      this._bufferedDelta = 0;
+    }
+
     this.dispatchEvent(new CustomEvent('resize-done', { detail: this.style.gridTemplateRows, bubbles: true, composed: true }));
   }
 
@@ -114,13 +123,20 @@ class TpHSplitter extends LitElement {
     const delta = e.clientY - this._startY;
     const totalHeight = this.offsetHeight;
     const minHeight = this.minSideHeight || 0;
-    
-    // Get splitter width from CSS variable, fallback to 5px.
     const splitterWidth = parseInt(getComputedStyle(this).getPropertyValue('--tp-splitter-width')) || 5;
     
-    // Calculate new top height while ensuring it stays within bounds.
+    // Calculate restricted delta
-    let newTopHeight = Math.max(minHeight, Math.min(this._topHeight + delta, totalHeight - splitterWidth - minHeight));
+    const maxDelta = totalHeight - splitterWidth - minHeight - this._topHeight;
-    
+    const minDelta = -this._topHeight + minHeight;
+    const restrictedDelta = Math.max(minDelta, Math.min(delta, maxDelta));
+  
+    if (this.lateResize) {
+      this._bufferedDelta = restrictedDelta;
+      this.splitter.style.transform = `translateY(${this._bufferedDelta}px)`;
+      return;
+    }
+  
+    const newTopHeight = this._topHeight + restrictedDelta;
     this.style.gridTemplateRows = `${newTopHeight}px ${splitterWidth}px 1fr`;
     this.dispatchEvent(new CustomEvent('resized', { detail: null, bubbles: true, composed: true }));
   }

tp-vsplitter.js

@@ -16,7 +16,7 @@ class TpVSplitter extends LitElement {
 
         :host([lefthidden]),
         :host([righthidden]) {
-          grid-template-rows: 1fr !important;
+          grid-template-columns: 1fr !important;
         }
 
         [hidden] {
@@ -59,6 +59,7 @@ class TpVSplitter extends LitElement {
       rightHidden: { type: Boolean },
       dragging: { type: Boolean },
       minSideWidth: { type: Number },
+      lateResize: { type: Boolean },
     };
   }
 
@@ -67,6 +68,7 @@ class TpVSplitter extends LitElement {
 
     this._disableDrag = this._disableDrag.bind(this);
     this._resize = this._resize.bind(this);
+    this._bufferedDelta = 0;
   }
 
   get left() {
@@ -77,6 +79,10 @@ class TpVSplitter extends LitElement {
     return this.shadowRoot.querySelector('#right');
   }
 
+  get splitter() {
+    return this.shadowRoot.querySelector('#splitter')
+  }
+
   disconnectedCallback() {
     super.disconnectedCallback();
     document.removeEventListener('mouseup', this._disableDrag)
@@ -98,20 +104,34 @@ class TpVSplitter extends LitElement {
     document.removeEventListener('mousemove', this._resize);
     document.body.style['userSelect'] = '';
     this.dragging = false;
+
+    if (this.lateResize && this._bufferedDelta) {
+      this.splitter.style.transform = '';
+      this.style.gridTemplateColumns = `${this._leftWidth + this._bufferedDelta}px 5px 1fr`;
+      this._bufferedDelta = 0;
+    }
+
     this.dispatchEvent(new CustomEvent('resize-done', { detail: this.style.gridTemplateColumns, bubbles: true, composed: true }));
   }
 
   _resize(e) {
     const delta = e.clientX - this._startX;
     const totalWidth = this.offsetWidth;
-    const minWidth = this.minSideWidth || 0; // Minimum width in pixels for each side
+    const minWidth = this.minSideWidth || 0;
-
-    // Get splitter width from CSS variable or default to 5 pixels.
     const splitterWidth = parseInt(getComputedStyle(this).getPropertyValue('--tp-splitter-width')) || 5;
     
-    // Calculate new left width while ensuring it stays within bounds.
+    // Calculate restricted delta
-    let newLeftWidth = Math.max(minWidth, Math.min(this._leftWidth + delta, totalWidth - splitterWidth - minWidth));
+    const maxDelta = totalWidth - splitterWidth - minWidth - this._leftWidth;
-    
+    const minDelta = -this._leftWidth + minWidth;
+    const restrictedDelta = Math.max(minDelta, Math.min(delta, maxDelta));
+  
+    if (this.lateResize) {
+      this._bufferedDelta = restrictedDelta;
+      this.splitter.style.transform = `translateX(${this._bufferedDelta}px)`;
+      return;
+    }
+  
+    const newLeftWidth = this._leftWidth + restrictedDelta;
     this.style.gridTemplateColumns = `${newLeftWidth}px ${splitterWidth}px 1fr`;
     this.dispatchEvent(new CustomEvent('resized', { detail: null, bubbles: true, composed: true }));
   }