From c028fefb2d2baf124ba233ad432976b47917dc61 Mon Sep 17 00:00:00 2001
From: pk <pk@codeblob.work>
Date: Tue, 28 Jan 2025 11:29:00 +0100
Subject: [PATCH] Add lateResize mode back in

---
 package.json    |  2 +-
 tp-hsplitter.js | 26 +++++++++++++++++++++-----
 tp-vsplitter.js | 34 +++++++++++++++++++++++++++-------
 3 files changed, 49 insertions(+), 13 deletions(-)

diff --git a/package.json b/package.json
index cfc8c28..be54a07 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tp/tp-splitter",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "",
   "main": "tp-splitter.js",
   "scripts": {
diff --git a/tp-hsplitter.js b/tp-hsplitter.js
index ccbc17f..e210b91 100644
--- a/tp-hsplitter.js
+++ b/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.
-    let newTopHeight = Math.max(minHeight, Math.min(this._topHeight + delta, totalHeight - splitterWidth - minHeight));
-    
+    // Calculate restricted delta
+    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 }));
   }
diff --git a/tp-vsplitter.js b/tp-vsplitter.js
index 960fc34..768868b 100644
--- a/tp-vsplitter.js
+++ b/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
-
-    // Get splitter width from CSS variable or default to 5 pixels.
+    const minWidth = this.minSideWidth || 0;
     const splitterWidth = parseInt(getComputedStyle(this).getPropertyValue('--tp-splitter-width')) || 5;
     
-    // Calculate new left width while ensuring it stays within bounds.
-    let newLeftWidth = Math.max(minWidth, Math.min(this._leftWidth + delta, totalWidth - splitterWidth - minWidth));
-    
+    // Calculate restricted delta
+    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 }));
   }