From 88b9459f30306c9ca80161a69686a356e92cd782 Mon Sep 17 00:00:00 2001 From: brahim <92426196+BrhmDev@users.noreply.github.com> Date: Sun, 15 Sep 2024 10:43:37 +0200 Subject: [PATCH] Add minimal width when resizing split view. Remove excess splitters on apply. --- src/ZenViewSplitter.mjs | 53 ++++++++++++++++++++++++++++------------- 1 file changed, 37 insertions(+), 16 deletions(-) diff --git a/src/ZenViewSplitter.mjs b/src/ZenViewSplitter.mjs index 00347de..8881a05 100644 --- a/src/ZenViewSplitter.mjs +++ b/src/ZenViewSplitter.mjs @@ -3,6 +3,7 @@ var gZenViewSplitter = new (class { this._data = []; this.currentView = -1; this._tabBrowserPanel = null; + this._minAdjustmentWidth = 7; this.__modifierElement = null; this.__hasSetMenuListener = false; @@ -329,19 +330,24 @@ var gZenViewSplitter = new (class { const tabs = splitData.tabs; const gridType = splitData.gridType; - const vSplitters = gridType === 'vsep' ? (tabs.length - 1) : gridType === 'hsep' ? 0 : NaN; - - const totalVsplitters = Math.max(...this._data.map(s => s.verticalSplitters || 0)); - for (let i = totalVsplitters; i < vSplitters; i++) { + const insertSplitter = (i, orient) => { let splitter = document.createXULElement('div'); splitter.className = 'zen-split-view-splitter'; - splitter.setAttribute('orient', 'vertical'); + splitter.setAttribute('orient', orient); splitter.setAttribute('idx', i + 1); splitter.style = `grid-area: splitter${i + 1}`; splitter.addEventListener('mousedown', this.handleSplitterMouseDown); this.tabBrowserPanel.insertAdjacentElement("afterbegin", splitter); } - splitData.verticalSplitters = vSplitters; + + const vSplittersNeeded = gridType === 'vsep' ? (tabs.length - 1) : gridType === 'hsep' ? 0 : NaN; + const vSplitters = [...gZenViewSplitter.tabBrowserPanel.children].filter(e => e.classList.contains('zen-split-view-splitter')); + for (let i = vSplitters.length; i < vSplittersNeeded; i++) { + insertSplitter(i, 'vertical'); + } + for (let i = 0; i < vSplitters.length - vSplittersNeeded; i++) { + vSplitters[i].remove(); + } if (!splitData.sizes) { if (splitData.gridType === 'vsep') { @@ -431,21 +437,36 @@ var gZenViewSplitter = new (class { }; handleSplitterMouseDown = (event) => { - const container = event.target.parentElement; - const tab = window.gBrowser.tabs.find((t) => t.linkedBrowser.closest('.browserSidebarContainer') === container); const currentView = this._data[this.currentView]; + const isVertical = event.target.getAttribute('orient') === 'vertical'; + const dimension = isVertical ? 'width' : 'height'; + const clientAxis = isVertical ? 'clientX' : 'clientY'; + const tabIdx = event.target.getAttribute('idx'); - let dragFunc; - let prevX = event.clientX; - dragFunc = (dEvent) => { + let prevPosition = event[clientAxis]; + const dragFunc = (dEvent) => { requestAnimationFrame(() => { - const movementX = dEvent.clientX - prevX; - const percentageChange = (movementX / this._tabBrowserPanel.getBoundingClientRect().width) * 100; - currentView.sizes[tabIdx - 1].width += percentageChange; - currentView.sizes[tabIdx].width -= percentageChange; + const movementX = dEvent[clientAxis] - prevPosition; + let percentageChange = (movementX / this._tabBrowserPanel.getBoundingClientRect()[dimension]) * 100; + + const currentSize = currentView.sizes[tabIdx - 1][dimension]; + const neighborSize = currentView.sizes[tabIdx][dimension]; + if (currentSize < this._minAdjustmentWidth && neighborSize < this._minAdjustmentWidth) { + return; + } + let max = false; + if (currentSize + percentageChange < this._minAdjustmentWidth) { + percentageChange = this._minAdjustmentWidth - currentSize; + max = true; + } else if (neighborSize - percentageChange < this._minAdjustmentWidth) { + percentageChange = neighborSize - this._minAdjustmentWidth; + max = true; + } + currentView.sizes[tabIdx - 1][dimension] += percentageChange; + currentView.sizes[tabIdx][dimension] -= percentageChange; this.updateGridSizes(); - prevX = dEvent.clientX; + if (!max) prevPosition = dEvent.clientX; }); } const stopListeners = () => {