From ecc58c3553cbb15adeacb0895c2847bc0ca1d0e6 Mon Sep 17 00:00:00 2001 From: Harpush Date: Fri, 23 Aug 2024 11:20:55 +0300 Subject: [PATCH] fix: filter non visible areas after indices array slice --- cypress/e2e/10.toggle.cy.js | 54 +++++++++++++++++++ cypress/support/splitUtils.js | 12 ++--- .../src/lib/split/split.component.ts | 11 ++-- 3 files changed, 66 insertions(+), 11 deletions(-) create mode 100644 cypress/e2e/10.toggle.cy.js diff --git a/cypress/e2e/10.toggle.cy.js b/cypress/e2e/10.toggle.cy.js new file mode 100644 index 00000000..bde0636a --- /dev/null +++ b/cypress/e2e/10.toggle.cy.js @@ -0,0 +1,54 @@ +/// + +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 index 068f99c3..ea5213a6 100644 --- 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 index 42ee10c0..3b5ed490 100644 --- a/projects/angular-split/src/lib/split/split.component.ts +++ b/projects/angular-split/src/lib/split/split.component.ts @@ -518,15 +518,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