tp-elements/tp-splitter
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add lateResize mode back in

Browse Source
This commit is contained in:
trading_peter 2025-01-28 11:29:00 +01:00
parent cf76e780ae
commit c028fefb2d
3 changed files with 49 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

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

24
tp-hsplitter.js
View File

@ -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 }));
}

32
tp-vsplitter.js
View File

@ -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 }));
}