fix: filter non visible areas after indices array slice (#451)

Harpush · Jefiozie · web-flow · commit d4a802514ad2 · 2024-09-02T08:41:14.000+02:00
Co-authored-by: Jeffrey Bosch &lt;Jefiozie@users.noreply.github.com&gt;
diff --git a/cypress/e2e/10.toggle.cy.js b/cypress/e2e/10.toggle.cy.js
@@ -0,0 +1,54 @@
+/// <reference types="Cypress" />
+
+import { moveGutterByMouse, checkSplitDirAndSizes } from '../support/splitUtils'
+
+context('Toggling DOM and visibility example page tests', () => {
+  const W = 1076
+  const H = 150
+  const GUTTER = 15
+
+  beforeEach(() => {
+    cy.visit('/examples/toggling-dom-and-visibility')
+  })
+
+  it('Display initial state', () => {
+    checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [348.66, 348.66, 348.66])
+  })
+
+  it('Hide first area and move gutter', () => {
+    getVisibilityButton(0).click()
+    checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, [0, GUTTER], [0, 530.5, 530.5])
+
+    moveGutterByMouse('.as-split-gutter', 1, 50, 0)
+    checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, [0, GUTTER], [0, 580.5, 480.5])
+
+    moveGutterByMouse('.as-split-gutter', 1, -100, 0)
+    checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, [0, GUTTER], [0, 480.5, 580.5])
+  })
+
+  it('Hide mid area and move gutter', () => {
+    getVisibilityButton(1).click()
+    checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, [GUTTER, 0], [530.5, 0, 530.5])
+
+    moveGutterByMouse('.as-split-gutter', 0, 50, 0)
+    checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, [GUTTER, 0], [580.5, 0, 480.5])
+
+    moveGutterByMouse('.as-split-gutter', 0, -100, 0)
+    checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, [GUTTER, 0], [480.5, 0, 580.5])
+  })
+
+  it('Hide last area and move gutter', () => {
+    getVisibilityButton(2).click()
+    checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, [GUTTER, 0], [530.5, 530.5, 0])
+
+    moveGutterByMouse('.as-split-gutter', 0, 50, 0)
+    checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, [GUTTER, 0], [580.5, 480.5, 0])
+
+    moveGutterByMouse('.as-split-gutter', 0, -100, 0)
+    checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, [GUTTER, 0], [480.5, 580.5, 0])
+  })
+})
+
+function getVisibilityButton(index) {
+  return cy.get('.btn-group:first').find('> .btn').eq(index)
+}
diff --git a/cypress/support/splitUtils.js b/cypress/support/splitUtils.js
@@ -57,12 +57,10 @@ export function checkSplitDirAndCalcSizes(el, dir, w, h, gutter, sizes) {
 
 //////////////////////////////////////////
 
-export function checkSplitDirAndSizes(el, dir, w, h, gutter, sizes) {
-  cy.log(`-- NEW SPLIT CHECK (${dir},${w},${h},${gutter})`)
+export function checkSplitDirAndSizes(el, dir, w, h, gutterOrGutters, sizes) {
+  const gutters = Array.isArray(gutterOrGutters) ? gutterOrGutters : new Array(sizes.length - 1).fill(gutterOrGutters)
 
-  // Before real test, check if values provided are ok !
-  const total = sizes.reduce((acc, v) => acc + v, 0) + gutter * (sizes.length - 1)
-  // expect(total).to.eq((dir === 'horizontal') ? w : h);
+  cy.log(`-- NEW SPLIT CHECK (${dir},${w},${h},[${gutters.join(',')}],[${sizes.join(',')}])`)
 
   const propGridDir = dir === 'vertical' ? 'grid-template-rows' : 'grid-template-columns'
   cy.get(el).should('have.css', propGridDir).should('include', ' ')
@@ -75,10 +73,10 @@ export function checkSplitDirAndSizes(el, dir, w, h, gutter, sizes) {
 
   cy.get(`${el} > .as-split-gutter`).should('have.length', sizes.length - 1)
 
-  cy.get(`${el} > .as-split-gutter`).then(($el) => {
+  cy.get(`${el} > .as-split-gutter`).each(($el, index) => {
     const rect = $el[0].getBoundingClientRect()
 
-    expect(rect[propSize]).to.be.eq(gutter)
+    expect(rect[propSize]).to.be.eq(gutters[index])
     expect(round(rect[propSize2])).to.be.eq(round(propValue2))
   })
 
diff --git a/projects/angular-split/src/lib/split/split.component.ts b/projects/angular-split/src/lib/split/split.component.ts
@@ -521,15 +521,18 @@ export class SplitComponent {
     const tempAreasPixelSizes = [...dragStartContext.areasPixelSizes]
     // As we are going to shuffle the areas order for easier iterations we should work with area indices array
     // instead of actual area sizes array.
-    // We must also remove the invisible ones as we can't expand or shrink them.
-    const areasIndices = tempAreasPixelSizes.map((_, index) => index).filter((index) => this._areas()[index].visible())
+    const areasIndices = tempAreasPixelSizes.map((_, index) => index)
     // The two variables below are ordered for iterations with real area indices inside.
+    // We must also remove the invisible ones as we can't expand or shrink them.
     const areasIndicesBeforeGutter = this.restrictMove()
       ? [dragStartContext.areaBeforeGutterIndex]
-      : areasIndices.slice(0, dragStartContext.areaBeforeGutterIndex + 1).reverse()
+      : areasIndices
+          .slice(0, dragStartContext.areaBeforeGutterIndex + 1)
+          .filter((index) => this._areas()[index].visible())
+          .reverse()
     const areasIndicesAfterGutter = this.restrictMove()
       ? [dragStartContext.areaAfterGutterIndex]
-      : areasIndices.slice(dragStartContext.areaAfterGutterIndex)
+      : areasIndices.slice(dragStartContext.areaAfterGutterIndex).filter((index) => this._areas()[index].visible())
     // Based on direction we need to decide which areas are expanding and which are shrinking
     const potentialAreasIndicesArrToShrink = isDraggingForward ? areasIndicesAfterGutter : areasIndicesBeforeGutter
     const potentialAreasIndicesArrToExpand = isDraggingForward ? areasIndicesBeforeGutter : areasIndicesAfterGutter
