Improvements and cleanup

tp-hsplitter.js

@@ -11,7 +11,7 @@ class TpHSplitter extends LitElement {
       css`
         :host {
           display: grid;
-          grid-template-rows: 1fr 5px 1fr;
+          grid-template-rows: 1fr var(--tp-splitter-width, 5px) 1fr;
         }
 
         :host([tophidden]),
@@ -62,9 +62,8 @@ class TpHSplitter extends LitElement {
     return {
       topHidden: { type: Boolean, reflect: true },
       bottomHidden: { type: Boolean, reflect: true },
-      lateResize: { type: Boolean },
-      rows: { type: String },
       dragging: { type: Boolean, reflect: true },
+      minSideHeight: { type: Number },
     };
   }
 
@@ -73,15 +72,6 @@ class TpHSplitter extends LitElement {
 
     this._disableDrag = this._disableDrag.bind(this);
     this._resize = this._resize.bind(this);
-    this._bufferedDelta = 0;
-  }
-
-  shouldUpdate(changes) {
-    if (changes.has('rows')) {
-      this.style.gridTemplateRows = this.rows;
-    }
-
-    return true;
   }
 
   get top() {
@@ -96,6 +86,13 @@ class TpHSplitter extends LitElement {
     return this.shadowRoot.querySelector('#splitter')
   }
 
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener('mouseup', this._disableDrag)
+    document.removeEventListener('mousemove', this._resize);
+    document.body.style['userSelect'] = '';
+  }
+
   _enableDrag(e) {
     document.addEventListener('mouseup', this._disableDrag)
     document.addEventListener('mousemove', this._resize);
@@ -110,24 +107,21 @@ 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 }));
   }
 
   _resize(e) {
-    if (this.lateResize) {
-      this._bufferedDelta = e.clientY - this._startY;
-      this.splitter.style.transform = `translateY(${this._bufferedDelta}px)`;
-      return;
-    }
     const delta = e.clientY - this._startY;
-    this.style.gridTemplateRows = `${this._topHeight + delta}px 5px 1fr`;
+    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));
+    
+    this.style.gridTemplateRows = `${newTopHeight}px ${splitterWidth}px 1fr`;
     this.dispatchEvent(new CustomEvent('resized', { detail: null, bubbles: true, composed: true }));
   }
 }