From 380552d54e33643f6cd1b26d42c1c7889c92200c Mon Sep 17 00:00:00 2001
From: brahim <92426196+BrhmDev@users.noreply.github.com>
Date: Mon, 16 Sep 2024 17:37:50 +0200
Subject: [PATCH] Make zenViewSplitter.applySplitters() independent of
 gridType, extract updateGridSizes from applySplitters

---
 src/ZenViewSplitter.mjs | 74 +++++++++++++++++++++++------------------
 1 file changed, 41 insertions(+), 33 deletions(-)

diff --git a/src/ZenViewSplitter.mjs b/src/ZenViewSplitter.mjs
index 6d8776e..d0782a3 100644
--- a/src/ZenViewSplitter.mjs
+++ b/src/ZenViewSplitter.mjs
@@ -311,8 +311,9 @@ var gZenViewSplitter = new (class {
 
     this.setTabsDocShellState(splitData.tabs, true);
     this.updateSplitViewButton(false);
-    this.applySplitters(splitData);
-    this.updateGridSizes();
+    this.updateGridSizes(splitData);
+    this.applySplitters(splitData.widths.length , splitData.heights.length);
+    this.applyGridSizes();
   }
 
   /**
@@ -334,21 +335,49 @@ var gZenViewSplitter = new (class {
   }
 
   /**
-   * Adds splitters to tabBrowserPanel, adds default widths and heights to splitData
+   * Adds splitters to tabBrowserPanel
+   *
+   * @param nrOfColumns number of columns in the grid
+   * @param nrOfRows number of rows in the grid
+   */
+  applySplitters(nrOfColumns, nrOfRows) {
+    this.removeSplitters();
+    const vSplittersNeeded = (nrOfColumns - 1) * nrOfRows;
+    const hSplittersNeeded = nrOfRows - 1;
+
+    const insertSplitter = (i, orient, gridIdx) => {
+      const splitter = document.createElement('div');
+      splitter.className = 'zen-split-view-splitter';
+      splitter.setAttribute('orient', orient);
+      splitter.setAttribute('gridIdx', gridIdx);
+      splitter.style.gridArea = `${orient === 'vertical' ? 'v' : 'h'}Splitter${i}`;
+      splitter.addEventListener('mousedown', this.handleSplitterMouseDown);
+      this.tabBrowserPanel.insertAdjacentElement("afterbegin", splitter);
+    }
+    for (let i = 1; i <= vSplittersNeeded; i++) {
+      insertSplitter(i, 'vertical', Math.floor((i - 1) /nrOfRows) + 1);
+    }
+    for (let i = 1; i <= hSplittersNeeded; i++) {
+      insertSplitter(i, 'horizontal', i);
+    }
+  }
+
+  /**
+   * Initialize splitData with default widths and heights if dimensions of grid don't match
    *
    * @param {object} splitData - The split data.
    */
-  applySplitters(splitData) {
+  updateGridSizes(splitData) {
     const tabs = splitData.tabs;
     const gridType = splitData.gridType;
 
     let nrOfWidths = 1;
     let nrOfHeights = 1;
-    if (splitData.gridType === 'vsep') {
+    if (gridType === 'vsep') {
       nrOfWidths = tabs.length;
-    } else if (splitData.gridType === 'hsep') {
+    } else if (gridType === 'hsep') {
       nrOfHeights = tabs.length;
-    } else if (splitData.gridType === 'grid') {
+    } else if (gridType === 'grid') {
       nrOfWidths = tabs.length > 2 ? Math.ceil(tabs.length / 2) : 2;
       nrOfHeights = tabs.length > 2 ? 2 : 1;
     }
@@ -356,30 +385,6 @@ var gZenViewSplitter = new (class {
       splitData.widths = Array(nrOfWidths).fill(100 / nrOfWidths);
       splitData.heights = Array(nrOfHeights).fill(100 / nrOfHeights);
     }
-
-    let vSplittersNeeded = nrOfWidths - 1;
-    let hSplittersNeeded = nrOfHeights - 1;
-    if (splitData.gridType === 'grid' && tabs.length > 2) {
-      vSplittersNeeded = (tabs.length - ((tabs.length % 2 === 0) ? 2 : 1));
-      hSplittersNeeded = 1;
-    }
-    this.removeSplitters();
-
-    const insertSplitter = (i, orient) => {
-      const splitter = document.createXULElement('div');
-      splitter.className = 'zen-split-view-splitter';
-      splitter.setAttribute('orient', orient);
-      splitter.setAttribute('gridIdx', gridType === 'grid' && orient === 'vertical' ? Math.ceil(i/2) : i);
-      splitter.style = `grid-area: ${orient === 'vertical' ? 'v' : 'h'}Splitter${i}`;
-      splitter.addEventListener('mousedown', this.handleSplitterMouseDown);
-      this.tabBrowserPanel.insertAdjacentElement("afterbegin", splitter);
-    }
-    for (let i = 1; i <= vSplittersNeeded; i++) {
-      insertSplitter(i, 'vertical');
-    }
-    for (let i = 1; i <= hSplittersNeeded; i++) {
-      insertSplitter(i, 'horizontal');
-    }
   }
 
   removeSplitters() {
@@ -504,7 +509,7 @@ var gZenViewSplitter = new (class {
         }
         splitData[dimension][gridIdx - 1] += percentageChange;
         splitData[dimension][gridIdx] -= percentageChange;
-        this.updateGridSizes();
+        this.applyGridSizes();
         if (!max) prevPosition = dEvent[clientAxis];
       });
     }
@@ -518,7 +523,10 @@ var gZenViewSplitter = new (class {
     setCursor(isVertical ? 'ew-resize' : 'n-resize');
   }
 
-  updateGridSizes() {
+  /**
+   * Applies the grid column and row sizes
+   */
+  applyGridSizes() {
     const splitData = this._data[this.currentView];
     const columnGap = 'var(--zen-split-column-gap)';
     const rowGap = 'var(--zen-split-row-gap)';