FazBrowse GitHub Viewer | Trending |
URL:
| Home
Tools: [Download Repo ZIP]   [Original HTTPS Page]

fix: filter non visible areas after indices array slice (#451) · angular-split/angular-split@d4a8025 · GitHub

/ angular-split Public

Commit d4a8025

Browse files
Harpush
and
Jefiozie
authored
fix: filter non visible areas after indices array slice (#451)
Co-authored-by: Jeffrey Bosch <Jefiozie@users.noreply.github.com>
1 parent 4f9e674 commit d4a8025

3 files changed

Lines changed: 66 additions & 11 deletions

File tree

‎cypress/e2e/10.toggle.cy.js‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
/// <reference types="Cypress" />
2+
3+
import { moveGutterByMouse, checkSplitDirAndSizes } from '../support/splitUtils'
4+
5+
context('Toggling DOM and visibility example page tests', () => {
6+
const W = 1076
7+
const H = 150
8+
const GUTTER = 15
9+
10+
beforeEach(() => {
11+
cy.visit('/examples/toggling-dom-and-visibility')
12+
})
13+
14+
it('Display initial state', () => {
15+
checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, GUTTER, [348.66, 348.66, 348.66])
16+
})
17+
18+
it('Hide first area and move gutter', () => {
19+
getVisibilityButton(0).click()
20+
checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, [0, GUTTER], [0, 530.5, 530.5])
21+
22+
moveGutterByMouse('.as-split-gutter', 1, 50, 0)
23+
checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, [0, GUTTER], [0, 580.5, 480.5])
24+
25+
moveGutterByMouse('.as-split-gutter', 1, -100, 0)
26+
checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, [0, GUTTER], [0, 480.5, 580.5])
27+
})
28+
29+
it('Hide mid area and move gutter', () => {
30+
getVisibilityButton(1).click()
31+
checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, [GUTTER, 0], [530.5, 0, 530.5])
32+
33+
moveGutterByMouse('.as-split-gutter', 0, 50, 0)
34+
checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, [GUTTER, 0], [580.5, 0, 480.5])
35+
36+
moveGutterByMouse('.as-split-gutter', 0, -100, 0)
37+
checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, [GUTTER, 0], [480.5, 0, 580.5])
38+
})
39+
40+
it('Hide last area and move gutter', () => {
41+
getVisibilityButton(2).click()
42+
checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, [GUTTER, 0], [530.5, 530.5, 0])
43+
44+
moveGutterByMouse('.as-split-gutter', 0, 50, 0)
45+
checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, [GUTTER, 0], [580.5, 480.5, 0])
46+
47+
moveGutterByMouse('.as-split-gutter', 0, -100, 0)
48+
checkSplitDirAndSizes('.split-example > as-split', 'horizontal', W, H, [GUTTER, 0], [480.5, 580.5, 0])
49+
})
50+
})
51+
52+
function getVisibilityButton(index) {
53+
return cy.get('.btn-group:first').find('> .btn').eq(index)
54+
}

‎cypress/support/splitUtils.js‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -57,12 +57,10 @@ export function checkSplitDirAndCalcSizes(el, dir, w, h, gutter, sizes) {
5757

5858
//////////////////////////////////////////
5959

60-
export function checkSplitDirAndSizes(el, dir, w, h, gutter, sizes) {
61-
cy.log(`-- NEW SPLIT CHECK (${dir},${w},${h},${gutter})`)
60+
export function checkSplitDirAndSizes(el, dir, w, h, gutterOrGutters, sizes) {
61+
const gutters = Array.isArray(gutterOrGutters) ? gutterOrGutters : new Array(sizes.length - 1).fill(gutterOrGutters)
6262

63-
// Before real test, check if values provided are ok !
64-
const total = sizes.reduce((acc, v) => acc + v, 0) + gutter * (sizes.length - 1)
65-
// expect(total).to.eq((dir === 'horizontal') ? w : h);
63+
cy.log(`-- NEW SPLIT CHECK (${dir},${w},${h},[${gutters.join(',')}],[${sizes.join(',')}])`)
6664

6765
const propGridDir = dir === 'vertical' ? 'grid-template-rows' : 'grid-template-columns'
6866
cy.get(el).should('have.css', propGridDir).should('include', ' ')
@@ -75,10 +73,10 @@ export function checkSplitDirAndSizes(el, dir, w, h, gutter, sizes) {
7573

7674
cy.get(`${el} > .as-split-gutter`).should('have.length', sizes.length - 1)
7775

78-
cy.get(`${el} > .as-split-gutter`).then(($el) => {
76+
cy.get(`${el} > .as-split-gutter`).each(($el, index) => {
7977
const rect = $el[0].getBoundingClientRect()
8078

81-
expect(rect[propSize]).to.be.eq(gutter)
79+
expect(rect[propSize]).to.be.eq(gutters[index])
8280
expect(round(rect[propSize2])).to.be.eq(round(propValue2))
8381
})
8482

‎projects/angular-split/src/lib/split/split.component.ts‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -521,15 +521,18 @@ export class SplitComponent {
521521
const tempAreasPixelSizes = [...dragStartContext.areasPixelSizes]
522522
// As we are going to shuffle the areas order for easier iterations we should work with area indices array
523523
// instead of actual area sizes array.
524-
// We must also remove the invisible ones as we can't expand or shrink them.
525-
const areasIndices = tempAreasPixelSizes.map((_, index) => index).filter((index) => this._areas()[index].visible())
524+
const areasIndices = tempAreasPixelSizes.map((_, index) => index)
526525
// The two variables below are ordered for iterations with real area indices inside.
526+
// We must also remove the invisible ones as we can't expand or shrink them.
527527
const areasIndicesBeforeGutter = this.restrictMove()
528528
? [dragStartContext.areaBeforeGutterIndex]
529-
: areasIndices.slice(0, dragStartContext.areaBeforeGutterIndex + 1).reverse()
529+
: areasIndices
530+
.slice(0, dragStartContext.areaBeforeGutterIndex + 1)
531+
.filter((index) => this._areas()[index].visible())
532+
.reverse()
530533
const areasIndicesAfterGutter = this.restrictMove()
531534
? [dragStartContext.areaAfterGutterIndex]
532-
: areasIndices.slice(dragStartContext.areaAfterGutterIndex)
535+
: areasIndices.slice(dragStartContext.areaAfterGutterIndex).filter((index) => this._areas()[index].visible())
533536
// Based on direction we need to decide which areas are expanding and which are shrinking
534537
const potentialAreasIndicesArrToShrink = isDraggingForward ? areasIndicesAfterGutter : areasIndicesBeforeGutter
535538
const potentialAreasIndicesArrToExpand = isDraggingForward ? areasIndicesBeforeGutter : areasIndicesAfterGutter

0 commit comments

Comments
 (0)
Back | FazBrowse Home | New Git URL