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
Download Patch File Download Diff File Expand all files Collapse all files

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